wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

closes #302

Browse source
This commit is contained in:
pkd2512 2025-05-13 15:50:34 +01:00
parent cfdab01c02
commit f9a5a035d7
Failed to extract signature
11 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/BeforeAfter/BeforeAfter.stories.svelte
View file

@ -40,13 +40,13 @@
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020." afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
> >
{#snippet beforeOverlay()} {#snippet beforeOverlay()}
<div class="overlay p-3 before text-left"> <div class="overlay p-3 before">
<p class="h4 font-bold">July 7, 2020</p> <p class="h4 font-bold">July 7, 2020</p>
<p class="body-note">Initially, this site was far smaller.</p> <p class="body-note">Initially, this site was far smaller.</p>
</div> </div>
{/snippet} {/snippet}
{#snippet afterOverlay()} {#snippet afterOverlay()}
<div class="overlay p-3 after text-right"> <div class="overlay p-3 after">
<p class="h4 font-bold">Oct. 20, 2020</p> <p class="h4 font-bold">Oct. 20, 2020</p>
<p class="body-note">But then forces built up.</p> <p class="body-note">But then forces built up.</p>
</div> </div>

17
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -280,6 +280,7 @@
button.before-after-container { button.before-after-container {
box-sizing: content-box; box-sizing: content-box;
text-align: inherit;
img { img {
top: 0; top: 0;
@ -352,18 +353,18 @@
height: 0; height: 0;
user-select: none; user-select: none;
position: relative; position: relative;
border-top: 10px solid transparent; border-block-start: 10px solid transparent;
border-bottom: 10px solid transparent; border-block-end: 10px solid transparent;
} }
.arrow-right { .arrow-right {
left: 19px; inset-inline-start: 19px;
bottom: 14px; inset-block-end: 14px;
border-left: 10px solid var(--before-after-handle-colour); border-inline-start: 10px solid var(--before-after-handle-colour);
} }
.arrow-left { .arrow-left {
left: 3px; inset-inline-start: 3px;
top: 6px; inset-block-start: 6px;
border-right: 10px solid var(--before-after-handle-colour); border-inline-end: 10px solid var(--before-after-handle-colour);
} }
} }

2
src/components/Byline/Byline.stories.svelte
View file

@ -9,7 +9,7 @@
argTypes: { argTypes: {
align: { align: {
control: 'select', control: 'select',
options: ['left', 'center'], options: ['auto', 'center'],
}, },
}, },
}); });

6
src/components/Byline/Byline.svelte
View file

