archive/sanifae
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI improvements

Browse source
This commit is contained in:
tdgmcode 2023-03-18 20:36:08 -04:00
parent 883efbd64c
commit 04bc84c8ad
10 changed files with 163 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/Button.svelte
View file

@ -1,19 +1,16 @@
<style>
.button {
padding: 0.5rem;
background-color: var(--dark-3);
border: none;
border-bottom: solid var(--dark-3) 3px;
font-family: 'Open Sans';
border-radius: 2rem;
margin: 0.2rem;
}
.button a {
color: var(--light-1);
color: var(--dark-1);
font-weight: bold;
font-size: 1rem;
}
</style>

15
src/lib/components/Post.svelte
View file

@ -78,6 +78,11 @@
font-style: italic;
font-weight: normal;
}
.votes {
display: flex;
}
</style>
{#if success}
@ -108,7 +113,7 @@
<span slot="main">
<PostBody content={content} />
</span>
<span slot="footer">
<span slot="footer" class='votes'>
<PostButton
clickFunc={() => vote('up')}
data={upvotes * 1}
@ -122,21 +127,21 @@
{#if isAuthor}
<PostButton
clickFunc={() => deletePost()}
data={'Delete'}
data={''}
icon='/delete.svg'
/>
{/if}
{#if id}
<PostButton
href='/post/{id}'
data={'View'}
data={''}
icon='/view.svg'
/>
{/if}
<PostButton
href='/new_post?init=%23{id}'
data={'Reply'}
icon='/view.svg'
data={''}
icon='/reply.svg'
/>
</span>
</Area>

9
src/lib/components/PostButton.svelte
View file

@ -2,9 +2,12 @@
.votes {
font-weight: bold;
font-size: 0.9rem;
margin-left: 5px;
}
.vote-area {
margin-right: 30px;
margin-right: 15px;
display: flex;
align-items: center;
}
.button {
@ -25,7 +28,7 @@
<a on:click={clickFunc} href='{href}'>
<img src='{icon}' class='button' alt='Vote button'>
</a>
<span class='votes'>
<div class='votes'>
{data}
</span>
</div>
</span>

16
src/lib/components/PostList.svelte
View file

@ -14,6 +14,14 @@
{/if}
</p>
<p>
{#if data.id > 0}
<a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)-1)) }} href='#'>← Page {(data.id)-1}</a>
{/if}
<b>Page {(data.id)}</b>
<a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)+1)) }} href='#'>Page {(data.id)+1} →</a>
</p>
{#if data && data.postJson && data.postJson.data}
{#each data.postJson.data as post}
<Post
@ -28,11 +36,3 @@
></Post>
{/each}
{/if}
<p>
{#if data.id > 0}
<a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)-1)) }} href='#'>← Page {(data.id)-1}</a>
{/if}
<b>Page {(data.id)}</b>
<a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)+1)) }} href='#'>Page {(data.id)+1} →</a>
</p>

1
src/lib/util.js
View file

@ -190,6 +190,7 @@ let safePath = function(path) {
let setLocation = function(location, key, value) {
var loc = new URL(location).searchParams;
loc.set('page',0);
loc.set(key,value);
return loc.toString();
}

35
static/delete.svg
View file

@ -2,12 +2,12 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="39.749512mm"
height="34.423737mm"
viewBox="0 0 39.749511 34.423736"
width="52.97868mm"
height="50.326641mm"
viewBox="0 0 52.97868 50.326641"
version="1.1"
id="svg14062"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="delete.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@ -25,12 +25,12 @@
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.0560856"
inkscape:cx="40.367969"
inkscape:cy="68.333731"
inkscape:window-width="1920"
inkscape:window-height="996"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:cx="49.60883"
inkscape:cy="115.99712"
inkscape:window-width="920"
inkscape:window-height="1006"
inkscape:window-x="972"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,12 +39,17 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-48.152692,-141.96593)">
transform="translate(-41.538108,-132.67761)">
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:50.00000063;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
d="M 9.458295,7.8635183 -65.658893,-62.241949 -140.77608,7.8635183"
transform="matrix(0.26458333,0,0,0.26458333,85.399696,174.30911)"
id="path33180"
style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999"
inkscape:transform-center-y="-5.7373187"
d="M -65.658893,-122.24195 -140.77608,7.8635183 H 9.458295 Z m -12.876954,35.990233 h 25.753907 l -3.041016,56.396485 h -19.671875 z m 12.81836,65.816407 c 3.378213,0 6.27876,0.853521 8.703125,2.5625 2.424365,1.708978 3.636719,4.669982 3.636719,8.8828125 0,4.0141122 -1.212354,6.9166124 -3.636719,8.70507821 -2.424365,1.78846589 -5.324912,2.68164069 -8.703125,2.68164069 -3.417957,0 -6.378961,-0.8931748 -8.882813,-2.68164069 -2.464108,-1.78846581 -3.697266,-4.69096601 -3.697266,-8.70507821 0,-4.2128305 1.233158,-7.1738345 3.697266,-8.8828125 2.503852,-1.708979 5.464856,-2.5625 8.882813,-2.5625 z"
transform="matrix(0.26458333,0,0,0.26458333,85.399696,174.30911)" />
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:13.22916667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
d="m 48.152691,139.29219 19.874756,18.54874 19.874755,-18.54874"
id="path2794"
sodipodi:nodetypes="ccc" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

38
static/downvote.svg
View file

