adding customer sidebar + posts over map + add validity interval (histo)
This commit is contained in:
105
style/_simplebar.scss
Normal file
105
style/_simplebar.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
/*!
|
||||
*
|
||||
* SimpleBar.js - v2.6.1
|
||||
* Scrollbars, simpler.
|
||||
* https://grsmto.github.io/simplebar/
|
||||
*
|
||||
* Made by Adrien Grsmto from a fork by Jonathan Nicol
|
||||
* Under MIT License
|
||||
*
|
||||
*/
|
||||
[data-simplebar] {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden!important;
|
||||
max-height: inherit;
|
||||
-webkit-overflow-scrolling: touch; /* Trigger native scrolling for mobile, if not supported, plugin is used. */
|
||||
}
|
||||
|
||||
[data-simplebar="init"] {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.simplebar-scroll-content {
|
||||
overflow-x: hidden!important;
|
||||
overflow-y: scroll;
|
||||
min-width: 100%!important;
|
||||
max-height: inherit!important;
|
||||
-webkit-box-sizing: content-box!important;
|
||||
box-sizing: content-box!important;
|
||||
}
|
||||
|
||||
.simplebar-content {
|
||||
overflow-y: hidden!important;
|
||||
overflow-x: scroll;
|
||||
-webkit-box-sizing: border-box!important;
|
||||
box-sizing: border-box!important;
|
||||
min-height: 100%!important;
|
||||
}
|
||||
|
||||
.simplebar-track {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
width: 7px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: black;
|
||||
border-radius: 7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.simplebar-track:hover .simplebar-scrollbar:before,
|
||||
.simplebar-track .simplebar-scrollbar.visible:before {
|
||||
/* When hovered, remove all transitions from drag handle */
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0 linear;
|
||||
transition: opacity 0 linear;
|
||||
}
|
||||
|
||||
.simplebar-track.vertical {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.simplebar-track.vertical .simplebar-scrollbar:before {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.horizontal {
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.horizontal .simplebar-scrollbar:before {
|
||||
height: 100%;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.horizontal.simplebar-track .simplebar-scrollbar {
|
||||
right: auto;
|
||||
top: 2px;
|
||||
height: 7px;
|
||||
min-height: 0;
|
||||
min-width: 10px;
|
||||
width: auto;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
201
style/spot.scss
201
style/spot.scss
@@ -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 */
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user