Commit 3b71780a authored by pacome's avatar pacome

[client/timeserie] style on inti page

parent 3f055dfa
import { DIV, H1 } from 'sdi/components/elements';
import { DIV } from 'sdi/components/elements';
import tr from 'sdi/locale';
import { navigateIndex } from 'timeserie/src/events/route';
import { clearStationSelection } from 'timeserie/src/events/timeserie';
import { markdown } from 'sdi/ports/marked';
const renderWelcomeMessage = () => H1({}, tr.ts('welcomeMessage'));
const renderHelptextHome = () =>
DIV({ className: 'pitch' }, markdown(tr.ts('helptext:init')));
const renderSwitchLevel = () =>
DIV(
......@@ -13,30 +14,27 @@ const renderSwitchLevel = () =>
{
onClick: () => {
clearStationSelection();
navigateIndex('surface')
navigateIndex('surface');
},
}
, 'surface'),
},
tr.ts('surfaceWater')
),
DIV(
{
onClick: () => {
clearStationSelection();
navigateIndex('ground')
navigateIndex('ground');
},
}
, 'ground'
),
// map(),
)
},
tr.ts('groundWater')
)
);
const render = () =>
DIV(
{ className: 'content content--index' },
DIV(
{ className: 'content__wrapper wrapper--left' },
renderWelcomeMessage(),
renderSwitchLevel(),
),
{ className: 'content content--index-init' },
renderHelptextHome(),
renderSwitchLevel()
);
export default render;
\ No newline at end of file
export default render;
......@@ -171,74 +171,74 @@ const messages = {
Coordinates: {
fr: 'Coordonnées X et Y',
nl: '' //nltodo
nl: '', //nltodo
},
ZCoord: {
fr: 'Altitude (m)',
nl: ''//nltodo
nl: '', //nltodo
},
NomGWRef: {
fr: 'Unité hydrogéologique captée',
nl: '' //nltodo
nl: '', //nltodo
},
NomGWBFr: {
fr: 'Masse d\'eau souterraine',
nl: '' //nltodo
fr: "Masse d'eau souterraine",
nl: '', //nltodo
},
CodeGWB: {
fr: 'Code de la masse d\'eau',
nl: '' //nltodo
fr: "Code de la masse d'eau",
nl: '', //nltodo
},
RefGWRef: {
fr: 'Code de référence de la masse d\'eau souterraine',
nl: '' //nltodo
fr: "Code de référence de la masse d'eau souterraine",
nl: '', //nltodo
},
NoEuCode: {
fr: 'Code EU du site',
nl: '' //nltodo,
nl: '', //nltodo,
},
ProfRelM: {
fr: 'Profondeur relative de l\'ouvrage',
nl: '' //nltodo
fr: "Profondeur relative de l'ouvrage",
nl: '', //nltodo
},
TopCrepineRelM: {
fr: 'Profondeur relative (m) du sommet de la crépine',
nl: '' //nltodo
nl: '', //nltodo
},
ProfCrepineRelM: {
fr: 'Profondeur relative (m) de la base de la crépine',
nl: '' //nltodo
nl: '', //nltodo
},
Monitoring: {
fr: 'Date de début de surveillance - date de fin',
nl: '' //nltodo
nl: '', //nltodo
},
Ongoing: {
fr: 'en cours',
nl: '' //nltodo,
nl: '', //nltodo,
},
MonFreq: {
fr: 'Fréquence de mesure',
nl: '' // nltodo
nl: '', // nltodo
},
// ESO°Qual
TypeOuvrage: {
fr: 'Type d\'ouvrage',
nl: '' //nltodo
fr: "Type d'ouvrage",
nl: '', //nltodo
},
RefOuvrage: {
fr: 'Référence ouvrage auto',
nl: '' //nltodo
nl: '', //nltodo
},
NCode: {
fr: 'Code',
nl: '' //nltodo,
nl: '', //nltodo,
},
Comment: {
fr: 'Commentaire',
nl: '' //nltodo,
nl: '', //nltodo,
},
StationName: {
......@@ -266,6 +266,14 @@ const messages = {
fr: `Données des eaux souterraines et de surface en RBC.`,
nl: '', // nltodo
},
surfaceWater: {
fr: `Eaux de surface`,
nl: '', // nltodo
},
groundWater: {
fr: `Eaux souterraines`,
nl: '', // nltodo
},
paramsToDisplay: {
fr: `Paramètres à visualiser`,
......@@ -297,6 +305,13 @@ const messages = {
nl: '', // nltodo
},
'helptext:init': {
fr: `
Bienvenue sur le portail de visualisation et distribution des données relatives aux eaux souterraines et de surface de la région de Bruxelles-Capitale.
Veuillez sélectionner un set de données à explorer.`,
nl: '', // nltodo
},
'helptext:home': {
fr: `
Bienvenue sur le portail de visualisation et distribution des données relatives aux eaux souterraines et de surface de la région de Bruxelles-Capitale.
......
.map-info {
background-color: @bgLightColor;
padding: @margin / 2;
padding-top: 0px;
h2 {
padding-bottom: @margin;
padding-top: @margin / 2;
position: sticky;
top: 0;
background-color: @bodyBgColor;
background-color: @bgLightColor;
}
}
......
......@@ -70,8 +70,6 @@ ul.group__list {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-right: @margin / 2;
padding-right: @margin / 2;
}
&--footer {
......@@ -134,6 +132,60 @@ 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;
......
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