From 3f29a83f3feaa352c8233be447020493a644b2a4 Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 10:57:00 +0200 Subject: [PATCH 1/5] 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 From 1195aef920023efb8796f639be17b8ccf5fbf2ae Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 10:57:49 +0200 Subject: [PATCH 2/5] Using extended version of placeteaesr --- components/03_Organisms/placeList/placeList.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/03_Organisms/placeList/placeList.hbs b/components/03_Organisms/placeList/placeList.hbs index 10da3d5..3e72217 100644 --- a/components/03_Organisms/placeList/placeList.hbs +++ b/components/03_Organisms/placeList/placeList.hbs @@ -4,7 +4,7 @@ {{#each places}}
  • - {{> @placeteaser image=this.image title=this.name location=this.location description=this.description}} + {{> @placeteaser image=this.image title=this.name location=this.location description=this.description modifier='--extended'}}
  • {{/each}} From bf3ebf0e02f7a315cda304a8df52b6a63cc3a5bf Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 10:59:01 +0200 Subject: [PATCH 3/5] Minor fix --- components/02_Molecules/placeTeaser/_placeTeaser.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss index 5d382da..63ae53d 100644 --- a/components/02_Molecules/placeTeaser/_placeTeaser.scss +++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss @@ -1,5 +1,6 @@ .LP-PlaceTeaser{ width: 280px; + height: 165px; .LP-PlaceTeaser__Image{ height: 165px; From d174d59197b5aca80610385c222b4cd3e6e29e39 Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 11:04:49 +0200 Subject: [PATCH 4/5] Placelist small viewport --- components/02_Molecules/placeTeaser/_placeTeaser.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss index 63ae53d..58a8627 100644 --- a/components/02_Molecules/placeTeaser/_placeTeaser.scss +++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss @@ -1,6 +1,5 @@ .LP-PlaceTeaser{ width: 280px; - height: 165px; .LP-PlaceTeaser__Image{ height: 165px; @@ -42,12 +41,15 @@ color: $-grey; display: none; } +} - &--extended{ +@media(min-width: $-viewport-small){ + .LP-PlaceTeaser--extended{ display: flex; flex-direction: row; width: auto; padding-right: 25px; + height: 165px; .LP-PlaceTeaser__Meta{ margin: 0; @@ -88,5 +90,4 @@ } } - } \ No newline at end of file From ed6527925bc6a1447464fa89583c3812c5c1a703 Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 11:07:29 +0200 Subject: [PATCH 5/5] PlaceGrid and PlaceList look on small viewport the same --- components/03_Organisms/placeGrid/_placeGrid.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/03_Organisms/placeGrid/_placeGrid.scss b/components/03_Organisms/placeGrid/_placeGrid.scss index 90908e2..c53c215 100644 --- a/components/03_Organisms/placeGrid/_placeGrid.scss +++ b/components/03_Organisms/placeGrid/_placeGrid.scss @@ -8,8 +8,7 @@ flex-wrap: wrap; .LP-PlaceGrid__Item{ - margin: 0 15px; - margin-bottom: 50px; + margin: 18px; } .LP-Link{