Commit 4165b160 authored by pacome's avatar pacome

[client/timeserie] refacto DOM vol2

parent 9cd70d77
import { DIV } from 'sdi/components/elements';
import map from '../map';
import legend from '../legend/map';
import plotLegend from '../legend/plot';
import info from '../info';
import plot from '../plot';
......@@ -7,7 +9,7 @@ import {
renderButtonParams,
renderButtonCSV,
renderBackHomeBtn,
renderButtonTableSmall
renderButtonTableSmall,
} from '../button';
import { navigateConfig, getConfig } from 'timeserie/src/events/route';
import renderDatesInputBox from '../date-picker';
......@@ -31,33 +33,35 @@ const renderContentFooter = () =>
const renderContentSideFooter = () =>
DIV(
{ className: 'content__side--footer' },
renderButtonParams(() => getLevel().map(l => getConfig().map(c => navigateConfig(l, c)))),
renderButtonParams(() =>
getLevel().map((l) => getConfig().map((c) => navigateConfig(l, c)))
),
renderButtonTableSmall()
);
const render = () =>
const renderSidebar = () =>
DIV(
{ className: 'content content--plot' },
DIV(
{ className: 'content__wrapper wrapper--top' },
DIV(
{ className: 'content__side legend' },
plotLegend(),
renderContentSideFooter()
),
DIV(
{ className: 'content__body' },
renderSelection(),
plot(),
renderNoDataMessage(),
renderContentFooter()
)
),
{ className: 'content__side' },
legend(),
info(),
plotLegend(),
renderContentSideFooter()
);
const renderMain = () =>
DIV(
{ className: 'content__main' },
DIV({ className: 'content__map' }, map(), renderBackHomeBtn()),
DIV(
{ className: 'content__wrapper wrapper--bottom' },
DIV({ className: 'content__side' }, info()),
// DIV({ className: 'content__side' }, mapLegend()),
DIV({ className: 'content__body' }, map(), renderBackHomeBtn())
{ className: 'content__plot' },
renderSelection(),
plot(),
renderNoDataMessage(),
renderContentFooter()
)
);
const render = () =>
DIV({ className: 'content content--plot' }, renderSidebar(), renderMain());
export default render;
......@@ -2,13 +2,15 @@ import { DIV } from 'sdi/components/elements';
import map from '../map';
import info from '../info';
import table from '../table';
import mapLegend from '../legend/map';
import legend from '../legend/table';
import {
renderButtonCSV,
renderButtonParams,
renderBackHomeBtn,
renderButtonPlotSmall
renderButtonPlotSmall,
} from '../button';
import { navigateConfig, getConfig } from 'timeserie/src/events/route';
import renderDatesInputBox from '../date-picker';
......@@ -30,27 +32,32 @@ const renderContentFooter = () =>
const renderLegendFooter = () =>
DIV(
{ className: 'content__side--footer' },
renderButtonParams(() => getLevel().map(l => getConfig().map(c => navigateConfig(l, c)))),
renderButtonParams(() =>
getLevel().map((l) => getConfig().map((c) => navigateConfig(l, c)))
),
renderButtonPlotSmall()
);
const render = () =>
const renderSidebar = () =>
DIV(
{ className: 'content content--table' },
DIV(
{ className: 'content__wrapper wrapper--top' },
DIV(
{ className: 'content__side legend' },
legend(),
renderLegendFooter()
),
DIV({ className: 'content__body' }, table(), renderContentFooter())
),
DIV(
{ className: 'content__wrapper wrapper--bottom' },
DIV({ className: 'content__side' }, info()),
DIV({ className: 'content__body' }, map(), renderBackHomeBtn())
)
{ className: 'content__side' },
mapLegend(),
legend(),
renderLegendFooter()
);
const renderMain = () =>
DIV(
{ className: 'content__main' },
DIV({ className: 'content__map' }, map(), renderBackHomeBtn()),
DIV({ className: 'content__table' }, table(), renderContentFooter())
);
export const render = () =>
DIV(
{ className: 'content content--config' },
renderSidebar(),
renderMain()
);
export default render;
......@@ -14,6 +14,9 @@
.content__main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
// padding-bottom: @margin / 2;
overflow: hidden;
......
.content__plot {
display: flex;
flex-direction: column;
overflow: auto;
}
......@@ -4,6 +4,7 @@
@import 'elements/init.less';
@import 'elements/index.less';
@import 'elements/config.less';
@import 'elements/plot.less';
@import 'elements/component/legend.less';
@import 'elements/component/table.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