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
2 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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