zane
/
rating-room
mirror of https://github.com/zschaffer/rating-room.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added mobile layout (#68)

This commit is contained in:
Xinrui Chen 2022-10-09 17:53:45 -07:00 committed by GitHub
parent 2101b2a416
commit 4d3bb8edd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 103 additions and 5952 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -10,7 +10,8 @@
"dependencies": {
"@sanity/client": "^3.3.2",
"@sanity/image-url": "^1.0.1",
"@sanity/types": "^2.29.5"
"@sanity/types": "^2.29.5",
"svelte-media-query": "^1.1.2"
},
"devDependencies": {
"@babel/preset-env": "^7.18.9",
@ -12587,6 +12588,11 @@
"svelte": ">= 3"
}
},
"node_modules/svelte-media-query": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/svelte-media-query/-/svelte-media-query-1.1.2.tgz",
"integrity": "sha512-wprqLjnTDhHsoCwCobMp06laiBb9sz8FeKQixEm9teS0tbPb2nmlzy3vlbDX5MPwNRyNML1/1SHmshQQnQ77+w=="
},
"node_modules/svelte-preprocess": {
"version": "4.10.7",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
@ -22905,6 +22911,11 @@
"dev": true,
"requires": {}
},
"svelte-media-query": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/svelte-media-query/-/svelte-media-query-1.1.2.tgz",
"integrity": "sha512-wprqLjnTDhHsoCwCobMp06laiBb9sz8FeKQixEm9teS0tbPb2nmlzy3vlbDX5MPwNRyNML1/1SHmshQQnQ77+w=="
},
"svelte-preprocess": {
"version": "4.10.7",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",

3
package.json
View File

@ -55,7 +55,8 @@
"dependencies": {
"@sanity/client": "^3.3.2",
"@sanity/image-url": "^1.0.1",
"@sanity/types": "^2.29.5"
"@sanity/types": "^2.29.5",
"svelte-media-query": "^1.1.2"
},
"config": {
"commitizen": {

90
src/lib/Feature/Feature.svelte
View File

@ -4,65 +4,69 @@
import Rating from './Rating/Rating.svelte';
import PrevNext from './PrevNext/PrevNext.svelte';
import Tag from './Tag/Tag.svelte';
import MediaQuery from 'svelte-media-query';
</script>
<div class="flex flex-col">
<div class="flex m-16 gap-12 w-full">
{#if $currentProduct.image}
<img
src={urlFor($currentProduct.image).url()}
class="min-w-36 min-h-36 w-72 h-72 border-black border-2 p-3"
alt={$currentProduct.name}
/>
<MediaQuery query="(min-width: 640px)" let:matches>
<div class="flex flex-col w-full">
{#if !matches}<PrevNext on:toProduct />{/if}
<div class="flex sm:flex-row flex-col m-0 sm:p-16 gap-12 w-full">
{#if $currentProduct.image}
<img
src={urlFor($currentProduct.image).url()}
class="min-w-36 min-h-36 w-72 h-72 m-auto border-black border-2 p-3"
alt={$currentProduct.name}
/>
{/if}
<div class="productInfo">
{#if $currentProduct.subname}
<span class="subname">{$currentProduct.subname}</span>
{/if}
<a
href={$currentProduct?.url}
target="_blank"
class={`font-bold text-2xl title ${$currentProduct.url ? 'text-sky-600' : ''}`}
>{$currentProduct.name}</a
>
{#if $currentProduct.tags}
<div class="tags">
{#each $currentProduct.tags as tag (tag._ref)}
<Tag {tag} />
{/each}
</div>
{/if}
{#if $currentProduct.description}
<p class="description">{$currentProduct.description}</p>
{/if}
<p class="date sm:block hidden">Created on: {new Date($currentProduct._createdAt)}</p>
</div>
</div>
{#if $currentProduct.rating}
<div class="ratings">
{#each $currentProduct.rating as rating (rating._key)}
<Rating {rating} />
{/each}
</div>
{/if}
<div class="productInfo">
{#if $currentProduct.subname}
<span class="subname">{$currentProduct.subname}</span>
{/if}
<a
href={$currentProduct?.url}
target="_blank"
class={`font-bold text-2xl title ${$currentProduct.url ? 'text-sky-600' : ''}`}
>{$currentProduct.name}</a
>
{#if $currentProduct.tags}
<div class="tags">
{#each $currentProduct.tags as tag (tag._ref)}
<Tag {tag} />
{/each}
</div>
{/if}
{#if $currentProduct.description}
<p class="description">{$currentProduct.description}</p>
{/if}
<p class="date">Created on: {new Date($currentProduct._createdAt)}</p>
</div>
{#if matches}<PrevNext on:toProduct />{/if}
</div>
{#if $currentProduct.rating}
<div class="ratings">
{#each $currentProduct.rating as rating (rating._key)}
<Rating {rating} />
{/each}
</div>
{/if}
<PrevNext on:toProduct />
</div>
</MediaQuery>
<style lang="postcss">
.productInfo {
@apply flex flex-col gap-2;
@apply flex flex-col gap-2 w-4/5 sm:w-full m-auto text-center sm:text-left;
}
.subname {
@apply -mb-2 font-light text-sm;
}
.description {
@apply leading-5;
@apply text-sm sm:text-base mb-2;
}
.date {
@apply text-xs w-2/3 mt-auto mb-4;
@apply text-xs w-2/3 m-auto sm:m-0 mt-auto mb-4;
}
.tags {
@apply flex gap-1 mb-1;
@apply flex gap-1 mb-1 sm:justify-start justify-center;
}
.ratings {
@apply w-full;

2
src/lib/Feature/PrevNext/PrevNext.svelte
View File

@ -19,7 +19,7 @@
};
const { container, btn } = {
container: 'flex justify-between m-16 mt-2 mb-6 h-12',
container: 'flex justify-between m-4 sm:m-16 sm:mt-2 sm:mb-6 h-auto sm:h-12 text-sm',
btn: 'flex items-center justify-end'
};
</script>

6
src/lib/Feature/Rating/Rating.svelte
View File

@ -15,8 +15,10 @@
}
const { container, emotion, emotionName, details, name, comments, ratingStars, spacer, img } = {
container: 'border border-1 border-black h-full min-h-36 m-16 mt-0 mb-4 flex w-100',
emotion: 'w-56 flex-shrink-0 bg-gray-100 flex flex-col items-center p-2 justify-evenly h-100',
container:
'border border-1 border-black h-full min-h-36 mx-6 mb-2 sm:m-16 sm:mt-0 sm:mb-4 flex w-100',
emotion:
'hidden sm:flex w-56 flex-shrink-0 bg-gray-100 flex flex-col items-center p-2 justify-evenly h-100',
emotionName: 'text-sm',
details: 'flex flex-col p-4',
name: 'text-xl font-bold',

9
src/lib/Layout/Header.svelte
View File

@ -1,13 +1,20 @@
<script>
export let reset;
import MediaQuery from 'svelte-media-query';
</script>
<a href="/" class="title" on:click={reset}> Rating Room </a>
<MediaQuery query="(min-width: 640px)" let:matches>
<a href="/" class="title" on:click={reset} class:mobile={!matches}> Rating Room </a>
</MediaQuery>
<style lang="postcss">
.title {
@apply font-bold p-4 pr-0 snap-start sticky top-0 bg-white h-12 shadow-sm shadow-white;
}
.mobile {
@apply w-full text-center mx-auto;
}
a:hover {
background-image: url('dither.gif');
background-repeat: repeat;

4
src/lib/Layout/Mobile/Mobile.svelte Normal file
View File

@ -0,0 +1,4 @@
<script lang="ts">
</script>
<div />

15
src/lib/Layout/Search.svelte
View File

@ -1,15 +1,20 @@
<script>
import { products, productsView } from '$lib/stores';
import { products, productsView, currentProduct } from '$lib/stores';
import { includesName } from '$helpers';
import MediaQuery from 'svelte-media-query';
const searchProducts = (e) => {
productsView.set($products.filter((product) => includesName(e.target.value, product)));
};
</script>
<div class="container">
<input on:input={searchProducts} class="input" placeholder="search" />
</div>
<MediaQuery query="(min-width: 640px)" let:matches>
{#if matches || !Object.keys($currentProduct).length}
<div class="container">
<input on:input={searchProducts} class="input" placeholder="search" />
</div>
{/if}
</MediaQuery>
<style lang="postcss">
.container {
@ -17,6 +22,6 @@
}
.input {
@apply outline outline-1 w-28 focus:outline-blue-600 p-1 text-sm;
@apply outline outline-1 w-4/5 sm:w-28 focus:outline-blue-600 p-1 text-sm;
}
</style>

22
src/routes/__layout.svelte
View File

@ -7,6 +7,7 @@
import Search from '$lib/Layout/Search.svelte';
import Filters from '$lib/Layout/Filters.svelte';
import Sort from '$lib/Layout/Sort.svelte';
import MediaQuery from 'svelte-media-query';
const reset = () => {
productsView.set($products);
@ -21,23 +22,28 @@
<Header {reset} />
<div class="sidebar">
<Search />
{#if !Object.keys($currentProduct).length}
<Filters {reset} />
<Sort />
{:else}
<Products productsView={$productsView} {currentProduct} on:toProduct={goToProduct} />
{/if}
<MediaQuery query="(min-width: 640px)" let:matches>
{#if matches}
{#if !Object.keys($currentProduct).length}
<Filters {reset} />
<Sort />
{:else}
<Products productsView={$productsView} {currentProduct} on:toProduct={goToProduct} />
{/if}
{/if}
</MediaQuery>
</div>
</div>
<slot />
</main>
<style lang="postcss">
.main {
@apply flex w-screen h-screen;
@apply flex w-screen h-screen flex-col sm:flex-row;
}
.container {
@apply flex flex-col h-screen justify-start shrink-0 overflow-auto w-40;
@apply flex flex-col justify-start shrink-0 overflow-auto m-auto sm:w-40 sm:h-screen sm:m-0;
}
.sidebar {
@apply flex flex-col shrink-0;

2
src/routes/index.svelte
View File

@ -34,6 +34,6 @@
<style lang="postcss">
.container {
@apply h-screen overflow-auto w-screen;
@apply h-screen overflow-auto w-full;
}
</style>

5889
yarn.lock
View File

File diff suppressed because it is too large Load Diff