Commit 9cd70d77 authored by pacome's avatar pacome

[client/timeserie] refacto DOM vol1

parent 13f4d95c
......@@ -59,7 +59,7 @@ const renderGroundQuantity = () =>
const render = () =>
DIV(
{ className: 'content__side map-legend' },
{ className: 'map-legend' },
H2({}, tr.ts('legend')),
renderSurface(),
renderGroundQuality(),
......
import { DIV, H2 } from 'sdi/components/elements';
import map from '../map';
import info from '../info';
import legend from '../legend/map';
import paramPicker from '../parameter-picker';
import { navigatePlot, navigateTable, getConfig } from 'timeserie/src/events/route';
import {
navigatePlot,
navigateTable,
getConfig,
} from 'timeserie/src/events/route';
import tr, { fromRecord } from 'sdi/locale';
import {
renderButtonTable,
renderButtonPlot,
renderDeselectButton,
renderBackHomeBtn
renderBackHomeBtn,
} from '../button';
import {
getSelectedParameterRaw,
findParameter,
getLevel
getLevel,
} from 'timeserie/src/queries/timeserie';
import { ParameterSelection, ParameterType } from 'timeserie/src/types';
import {
deselectParameter,
clearWindowStart,
clearWindowEnd,
clearHighligthParameter
clearHighligthParameter,
} from 'timeserie/src/events/timeserie';
const renderHelpText = () =>
......@@ -35,7 +41,7 @@ const renderSelectedParam = ({ kind, id }: ParameterSelection) =>
unselectButton(kind, id),
DIV(
{ className: 'param__label' },
findParameter(kind, id).map(p => fromRecord(p.name))
findParameter(kind, id).map((p) => fromRecord(p.name))
)
);
......@@ -43,38 +49,39 @@ const renderContentSideFooter = () =>
DIV(
{ className: 'content__side--footer' },
renderButtonPlot(() => {
getLevel().map(l => getConfig().map(c => navigatePlot(l, c)));
getLevel().map((l) => getConfig().map((c) => navigatePlot(l, c)));
clearWindowStart();
clearWindowEnd();
clearHighligthParameter();
}),
renderButtonTable(() => getLevel().map(l => getConfig().map(c => navigateTable(l, c))))
renderButtonTable(() =>
getLevel().map((l) => getConfig().map((c) => navigateTable(l, c)))
)
);
const renderSidebar = () =>
DIV(
{ className: 'content__side' },
legend(),
info(),
H2({}, tr.ts('paramsToDisplay')),
renderHelpText(),
getSelectedParameterRaw().map(renderSelectedParam),
renderContentSideFooter()
);
const renderMain = () =>
DIV(
{ className: 'content__main' },
DIV({ className: 'content__map' }, map(), renderBackHomeBtn()),
paramPicker()
);
export const render = () =>
DIV(
{ className: 'content content--config' },
DIV(
{ className: 'content__wrapper wrapper--top' },
DIV(
{ className: 'content__side' },
H2({}, tr.ts('paramsToDisplay')),
renderHelpText(),
getSelectedParameterRaw().map(renderSelectedParam),
renderContentSideFooter()
),
DIV(
{ className: 'content__body' },
paramPicker()
// renderContentFooter()
)
),
DIV(
{ className: 'content__wrapper wrapper--bottom' },
DIV({ className: 'content__side' }, info()),
// DIV({ className: 'content__side' }, mapLegend()),
DIV({ className: 'content__body' }, map(), renderBackHomeBtn())
)
renderSidebar(),
renderMain()
);
export default render;
.main.config {
.wrapper__top {
.content__body {
}
}
}
.pickers__wrapper {
display: flex;
height: 100%;
> div {
flex: 1;
......
// @TS_sidebarW: 100vw / 5;
@TS_sidebarW: @panel-rightW;
//// PARAVENT ON
.paravent() {
content: 'Implémentation en cours';
.absolute(0, 0, 0, 0);
background: #f8f8f8ee;
color: #aaa;
display: flex;
align-items: center;
justify-content: center;
}
// .main.config .map-info,
// .main.table .map-info,
ul.group__list {
position: relative;
// &:before {
// .paravent();
// }
}
///// PARAVENT OFF
.timeserie-inner {
.main {
// padding: 0 @margin;
}
h2 {
padding-bottom: @margin;
}
......@@ -37,26 +10,28 @@ ul.group__list {
// config + table + plot pages
.content {
display: flex;
flex-direction: column-reverse; // let's try upside down
overflow: hidden;
.content__wrapper {
display: flex;
}
.wrapper--top {
.content__main {
height: 100%;
padding-bottom: @margin / 2;
// padding-bottom: @margin / 2;
overflow: hidden;
> div {
// border-top: 1px solid @borderDarkColor;
padding-top: @margin;
}
}
.content__map {
height: 30vh;
flex-shrink: 0;
position: relative;
margin-bottom: @margin;
.wrapper--bottom {
height: 30vh;
flex-shrink: 0;
.back-home {
.absolute(@margin / 2, initial, initial, @margin / 2);
}
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
}
}
.content__side {
......@@ -65,6 +40,7 @@ ul.group__list {
margin-right: @margin / 2;
display: flex;
flex-direction: column;
overflow: auto;
.map-info {
height: 100%;
......@@ -84,27 +60,18 @@ ul.group__list {
}
}
.content__body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.back-home {
.absolute(@margin / 2, initial, initial, @margin / 2);
}
}
// .content__body {
// position: relative;
// width: 100%;
// height: 100%;
// overflow: hidden;
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
// }
}
@actionFooterH: 40px;
.wrapper--top .content__body {
.content__body {
display: flex;
flex-direction: column;
......@@ -112,15 +79,12 @@ ul.group__list {
height: calc(~'100% - @{actionFooterH} - @{margin} / 2');
}
.content__footer {
// height: @actionFooterH;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: @margin / 2;
// padding-top: @margin / 2;
// border-top: 1px solid @borderLightColor;
.action {
margin-left: auto;
......@@ -131,142 +95,3 @@ ul.group__list {
}
}
}
//init page
.content--index-init {
flex-direction: column;
justify-content: center;
align-items: center;
border-top: @borderDark;
> div {
width: 100%;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
.pitch {
font-size: 1.8rem;
line-height: 120%;
text-align: center;
margin-top: -3em;
margin-bottom: @margin * 2;
}
.switch {
display: flex;
> div {
transition: all 300ms;
flex: 1;
height: 4em;
background-color: @bgLightColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 250%;
font-weight: @fwExtraBold;
border-radius: 4em;
cursor: default;
&:first-child {
margin-right: @margin;
}
&:last-child {
margin-left: @margin;
}
&:hover {
transition: all 300ms;
color: @activeColor;
background-color: @bgLightColor - 5%;
}
}
}
}
//index page
.content--index {
flex-direction: initial;
.content__wrapper {
flex-direction: column;
width: @panel-rightW;
padding-right: @margin;
flex-shrink: 0;
&.wrapper--left {
> div {
width: 100%;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
.switch {
width: 100%;
margin: @margin 0;
height: 2.5em;
border-radius: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
background-color: @bgLightColor;
border: 2px solid @greyMedium;
cursor: default;
box-sizing: border-box;
.label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: calc(~'2.5em - 4px');
font-weight: @fwSemiBold;
color: @inactiveColor;
border-radius: 2.5em;
border: 2px solid transparent;
box-sizing: border-box;
&.active {
color: @bodyBgColor;
background-color: @activeColor;
border: 2px solid @bgLightColor;
}
&.inactive:hover {
color: @activeColor;
}
// &.ground {
// margin-left: -2px;
// }
// &.surface {
// margin-right: -2px;
// }
}
}
.pitch {
font-size: 1.2rem;
line-height: 120%;
}
h2 {
margin: @margin 0;
}
}
}
.legend-item {
display: flex;
margin-bottom: @margin;
.item-style {
.awsomefont();
.legendItemPosition();
flex-shrink: 0;
}
}
}
//index page
.content--index {
flex-direction: initial;
.content__wrapper {
flex-direction: column;
width: @panel-rightW;
padding-right: @margin;
flex-shrink: 0;
&.wrapper--left {
> div {
width: 100%;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
.switch {
width: 100%;
margin: @margin 0;
height: 2.5em;
border-radius: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
background-color: @bgLightColor;
border: 2px solid @greyMedium;
cursor: default;
box-sizing: border-box;
.label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: calc(~'2.5em - 4px');
font-weight: @fwSemiBold;
color: @inactiveColor;
border-radius: 2.5em;
border: 2px solid transparent;
box-sizing: border-box;
&.active {
color: @bodyBgColor;
background-color: @activeColor;
border: 2px solid @bgLightColor;
}
&.inactive:hover {
color: @activeColor;
}
// &.ground {
// margin-left: -2px;
// }
// &.surface {
// margin-right: -2px;
// }
}
}
.pitch {
font-size: 1.2rem;
line-height: 120%;
}
h2 {
margin: @margin 0;
}
}
}
.legend-item {
display: flex;
margin-bottom: @margin;
.item-style {
.awsomefont();
.legendItemPosition();
flex-shrink: 0;
}
}
}
//init page
.content--index-init {
flex-direction: column;
justify-content: center;
align-items: center;
border-top: @borderDark;
> div {
width: 100%;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
.pitch {
font-size: 1.8rem;
line-height: 120%;
text-align: center;
margin-top: -3em;
margin-bottom: @margin * 2;
}
.switch {
display: flex;
> div {
transition: all 300ms;
flex: 1;
height: 4em;
background-color: @bgLightColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 250%;
font-weight: @fwExtraBold;
border-radius: 4em;
cursor: default;
&:first-child {
margin-right: @margin;
}
&:last-child {
margin-left: @margin;
}
&:hover {
transition: all 300ms;
color: @activeColor;
background-color: @bgLightColor - 5%;
}
}
}
}
@import 'sdi.less';
@import 'elements/general.less';
@import 'elements/init.less';
@import 'elements/index.less';
@import 'elements/config.less';
@import 'elements/component/legend.less';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment