closes #302
This commit is contained in:
pkd2512
parent
cfdab01c02
commit
f9a5a035d7
11 changed files with 59 additions and 38 deletions
|
|
@ -40,13 +40,13 @@
|
|||
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
|
||||
>
|
||||
{#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="body-note">Initially, this site was far smaller.</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#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="body-note">But then forces built up.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -280,6 +280,7 @@
|
|||
|
||||
button.before-after-container {
|
||||
box-sizing: content-box;
|
||||
text-align: inherit;
|
||||
|
||||
img {
|
||||
top: 0;
|
||||
|
|
@ -352,18 +353,18 @@
|
|||
height: 0;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-block-start: 10px solid transparent;
|
||||
border-block-end: 10px solid transparent;
|
||||
}
|
||||
.arrow-right {
|
||||
left: 19px;
|
||||
bottom: 14px;
|
||||
border-left: 10px solid var(--before-after-handle-colour);
|
||||
inset-inline-start: 19px;
|
||||
inset-block-end: 14px;
|
||||
border-inline-start: 10px solid var(--before-after-handle-colour);
|
||||
}
|
||||
.arrow-left {
|
||||
left: 3px;
|
||||
top: 6px;
|
||||
border-right: 10px solid var(--before-after-handle-colour);
|
||||
inset-inline-start: 3px;
|
||||
inset-block-start: 6px;
|
||||
border-inline-end: 10px solid var(--before-after-handle-colour);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
argTypes: {
|
||||
align: {
|
||||
control: 'select',
|
||||
options: ['left', 'center'],
|
||||
options: ['auto', 'center'],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
/**
|
||||
* Alignment of the byline.
|
||||
*/
|
||||
align?: 'left' | 'center';
|
||||
align?: 'auto' | 'center';
|
||||
/**
|
||||
* Add an id to to target with custom CSS.
|
||||
* @type {string}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
authors = [],
|
||||
publishTime,
|
||||
updateTime,
|
||||
align = 'left',
|
||||
align = 'auto',
|
||||
id = '',
|
||||
cls = '',
|
||||
getAuthorPage = getAuthorPageUrl,
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
updated,
|
||||
}: Props = $props();
|
||||
|
||||
let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
|
||||
let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
|
||||
|
||||
/**
|
||||
/* Date validation and formatter functions
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
.search {
|
||||
width: 250px;
|
||||
.search--icon {
|
||||
left: 0.5rem;
|
||||
top: 0.55rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
inset-block-start: 0.55rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: mixins.$theme-colour-brand-rules;
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
width: 100%;
|
||||
}
|
||||
.search--x {
|
||||
right: 0;
|
||||
top: 0.55rem;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0.55rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: mixins.$theme-colour-text-primary;
|
||||
|
|
|
|||
|
|
@ -95,15 +95,15 @@
|
|||
@use '../../scss/mixins' as mixins;
|
||||
.timeline {
|
||||
.date {
|
||||
border-left: 1px solid var(--symbol-colour);
|
||||
border-inline-start: 1px solid var(--symbol-colour);
|
||||
&:last-child {
|
||||
border-left: 1px solid mixins.$theme-colour-background;
|
||||
border-inline-start: 1px solid mixins.$theme-colour-background;
|
||||
@include mixins.fpb-0;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
top: -1px;
|
||||
left: -10px;
|
||||
inset-block-start: -1px;
|
||||
inset-inline-start: -10px;
|
||||
}
|
||||
div.title {
|
||||
@include mixins.fmt-2;
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@
|
|||
thead {
|
||||
tr {
|
||||
th {
|
||||
border-bottom: 1px solid var(--theme-colour-text-primary);
|
||||
border-block-end: 1px solid var(--theme-colour-text-primary);
|
||||
@include mixins.bg;
|
||||
text-align: inherit;
|
||||
&.sortable {
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
.table--thead--sortarrow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
inset-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
@include mixins.font-regular;
|
||||
font-variant-numeric: tabular-nums;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid
|
||||
border-block-end: 1px solid
|
||||
var(--theme-colour-brand-rules, var(--tr-muted-grey));
|
||||
&.no-results {
|
||||
@include mixins.text-secondary;
|
||||
|
|
@ -334,7 +334,7 @@
|
|||
}
|
||||
tfoot.table--tfoot {
|
||||
tr {
|
||||
border-bottom: 0;
|
||||
border-block-end: 0;
|
||||
}
|
||||
td {
|
||||
@include mixins.body-caption;
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
}
|
||||
&.truncated {
|
||||
tbody tr:last-child:not(:first-child) {
|
||||
border-bottom: none;
|
||||
border-block-end: none;
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--theme-colour-text-primary) 0%,
|
||||
|
|
|
|||
|
|
@ -15,4 +15,7 @@
|
|||
width: 1rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
:global([dir='rtl']) .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 493 B |
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { intcomma } from 'journalize';
|
||||
import LeftArrow from './LeftArrow.svelte';
|
||||
import RightArrow from './RightArrow.svelte';
|
||||
import PrevArrow from './PrevArrow.svelte';
|
||||
import NextArrow from './NextArrow.svelte';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<nav aria-label="pagination" class="pagination fmt-4">
|
||||
<button onclick={goToPreviousPage} disabled={pageNumber === 1}
|
||||
><div class="icon-wrapper">
|
||||
<LeftArrow />
|
||||
<PrevArrow />
|
||||
<span class="visually-hidden">Previous page</span>
|
||||
</div></button
|
||||
>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
onclick={goToNextPage}
|
||||
disabled={pageNumber === Math.ceil(n / pageSize)}
|
||||
><div class="icon-wrapper">
|
||||
<RightArrow />
|
||||
<NextArrow />
|
||||
<span class="visually-hidden">Next page</span>
|
||||
</div></button
|
||||
>
|
||||
|
|
@ -75,6 +75,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
|
||||
|
|
|
|||
|
|
@ -15,4 +15,7 @@
|
|||
width: 1rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
:global([dir='rtl']) .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 493 B |
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="select">
|
||||
<div class="select relative inline-flex">
|
||||
<select
|
||||
class="select--input body-caption fpx-2"
|
||||
name="select--input"
|
||||
|
|
@ -34,6 +34,18 @@
|
|||
<option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
|
||||
{/each}
|
||||
</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>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -50,12 +62,13 @@
|
|||
-moz-appearance: none; /* Firefox */
|
||||
-webkit-appearance: none; /* Safari and Chrome */
|
||||
appearance: none; /* Remove the default arrow */
|
||||
|
||||
background: transparent;
|
||||
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>');
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 225px;
|
||||
background-position-y: 55%;
|
||||
}
|
||||
.arrow {
|
||||
pointer-events: none;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0.55rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.select--input::-ms-expand {
|
||||
display: none; /* Remove the default arrow in Internet Explorer 11 */
|
||||
|
|
|
|||
Loading…
Reference in a new issue