From 3f29a83f3feaa352c8233be447020493a644b2a4 Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 10:57:00 +0200 Subject: [PATCH] Extended Version of the placeteaser --- .../placeTeaser/_placeTeaser.scss | 46 ++++++++++ .../placeTeaser/placeTeaser.config.json | 10 ++- .../02_Molecules/placeTeaser/placeTeaser.hbs | 2 +- .../03_Organisms/placeList/_placeList.scss | 84 ++++++------------- .../placeList/placeList.config.json | 32 ++++++- .../03_Organisms/placeList/placeList.hbs | 44 +++------- 6 files changed, 126 insertions(+), 92 deletions(-) diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss index 4b79227..5d382da 100644 --- a/components/02_Molecules/placeTeaser/_placeTeaser.scss +++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss @@ -42,4 +42,50 @@ display: none; } + &--extended{ + display: flex; + flex-direction: row; + width: auto; + padding-right: 25px; + + .LP-PlaceTeaser__Meta{ + margin: 0; + padding: 5px; + padding-left: 25px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + .LP-PlaceTeaser__Info{ + .LP-Headline{ + font-size: 28px; + } + } + + .LP-PlaceTeaser__Icons{ + margin-top: auto; + + ul{ + padding: 0; + margin: 0; + } + } + } + + .LP-PlaceTeaser__Description{ + display: block; + max-height: 55px; + overflow: hidden; + } + + .LP-PlaceTeaser__Image{ + height:165px; + width: 280px; + flex-shrink: 0; + flex-grow: 0; + + } + } + } \ No newline at end of file diff --git a/components/02_Molecules/placeTeaser/placeTeaser.config.json b/components/02_Molecules/placeTeaser/placeTeaser.config.json index b5f7a8b..8796219 100644 --- a/components/02_Molecules/placeTeaser/placeTeaser.config.json +++ b/components/02_Molecules/placeTeaser/placeTeaser.config.json @@ -4,5 +4,13 @@ "title": "Kokerei Wiescherhöfen", "location": "Hamm (Westfalen)", "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " - } + }, + "variants": [ + { + "name": "Extended", + "context": { + "modifier": "--extended" + } + } + ] } \ No newline at end of file diff --git a/components/02_Molecules/placeTeaser/placeTeaser.hbs b/components/02_Molecules/placeTeaser/placeTeaser.hbs index 615d032..fa5c68c 100644 --- a/components/02_Molecules/placeTeaser/placeTeaser.hbs +++ b/components/02_Molecules/placeTeaser/placeTeaser.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/components/03_Organisms/placeList/_placeList.scss b/components/03_Organisms/placeList/_placeList.scss index 45516ae..7662cfb 100644 --- a/components/03_Organisms/placeList/_placeList.scss +++ b/components/03_Organisms/placeList/_placeList.scss @@ -1,58 +1,28 @@ -.LP-Place__List{ - list-style-type: none; - - .LP-Link{ - .LP-Place{ - &:hover{ - color: $-grey; - background-color: $-almost-white; - - - $-hover-offset: 2px; - position: relative; - left: -$-hover-offset; - >.LP-Place__Image{ - border-left: $-hover-offset $-grey solid; - } - } - } - } - - .LP-Place__Item{ - max-width: 900px; - min-width: 450px; - margin: 18px 0; - .LP-Place{ - display: flex; - flex-direction: row; - width: auto; - padding-right: 25px; - - .LP-Place__Assets{ - margin: 0; - padding: 0; - padding-left: 25px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - - .LP-Place__Info{ - .LP-Place__Title{ - font-size: 28px; - } - } - - .LP-Icon__List{ - justify-self: flex-end; - } - } - - >.LP-Place__Image{ - height:168px; - width: 280px; - } - } - - } +.LP-PlaceList{ + .LP-PlaceList__List{ + list-style-type: none; + + .LP-Link{ + .LP-Place{ + &:hover{ + color: $-grey; + background-color: $-almost-white; + + + $-hover-offset: 2px; + position: relative; + left: -$-hover-offset; + >.LP-Place__Image{ + border-left: $-hover-offset $-grey solid; + } + } + } + } + + .LP-PlaceList__Item{ + max-width: 900px; + min-width: 450px; + margin: 18px 0; + } + } } \ No newline at end of file diff --git a/components/03_Organisms/placeList/placeList.config.json b/components/03_Organisms/placeList/placeList.config.json index 9e26dfe..5ea0c55 100644 --- a/components/03_Organisms/placeList/placeList.config.json +++ b/components/03_Organisms/placeList/placeList.config.json @@ -1 +1,31 @@ -{} \ No newline at end of file +{ + "title": "PlaceList", + "context": { + "places": [ + { + "image": "/images/photo_2020-04-09_18-27-13.jpg", + "name": "Haus Maikotten", + "location": "Münster (westfalen)", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + }, + { + "image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png", + "name": "Kokerei in Hamm", + "location": "Hamm (westfalen)", + "description": "" + }, + { + "image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png", + "name": "Noch ein Zementwerk", + "location": "Beckum (Westfalen)", + "description": "" + }, + { + "image": "/images/photo_2020-05-02_18-11-21.jpg", + "name": "Zementwerk Mersmann", + "location": "Beckum (Westfalen)", + "description": "" + } + ] + } +} \ No newline at end of file diff --git a/components/03_Organisms/placeList/placeList.hbs b/components/03_Organisms/placeList/placeList.hbs index 16e8c10..10da3d5 100644 --- a/components/03_Organisms/placeList/placeList.hbs +++ b/components/03_Organisms/placeList/placeList.hbs @@ -1,32 +1,12 @@ - \ No newline at end of file +
+ {{> @headline headline='Listing our places'}} + +
\ No newline at end of file