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

Add drill down icon on message

Browse Source
This commit is contained in:
Franzz
2019-07-06 22:58:52 +02:00
parent c9d0462b56
commit 7462b1573b
6 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
style/_mask_project.scss
View File

@@ -89,20 +89,6 @@ $legend-color: #222;
}
}
}
.leaflet-marker-icon {
.fa-message {
font-size: 32px;
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
color: $message-bg;
}
.fa-message-in {
font-size: 13px;
color: $message-color;
top: 3px;
}
}
}
/* Leaflet patches */
@@ -196,23 +182,42 @@ $legend-color: #222;
}
}
/* Drill & Map icons */
a.drill {
position: relative;
@extend .fa;
overflow: hidden;
text-decoration: none;
display: inline-block;
&:before {
.drill-icon {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 3em;
color: transparent;
transition: all 0.3s;
cursor: pointer;
i {
transition: all 0.3s;
cursor: pointer;
}
}
}
.fa-stack {
.fa-message {
font-size: 32px;
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
color: $message-bg;
}
.fa-message-in {
font-size: 13px;
color: $message-color;
top: 1px;
}
}
/* Feed Panel */
#feed {
position: absolute;
@@ -311,13 +316,6 @@ $legend-color: #222;
.body {
clear: both;
padding: 0em 1em 0.5em;
a.drill {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
}
&.headerless {
.header {
@@ -331,31 +329,36 @@ $legend-color: #222;
background: $media-bg;
color: $media-color;
a.drill {
&.video {
@extend .fa-drill-video;
&:before {
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
&.drill {
font-size: 3em;
.fa-drill-picture {
color: transparent;
}
.fa-drill-video {
color: rgba(255, 255, 255, 0.5);
}
&:hover:before {
color: rgba($media-bg, 0.75);
&:hover {
.fa-drill-picture, .fa-drill-video {
color: rgba($media-bg, 0.75);
}
}
}
&.picture {
@extend .fa-drill-picture;
&:hover:before {
color: rgba($media-bg, 0.75);
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
&.message {
background: $message-bg;
@@ -367,12 +370,25 @@ $legend-color: #222;
}
a.drill {
@extend .fa-drill-message;
&:hover:before {
color: rgba($message-bg, 0.75);
.drill-icon {
transform: translate(-16px, -32px);
.fa-message-in {
top: 0;
left: -1px;
}
}
&:hover {
.fa-message {
@extend .#{$fa-css-prefix}-drill-message;
}
.fa-message-in {
display: none;
}
}
}
.staticmap {
width: 100%;
border-radius: 3px;
@@ -405,40 +421,32 @@ $legend-color: #222;
p {
font-size: 1.0em;
margin: 0.5em 0 0 0;
i {
padding-right: 0.5em;
}
}
i {
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.medias {
margin-top: 0.5em;
line-height: 0;
a {
display: inline-block;
margin-right: 15px;
&.drill {
&.video {
@extend .fa-drill-video;
&:before {
color: rgba(255, 255, 255, 0.5);
}
&:hover:before {
color: rgba(255, 255, 255, 0.75);
}
font-size: 2em;
.fa-drill-picture {
color: transparent;
}
&.picture {
@extend .fa-drill-picture;
&:before {
color: transparent;
}
&:hover:before {
.fa-drill-video {
color: rgba(255, 255, 255, 0.5);
}
&:hover {
.fa-drill-video, .fa-drill-picture {
color: rgba(255, 255, 255, 0.75);
}
}