franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

foldable feed panel

Browse Source
This commit is contained in:
Franzz
2019-03-10 15:50:58 +01:00
parent 930cf74d34
commit 0717001a08
7 changed files with 138 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
style/_mask_project.scss
View File

@@ -1,6 +1,7 @@
//Feed width
$feed-width: "30% - 1rem";
$feed-width-max: "400px + 3rem";
$block-spacing: 1rem;
$feed-width: 30%;
$feed-width-max: "400px + 3 * #{$block-spacing}";
//Feed colors
$post-input-bg: #d9deff;
@@ -17,7 +18,30 @@ $track-off-track-color: #0000ff;
$track-hitchhiking-color: #FF7814;
$legend-color: #222;
#messages {
#projects {
&.with-feed {
#submap {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.leaflet-right {
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
}
#post-button {
.fa {
@extend .fa-next;
}
}
}
&:not(.with-feed) {
#feed #posts {
right: -100%;
}
}
#submap {
position: absolute;
@@ -26,11 +50,6 @@ $legend-color: #222;
bottom: 0;
width: 100%;
&.with_feed {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.loader {
position: absolute;
font-size: 3em;
@@ -82,7 +101,7 @@ $legend-color: #222;
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border: none;
margin: 1em;
margin: $block-spacing;
&+ .leaflet-control {
margin-top: 0;
@@ -104,8 +123,9 @@ $legend-color: #222;
/* Pull right controls by $feed-width % */
.leaflet-right {
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
transition: all 0.5s;
width: 0;
max-width: 0;
.leaflet-control {
left: -100%;
@@ -148,6 +168,23 @@ $legend-color: #222;
}
}
}
#post-button {
cursor: pointer;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
width: 44px;
text-align: center;
&:hover .fa {
color: white;
}
.fa {
color: #CCC;
@extend .control-icon;
@extend .fa-post;
}
}
#feed {
position: absolute;
@@ -157,57 +194,58 @@ $legend-color: #222;
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
z-index: 999;
overflow: hidden;
input, textarea, button {
border: none;
padding: 0.5em 1em;
border-radius: 3px;
background-color: $post-input-bg;
color: $post-color;
}
button {
background-color: $post-color;
color: $post-bg;
&:hover {
background-color: $post-input-bg;
color: $post-color;
}
}
#posts {
position: absolute;
top: 0;
transition: all 0.5s;
top: $block-spacing;
bottom: 0;
right: 0;
width: 100%;
#poster {
input, textarea, button {
border: none;
padding: 0.5em 1em;
border-radius: 3px;
background-color: $post-input-bg;
color: $post-color;
}
#post {
textarea#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
input#name {
width: calc(100% - 6em);
}
#submit {
button#submit {
margin-left: 1em;
background-color: $post-color;
color: $post-bg;
margin-bottom: 0.5em;
&:hover {
background-color: $post-input-bg;
color: $post-color;
}
}
}
.post {
margin-bottom: 1em;
margin-bottom: $block-spacing;
background: $post-bg;
color: $post-color;
border-radius: 3px;
width: calc(100% - 1em);
width: calc(100% - #{$block-spacing});
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
@@ -219,15 +257,14 @@ $legend-color: #222;
.header {
font-style: italic;
font-size: 0.8em;
padding: 0.5em 1em;
span {
padding: 0.5em 1em;
display: inline-block;
width: calc(50% - 2em);
width: 50%;
cursor: default;
&.index {
float: left;
font-style: normal;
}
@@ -275,10 +312,6 @@ $legend-color: #222;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;