From c190940fffe75fd046bffead10c4267971856fd6 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 29 Sep 2020 22:11:02 +0200
Subject: [PATCH] Tweaking teaser / teaser list on mobile viewport

---
 .../placeTeaser/_placeTeaser.scss             | 18 ++++++++++---
 .../03_Organisms/placeList/_placeList.scss    |  6 +++++
 .../placeDetail/_placeDetail.scss             |  2 +-
 public/main.css                               | 25 ++++++++++++++-----
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss
index 1787fef..048d6be 100644
--- a/components/02_Molecules/placeTeaser/_placeTeaser.scss
+++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss
@@ -1,9 +1,8 @@
 .LP-PlaceTeaser{
-    width: 280px;
+    width: 100%;
 
     .LP-PlaceTeaser__Image{
-        height: 165px;
-        width: 280px;
+        width: 100%;
         overflow: hidden;
 
         .LP-Image{
@@ -15,6 +14,8 @@
 
     .LP-PlaceTeaser__Meta{
         display: flex;
+        flex-wrap: wrap;
+        gap: $-spacing-small;
         align-items: center;
         justify-content: space-between;
         padding: 5px;
@@ -41,11 +42,20 @@
     .LP-PlaceTeaser__Description{
         font-family: $-primary-sans-serif-font;
         color: $-grey;
-        display: none;
+        order: 3;
+        flex-basis: 100%;
     }
 }
 
 @media(min-width: $-viewport-small){
+    .LP-PlaceTeaser {
+        width: 280px;
+
+        &__Image {
+            width: 280px;
+            height: 165px;
+        }
+    }
     .LP-PlaceTeaser--extended{
         display: flex;
         flex-direction: row;
diff --git a/components/03_Organisms/placeList/_placeList.scss b/components/03_Organisms/placeList/_placeList.scss
index e623ea3..814363a 100644
--- a/components/03_Organisms/placeList/_placeList.scss
+++ b/components/03_Organisms/placeList/_placeList.scss
@@ -1,6 +1,8 @@
 .LP-PlaceList{
     .LP-PlaceList__List{
         list-style-type: none;
+        padding: 0;
+        margin: 0;
     
         .LP-Link{
             .LP-Place{
@@ -23,6 +25,10 @@
             max-width: 900px;
             //min-width: 450px;
             margin: 18px 0;
+            @media (max-width: $-viewport-medium) {
+                width: 100%;
+                margin-bottom: $-spacing-large;
+            }
         }
     }
     
diff --git a/components/04_Templates/placeDetail/_placeDetail.scss b/components/04_Templates/placeDetail/_placeDetail.scss
index 486c7ad..3312fd5 100644
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -20,7 +20,7 @@
     }
 }
 
-@media (max-width: $-viewport-normal){
+@media (max-width: $-viewport-medium){
     .LP-PlaceDetail{
         .LP-PlaceDetail__Header{
             .LP-PlaceDetail__Image{
diff --git a/public/main.css b/public/main.css
index 8540123..dbdbcc8 100644
--- a/public/main.css
+++ b/public/main.css
@@ -862,10 +862,9 @@ body {
     margin: 0 3px; }
 
 .LP-PlaceTeaser {
-  width: 280px; }
+  width: 100%; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Image {
-    height: 165px;
-    width: 280px;
+    width: 100%;
     overflow: hidden; }
     .LP-PlaceTeaser .LP-PlaceTeaser__Image .LP-Image {
       max-width: unset;
@@ -873,6 +872,8 @@ body {
       object-fit: cover; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Meta {
     display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
     align-items: center;
     justify-content: space-between;
     padding: 5px;
@@ -893,9 +894,15 @@ body {
   .LP-PlaceTeaser .LP-PlaceTeaser__Description {
     font-family: "Montserrat", Helvetica, sans-serif;
     color: #565656;
-    display: none; }
+    order: 3;
+    flex-basis: 100%; }
 
 @media (min-width: 650px) {
+  .LP-PlaceTeaser {
+    width: 280px; }
+    .LP-PlaceTeaser__Image {
+      width: 280px;
+      height: 165px; }
   .LP-PlaceTeaser--extended {
     display: flex;
     flex-direction: row;
@@ -1069,7 +1076,9 @@ body {
     box-shadow: 0 0 2px #565656; }
 
 .LP-PlaceList .LP-PlaceList__List {
-  list-style-type: none; }
+  list-style-type: none;
+  padding: 0;
+  margin: 0; }
   .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover {
     color: #565656;
     background-color: #f9f9f9;
@@ -1080,6 +1089,10 @@ body {
   .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
     max-width: 900px;
     margin: 18px 0; }
+    @media (max-width: 750px) {
+      .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
+        width: 100%;
+        margin-bottom: 35px; } }
 
 .LP-PlaceList .LP-Pagination {
   margin-top: 50px; }
@@ -1688,7 +1701,7 @@ body {
   margin-right: 25px;
   overflow: hidden; }
 
-@media (max-width: 1000px) {
+@media (max-width: 750px) {
   .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
     float: none;
     width: 100%;