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 {
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;
}
}

40
index.html
View File

@ -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">