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-11-01 09:49:58 +01:00 · 2021-11-01 09:47:33 +01:00
32 changed files with 16029 additions and 8899 deletions
--- a/components/01_Atoms/checkbox/_checkbox.scss
+++ b/components/01_Atoms/checkbox/_checkbox.scss
@@ -1,12 +1,16 @@
 .LP-Form{
    .LP-Form__Checkbox{
-            display: none;
+        display: none;
+		
+		&:checked + .LP-Form__CheckBox__CheckMark {
+			background-color: $-light-brown;
+		}
    }   

    .LP-Form__CheckBox__CheckMark{
        height: 1em;
        width: 1em;
-        border: 1px solid black;
+        border: 1px solid $-grey;
        padding: 0 calc(.5em + 2px);
        margin-right: .7em;
    }
--- a/components/01_Atoms/checkbox/checkbox.hbs
+++ b/components/01_Atoms/checkbox/checkbox.hbs
@@ -1,3 +1,7 @@
 <form class="LP-Form">
-    <label for="wurstwasser" class="LP-Form__Label"><span class="LP-Form__CheckBox__CheckMark"></span><input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>Check me</label>
+    <label for="wurstwasser" class="LP-Form__Label">
+		<input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>
+		<span class="LP-Form__CheckBox__CheckMark"></span>
+		Check me
+	</label>
 </form>
--- a/components/01_Atoms/input/input.hbs
+++ b/components/01_Atoms/input/input.hbs
@@ -4,7 +4,6 @@
    {{#if disabled}}
        disabled="disabled"
    {{/if}}
-    />
    {{#if message}}
    <span class="LP-Input__Message">{{message}}</span>
    {{/if}}
--- a/components/01_Atoms/link/_link.scss
+++ b/components/01_Atoms/link/_link.scss
@@ -6,8 +6,4 @@
        color: $-grey;
 		text-decoration: underline;
    }
-}
-
-.LP-Link__IconWrapper{
-    display: inline;
-}
+}
--- a/components/01_Atoms/link/link--iconized.hbs
+++ b/components/01_Atoms/link/link--iconized.hbs
@@ -0,0 +1,10 @@
+<a href="{{url}}" class="LP-Link">
+	<span class="RV-Iconized">
+		<span class="RV-Iconized__Text">
+			Iconized Text
+		</span>
+		<span class="RV-Iconized__Icon RV-Iconized__Icon--medium RV-Iconized__Icon--right">
+			<img src="/icons/debug.png"/>
+		</span>
+	</span>
+</a>
--- a/components/01_Atoms/link/link.hbs
+++ b/components/01_Atoms/link/link.hbs
@@ -1,3 +1 @@
-<p class="LP-Paragraph">
-	<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
-</p>
+<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
--- a/components/01_Atoms/materialdesignicons/_variables.scss
+++ b/components/01_Atoms/materialdesignicons/_variables.scss
@@ -2,7 +2,7 @@ $mdi-filename:         "materialdesignicons";
 $mdi-font-name:        "Material Design Icons";
 $mdi-font-family:      "materialdesignicons";
 $mdi-font-weight:      "normal";
-$mdi-font-path:        "../fonts/MaterialDesignIcons/" !default;
+$mdi-font-path:        "fonts/MaterialDesignIcons" !default;
 $mdi-font-size-base:   24px !default;
 $mdi-css-prefix:       mdi !default;
 $mdi-version:          "6.2.95" !default;
--- a/components/01_Atoms/tag/_tag.scss
+++ b/components/01_Atoms/tag/_tag.scss
@@ -3,10 +3,17 @@
    background-color: $-beige;
    border-radius: 2px;
    width: max-content;
-    @include RV-FlexRow__Container;
+    @include RV-Flex;
    height: min-content;
    gap: 3px;
    transition: background .3s;
+	
+	.LP-Link {
+		color: $-grey;
+		&:hover {
+			text-decoration: none;
+		}
+	}

    &__Remove {
        .RV-Iconized__Icon {
--- 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/placeTeaser/_placeTeaser.scss
+++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss
@@ -1,136 +1,16 @@
 .LP-PlaceTeaser {
-    width: 100%;
-
-    .LP-PlaceTeaser__Image {
-        width: 100%;
-        overflow: hidden;
-
-        .LP-Image {
-            max-width: unset;
-            max-height: unset;
-            object-fit: cover;
-        }
-    }
-
-    .LP-PlaceTeaser__Meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: $-spacing-small;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px;
-        padding-bottom: 10px;
-        padding-top: 10px;
-
-        .LP-Paragraph {
-            font-family: $-primary-sans-serif-font;
-            padding: 0;
-            margin: 0;
-            margin-top: 5px;
-            font-size: 1.3rem;
-        }
-
-        .LP-Headline {
-            font-family: $-primary-sans-serif-font;
-            color: $-grey;
-            font-size: 2rem;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .LP-Icon {
-            height: 2em;
-            width: 2em;
-        }
-    }
-
-    .LP-PlaceTeaser__Description {
-        font-family: $-primary-sans-serif-font;
-        color: $-grey;
-        order: 3;
-        flex-basis: 100%;
-
-        .LP-Paragraph {
-            font-size: 22px;
-        }
-    }
-}
-
-@media(min-width: $-viewport-small) {
-    .LP-PlaceTeaser {
-        width: 280px;
-
-        &__Image {
-            width: 280px;
-            height: 165px;
-        }
-    }
-
-    .LP-PlaceTeaser--extended {
-        display: flex;
-        flex-direction: row;
-        width: auto;
-        padding-right: 25px;
-        height: 165px;
-
-        .LP-PlaceTeaser__Meta {
-            margin: 0;
-            padding-left: 25px;
-            display: flex;
-            flex-wrap: nowrap;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: unset;
-
-            .LP-Headline,
-            .LP-Paragraph {
-                font-size: unset;
-            }
-
-            .LP-PlaceTeaser__Info {
-                .LP-Headline {
-                    font-size: 28px;
-                }
-            }
-
-            .LP-PlaceTeaser__Icons {
-                margin-top: auto;
-
-                ul {
-                    padding: 0;
-                    margin: 0;
-                }
-            }
-
-            .LP-Icon {
-                height: 20px;
-                width: 20px;
-            }
-        }
-
-        .LP-PlaceTeaser__Description {
-            display: block;
-            max-height: 55px;
-            overflow: hidden;
-            order: unset;
-
-            .LP-Paragraph {
-                font-size: unset;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        .LP-PlaceTeaser__Image {
-            height: 165px;
-            width: 280px;
-            flex-shrink: 0;
-            flex-grow: 0;
-
-        }
-    }
-}
+	@include RV-Turner(200px, 280px);
+	@include RV-Turner--auto;
+	
+	&__Image {
+		@include RV-Turner__Base;
+		
+		.LP-Image {
+			height: 100%;
+		}
+	}
+	
+	&__Meta {
+		@include RV-Turner__Content;
+	}
+}
--- a/components/02_Molecules/placeTeaser/placeTeaser.hbs
+++ b/components/02_Molecules/placeTeaser/placeTeaser.hbs
@@ -1,10 +1,12 @@
 <article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
    <div class="LP-PlaceTeaser__Image">
-            <img class="LP-Image" src="{{image}}"/>
+        <img class="LP-Image" src="{{image}}"/>
    </div>
    <div class="LP-PlaceTeaser__Meta">
+		<span class="LP-PlaceTeaser__Title">
+			{{> @headline headline=title modifier='--teaser'}}
+		</span>
        <div class="LP-PlaceTeaser__Info">
-            <span class="LP-PlaceTeaser__Title">{{> @headline headline=title modifier='--teaser'}}</span>
            <span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span>
        </div>
        <div class="LP-PlaceTeaser__Description">
--- a/components/02_Molecules/userInfo/_userInfo.scss
+++ b/components/02_Molecules/userInfo/_userInfo.scss
@@ -15,7 +15,7 @@
            padding: 0;
            margin: 0;
            text-align: center;
-            padding: $-spacing-small / 2;
+            padding: $-spacing-small;
            font-size: 25px;
        }
    }
@@ -26,7 +26,7 @@
            font-size: 18px;
        }

-        padding: $-spacing-small / 2;
+        padding: $-spacing-small;

        .LP-UserInfo__Key {
            padding-right: $-spacing-medium;
--- 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/03_Organisms/footer/_footer.scss
+++ b/components/03_Organisms/footer/_footer.scss
@@ -10,15 +10,13 @@ $-primary-line-color: $-almost-white;
    font-size: 1rem;

    &Columns__Container {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
+        @include RV-BreakPoint;
+        --breakPoint: 750px;
+        justify-content: center;
    }

    &Columns__Item {
-        flex-grow: 1;
+        @include RV-BreakPoint__Item;
    }

    * {
@@ -208,9 +206,6 @@ $-primary-line-color: $-almost-white;
 }

@media(max-width: $-viewport-medium) {
-    .LP-Footer__ListTop {
-        width: 100%;
-    }
    .LP-Footer__ListHeader {
        font-size: 3em;
    }
--- a/components/03_Organisms/footer/footer.hbs
+++ b/components/03_Organisms/footer/footer.hbs
@@ -2,30 +2,36 @@
    <div class="LP-FooterColumns__Container">
        
        <!-- 1st footer column -->
-        <ul class="LP-Footer__ListTop">
-            <li><h4 class="LP-Footer__ListHeader">About</h4></li>
-                <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li>
-                <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li>
-                <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li>
-                <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li>
-        </ul>
+        <div class="LP-FooterColumns__Item">
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">About</h4></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li>
+            </ul>
+        </div>

-        <!-- 2nd footer column -->
-        <ul class="LP-Footer__ListTop">
-            <li><h4 class="LP-Footer__ListHeader">Contact</h4></li>
-                <li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li>
-                <li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li>
-                <li class="LP-Footer__ListText">tel. 937-387-6498</li>
-        </ul>
+        <div class="LP-FooterColumns__Item">
+            <!-- 2nd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">Contact</h4></li>
+                    <li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li>
+                    <li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li>
+                    <li class="LP-Footer__ListText">tel. 937-387-6498</li>
+            </ul>
+        </div>

-        <!-- 3rd footer column -->
-        <ul class="LP-Footer__ListTop">
-            <li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li>
-                <li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li>
-                <li class="LP-Footer__ListText">John S. Smith</li>
-                <li class="LP-Footer__ListText">2563 College Avenue</li>
-                <li class="LP-Footer__ListText">Dayton, OH 45402</li>
-        </ul>
+        <div class="LP-FooterColumns__Item">
+            <!-- 3rd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li>
+                    <li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li>
+                    <li class="LP-Footer__ListText">John S. Smith</li>
+                    <li class="LP-Footer__ListText">2563 College Avenue</li>
+                    <li class="LP-Footer__ListText">Dayton, OH 45402</li>
+            </ul>
+        </div>
    </div>

    <!-- Explore with us / social media bar -->
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -16,7 +16,8 @@
        }

        .LP-Form__Button {
-            @include RV-FlexRow__Item--fixedSize(max-content);
+            @include RV-Flex__Item--fixedSize;
+            --fixed-size: max-content;
        }

        fieldset.LP-Form__Fieldset {
@@ -31,23 +32,25 @@
    &:not(.LP-Form--inline) {
        .LP-Form__Composition {
            @media(max-width: $-viewport-extra-small) {
-                @include RV-FlexRow__Container--multiRow;
+                @include RV-Flex--wrap;
            }
        }

        .LP-Form__Button {
-            @include RV-FlexRow__Item--fixedSize(130px);
+            @include RV-Flex__Item--fixedSize;
+            --fixedSize: 130px;

            @media(max-width: $-viewport-extra-small) {
-                @include RV-FlexRow__Item--fixedSize(100%);
+                @include RV-Flex__Item--fixedSize;
+                --fixedSize: 100%;
            }
        }
    }

    .LP-Form__Fieldset {
-        @include RV-Reset;
        max-width: 1200px;
        min-width: $-viewport-medium;
+        border: none;

        @media(max-width: $-viewport-medium) {
            min-width: unset;
@@ -62,23 +65,23 @@
    }

    .LP-Form__Composition {
-        @include RV-FlexRow__Container;
-        @include RV-Spacing__Inner--small('');
+        @include RV-Flex;
+        gap: $-spacing-small;

        &--breakable {
            @media(max-width: $-viewport-small) {
-                @include RV-FlexRow__Container--multiRow;
+                @include RV-Flex--wrap;
            }
        }

        &--buttons {
            justify-content: flex-end;
-            @include RV-Spacing__Inner--small;
+            gap: 20px;
        }
    }

    .LP-Form__Field {
-        @include RV-FlexRow__Item;
+        @include RV-Flex__Item;
    }

    .LP-Form__InfoText {
--- a/components/03_Organisms/imageGrid/_imageGrid.scss
+++ b/components/03_Organisms/imageGrid/_imageGrid.scss
@@ -1,11 +1,25 @@
-.LP-ImageGrid{
-	@include RV-FlexGrid(290px, 200px);
-	@include RV-ElementList;
-	@include RV-Spacing__Inner--small;
+@use "sass:math";

+.LP-ImageGrid{
+
+	&__Container {
+		@include RV-Grid;
+		@include RV-Grid--fixedSize;
+		--fixedSize: var(--itemWidth);
+		--itemWidth: 290px;
+		--itemHeight: 200px;
+		list-style-type: none;
+		--gap: #{$-spacing-small};
+	}
+	
    &__Item {
 		position: relative;
-		@include RV-ContentCrop;
+		
+		.LP-Image {
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+		}

 		&--add {
 			.LP-Link {
@@ -50,8 +64,8 @@
 			height: #{$-spacing-small * 2};
 			width: #{$-spacing-small * 2};
 			position:relative;
-			left: #{($-spacing-large - $-spacing-small) / 3.2};
-			top: #{($-spacing-large - $-spacing-small) / 3.2};
+			left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
+			top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
 		}
 	}
 	
@@ -91,9 +105,10 @@
 			pointer-events: initial;
 		}
 	}
-	
+
 	&__FullSizeImage {
 		grid-area: picture;
+		justify-self: center;
 	}
 	
 	&__Previous{
--- a/components/03_Organisms/imageGrid/imageGrid.hbs
+++ b/components/03_Organisms/imageGrid/imageGrid.hbs
@@ -4,7 +4,7 @@
        {{#each images}}
        <li class="LP-ImageGrid__Item">
            <a href="#{{this.current_id}}" class="LP-Link">
-                <img  class="LP-Image" src="{{this}}">
+                <img  class="LP-Image" src="{{this.url}}">
            </a>
            <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
                <a href="#" class="LP-Link">
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -1,76 +1,47 @@
 .LP-LinkList{
-	@include RV-FlexGrid(300px, 3em);
-	@include RV-ElementList;
-	@include RV-Spacing__Inner--small;
+	@include RV-Grid;
+	@include RV-Grid--autoWidth;
+	--itemMinWidth: 350px;
+	--itemHeight: 3em;
 	align-items: center;
-
+	--icon-color: #{$-light-brown};
+	
+	.RV-Iconized__Icon {
+		font-size: calc(var(--itemHeight) * .75);
+		line-height: 1em;
+		color: var(--icon-color);
+		transition: color .2s;
+	}
+	
    .LP-LinkList__Item{
+		font-weight: 500;
+		--color: #{$-grey};
 		border-left: 1px solid $-light-brown;
-		width: calc(100% - 1px);
-		overflow: hidden;
-		transition: background .3s, color .5s;
+		transition: background .2s;
+		height: 100%;

 		@include RV-Alignment--verticalCenter;
-		@include RV-FlexRow__Container;
-
-		.LP-LinkList__ItemHover {
-			opacity: 0.5;
-			@include RV-Alignment--right;
-			@include RV-FlexRow__Item--fixedSize(min-content);
-		}

 		&:hover {
-			background-color: $-almost-white;
+			background-color: $-beige;
+			--icon-color: #{$-grey};

 			.LP-LinkList__ItemHover {
 				opacity: 1;
 			}
 		}
+
+		&--addItem {
+			background-color: $-almost-white;
+			font-weight: bold;
+		}
 	}

 	.LP-Link {
-		@include RV-FlexRow__Item;
-		@include RV-Spacing__Inner--small;
-	}
-
-	.LP-LinkAdd{
-		height: 0;
-	}
-
-	.LP-LinkAdd__Container{
-		position: relative;
-		top: -39px;
-		
-	
-		.LP-Form__Fieldset{
-			min-width:unset;
-		}
-	
-		.LP-Form{
-			display: block;
-			min-width: 0px;
-		}
+		@include RV-Flex__Item;
+		padding-left: $-spacing-medium;
+		color: var(--color);
+		transition: color .2s;
 	}

 }
-
-.LP-LinkAdd{
-	display: none;
-}
-
-.LP-LinkAdd__Trigger {
-	display: none;
-}
-
-.LP-LinkAdd__TriggerLabel{
-	cursor: pointer;
-	display: contents;
-}
-
-.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
-	display: none;
-}
-
-.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
-	display: block;
-}
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -1,66 +1,74 @@
-<div class="LP-LinkList">
-	<ul class="LP-LinkList__Container">
-		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
-		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
-		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
-		<li class="LP-LinkList__Item">
-			<a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a>
-			<a href="google.com" class="LP-Link LP-LinkList__ItemHover">
-				<div class="RV-Iconized__Container RV-Iconized__Container--small">
-					<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001"
-						style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
-						<g>
-							<g>
-								<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
-			L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
-			c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
-			l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
-			L284.286,256.002z" />
-							</g>
-						</g>
-					</svg>
-				</div>
-			</a>
-		</li>
-		<li class="LP-LinkList__Item">
-			<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" />
-			<label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
-				<a class="LP-Link">
-					<div class="RV-Iconized__Container RV-Iconized__Container--small">
-						<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
-							xml:space="preserve">
-							<g>
-								<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
-    v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
-							</g>
-						</svg>
-						<span class="RV-Iconized__Text">Link hinzufügen</span>
-					</div>
-				</a>
-			</label>
-			<div class="LP-LinkAdd">
-				<span class="LP-LinkAdd__Container">
-					<form class="LP-Form LP-Form--inline">
-						<fieldset class="LP-Form__Fieldset">
-							<legend class="LP-Form__Legend">Basic data</legend>
-							<div class="LP-Form__Composition LP-Form__Composition--buttons">
-								<div class="LP-Form__Field LP-Form__Button LP-Input">
-									<input type="submit" class="LP-Button" value="Submit" />
-								</div>
-								<div class="LP-Form__Field LP-Form__Field--narrower">
-									<div class="LP-Input">
-										<label for="input123" class="LP-Input__Label">Link URL</label>
-										<input type="text" id="input123" class="LP-Input__Field" />
-									</div>
-								</div>
-							</div>
-						</fieldset>
-					</form>
+<ul class="LP-LinkList">
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				OSM
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Google Maps
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Photoalbum
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-camera-burst"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				YouTube Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-youtube"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Twitter Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-twitter"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Toller externer Blog
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-open-in-new"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item LP-LinkList__Item--addItem">
+		<a href="#" class="LP-Link">
+			<span class="LP-Text RV-Iconized">
+				<span class="RV-Iconized__Text">
+					Link Hinzufügen
 				</span>
-			</div>
-		</li>
-	</ul>
-</div>
+				<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+					<i class="mdi mdi-plus"></i>
+				</span>
+			</span>
+		</a>
+	</li>
+</ul>
--- a/components/03_Organisms/placeGrid/_placeGrid.scss
+++ b/components/03_Organisms/placeGrid/_placeGrid.scss
@@ -3,12 +3,17 @@
        margin: 0;
        padding: 0;
        list-style-type: none;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+		@include RV-Grid;
+		@include RV-Grid--autoWidth;
+		--itemHeight: 200px;
+		--itemMinWidth: 280px;
+		--gap: 15px;
+		padding: 15px;
+		justify-content: center;
+		

        .LP-PlaceGrid__Item{
-            margin: 18px;
+            @include RV-Grid__Item;
        }

        .LP-Link{
--- a/components/03_Organisms/placeList/_placeList.scss
+++ b/components/03_Organisms/placeList/_placeList.scss
@@ -27,7 +27,6 @@
            margin: 18px 0;
            @media (max-width: $-viewport-medium) {
                width: 100%;
-                margin-bottom: $-spacing-large;
            }
        }
    }
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -4,7 +4,6 @@
        max-width: 700px;
        max-height: 500px;
        width: 50%;
-		@include RV-BoxShadow--simple($-grey);
        box-shadow: 0 0 10px $-grey;
        object-fit: cover;
        object-position: 0 0;
@@ -20,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{
@@ -35,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/components/05_Pages/_pages.scss
+++ b/components/05_Pages/_pages.scss
@@ -1 +1 @@
-@import 'place/place';
+//@import 'place/place';
--- a/components/main.scss
+++ b/components/main.scss
@@ -1,4 +1,4 @@
-@import './rcss.bundled.scss';
+@import 'rcss.bundled';

 // Include primary fonts in regular, italic and bold each.
@font-face {
@@ -197,4 +197,4 @@ body {
@import '04_Templates/templates';
@import '05_Pages/pages';

-@import './tagify';
+//@import './tagify';
--- a/components/rcss.bundled.scss
+++ b/components/rcss.bundled.scss
--- a/package.json
+++ b/package.json
@@ -6,12 +6,11 @@
        "@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"
    },
    "scripts": {
-        "sass": "node-sass -w components/main.scss -o public/ --recursive",
+        "sass": "sass components/main.scss public/main.css --watch",
        "styleguide": "fractal start --sync",
        "suite": "npm run sass & npm run styleguide"
    }
--- a/public/main.css
+++ b/public/main.css
--- 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	b4508ee3e3	No SCSS errors anymore	2021-11-01 09:49:58 +01:00
reverend	c2cdefff6d	Fixing Rest of the Organisms	2021-11-01 09:47:33 +01:00
reverend	c2678fec85	Fixing ImageGrid and Lightbox	2021-11-01 09:43:20 +01:00
reverend	daaa3e11a7	Adapting ImageGrid	2021-10-24 19:39:00 +02:00
reverend	bbcbd19ef5	Adapting Form	2021-10-24 18:28:09 +02:00
reverend	dd69cbbaaf	Better Wrapping in the footer	2021-10-24 16:58:08 +02:00
reverend	db13ef4787	#50 Restyling LinkList and Removing Add Item Form	2021-10-24 16:03:16 +02:00
reverend	b264b3a559	Adapating Organisms / LinkList w Icons	2021-10-24 12:32:32 +02:00
Commander1024	e3688ed070	Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend	2021-10-18 16:30:32 +02:00
reverend	b7d1770044	Housekeeping	2021-10-18 16:02:28 +02:00
reverend	612052e0ce	Adapting LinkList to new RCSS	2021-10-18 16:02:20 +02:00
reverend	4ad580674a	so stupid js scss shit shuts the fuck up	2021-10-18 16:02:09 +02:00
reverend	739acb2e77	Iconzied Link Variant	2021-10-18 16:01:36 +02:00
reverend	2ba096e8f0	Checking Atoms	2021-10-18 16:01:28 +02:00
reverend	e775c11cc2	Removing imports in order to fix scss	2021-10-18 16:00:32 +02:00
reverend	6aa31e975f	New RCSS Version	2021-10-18 15:59:45 +02:00
reverend	0f909daeff	Fixing Watcher	2021-10-18 15:59:32 +02:00
Commander1024	6939d8823d	New generated CSS.	2021-10-09 01:46:39 +02:00
Commander1024	d34d72a675	Fixed mdi font paths.	2021-10-09 01:46:15 +02:00