gronod/analog-film-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved mobile view

Browse Source
This commit is contained in:
Sebastian Lay 2021-08-01 17:52:23 +02:00
parent a69c7eb189
commit 5cef43206d
No known key found for this signature in database
GPG Key ID: A699D9B80D6068AA
2 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/style.css
View File

@ -99,7 +99,7 @@ html {
body { body {
padding: 50px 75px; padding: 50px 75px;
min-width: 460px; min-width: 370px;
background: #ccc; background: #ccc;
text-align: left; text-align: left;
overflow-y: scroll; overflow-y: scroll;
@ -114,7 +114,7 @@ em {
} }
input, button, select { input, button, select {
margin: 0 10px 10px 0; margin: 0 10px 0 0;
padding: 5px 10px; padding: 5px 10px;
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius: 5px; border-radius: 5px;
@ -147,12 +147,19 @@ nav button:last-child {
margin-right: 0; margin-right: 0;
} }
aside > section {
display: flex;
align-items: stretch;
margin-bottom: 10px;
}
select { select {
padding: 3px 10px; padding: 3px 10px;
} }
label { label {
margin-right: 10px; margin-right: 10px;
line-height: 36px;
} }
h1 { h1 {
@ -208,6 +215,7 @@ li {
li.left { li.left {
text-align: left; text-align: left;
margin: 10px;
} }
li img { li img {
@ -288,15 +296,37 @@ p span a:last-child {
/* media queries */ /* media queries */
@media (max-width: 600px) { @media (max-width: 1000px) {
body {
padding: 50px;
}
}
@media (max-width: 700px) {
body { body {
padding: 25px 50px 50px 50px; padding: 30px 10px;
} }
input, select { header {
display: block; width: 330px;
width: 100%; 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;
} }
} }

6
index.html
View File

@ -18,6 +18,7 @@
</header> </header>
<main> <main>
<aside> <aside>
<section>
<input placeholder="search" v-model="search" aria-label="search" /> <input placeholder="search" v-model="search" aria-label="search" />
<select v-model="type" aria-label="film type"> <select v-model="type" aria-label="film type">
<option value="all">all types</option> <option value="all">all types</option>
@ -31,11 +32,14 @@
<option value="120">120 - medium format</option> <option value="120">120 - medium format</option>
<option value="135">135 - 35mm film</option> <option value="135">135 - 35mm film</option>
</select> </select>
<br><label>sort by</label> </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 === '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 === '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 === 'price' ? 'active' : '', sortBy === 'price' ? sortDir : '' ]">price</button>
<button v-on:click="sort" v-bind:class="[ sortBy === 'iso' ? 'active' : '', sortBy === 'iso' ? sortDir : '' ]">ISO</button> <button v-on:click="sort" v-bind:class="[ sortBy === 'iso' ? 'active' : '', sortBy === 'iso' ? sortDir : '' ]">ISO</button>
</section>
</aside> </aside>
<ul v-cloak> <ul v-cloak>
<li v-for="film in films"> <li v-for="film in films">