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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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