New settings panel & &subscription
This commit is contained in:
@@ -56,4 +56,27 @@ textarea {
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input, textarea, button {
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Feedback */
|
||||
|
||||
.feedback {
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
&.error {
|
||||
color: red;
|
||||
}
|
||||
&.warning {
|
||||
color: orange;
|
||||
}
|
||||
&.success {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,10 +16,10 @@ $fa-css-prefix: fa;
|
||||
@extend .fas;
|
||||
|
||||
&.push {
|
||||
margin-right: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&.push-left {
|
||||
margin-left: 0.5em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,6 +47,15 @@ $fa-css-prefix: fa;
|
||||
.#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); }
|
||||
.#{$fa-css-prefix}-download:before { content: fa-content($fa-var-file-download); }
|
||||
|
||||
/* Settings */
|
||||
.#{$fa-css-prefix}-menu:before { content: fa-content($fa-var-bars); }
|
||||
.#{$fa-css-prefix}-newsletter:before { content: fa-content($fa-var-wifi); }
|
||||
.#{$fa-css-prefix}-project:before { content: fa-content($fa-var-hiking); }
|
||||
.#{$fa-css-prefix}-error:before { content: fa-content($fa-var-exclamation-square); }
|
||||
.#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); }
|
||||
.#{$fa-css-prefix}-success:before { content: fa-content($fa-var-check-circle); }
|
||||
.#{$fa-css-prefix}-unsubscribe:before { content: fa-content($fa-var-times); }
|
||||
|
||||
/* Feed */
|
||||
.#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
|
||||
.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-photo-video); }
|
||||
|
||||
@@ -26,14 +26,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#feedback {
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,34 +1,34 @@
|
||||
//Feed width
|
||||
$block-spacing: 1rem;
|
||||
$feed-width: 30%;
|
||||
$feed-width-max: "400px + 3 * #{$block-spacing}";
|
||||
$panel-width: 30%;
|
||||
$panel-width-max: "400px + 3 * #{$block-spacing}";
|
||||
|
||||
//Feed colors
|
||||
$post-input-bg: #d9deff;
|
||||
$post-color: #323268;
|
||||
$post-bg: #B4BDFF;
|
||||
$message-color: #326526;
|
||||
$message-bg: #6DFF58;
|
||||
$media-color: #635C28;
|
||||
$media-bg: #F3EC9F;
|
||||
$post-input-bg: #ffffff; //#d9deff;
|
||||
$post-color: #333; //#323268;
|
||||
$post-bg: rgba(255,255,255,.8); //#B4BDFF;
|
||||
$message-color: #326526;
|
||||
$message-bg: #6DFF58;
|
||||
$media-color: #333; //#635C28;
|
||||
$media-bg: rgba(255,255,255,.8); //#F3EC9F;
|
||||
|
||||
//Legend colors
|
||||
$track-main-color: #00ff78;
|
||||
$track-off-track-color: #0000ff;
|
||||
$track-hitchhiking-color: #FF7814;
|
||||
$legend-color: #222;
|
||||
$legend-color: $post-color;
|
||||
|
||||
#projects {
|
||||
|
||||
&.with-feed {
|
||||
#submap {
|
||||
width: calc(100% - #{$feed-width});
|
||||
min-width: calc(100% - #{$feed-width-max});
|
||||
width: calc(100% - #{$panel-width});
|
||||
min-width: calc(100% - #{$panel-width-max});
|
||||
}
|
||||
|
||||
.leaflet-right {
|
||||
width: calc(#{$feed-width});
|
||||
max-width: calc(#{$feed-width-max});
|
||||
width: calc(#{$panel-width});
|
||||
max-width: calc(#{$panel-width-max});
|
||||
}
|
||||
|
||||
#feed {
|
||||
@@ -47,6 +47,39 @@ $legend-color: #222;
|
||||
right: -100%;
|
||||
}
|
||||
}
|
||||
&.with-settings {
|
||||
#submap {
|
||||
width: calc(100% - #{$panel-width});
|
||||
min-width: calc(100% - #{$panel-width-max});
|
||||
}
|
||||
|
||||
.leaflet-left {
|
||||
width: calc(#{$panel-width});
|
||||
max-width: calc(#{$panel-width-max});
|
||||
}
|
||||
|
||||
#settings {
|
||||
z-index: 999;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
.fa {
|
||||
@extend .fa-prev;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.with-settings) {
|
||||
#settings #settings-sections {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
&.with-feed.with-settings {
|
||||
#submap {
|
||||
width: calc(100% - #{$panel-width} * 2);
|
||||
min-width: calc(100% - #{$panel-width-max} * 2);
|
||||
}
|
||||
}
|
||||
|
||||
#submap {
|
||||
position: absolute;
|
||||
@@ -103,19 +136,6 @@ $legend-color: #222;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.leaflet-control-layers-expanded {
|
||||
color: $legend-color;
|
||||
width: calc(100% - 2em - 16px);
|
||||
|
||||
a.fa-download {
|
||||
color: $legend-color;
|
||||
|
||||
&:hover {
|
||||
color: #0078A8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.leaflet-control-scale {
|
||||
padding: 0.5em;
|
||||
|
||||
@@ -125,30 +145,27 @@ $legend-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull right controls by $feed-width % */
|
||||
.leaflet-right {
|
||||
/* Pull right/left controls by $panel-width */
|
||||
.leaflet-right, .leaflet-left {
|
||||
transition: all 0.5s;
|
||||
width: 0;
|
||||
max-width: 0;
|
||||
|
||||
.leaflet-control {
|
||||
left: -100%;
|
||||
}
|
||||
max-width: 0;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
left: -100%;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
/* Replace Layers image with font awesome icon */
|
||||
.leaflet-control-layers-toggle {
|
||||
@extend .control-icon;
|
||||
@extend .fa-layers;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
/* Hide default layer control */
|
||||
.leaflet-top.leaflet-left .leaflet-control-layers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#legend {
|
||||
.track {
|
||||
white-space: nowrap;
|
||||
.line {
|
||||
width: 2em;
|
||||
height: 4px;
|
||||
@@ -175,7 +192,7 @@ $legend-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
#post-button {
|
||||
#post-button, #settings-button {
|
||||
cursor: pointer;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
|
||||
width: 44px;
|
||||
@@ -188,9 +205,14 @@ $legend-color: #222;
|
||||
.fa {
|
||||
color: #CCC;
|
||||
@extend .control-icon;
|
||||
@extend .fa-post;
|
||||
}
|
||||
}
|
||||
#post-button .fa {
|
||||
@extend .fa-post;
|
||||
}
|
||||
#settings-button .fa {
|
||||
@extend .fa-menu;
|
||||
}
|
||||
|
||||
/* Drill & Map icons */
|
||||
|
||||
@@ -235,25 +257,21 @@ $legend-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
/* Feed Panel */
|
||||
/* Feed/Settings Panel */
|
||||
|
||||
#feed {
|
||||
#feed, #settings {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: calc(#{$feed-width});
|
||||
max-width: calc(#{$feed-width-max});
|
||||
width: calc(#{$panel-width});
|
||||
max-width: calc(#{$panel-width-max});
|
||||
z-index: -1;
|
||||
transition-property: z-index;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.5s;
|
||||
overflow: hidden;
|
||||
|
||||
input, textarea, button {
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 3px;
|
||||
input, textarea {
|
||||
background-color: $post-input-bg;
|
||||
color: $post-color;
|
||||
}
|
||||
@@ -267,6 +285,9 @@ $legend-color: #222;
|
||||
color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
#feed {
|
||||
right: 0;
|
||||
|
||||
#posts {
|
||||
position: absolute;
|
||||
@@ -391,6 +412,10 @@ $legend-color: #222;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $message-color;
|
||||
}
|
||||
|
||||
a.drill {
|
||||
.drill-icon {
|
||||
transform: translate(-16px, -32px);
|
||||
@@ -432,55 +457,146 @@ $legend-color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Info Window */
|
||||
|
||||
.info-window {
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#settings {
|
||||
left: 0;
|
||||
|
||||
p {
|
||||
font-size: 1.0em;
|
||||
margin: 0.5em 0 0 0;
|
||||
#settings-sections {
|
||||
width: calc(100% - 3rem);
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5);
|
||||
position: absolute;
|
||||
transition: all 0.5s;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: $post-color;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
|
||||
.settings-section {
|
||||
h1 {
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
&:first-child h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.medias {
|
||||
margin-top: 0.5em;
|
||||
line-height: 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
|
||||
&.drill {
|
||||
font-size: 2em;
|
||||
|
||||
.fa-drill-picture {
|
||||
color: transparent;
|
||||
label {
|
||||
margin-bottom: .3em;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.newsletter {
|
||||
input#email {
|
||||
width: calc(100% - 6em);
|
||||
|
||||
&:disabled {
|
||||
color: #999;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
.fa-drill-video {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa-drill-video, .fa-drill-picture {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
button#nl_btn {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&.subscribe .fa {
|
||||
@extend .fa-send;
|
||||
}
|
||||
&.unsubscribe .fa {
|
||||
@extend .fa-unsubscribe;
|
||||
}
|
||||
&.loading {
|
||||
background-color: $message-color;
|
||||
color: white;
|
||||
span {
|
||||
@extend .flicker;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
border-radius: 3px;
|
||||
image-orientation: from-image;
|
||||
transition: All 0.2s;
|
||||
#settings-projects {
|
||||
a.fa-download {
|
||||
color: $legend-color;
|
||||
|
||||
&:hover {
|
||||
color: #0078A8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Info Window */
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0;
|
||||
|
||||
.info-window {
|
||||
margin: 1rem;
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
margin: 1em 0 1.2em;
|
||||
|
||||
i {
|
||||
margin-right: 0.3125em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.0em;
|
||||
margin: 0.5em 0 0 0;
|
||||
|
||||
i {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $post-color;
|
||||
}
|
||||
}
|
||||
|
||||
.medias {
|
||||
margin-top: -0.5rem;
|
||||
line-height: 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
margin-right: 1rem;
|
||||
margin-top: 1rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.drill {
|
||||
font-size: 2em;
|
||||
|
||||
.fa-drill-picture {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa-drill-video, .fa-drill-picture {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
border-radius: 3px;
|
||||
image-orientation: from-image;
|
||||
transition: All 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
|
||||
#projects {
|
||||
|
||||
&.with-feed {
|
||||
&.with-feed, &.with-settings {
|
||||
#submap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.leaflet-right {
|
||||
.leaflet-right, .leaflet-left {
|
||||
width: calc(100% - 44px - 2 * #{$block-spacing});
|
||||
}
|
||||
|
||||
@@ -20,14 +20,13 @@
|
||||
}
|
||||
|
||||
.leaflet-control-container {
|
||||
.leaflet-top.leaflet-left,
|
||||
.leaflet-bottom.leaflet-left,
|
||||
.leaflet-bottom.leaflet-right .leaflet-control.elevation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#feed {
|
||||
#feed, #settings {
|
||||
width: calc(100% - 44px - 2 * #{$block-spacing});
|
||||
}
|
||||
}
|
||||
@@ -37,4 +36,4 @@
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user