From edb1c9ff08f3a8f58ed836b151833e812e6057f3 Mon Sep 17 00:00:00 2001
From: paula0403 <paulinalipinskagdy@gmail.com>
Date: Wed, 14 Apr 2021 22:40:13 +0200
Subject: [PATCH 1/2] fix: styles for tablets added

---
 client/src/components/App/style.scss          | 21 ++++++++++++++
 .../src/components/CinemaHall/Seat/style.scss |  6 ++++
 client/src/components/CinemaHall/style.scss   | 21 ++++++++++++++
 client/src/components/Footer/style.scss       | 29 +++++++++++++++++++
 .../components/Navbar/CinemaForm/style.scss   | 14 +++++++++
 client/src/components/Navbar/style.scss       |  6 ++++
 client/src/components/Ticket/style.scss       | 22 +++++++++++++-
 client/src/domain/MovieInfoBar/style.scss     | 29 +++++++++++++++++++
 client/src/domain/MovieSlider/style.scss      | 18 ++++++++++++
 client/src/domain/MovieView/style.scss        | 21 ++++++++++++++
 .../Repertoire/RepertoireNav/style.scss       | 27 +++++++++++++++++
 11 files changed, 213 insertions(+), 1 deletion(-)

diff --git a/client/src/components/App/style.scss b/client/src/components/App/style.scss
index fe3e91a..0b9406d 100644
--- a/client/src/components/App/style.scss
+++ b/client/src/components/App/style.scss
@@ -117,3 +117,24 @@ ul {
     font-size: 32px;
   }
 }
+@media screen and (max-width: 800px) {
+  .button--submit {
+    width: 100px;
+    margin-top: 10px;
+    padding: 0;
+    font-size: 0.7rem;
+  }
+  .link {
+    &--button-style {
+      margin-top: 10px;
+      padding: 4px;
+      font-size: 0.7rem;
+    }
+  }
+  h4 {
+    font-size: 0.7rem;
+  }
+  h5 {
+    font-size: 0.7rem;
+  }
+}
diff --git a/client/src/components/CinemaHall/Seat/style.scss b/client/src/components/CinemaHall/Seat/style.scss
index 57ee64d..247b9c4 100644
--- a/client/src/components/CinemaHall/Seat/style.scss
+++ b/client/src/components/CinemaHall/Seat/style.scss
@@ -14,3 +14,9 @@
 .selected {
   background: #cc6600;
 }
+@media screen and (max-width: 800px) {
+  .hall__seat {
+    height: 20px;
+    margin: 0 2px;
+  }
+}
diff --git a/client/src/components/CinemaHall/style.scss b/client/src/components/CinemaHall/style.scss
index aa2f12e..73a2b4d 100644
--- a/client/src/components/CinemaHall/style.scss
+++ b/client/src/components/CinemaHall/style.scss
@@ -33,3 +33,24 @@
     }
   }
 }
+@media screen and (max-width: 800px) {
+  .cinema__hall {
+    &__name {
+      padding: 16px 0;
+      font-size: 0.7rem;
+    }
+    &__arrangement {
+      width: 50%;
+      padding: 16px;
+      &__seats {
+        padding-top: 20px;
+      }
+
+      &__screen {
+        width: 60%;
+        margin: 0 auto 8px auto;
+        font-size: 0.7rem;
+      }
+    }
+  }
+}
diff --git a/client/src/components/Footer/style.scss b/client/src/components/Footer/style.scss
index 33f2023..c9fa421 100644
--- a/client/src/components/Footer/style.scss
+++ b/client/src/components/Footer/style.scss
@@ -48,3 +48,32 @@
   color: #f1f1f1;
   letter-spacing: 2px;
 }
+@media screen and (max-width: 800px) {
+  .footer {
+    &__header {
+      letter-spacing: 6px;
+      font-size: 0.7rem;
+    }
+    &__list {
+      margin: 0 16px;
+      padding: 10px 0;
+      font-size: 7px;
+    }
+    &__item {
+      line-height: 1.5;
+      &:hover {
+        transition: none;
+      }
+      & span {
+        padding-right: 8px;
+      }
+    }
+    &-header {
+      font-size: 0.7rem;
+      letter-spacing: 3px;
+    }
+
+    font-size: 0.7rem;
+    letter-spacing: 1px;
+  }
+}
diff --git a/client/src/components/Navbar/CinemaForm/style.scss b/client/src/components/Navbar/CinemaForm/style.scss
index e027aff..ca55dbc 100644
--- a/client/src/components/Navbar/CinemaForm/style.scss
+++ b/client/src/components/Navbar/CinemaForm/style.scss
@@ -11,3 +11,17 @@
     border: thin solid gray;
   }
 }
+@media screen and (max-width: 800px) {
+  .cinema-city__form {
+    font-size: 0.7rem;
+    margin: 5px;
+    &__select {
+      width: 200px;
+      margin-left: 8px;
+      border: none;
+      padding: 7px;
+      font-size: 0.7rem;
+      border: thin solid gray;
+    }
+  }
+}
diff --git a/client/src/components/Navbar/style.scss b/client/src/components/Navbar/style.scss
index a8767cb..10b7d70 100644
--- a/client/src/components/Navbar/style.scss
+++ b/client/src/components/Navbar/style.scss
@@ -34,3 +34,9 @@
   display: flex;
   align-items: flex-start;
 }