@ -2,12 +2,12 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="38.195164mm"
height="62.605831mm"
viewBox="0 0 38.195163 62.605831"
width="30.124826mm"
height="31.962015mm"
viewBox="0 0 30.124826 31.962016"
version="1.1"
id="svg14062"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="downvote.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@ -24,13 +24,13 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.0560856"
inkscape:cx="0.48636107"
inkscape:cy="32.829372"
inkscape:window-width="1920"
inkscape:window-height="996"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:zoom="2.9077441"
inkscape:cx="26.996874"
inkscape:cy="74.112437"
inkscape:window-width="920"
inkscape:window-height="1006"
inkscape:window-x="24"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,14 +39,16 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-48.929905,-129.52741)">
transform="translate(-48.865981,-130.90513)">
<path
style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 56.684592,149.59814 10.887303,12.1325 13.600048,-26.2501"
id="path3462" />
style="fill:none;fill-opacity:1;stroke:#aaaaaa;stroke-width:7.93753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 52.834746,146.97237 11.093647,11.9262 11.09365,-11.9262"
id="path3462"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 79.370381,172.06252 68.483078,159.93002 54.88303,186.18012"
id="path8000" />
style="fill:#002368;stroke:#aaaaaa;stroke-width:7.93801;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 63.928394,151.30806 V 134.87414"
id="path610"
sodipodi:nodetypes="cc" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

54
static/reply.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="30.124826mm"
height="37.326004mm"
viewBox="0 0 30.124826 37.326005"
version="1.1"
id="svg14062"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="reply.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview14064"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.9077441"
inkscape:cx="27.340783"
inkscape:cy="74.112437"
inkscape:window-width="1868"
inkscape:window-height="1006"
inkscape:window-x="24"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs14059" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-48.865981,-130.90513)">
<path
style="fill:none;fill-opacity:1;stroke:#aaaaaa;stroke-width:7.93753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 52.834746,146.79991 11.093647,-11.9262 11.09365,11.9262"
id="path3462"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-opacity:1;stroke:#aaaaaa;stroke-width:7.93753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 52.834746,164.26237 11.093647,-11.9262 11.09365,11.9262"
id="path2225"
sodipodi:nodetypes="ccc" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

36
static/upvote.svg
View file

@ -2,12 +2,12 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="32.42485mm"
height="34.187305mm"
viewBox="0 0 32.42485 34.187306"
width="30.124826mm"
height="31.962015mm"
viewBox="0 0 30.124826 31.962016"
version="1.1"
id="svg14062"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="upvote.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@ -24,13 +24,13 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.0560856"
inkscape:cx="58.84969"
inkscape:cy="76.601869"
inkscape:window-width="1920"
inkscape:window-height="996"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:zoom="2.9077441"
inkscape:cx="26.996874"
inkscape:cy="74.112437"
inkscape:window-width="920"
inkscape:window-height="1006"
inkscape:window-x="24"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,10 +39,16 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-47.715969,-129.48962)">
transform="translate(-48.865981,-130.90513)">
<path
style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 51.684719,147.57597 10.887303,12.1325 13.600048,-26.2501"
id="path3462" />
style="fill:none;fill-opacity:1;stroke:#aaaaaa;stroke-width:7.93753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 52.834746,146.79991 11.093647,-11.9262 11.09365,11.9262"
id="path3462"
sodipodi:nodetypes="ccc" />
<path
style="fill:#002368;stroke:#aaaaaa;stroke-width:7.93801;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 63.928394,142.46422 v 16.43392"
id="path610"
sodipodi:nodetypes="cc" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

40
static/view.svg
View file

@ -2,13 +2,13 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="84.203423mm"
height="84.203423mm"
viewBox="0 0 84.203423 84.203423"
width="27.120312mm"
height="27.119791mm"
viewBox="0 0 27.120312 27.119791"
version="1.1"
id="svg5"
sodipodi:docname="view.svg"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
@ -24,13 +24,13 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.72693603"
inkscape:cx="-20.634553"
inkscape:cy="273.06392"
inkscape:window-width="1920"
inkscape:window-height="996"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:zoom="2.9077442"
inkscape:cx="22.869962"
inkscape:cy="57.948701"
inkscape:window-width="1868"
inkscape:window-height="1006"
inkscape:window-x="24"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,16 +39,16 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-53.804537,-76.370715)">
<path
style="color:#000000;fill:#aaa;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;-inkscape-stroke:none"
d="m 95.90625,76.370863 c -23.173772,0 -42.101563,18.92779 -42.101563,42.101567 0,23.17377 18.927791,42.10156 42.101563,42.10156 23.17377,0 42.10156,-18.92779 42.10156,-42.10156 0,-23.173777 -18.92779,-42.101567 -42.10156,-42.101567 z m 0,13.228515 c 16.02419,0 28.87305,12.848862 28.87305,28.873052 0,16.02419 -12.84886,28.87304 -28.87305,28.87304 -16.024189,0 -28.873047,-12.84885 -28.873047,-28.87304 0,-16.02419 12.848858,-28.873052 28.873047,-28.873052 z"
id="path234" />
transform="translate(-82.346018,-104.91266)">
<circle
style="fill:#aaa;fill-opacity:1;stroke:#aaa;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
id="path3020"
style="fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
id="circle2979"
cx="95.90625"
cy="118.47243"
r="9.6452198" />
cy="118.47242"
r="5.4154248" />
<path
id="path3020"
style="fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
d="m 95.906432,104.91266 a 13.560002,13.560002 0 0 0 -13.560413,13.55989 13.560002,13.560002 0 0 0 13.560413,13.5599 13.560002,13.560002 0 0 0 13.559898,-13.5599 13.560002,13.560002 0 0 0 -13.559898,-13.55989 z m 0,4.29276 a 9.2669287,9.2669287 0 0 1 9.266618,9.26713 9.2669287,9.2669287 0 0 1 -9.266618,9.26662 9.2669287,9.2669287 0 0 1 -9.267135,-9.26662 9.2669287,9.2669287 0 0 1 9.267135,-9.26713 z" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB