diff --git a/src/components/project.vue b/src/components/project.vue
index 1b2669f..fcdd73a 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -313,7 +313,7 @@ export default {
//TODO Use same way of displaying markers (so that openMarkerPopup works on all markers)
this.markers.medias.forEach(msg => {
const $Marker = document.createElement('div');
- const app = createApp(SpotIconStack, {iconMain: 'media', iconSub: msg.subtype+'-in'});
+ const app = createApp(SpotIconStack, {mainClasses: 'media', iconMain: 'marker', iconSub: msg.subtype});
app.mount($Marker);
const $Popup = document.createElement('div');
diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue
index c77e646..a4de4a1 100644
--- a/src/components/projectPost.vue
+++ b/src/components/projectPost.vue
@@ -167,7 +167,7 @@
{{ options.weather_temp+'°C' }}
-
+
diff --git a/src/components/spotIconStack.vue b/src/components/spotIconStack.vue
index 875c3c8..788c4dc 100644
--- a/src/components/spotIconStack.vue
+++ b/src/components/spotIconStack.vue
@@ -6,16 +6,22 @@ export default {
spotIcon
},
props: {
+ mainClasses: String,
iconMain: String,
iconMainClasses: String,
iconSub: String,
iconSubClasses: String,
+ },
+ computed: {
+ mainClass() {
+ return 'icon-stack fa-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
+ }
}
}
-
+
diff --git a/src/styles/_fa.scss b/src/styles/_fa.scss
index 1b556f9..5ce3376 100644
--- a/src/styles/_fa.scss
+++ b/src/styles/_fa.scss
@@ -43,6 +43,8 @@
/* Map */
.#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
+.#{variables.$fa-css-prefix}-marker:before { content: functions.fa-content(variables.$fa-var-map-marker); }
+.#{variables.$fa-css-prefix}-footprint:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
.#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
@@ -71,11 +73,8 @@
.#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
.#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
.#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
-.#{variables.$fa-css-prefix}-video-in:before { content: functions.fa-content(variables.$fa-var-film); }
.#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
-.#{variables.$fa-css-prefix}-image-in:before { content: functions.fa-content(variables.$fa-var-image); }
.#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
-.#{variables.$fa-css-prefix}-message-in:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
.#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
.#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
.#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index 750f1ff..7c266e0 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -127,19 +127,15 @@
.drill-icon {
transform: translate(-16px, -32px);
-
- .fa-message-in {
- top: -1px;
- }
}
&:hover {
- .fa-message {
+ .#{variables.$fa-css-prefix}-stack-2x {
@extend .#{variables.$fa-css-prefix}-drill-message;
top: 13px;
left: 3px;
}
- .fa-message-in {
+ .#{variables.$fa-css-prefix}-stack-1x {
display: none;
}
}
@@ -236,6 +232,7 @@
.drill-icon {
.fa-drill-image, .fa-drill-video {
color: color.$media-bg;
+ text-shadow: color.$over-img-shadow 3px 3px 3px;
}
}
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 7973cfd..6bf3cbd 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -15,7 +15,7 @@
width: 100%;
height: 100%;
- /* Drill & Map icons */
+ /* Drill icon */
a.drill {
position: relative;
@@ -29,38 +29,48 @@
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-
+
i {
- transition: color 0.3s;
+ transition: color 0.3s, text-shadow 0.3s;
}
}
}
- .#{variables.$fa-css-prefix}-stack {
- .#{variables.$fa-css-prefix}-message {
+ /* Icon Stack */
+
+ .icon-stack {
+ .#{variables.$fa-css-prefix}-stack-2x {
font-size: 32px;
text-shadow: color.$over-img-shadow 3px 3px 3px;
- color: color.$message-flashy;
}
- .#{variables.$fa-css-prefix}-media {
- @extend .#{variables.$fa-css-prefix}-message;
- color: color.$media-flashy;
+
+ .#{variables.$fa-css-prefix}-stack-1x {
+ font-size: 13px;
}
- .#{variables.$fa-css-prefix}-message-in {
- font-size: 13px;
- color: color.$message;
- top: 1px;
+
+ &.message {
+ .#{variables.$fa-css-prefix}-stack-2x {
+ color: color.$message-flashy;
+ }
}
- .#{variables.$fa-css-prefix}-media-in {
- color: color.$media;
+
+ &.media {
+ .#{variables.$fa-css-prefix}-stack-2x {
+ color: color.$media-flashy;
+ }
}
- .#{variables.$fa-css-prefix}-track-start, .#{variables.$fa-css-prefix}-track-end {
- color: color.$track-start;
- font-size: 14px;
- top: 1px;
- }
- .#{variables.$fa-css-prefix}-track-end {
- color: color.$track-end;
+
+ &.track {
+ .#{variables.$fa-css-prefix}-stack-1x {
+ font-size: 14px;
+ top: 1px;
+ }
+ .#{variables.$fa-css-prefix}-track-start {
+ color: color.$track-start;
+ }
+ .#{variables.$fa-css-prefix}-track-end {
+ color: color.$track-end;
+ }
}
}
}
\ No newline at end of file