From 5cef43206d224432c3c2b68b809b9348367dad2e Mon Sep 17 00:00:00 2001
From: Sebastian Lay <mail@sebastian-lay.de>
Date: Sun, 1 Aug 2021 17:52:23 +0200
Subject: [PATCH] Improved mobile view

---
 css/style.css | 44 +++++++++++++++++++++++++++++++++++++-------
 index.html    | 40 ++++++++++++++++++++++------------------
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6927d0f..09ba210 100644
--- a/css/style.css
+++ b/css/style.css
@@ -99,7 +99,7 @@ html {
 
 body {
   padding: 50px 75px;
-  min-width: 460px;
+  min-width: 370px;
   background: #ccc;
   text-align: left;
   overflow-y: scroll;
@@ -114,7 +114,7 @@ em {
 }
 
 input, button, select {
-  margin: 0 10px 10px 0;
+  margin: 0 10px 0 0;
   padding: 5px 10px;
   border: 1px solid #bbb;
   border-radius: 5px;
@@ -147,12 +147,19 @@ nav button:last-child {
   margin-right: 0;
 }
 
+aside > section {
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 10px;
+}
+
 select {
   padding: 3px 10px;
 }
 
 label {
   margin-right: 10px;
+  line-height: 36px;
 }
 
 h1 {
@@ -208,6 +215,7 @@ li {
 
 li.left {
   text-align: left;
+  margin: 10px;
 }
 
 li img {
@@ -288,15 +296,37 @@ p span a:last-child {
 
 /* media queries */
 
-@media (max-width: 600px) {
+@media (max-width: 1000px) {
+
+  body {
+    padding: 50px;
+  }
+  
+  }
+
+@media (max-width: 700px) {
 
 body {
-  padding: 25px 50px 50px 50px;
+  padding: 30px 10px;
 }
 
-input, select {
-  display: block;
-  width: 100%;
+header {
+  width: 330px;
+  margin: 20px auto 50px auto;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+aside > section {
+  flex-direction: column;
+  width: 330px;
+  margin: 20px auto;
+}
+
+input, button, select {
+  margin: 0 0 5px 0;
 }
 
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ed34849..d674cb6 100644
--- a/index.html
+++ b/index.html
@@ -18,24 +18,28 @@
     </header>
     <main>
       <aside>
-        <input placeholder="search" v-model="search" aria-label="search" />
-        <select v-model="type" aria-label="film type">
-          <option value="all">all types</option> 
-          <option value="black & white">black & white</option>
-          <option value="colornegative">color negative</option>
-          <option value="colorslide">color slide</option>
-        </select>
-        <select v-model="format" aria-label="film format">
-          <option value="all">all formats</option> 
-          <option value="110">110 - pocket film</option>
-          <option value="120">120 - medium format</option>
-          <option value="135">135 - 35mm film</option>
-        </select>
-        <br><label>sort by</label> 
-        <button v-on:click="sort" v-bind:class="[ sortBy === 'popularity' ? 'active' : '', sortBy === 'popularity' ? sortDir : '' ]">popularity</button>
-        <button v-on:click="sort" v-bind:class="[ sortBy === 'name' ? 'active' : '', sortBy === 'name' ? sortDir : '' ]">name</button>
-        <button v-on:click="sort" v-bind:class="[ sortBy === 'price' ? 'active' : '', sortBy === 'price' ? sortDir : '' ]">price</button>
-        <button v-on:click="sort" v-bind:class="[ sortBy === 'iso' ? 'active' : '', sortBy === 'iso' ? sortDir : '' ]">ISO</button>
+        <section>
+          <input placeholder="search" v-model="search" aria-label="search" />
+          <select v-model="type" aria-label="film type">
+            <option value="all">all types</option> 
+            <option value="black & white">black & white</option>
+            <option value="colornegative">color negative</option>
+            <option value="colorslide">color slide</option>
+          </select>
+          <select v-model="format" aria-label="film format">
+            <option value="all">all formats</option> 
+            <option value="110">110 - pocket film</option>
+            <option value="120">120 - medium format</option>
+            <option value="135">135 - 35mm film</option>
+          </select>
+        </section>
+        <section>
+          <label>sort by</label> 
+          <button v-on:click="sort" v-bind:class="[ sortBy === 'popularity' ? 'active' : '', sortBy === 'popularity' ? sortDir : '' ]">popularity</button>
+          <button v-on:click="sort" v-bind:class="[ sortBy === 'name' ? 'active' : '', sortBy === 'name' ? sortDir : '' ]">name</button>
+          <button v-on:click="sort" v-bind:class="[ sortBy === 'price' ? 'active' : '', sortBy === 'price' ? sortDir : '' ]">price</button>
+          <button v-on:click="sort" v-bind:class="[ sortBy === 'iso' ? 'active' : '', sortBy === 'iso' ? sortDir : '' ]">ISO</button>
+        </section>
       </aside>
       <ul v-cloak>
         <li v-for="film in films">