Anpassen Placelevel im PlaceDetail View

Unnötige Dependency
sync
2021-12-29 14:41:19 +01:00 · 2021-12-29 14:41:06 +01:00 · 2021-12-29 13:52:57 +01:00 · 2021-11-21 13:26:37 +01:00 · 2021-10-24 19:39:00 +02:00
9 changed files with 280 additions and 20 deletions
--- a/components/02_Molecules/_molecules.scss
+++ b/components/02_Molecules/_molecules.scss
@@ -4,3 +4,4 @@
@import 'navigation/navigation';
@import 'messageList/messageList';
@import 'userInfo/userInfo';
+@import 'voting/voting';
--- a/components/02_Molecules/voting/_voting.scss
+++ b/components/02_Molecules/voting/_voting.scss
@@ -0,0 +1,103 @@
+.LP-Voting {
+    $-block: &;
+
+    font-family: $-primary-sans-serif-font;
+    gap: 16PX;
+    font-size: 42px;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .LP-Headline {
+        margin-bottom: 0;
+        height: 33px;
+    }
+    
+    &__Left {
+        position: relative;
+    }
+
+    &__Choices {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        margin-bottom: calc(1.5 * 18px);
+        width: max-content;
+
+        --indication-color: #{$-light-brown};
+        &:hover {
+            --indication-color: #{$-beige};
+        }
+    }
+
+    &__Vote {
+        color: $-beige;
+        text-decoration: none;
+        transition: color .4s;
+
+        &:hover,
+        &:hover ~ &,
+        &:focus,
+        &focus ~ & {
+            color: $-grey;
+            cursor: pointer;
+        }
+
+        &:hover {
+            #{$-block}__Label {
+                visibility: visible;
+            }
+        }
+
+        &--overall {
+            color: var(--indication-color);
+        }
+    }
+
+    &__Label {
+        position: absolute;
+        visibility: hidden;
+        height: 1.5em;
+        left: 0px;
+        width: 100%;
+        text-align: center;
+        top: 83px;
+        background-color: white;
+        color: $-grey;
+    }
+
+    &__Label, &__CurrentVote {
+        font-size: 18px;
+        font-weight: bold;
+    }
+
+    &__CurrentVote {
+        margin-top: -29px;
+        color: $-light-brown;
+    }
+
+    &__Date, &__Vote {
+        font-weight: bold;
+    }
+
+    &__UserVote {
+        #{$-block}__Vote {
+            &, &:hover {
+                color: black;
+                cursor: unset;
+            }
+        }
+    }
+
+    &__Info{
+        font-size: 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        &Label {
+            display: block;
+        }
+    }
+}
--- a/components/02_Molecules/voting/voting.config.json
+++ b/components/02_Molecules/voting/voting.config.json
@@ -0,0 +1 @@
+{}
--- a/components/02_Molecules/voting/voting.hbs
+++ b/components/02_Molecules/voting/voting.hbs
@@ -0,0 +1,57 @@
+<div class="LP-Voting">
+	<div class="LP-Voting__Left">
+		<h2 class="LP-Headline">
+			Place level
+		</h2>
+		<div class="LP-Voting__Choices">
+			<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Time Capsule&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Time Capsule
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Lost in History&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Lost in History
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Natures Treasure&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Natures Treasure
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Vandalized&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Vandalized
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Ruin&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Ruin
+				</span>
+			</a>
+		</div>
+		<div class="LP-Voting__CurrentVote">
+			Natures Treasure
+		</div>
+	</div>
+	<div class="LP-Voting__Right">
+		<div class="LP-Voting__Info">
+			<div class="LP-Voting__UserVote">
+				<span class="LP-Voting__InfoLabel">You voted this place as</span>
+				<span class="LP-Voting__Vote">Lost in History (4 / 5)</span>
+			</div>
+			
+			<div class="LP-Voting__Expiration">
+				<span class="LP-Voting__InfoLabel">Your vote expires on</span>
+				<span class="LP-Voting__Date">
+					<time datetime="2022-01-24">24 of January 2022</time>
+				</span>
+			</div>
+		</div>
+	</div>
+</div>
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -19,6 +19,17 @@
    }
 }

