fix map loading icon position

This commit is contained in:
2019-02-21 20:31:03 +01:00
parent 82ebfc48aa
commit eb6a94a490
7 changed files with 825 additions and 805 deletions

View File

@@ -1,12 +1,24 @@
#messages {
.loader {
#submap {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(35% - 0.66666em);
color: #666;
@extend .flicker;
left: 0;
top: 0;
bottom: 0;
width: 100%;
&.with_feed {
width: calc(70% + 1rem);
min-width: calc(100% - 400px - 4rem);
}
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 0.66666em);
color: #CCC;
}
}
#map {
@@ -15,7 +27,6 @@
top: 0;
bottom: 0;
width: 100%;
background: #EEE;
.track_tooltip {
p {
@@ -104,171 +115,171 @@
}
}
}
#feed, .leaflet-right {
width: calc(30% - 1rem);
max-width: calc(400px + 3rem);
}
#feed {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
input, textarea, button {
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button: hover {
background: #F7F7F7;
}
#posts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, textarea, 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-bottom: 1em;
background: #B4BDFF;
color: #323268;
border-radius: 3px;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
.signature {
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;
.index {
float: left;
font-style: normal;
}
.time {
cursor: default;
}
}
.body {
clear: both;
padding: 0em 1em 0.5em;
}
&.picture {
background: #F3EC9F;
color: #635C28;
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
&.message {
background: #6DFF58;
color: #326526;
p {
font-size: 0.9em;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;
cursor: pointer;
}
}
&.loading {
.body p {
padding-top: 0.5em;
text-align: center;
.fa {
font-size: 1.5em;
color: #323268;
}
}
}
}
#loading {
}
}
}
}
#elems {
display: none;
}
#feed, .leaflet-right {
width: calc(30% - 1rem);
max-width: calc(400px + 3rem);
}
#feed {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
input, textarea, button {
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button: hover {
background: #F7F7F7;
}
#posts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, textarea, 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-bottom: 1em;
background: #B4BDFF;
color: #323268;
border-radius: 3px;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
.signature {
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;
.index {
float: left;
font-style: normal;
}
.time {
cursor: default;
}
}
.body {
clear: both;
padding: 0em 1em 0.5em;
}
&.picture {
background: #F3EC9F;
color: #635C28;
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
&.message {
background: #6DFF58;
color: #326526;
p {
font-size: 0.9em;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;
cursor: pointer;
}
}
&.loading {
.spinner {
padding-top: 0.5em;
text-align: center;
.fa-spinner {
font-size: 1.5em;
color: #323268;
}
}
}
}
#loading {
}
}
}
/* Info Window */
.info-window {