@ -21,7 +21,7 @@
/** /**
* Alignment of the byline. * Alignment of the byline.
*/ */
align?: 'left' | 'center'; align?: 'auto' | 'center';
/** /**
* Add an id to to target with custom CSS. * Add an id to to target with custom CSS.
* @type {string} * @type {string}
@ -54,7 +54,7 @@
authors = [], authors = [],
publishTime, publishTime,
updateTime, updateTime,
align = 'left', align = 'auto',
id = '', id = '',
cls = '', cls = '',
getAuthorPage = getAuthorPageUrl, getAuthorPage = getAuthorPageUrl,
@ -63,7 +63,7 @@
updated, updated,
}: Props = $props(); }: Props = $props();
let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center'); let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
/** /**
/* Date validation and formatter functions /* Date validation and formatter functions

8
src/components/SearchInput/SearchInput.svelte
View file

@ -57,8 +57,8 @@
.search { .search {
width: 250px; width: 250px;
.search--icon { .search--icon {
left: 0.5rem; inset-inline-start: 0.5rem;
top: 0.55rem; inset-block-start: 0.55rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: mixins.$theme-colour-brand-rules; fill: mixins.$theme-colour-brand-rules;
@ -71,8 +71,8 @@
width: 100%; width: 100%;
} }
.search--x { .search--x {
right: 0; inset-inline-end: 0;
top: 0.55rem; inset-block-start: 0.55rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: mixins.$theme-colour-text-primary; fill: mixins.$theme-colour-text-primary;

8
src/components/SimpleTimeline/SimpleTimeline.svelte
View file

@ -95,15 +95,15 @@
@use '../../scss/mixins' as mixins; @use '../../scss/mixins' as mixins;
.timeline { .timeline {
.date { .date {
border-left: 1px solid var(--symbol-colour); border-inline-start: 1px solid var(--symbol-colour);
&:last-child { &:last-child {
border-left: 1px solid mixins.$theme-colour-background; border-inline-start: 1px solid mixins.$theme-colour-background;
@include mixins.fpb-0; @include mixins.fpb-0;
} }
} }
svg { svg {
top: -1px; inset-block-start: -1px;
left: -10px; inset-inline-start: -10px;
} }
div.title { div.title {
@include mixins.fmt-2; @include mixins.fmt-2;

10
src/components/Table/Table.svelte
View file

@ -304,7 +304,7 @@
thead { thead {
tr { tr {
th { th {
border-bottom: 1px solid var(--theme-colour-text-primary); border-block-end: 1px solid var(--theme-colour-text-primary);
@include mixins.bg; @include mixins.bg;
text-align: inherit; text-align: inherit;
&.sortable { &.sortable {
@ -314,7 +314,7 @@
.table--thead--sortarrow { .table--thead--sortarrow {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 5px; inset-inline-start: 5px;
} }
} }
} }
@ -325,7 +325,7 @@
@include mixins.font-regular; @include mixins.font-regular;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
vertical-align: top; vertical-align: top;
border-bottom: 1px solid border-block-end: 1px solid
var(--theme-colour-brand-rules, var(--tr-muted-grey)); var(--theme-colour-brand-rules, var(--tr-muted-grey));
&.no-results { &.no-results {
@include mixins.text-secondary; @include mixins.text-secondary;
@ -334,7 +334,7 @@
} }
tfoot.table--tfoot { tfoot.table--tfoot {
tr { tr {
border-bottom: 0; border-block-end: 0;
} }
td { td {
@include mixins.body-caption; @include mixins.body-caption;
@ -342,7 +342,7 @@
} }
&.truncated { &.truncated {
tbody tr:last-child:not(:first-child) { tbody tr:last-child:not(:first-child) {
border-bottom: none; border-block-end: none;
mask-image: linear-gradient( mask-image: linear-gradient(
to bottom, to bottom,
var(--theme-colour-text-primary) 0%, var(--theme-colour-text-primary) 0%,

3
src/components/Table/components/RightArrow.svelte → src/components/Table/components/NextArrow.svelte
View file

@ -15,4 +15,7 @@
width: 1rem; width: 1rem;
fill: currentColor; fill: currentColor;
} }
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</style> </style>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 493 B

9
src/components/Table/components/Pagination.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { intcomma } from 'journalize'; import { intcomma } from 'journalize';
import LeftArrow from './LeftArrow.svelte'; import PrevArrow from './PrevArrow.svelte';
import RightArrow from './RightArrow.svelte'; import NextArrow from './NextArrow.svelte';
interface Props { interface Props {
/** /**
@ -49,7 +49,7 @@
<nav aria-label="pagination" class="pagination fmt-4"> <nav aria-label="pagination" class="pagination fmt-4">
<button onclick={goToPreviousPage} disabled={pageNumber === 1} <button onclick={goToPreviousPage} disabled={pageNumber === 1}
><div class="icon-wrapper"> ><div class="icon-wrapper">
<LeftArrow /> <PrevArrow />
<span class="visually-hidden">Previous page</span> <span class="visually-hidden">Previous page</span>
</div></button </div></button
> >
@ -62,7 +62,7 @@
onclick={goToNextPage} onclick={goToNextPage}
disabled={pageNumber === Math.ceil(n / pageSize)} disabled={pageNumber === Math.ceil(n / pageSize)}
><div class="icon-wrapper"> ><div class="icon-wrapper">
<RightArrow /> <NextArrow />
<span class="visually-hidden">Next page</span> <span class="visually-hidden">Next page</span>
</div></button </div></button
> >
@ -75,6 +75,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: row;
button { button {
border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey)); border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));

3
src/components/Table/components/LeftArrow.svelte → src/components/Table/components/PrevArrow.svelte
View file

@ -15,4 +15,7 @@
width: 1rem; width: 1rem;
fill: currentColor; fill: currentColor;
} }
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</style> </style>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 493 B

27
src/components/Table/components/Select.svelte
View file

@ -23,7 +23,7 @@
} }
</script> </script>
<div class="select"> <div class="select relative inline-flex">
<select <select
class="select--input body-caption fpx-2" class="select--input body-caption fpx-2"
name="select--input" name="select--input"
@ -34,6 +34,18 @@
<option value={obj.value}>{obj.text} {label.toLowerCase()}</option> <option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
{/each} {/each}
</select> </select>
<div class="arrow absolute">
<svg
width="15"
height="9"
viewBox="0 0 15 9"
xmlns="http://www.w3.org/2000/svg"
><path
d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z"
fill="var(--theme-colour-brand-rules)"
/></svg
>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -50,12 +62,13 @@
-moz-appearance: none; /* Firefox */ -moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */ -webkit-appearance: none; /* Safari and Chrome */
appearance: none; /* Remove the default arrow */ appearance: none; /* Remove the default arrow */
}
background: transparent; .arrow {
background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>'); pointer-events: none;
background-repeat: no-repeat; inset-inline-end: 0;
background-position-x: 225px; inset-block-start: 0.55rem;
background-position-y: 55%; width: 1.5rem;
height: 1.5rem;
} }
.select--input::-ms-expand { .select--input::-ms-expand {
display: none; /* Remove the default arrow in Internet Explorer 11 */ display: none; /* Remove the default arrow in Internet Explorer 11 */