+.LP-Quickinfo {
+	clear: both;
+	display: flex;
+	gap: $-spacing-large;
+	justify-content: space-between;
+	
+	.LP-Section {
+		flex-basis: 50%;
+	}
+}
+
@media (max-width: $-viewport-medium){
    .LP-PlaceDetail{
        .LP-PlaceDetail__Header{
@@ -34,4 +45,8 @@
            }
        }
    }
+	
+	.LP-Quickinfo {
+		flex-direction: column;
+	}
 }
--- a/components/04_Templates/placeDetail/placeDetail.hbs
+++ b/components/04_Templates/placeDetail/placeDetail.hbs
@@ -11,10 +11,17 @@
        {{> @paragraph text='Am 31. März 1987 wurde die Kokerei der Zeche Heinrich Robert geschlossen. Im Herbst 1987 wurde mit dem Abriss der Gebäude begonnen. Er dauerte bis zum Frühjahr 1988. Ziemlich zum Ende mussten die beiden Kamine weichen. Durch die Stilllegung der Kokerei änderte sich das Ortsbild entsprechend: Nachdem das Feuer in den Öfen erloschen war, blieben auch die Löschwasserdampfwolken und Abgasfackeln aus. Erst nach dem Abriss wollte man ein Industriedenkmal in Form einer Koksofentür aufstellen, allerdings wurde bereits alles entsorgt. Die auf dem Wiescherhöfener Marktplatz ausgestellte Ofentür stammt von der Kokerei Hansa in Dortmund.'}}
    </div>

-    <section class="LP-Section">
-        {{> @headline headline='Sicherheitsmaßnahmen'}}
-        {{> @taglist}}
-    </section>
+	<div class="LP-Quickinfo">
+		<section class="LP-Section">
+			{{> @headline headline='Tags'}}
+			{{> @taglist}}
+		</section>
+		
+		<section class="LP-Section">
+			{{> @voting}}
+		</section>
+	</div>
+	
    <section class="LP-Section">
        {{> @headline headline='Links'}}
        {{> @linklist}}
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
        "@mdi/font": "^6.2.95",
        "fractal": "0.0.3",
        "lodash": "^4.17.20",
-        "node-sass": "^4.14.1",
        "sass": "^1.30.0",
        "sass-loader": "^10.0.5"
    },