+@media screen and (max-width: 800px) {
+  .navbar {
+    padding: 8px 16px;
+    font-size: 0.6rem;
+  }
+}
diff --git a/client/src/components/Ticket/style.scss b/client/src/components/Ticket/style.scss
index 84a3015..3ba377c 100644
--- a/client/src/components/Ticket/style.scss
+++ b/client/src/components/Ticket/style.scss
@@ -6,7 +6,7 @@
   &__heading {
     text-align: center;
   }
-  width: 432px;
+  max-width: 432px;
   border: 2px #6e093a solid;
   border-radius: 4px;
   background: $color-primary;
@@ -68,3 +68,23 @@
   width: 75%;
   margin: 0 auto;
 }
+@media screen and (max-width: 800px) {
+  .ticket {
+    max-width: 150px;
+    padding: 10px;
+    margin: 0 10px 20px;
+    &__type {
+      font-size: 0.7rem;
+    }
+    &__price {
+      font-size: 0.7rem;
+    }
+    & label {
+      padding: 6px 10px;
+      margin: 5px;
+    }
+  }
+  .ticket__list {
+    padding: 0 16px;
+  }
+}
diff --git a/client/src/domain/MovieInfoBar/style.scss b/client/src/domain/MovieInfoBar/style.scss
index eeec3de..96fb000 100644
--- a/client/src/domain/MovieInfoBar/style.scss
+++ b/client/src/domain/MovieInfoBar/style.scss
@@ -44,3 +44,32 @@
     cursor: pointer;
   }
 }
+@media screen and (max-width: 800px) {
+  .movie {
+    &__image {
+      &-container {
+        width: 150px;
+      }
+    }
+    &__info {
+      font-size: 0.7rem;
+      padding-left: 20px;
+      line-height: 1.5;
+      &-title {
+        font-size: 0.7rem;
+      }
+      &-bar {
+        padding: 16px;
+      }
+      &-details {
+        font-size: 0.7rem;
+      }
+    }
+  }
+  .button--submit {
+    width: 100px;
+    margin-top: 10px;
+    padding: 0;
+    font-size: 0.7rem;
+  }
+}
diff --git a/client/src/domain/MovieSlider/style.scss b/client/src/domain/MovieSlider/style.scss
index 00fd997..7853a0b 100644
--- a/client/src/domain/MovieSlider/style.scss
+++ b/client/src/domain/MovieSlider/style.scss
@@ -32,3 +32,21 @@
     padding: 0 32px;
   }
 }
+@media screen and (max-width: 800px) {
+  .slick {
+    &-slider {
+      height: 40vh;
+      margin-bottom: 30px;
+    }
+  }
+  .slider {
+    &_container {
+      height: 40vh;
+      padding: 20px;
+    }
+    & h2 {
+      padding: 0 16px;
+      font-size: 0.7rem;
+    }
+  }
+}
diff --git a/client/src/domain/MovieView/style.scss b/client/src/domain/MovieView/style.scss
index 0859a54..56e2e63 100644
--- a/client/src/domain/MovieView/style.scss
+++ b/client/src/domain/MovieView/style.scss
@@ -49,3 +49,24 @@
     padding-top: 16px;
   }
 }
+@media screen and (max-width: 800px) {
+  .movie {
+    &__view {
+      &__container {
+        width: 40%;
+      }
+      & h3 {
+        font-size: 20px;
+      }
+    }
+
+    &-container {
+      padding: 20px;
+    }
+  }
+
+  &__header {
+    font-size: 16px;
+    padding-top: 8px;
+  }
+}
diff --git a/client/src/domain/Repertoire/RepertoireNav/style.scss b/client/src/domain/Repertoire/RepertoireNav/style.scss
index 1531e7a..54816a9 100644
--- a/client/src/domain/Repertoire/RepertoireNav/style.scss
+++ b/client/src/domain/Repertoire/RepertoireNav/style.scss
@@ -17,3 +17,30 @@
     padding: 10px;
   }
 }
+@media screen and (max-width: 800px) {
+  .repertoire {
+    &__nav {
+      flex-direction: column;
+      align-items: center;
+      font-size: 0.7rem;
+      &__title {
+        font-size: 1rem;
+        margin: 5px;
+      }
+      &__picker {
+        background-color: #fff;
+        margin: 5px;
+      }
+    }
+  }
+  .react-date-picker {
+    &__button {
+      &__icon {
+        height: 12px;
+      }
+    }
+    &__wrapper {
+      padding: 5px;
+    }
+  }
+}

From 0be0b2d72cd89a6d0a47a9fd21001f1c2509295f Mon Sep 17 00:00:00 2001
From: paula0403 <paulinalipinskagdy@gmail.com>
Date: Tue, 20 Apr 2021 12:10:02 +0200
Subject: [PATCH 2/2] fix:styles changed

