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

fixes to headline and table #116

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-09-07 18:09:33 +05:30
parent a779e53d72
commit 5a61f95123
10 changed files with 87 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -66,7 +66,7 @@
<Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
<aside class="article-metadata font-subhed">
<div class="byline">
<div class="byline body-caption">
{#if $$slots.byline}
<!-- Custom byline -->
<slot name="byline" />
@ -92,7 +92,7 @@
{/if}
{/if}
</div>
<div class="dateline fmt-0">
<div class="dateline body-caption fmt-0">
{#if $$slots.published}
<div class="whitespace-nowrap inline-block">
<!-- Custom published dateline -->
@ -144,11 +144,11 @@
}
}
.byline,
.dateline {
@include body-caption;
@include fmb-1;
}
// .byline,
// .dateline {
// @include body-caption;
// @include fmb-1;
// }
@media (min-width: $column-width-narrower) {
.dateline {

2
src/components/HeroHeadline/Hero.stories.svelte
View file

@ -244,7 +244,7 @@
>
<div slot="inline">
<GraphicBlock
width="fluid"
width="widest"
role="figure"
class="my-0"
textWidth="normal"

108
src/components/HeroHeadline/Hero.svelte
View file

@ -82,10 +82,9 @@
import Headline from '../Headline/Headline.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import TextBlock from '../GraphicBlock/TextBlock.svelte';
import Block from '../Block/Block.svelte';
import Byline from '../Byline/Byline.svelte';
import { marked } from 'marked';
import PaddingReset from '../PaddingReset/PaddingReset.svelte';
let hedClass;
$: {
@ -137,7 +136,8 @@
dek="{dek}"
/>
{/if}
<div class="background-container">
<div class="graphic-container">
{#if $$slots.background}
<!-- Hero graphic named slot -->
<slot name="background" />
@ -147,6 +147,7 @@
role="img"
class="my-0"
textWidth="normal"
notes="{notes}"
ariaDescription="{ariaDescription}"
>
<div
@ -157,42 +158,37 @@
{/if}
</div>
</Block>
{#if notes}
<TextBlock width="normal">
<aside>
{@html marked(notes)}
</aside>
</TextBlock>
{/if}
{/if}
<!-- Inline hero -->
{#if $$slots.inline}
<Block width="fluid" class="hero-headline inline-hero">
{#if $$slots.hed}
<Headline
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
>
<!-- Headline named slot -->
<div slot="hed">
<slot name="hed" />
</div>
</Headline>
{:else}
<Headline
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
/>
{/if}
<PaddingReset containerIsFluid="{true}">
{#if $$slots.hed}
<Headline
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
>
<!-- Headline named slot -->
<div slot="hed">
<slot name="hed" />
</div>
</Headline>
{:else}
<Headline
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
/>
{/if}
</PaddingReset>
<div class="graphic-container">
<!-- Hero named slot -->
<slot name="inline" />
@ -200,20 +196,20 @@
</Block>
{/if}
</div>
</div>
<div class="hero-byline fmb-6">
{#if $$slots.byline}
<!-- Custom byline/dateline -->
<slot name="byline" />
{:else if authors.length > 0 || publishTime}
<Byline
authors="{authors}"
publishTime="{publishTime}"
updateTime="{updateTime}"
align="left"
/>
{/if}
<div class="hero-byline fmb-6">
{#if $$slots.byline}
<!-- Custom byline/dateline -->
<slot name="byline" />
{:else if authors.length > 0 || publishTime}
<Byline
authors="{authors}"
publishTime="{publishTime}"
updateTime="{updateTime}"
align="left"
/>
{/if}
</div>
</div>
<style lang="scss">
@ -221,15 +217,11 @@
.hero-wrapper {
:global(.background-hero) {
height: var(--heroHeight, 100svh);
min-height: var(--heroHeight, 100svh);
max-height: 1800px;
position: relative;
}
:global(.hero-headline) {
overflow-x: hidden;
}
:global(.background-hero .headline) {
@include fmt-0;
z-index: 1;
@ -243,6 +235,10 @@
height: var(--heroHeight, 100svh);
max-height: 1800px;
transform: translateX(-50%);
@media (max-width: 690px) {
padding: 0 15px;
}
}
:global(aside p) {
@ -256,6 +252,14 @@
height: var(--heroHeight);
object-fit: cover;
}
:global(.graphic-container .article-block:not(.graphic)) {
@media (max-width: 690px) {
width: 100%;
padding: 0 15px;
margin-left: 0;
}
}
}
.hero-byline {

2
src/components/HeroHeadline/stories/docs/inlineGraphic.md
View file

@ -18,7 +18,7 @@ Reuters Graphics headline followed by a graphic or any media block.
>
<div slot="inline">
<GraphicBlock
width="fluid"
width="widest"
role="figure"
class="my-0"
textWidth="normal"

3
src/components/NoteText/NoteText.svelte
View file

@ -32,13 +32,14 @@
@include font-medium;
@include tracking-normal;
@include fmt-3;
@include fmb-0;
margin-bottom: 0.125rem;
text-transform: none;
}
p {
@include body-caption;
@include fmt-0;
@include fmb-2;
}
}
</style>

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

@ -27,7 +27,7 @@
</script>
<div class="search relative inline-flex items-center" class:active="{active}">
<div class="search--icon absolute ml-2 mt-1">
<div class="search--icon absolute">
<MagnifyingGlass />
</div>
<input
@ -39,7 +39,7 @@
bind:value="{value}"
/>
<div
class="search--x absolute mt-1"
class="search--x absolute"
role="button"
tabindex="0"
class:invisible="{!active}"
@ -56,8 +56,8 @@
.search {
width: 250px;
.search--icon {
left: 0;
top: 0;
left: 0.5rem;
top: 0.55rem;
width: 1.5rem;
height: 1.5rem;
fill: $theme-colour-brand-rules;
@ -71,7 +71,7 @@
}
.search--x {
right: 0;
top: 0;
top: 0.55rem;
width: 1.5rem;
height: 1.5rem;
fill: $theme-colour-text-primary;

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

@ -44,7 +44,7 @@
}
</script>
<nav aria-label="pagination" class="pagination fmt-2">
<nav aria-label="pagination" class="pagination fmt-4">
<button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
><div class="icon-wrapper">
<LeftArrow />
@ -107,7 +107,7 @@
align-items: center;
flex-direction: column;
width: auto;
min-width: 7rem;
min-width: 5rem;
}
}

1
src/components/Table/Table.stories.svelte
View file

@ -139,6 +139,7 @@
sortDirection: 'descending',
paginated: true,
title: 'Press Freedom Index',
notes: 'Note: data as of 2018',
source: 'Source: Reporters Without Borders',
}}"
/>

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

@ -308,18 +308,23 @@
{/if}
</tbody>
{#if notes || source}
<tfoot class="table--tfoot block fmt-2">
<tfoot class="table--tfoot">
{#if notes}
<tr>
<td class="" colspan="{includedFields.length}">{@html notes}</td
>
<td class="" colspan="{includedFields.length}">
<div class="fmt-2">
{@html notes}
</div>
</td>
</tr>
{/if}
{#if source}
<tr>
<td class="" colspan="{includedFields.length}"
>{@html source}</td
>
<td class="" colspan="{includedFields.length}">
<div class="fmt-1">
{@html source}
</div>
</td>
</tr>
{/if}
</tfoot>
@ -388,7 +393,6 @@
}
}
tfoot.table--tfoot {
border-spacing: 0 clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
tr {
border-bottom: 0;
}

3
src/scss/tokens/text/mixins/_text-role.scss
View file

@ -76,8 +76,7 @@
@include text-xs;
@include leading-tighter;
@include font-regular;
@include fmt-1;
@include fmb-2;
@include fmy-1;
}
@mixin body-link {