--- a/public/main.css
+++ b/public/main.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .RV-Dummy {
  overflow: hidden;
  background-color: #F4A460;
@@ -83,27 +82,27 @@
 .RV-AspectRatio--1to2 {
  --aspectX: 1;
  --aspectY: 2;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--2to1 {
  --aspectX: 2;
  --aspectY: 1;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--3to2 {
  --aspectX: 3;
  --aspectY: 2;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--4to3 {
  --aspectX: 4;
  --aspectY: 3;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--16to9 {
  --aspectX: 16;
  --aspectY: 9;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }

 /**
@@ -315,7 +314,7 @@ html {
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
-  flex-basis: calc(100%/3);
+  flex-basis: 33.3333333333%;
 }
 .RV-Flex__Item--quarter {
  overflow: hidden;
@@ -371,7 +370,7 @@ html {
 .RV-BreakPoint__Item {
  flex-grow: 5;
  flex-shrink: 5;
-  flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
+  flex-basis: calc(var(--breakPoint) * 999 - 99900%);
  overflow: hidden;
  --outer-spacing: 0;
  --inner-spacing: 0;
@@ -412,7 +411,7 @@ html {
  gap: var(--gap);
 }
 .RV-Grid__Item {
-  height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
+  height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
 }
 .RV-Grid__Item > * {
  height: 100%;
@@ -926,7 +925,7 @@ body {
  height: 1em;
  width: 1em;
  border: 1px solid #565656;
-  padding: 0 calc(.5em + 2px);
+  padding: 0 calc(0.5em + 2px);
  margin-right: 0.7em;
 }

@@ -26397,7 +26396,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
 }

 .mdi-blank::before {
-  content: "";
+  content: "\f68c";
  visibility: hidden;
 }

@@ -26815,6 +26814,84 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
  font-weight: bold;
 }

+.LP-Voting {
+  font-family: "Montserrat", Helvetica, sans-serif;
+  gap: 16PX;
+  font-size: 42px;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.LP-Voting .LP-Headline {
+  margin-bottom: 0;
+  height: 33px;
+}
+.LP-Voting__Left {
+  position: relative;
+}
+.LP-Voting__Choices {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  margin-bottom: 27px;
+  width: max-content;
+  --indication-color: #C09F80;
+}
+.LP-Voting__Choices:hover {
+  --indication-color: #D7CEC7;
+}
+.LP-Voting__Vote {
+  color: #D7CEC7;
+  text-decoration: none;
+  transition: color 0.4s;
+}
+.LP-Voting__Vote:hover, .LP-Voting__Vote:hover ~ .LP-Voting__Vote, .LP-Voting__Vote:focus, .LP-Voting__Votefocus ~ .LP-Voting__Vote {
+  color: #565656;
+  cursor: pointer;
+}
+.LP-Voting__Vote:hover .LP-Voting__Label {
+  visibility: visible;
+}
+.LP-Voting__Vote--overall {
+  color: var(--indication-color);
+}
+.LP-Voting__Label {
+  position: absolute;
+  visibility: hidden;
+  height: 1.5em;
+  left: 0px;
+  width: 100%;
+  text-align: center;
+  top: 83px;
+  background-color: white;
+  color: #565656;
+}
+.LP-Voting__Label, .LP-Voting__CurrentVote {
+  font-size: 18px;
+  font-weight: bold;
+}
+.LP-Voting__CurrentVote {
+  margin-top: -29px;
+  color: #C09F80;
+}
+.LP-Voting__Date, .LP-Voting__Vote {
+  font-weight: bold;
+}
+.LP-Voting__UserVote .LP-Voting__Vote, .LP-Voting__UserVote .LP-Voting__Vote:hover {
+  color: black;
+  cursor: unset;
+}
+.LP-Voting__Info {
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.LP-Voting__InfoLabel {
+  display: block;
+}
+
 .LP-Header {
  display: flex;
  align-items: center;
@@ -26895,7 +26972,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
  justify-content: center;
 }
 .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
-  height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
+  height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
 }
 .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * {
  height: 100%;
@@ -26945,7 +27022,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
  --icon-color: #C09F80;
 }
 .LP-LinkList .RV-Iconized__Icon {
-  font-size: calc(var(--itemHeight) * .75);
+  font-size: calc(var(--itemHeight) * 0.75);
  line-height: 1em;
  color: var(--icon-color);
  transition: color 0.2s;
@@ -26998,7 +27075,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
 .LP-FooterColumns__Item {
  flex-grow: 5;
  flex-shrink: 5;
-  flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
+  flex-basis: calc(var(--breakPoint) * 999 - 99900%);
  overflow: hidden;
  --outer-spacing: 0;
  --inner-spacing: 0;
--- a/public/main.css.map
+++ b/public/main.css.map
Author	SHA1	Message	Date
reverend	603d7eb2c7	Anpassen Placelevel im PlaceDetail View	2021-12-29 14:41:19 +01:00
reverend	492b0cc0d2	Unnötige Dependency	2021-12-29 14:41:06 +01:00
reverend	ff9c9ddcbc	sync	2021-12-29 13:52:57 +01:00
reverend	aed29a6497	Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend	2021-11-21 13:26:37 +01:00
reverend	daaa3e11a7	Adapting ImageGrid	2021-10-24 19:39:00 +02:00