adding customer sidebar + posts over map + add validity interval (histo)

This commit is contained in:
francois
2018-04-14 16:16:25 +02:00
parent 73fa987490
commit 8dcfb4822b
10 changed files with 463 additions and 202 deletions

View File

@@ -2,34 +2,37 @@
@import 'fa';
@import 'lightbox';
@import 'simplebar';
@import 'common';
#map {
position:absolute;
left:0;
top:0;
bottom:0;
width:70%;
background:#EEE;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: #EEE;
.loader {
position:absolute;
font-size:3em;
width:1em;
height:1em;
top:calc(50% - 0.5em);
left:calc(50% - 0.5em);
color:#666;
position: absolute;
font-size: 3em;
width: 1em;
height: 1em;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
color: #666;
@extend .flicker;
}
#legend {
background:white;
font-family:Roboto,Arial,sans-serif;
background: white;
font-family: Roboto, Arial, sans-serif;
background: rgba(255, 255, 255, 0.5);
border-radius:3px;
border-radius: 3px;
padding: 1px 0 0 0;
margin-top: 10px;
margin-bottom: 1em;
right: calc(30% + 3em) !important;
bottom: calc(1em - 10px) !important;
.line {
display: inline-block;
@@ -48,126 +51,138 @@
border-color: #0000ff;
}
&.red {
border-color:#FF7814;
border-color: #FF7814;
}
}
}
}
#feed {
position:absolute;
right:0;
top:0;
bottom:0;
width:30%;
overflow:auto;
position: absolute;
right: 1em;
top: 0em;
bottom: 0em;
width: calc(30% - 1em);
input, button {
border:none;
padding:0.5em 1em;
background:#F7F7F7;
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background:#CCC;
cursor:pointer;
font-weight:bold;
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button:hover {
background:#F7F7F7;
}
#poster {
padding:1em;
background:#EEE;
border-bottom:1px solid #DDD;
position:fixed;
width: calc(30% - 2em);
#post {
margin-bottom:1em;
width:calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left:1em;
width: 3em;
}
button: hover {
background: #F7F7F7;
}
#posts {
font-family: Arial;
overflow:auto;
position:absolute;
top:0;
bottom:0;
width:100%;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, button {
border-radius: 3px;
background-color: #d9deff;
color: #323268;
}
#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left: 1em;
background-color: #323268;
color: #B4BDFF;
margin-bottom: 0.5em;
&:hover {
background-color: #d9deff;
color: #323268;
}
}
}
.post {
margin:1em;
margin-bottom: 1em;
background: #B4BDFF;
color:#323268;
color: #323268;
border-radius: 0.5em;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);
&:first-child {
margin-top: 2em;
}
.message {
margin:0.3em 0 0 0;
margin: 0.3em 0 0 0;
}
.signature {
margin:0.5em 0 0 0;
margin: 0.5em 0 0 0;
text-align: right;
font-style: italic;
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size:0.8em;
text-align:right;
font-size: 0.8em;
text-align: right;
.index {
float:left;
float: left;
font-style: normal;
}
.time {
cursor:default;
cursor: default;
}
}
.body {
padding: 0em 1em 0.5em;
}
&.picture {
background:#F3EC9F;
color:#635C28;
background: #F3EC9F;
color: #635C28;
a {
display:inline-block;
line-height:0;
margin:0;
display: inline-block;
line-height: 0;
margin: 0;
}
img {
width:100%;
image-orientation:from-image;
width: 100%;
image-orientation: from-image;
border: 1px solid white;
outline:none;
outline: none;
}
}
&.message {
background: #6DFF58;
color:#326526;
color: #326526;
p {
font-size:0.9em;
margin:0.5em 0;
font-size: 0.9em;
margin: 0.5em 0;
}
p:first-child {
margin-top:1em;
p: first-child {
margin-top: 1em;
}
.staticmap {
@@ -178,18 +193,21 @@
}
}
.fa.push {
margin-right:0.5em;
}
#next_posts {
margin: 1em;
display:none;
display: none;
button {
border-radius: 0.5em;
width:100%;
margin-top: 0;
background-color: #CCC;
color: #666;
}
button:hover {
color: #333;
}
}
.fa.push {
margin-right: 0.5em;
}
}
}
@@ -204,7 +222,7 @@
}
.info-window i {
padding-right:0.5em;
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
@@ -220,7 +238,4 @@
.bar {
height: 18px;
background: green;
}
/* Other */
}