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

feat: added link to product title, updated dithering fx

This commit is contained in:
Xinrui Chen 2022-07-24 10:40:39 -07:00
parent 84f1f0bc15
commit 7858a6cd39
2 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,24 @@
import PrevNext from './PrevNext/PrevNext.svelte';
import Tag from './Tag/Tag.svelte';
const { container, imageView, name, description, productInfo, date, tags, img, ratings } = {
const {
container,
imageView,
subname,
description,
productInfo,
date,
tags,
img,
ratings
} = {
container: 'flex flex-col',
imageView: 'flex m-16 gap-12 w-100',
productInfo: 'flex flex-col gap-2',
name: 'font-bold text-2xl',
subname: '-mb-2 font-light text-sm',
description: 'leading-5',
date: 'text-xs w-2/3 mt-auto mb-4',
tags: 'flex gap-1',
tags: 'flex gap-1 mb-1',
img: 'p-8 border w-72 h-72 min-w-36 min-h-36 border-black border-2 p-3',
ratings: 'w-100'
};
@ -21,10 +31,13 @@
<div class={container}>
<div class={imageView}>
{#if $currentProduct.image}
<img src={urlFor($currentProduct.image).url()} class={img} alt={$currentProduct.name} />
<img src={urlFor($currentProduct.image).url()} class={img} alt={$currentProduct.name} />
{/if}
<div class={productInfo}>
<p class={name}>{$currentProduct.name}</p>
{#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)}
@ -52,4 +65,8 @@
img {
image-rendering: pixelated;
}
.title:hover, img:hover{
background-image: url('dither.gif');
background-repeat: repeat;
}
</style>

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

@ -16,14 +16,14 @@
};
const { container, btn } = {
container: 'flex justify-between m-16 mt-2 mb-6 h-12 ',
btn: 'flex items-center gap-4'
container: 'flex justify-between m-16 mt-2 mb-6 h-12',
btn: 'flex items-center justify-end'
};
</script>
<div class={container}>
{#if PREV}
<button on:click={navigate} class={btn} name={'prev'}
<button on:click={navigate} class={`${btn} pr-4`} name='prev'
><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
<path d="m14 7-5 5 5 5V7z" />
</svg><span class="text-left">{PREV.name}</span></button
@ -33,7 +33,7 @@
{/if}
{#if NEXT}
<button on:click={navigate} class={btn} name={'next'}
<button on:click={navigate} class={`${btn} pl-4`} name='next'
><span class="text-right">{NEXT.name}</span><svg
focusable="false"
width={50}
@ -52,4 +52,9 @@
span {
pointer-events: none;
}
button:hover {
background-image: url('dither.gif');
background-repeat: repeat;
}
</style>