---
 client/src/components/App/style.scss          | 13 -----
 .../src/components/CinemaHall/Seat/style.scss |  3 +-
 client/src/components/Ticket/style.scss       | 18 +++----
 .../domain/Repertoire/RepertoireNav/index.js  |  2 +-
 .../Repertoire/RepertoireNav/style.scss       | 52 +++++++++++++++++++
 client/src/domain/ReservationView/style.scss  | 22 ++++++++
 6 files changed, 86 insertions(+), 24 deletions(-)

diff --git a/client/src/components/App/style.scss b/client/src/components/App/style.scss
index 0b9406d..7b885cd 100644
--- a/client/src/components/App/style.scss
+++ b/client/src/components/App/style.scss
@@ -124,17 +124,4 @@ ul {
     padding: 0;
     font-size: 0.7rem;
   }
-  .link {
-    &--button-style {
-      margin-top: 10px;
-      padding: 4px;
-      font-size: 0.7rem;
-    }
-  }
-  h4 {
-    font-size: 0.7rem;
-  }
-  h5 {
-    font-size: 0.7rem;
-  }
 }
diff --git a/client/src/components/CinemaHall/Seat/style.scss b/client/src/components/CinemaHall/Seat/style.scss
index 247b9c4..d7a68b0 100644
--- a/client/src/components/CinemaHall/Seat/style.scss
+++ b/client/src/components/CinemaHall/Seat/style.scss
@@ -16,7 +16,8 @@
 }
 @media screen and (max-width: 800px) {
   .hall__seat {
-    height: 20px;
+    min-height: 10px;
+    padding: 4px;
     margin: 0 2px;
   }
 }
diff --git a/client/src/components/Ticket/style.scss b/client/src/components/Ticket/style.scss
index 3ba377c..a660ef7 100644
--- a/client/src/components/Ticket/style.scss
+++ b/client/src/components/Ticket/style.scss
@@ -71,20 +71,20 @@
 @media screen and (max-width: 800px) {
   .ticket {
     max-width: 150px;
-    padding: 10px;
-    margin: 0 10px 20px;
+    padding: 6px;
+    margin: 0 8px 16px;
+    &__heading {
+      font-size: 0.6rem;
+      margin: 0 auto;
+    }
     &__type {
-      font-size: 0.7rem;
+      font-size: 0.5rem;
     }
     &__price {
-      font-size: 0.7rem;
+      font-size: 0.5rem;
     }
     & label {
-      padding: 6px 10px;
-      margin: 5px;
+      padding: 5px;
     }
   }
-  .ticket__list {
-    padding: 0 16px;
-  }
 }
diff --git a/client/src/domain/Repertoire/RepertoireNav/index.js b/client/src/domain/Repertoire/RepertoireNav/index.js
index ee78320..0e2c047 100644
--- a/client/src/domain/Repertoire/RepertoireNav/index.js
+++ b/client/src/domain/Repertoire/RepertoireNav/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import './style.scss';
 import DatePicker from 'react-date-picker';
 import 'react-date-picker/dist/DatePicker.css';
 import CinemaForm from '../../../components/Navbar/CinemaForm';
+import './style.scss';
 
 function RepertoireNav({ selectedDate, setSelectedDate }) {
   const handleDate = (date) => {
diff --git a/client/src/domain/Repertoire/RepertoireNav/style.scss b/client/src/domain/Repertoire/RepertoireNav/style.scss
index 54816a9..6a21443 100644
--- a/client/src/domain/Repertoire/RepertoireNav/style.scss
+++ b/client/src/domain/Repertoire/RepertoireNav/style.scss
@@ -43,4 +43,56 @@
       padding: 5px;
     }
   }
+  .react-calendar {
+    max-width: 200px;
+    &__navigation {
+      &__label {
+        font-size: 0.6rem;
+      }
+      button {
+        min-width: 20px;
+      }
+    }
+    &__month {
+      &-view {
+        &__weekdays {
+          &__weekday {
+            font-size: 0.5rem;
+          }
+        }
+        &__days {
+          &__day {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__year {
+      &-view {
+        &__months {
+          &__month {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__decade {
+      &-view {
+        &__years {
+          &__year {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__century {
+      &-view {
+        &__decades {
+          &__decade {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/client/src/domain/ReservationView/style.scss b/client/src/domain/ReservationView/style.scss
index 3e1eedd..6d544bb 100644
--- a/client/src/domain/ReservationView/style.scss
+++ b/client/src/domain/ReservationView/style.scss
@@ -30,3 +30,25 @@
     }
   }
 }
+@media screen and (max-width: 800px) {
+  .reservation {
+    & h4 {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    & h5 {
+      font-size: 20px;
+      margin-bottom: 16px;
+    }
+    &__form {
+      & input {
+        font-size: 0.7rem;
+        max-width: 200px;
+      }
+      & h5 {
+        margin-bottom: 20px;
+        font-size: 16px;
+      }
+    }
+  }
+}