table text styles
This commit is contained in:
Prasanta Kumar Dutta
parent
e7a79c5cfe
commit
01266d21d0
3 changed files with 45 additions and 99 deletions
|
|
@ -44,15 +44,17 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<nav aria-label="pagination" class="pagination">
|
||||
<nav aria-label="pagination" class="pagination fmt-2">
|
||||
<button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
|
||||
><div class="icon-wrapper">
|
||||
<LeftArrow />
|
||||
<span class="visually-hidden">Previous page</span>
|
||||
</div></button
|
||||
>
|
||||
<div class="label" aria-label="page {pageNumber}" aria-current="page">
|
||||
<div class="records">{minRow}-{maxRow} of {intcomma(n)}</div>
|
||||
<div class="label fmx-2" aria-label="page {pageNumber}" aria-current="page">
|
||||
<div class="records body-caption mt-1.5">
|
||||
{minRow}-{maxRow} of {intcomma(n)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
on:click="{goToNextPage}"
|
||||
|
|
@ -71,7 +73,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
|
||||
button {
|
||||
border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
|
||||
border-radius: 50%;
|
||||
|
|
@ -105,15 +107,7 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
min-width: 110px;
|
||||
margin: 0 0.5rem;
|
||||
.records {
|
||||
font-size: 0.8rem;
|
||||
@include font-sans;
|
||||
font-weight: 300;
|
||||
margin: 0 1rem;
|
||||
@include text-primary;
|
||||
}
|
||||
min-width: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@
|
|||
|
||||
<div class="select">
|
||||
{#if label}
|
||||
<label for="select--input">{label}</label>
|
||||
<label class="body-caption block" for="select--input">{label}</label>
|
||||
{/if}
|
||||
<select
|
||||
class="select--input"
|
||||
class="select--input body-caption fpx-2"
|
||||
name="select--input"
|
||||
id="select--input"
|
||||
on:input="{input}"
|
||||
|
|
@ -42,34 +42,23 @@
|
|||
@import '../../scss/mixins';
|
||||
|
||||
.select {
|
||||
width: 256px;
|
||||
@include font-sans;
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
@include text-primary;
|
||||
padding: 0 0 0.125rem 0;
|
||||
}
|
||||
width: 250px;
|
||||
|
||||
.select--input {
|
||||
position: relative;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
height: 33px;
|
||||
height: 2.15rem;
|
||||
border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
|
||||
@include text-primary;
|
||||
border-radius: 6px;
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
-moz-appearance: none; /* Firefox */
|
||||
-webkit-appearance: none; /* Safari and Chrome */
|
||||
appearance: none; /* Remove the default arrow */
|
||||
padding-right: 20px; /* Add some padding to make room for a custom 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: 235px;
|
||||
background-position-x: 225px;
|
||||
background-position-y: 55%;
|
||||
}
|
||||
.select--input::-ms-expand {
|
||||
|
|
|
|||
|
|
@ -214,15 +214,15 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<Block width="{width}" id="{id}" class="{cls}">
|
||||
<Block width="{width}" id="{id}" class="fmy-5 {cls}">
|
||||
<article class="table-wrapper">
|
||||
{#if title || dek || searchable || filterList}
|
||||
<header class="table--header">
|
||||
<header class="table--header w-full">
|
||||
{#if title}
|
||||
<h2 class="table--header--title">{@html title}</h2>
|
||||
<h3 class="table--header--title">{@html title}</h3>
|
||||
{/if}
|
||||
{#if dek}
|
||||
<p class="table--header--dek">{@html dek}</p>
|
||||
<p class="table--header--dek body-note">{@html dek}</p>
|
||||
{/if}
|
||||
{#if searchable || filterList}
|
||||
<nav class="input">
|
||||
|
|
@ -247,8 +247,9 @@
|
|||
{/if}
|
||||
</header>
|
||||
{/if}
|
||||
<section class="table">
|
||||
<section class="table w-full">
|
||||
<table
|
||||
class="w-full"
|
||||
class:paginated="{paginated}"
|
||||
class:truncated="{truncated &&
|
||||
!showAll &&
|
||||
|
|
@ -259,7 +260,7 @@
|
|||
{#each includedFields as field}
|
||||
<th
|
||||
scope="col"
|
||||
class="table--thead--th"
|
||||
class="table--thead--th h4 pl-0 py-2 pr-2"
|
||||
class:sortable="{sortable && sortableFields.includes(field)}"
|
||||
class:sort-ascending="{sortable &&
|
||||
sortField === field &&
|
||||
|
|
@ -272,7 +273,7 @@
|
|||
>
|
||||
{field}
|
||||
{#if sortable && sortableFields.includes(field)}
|
||||
<div class="table--thead--sortarrow avoid-clicks">
|
||||
<div class="table--thead--sortarrow fml-1 avoid-clicks">
|
||||
<SortArrow
|
||||
bind:sortDirection="{sortDirection}"
|
||||
active="{sortField === field}"
|
||||
|
|
@ -288,6 +289,7 @@
|
|||
<tr data-row-index="{idx}">
|
||||
{#each includedFields as field}
|
||||
<td
|
||||
class="body-note pl-0 py-2 pr-2"
|
||||
data-row-index="{idx}"
|
||||
data-field="{field}"
|
||||
data-value="{item[field]}"
|
||||
|
|
@ -306,15 +308,18 @@
|
|||
{/if}
|
||||
</tbody>
|
||||
{#if notes || source}
|
||||
<tfoot class="table--tfoot">
|
||||
<tfoot class="table--tfoot block fmt-2">
|
||||
{#if notes}
|
||||
<tr>
|
||||
<td colspan="{includedFields.length}">{@html notes}</td>
|
||||
<td class="" colspan="{includedFields.length}">{@html notes}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
{#if source}
|
||||
<tr>
|
||||
<td colspan="{includedFields.length}">{@html source}</td>
|
||||
<td class="" colspan="{includedFields.length}"
|
||||
>{@html source}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
</tfoot>
|
||||
|
|
@ -322,8 +327,11 @@
|
|||
</table>
|
||||
</section>
|
||||
{#if truncated && data.length > truncateLength}
|
||||
<nav aria-label="Show all button" class="show-all">
|
||||
<button on:click="{toggleTruncate}"
|
||||
<nav
|
||||
aria-label="Show all button"
|
||||
class="show-all flex items-center justify-center fmt-2"
|
||||
>
|
||||
<button class="body-caption" on:click="{toggleTruncate}"
|
||||
>{#if showAll}Show fewer rows{:else}Show {data.length -
|
||||
truncateLength} more rows{/if}</button
|
||||
>
|
||||
|
|
@ -342,32 +350,6 @@
|
|||
<style lang="scss">
|
||||
@import '../../scss/mixins';
|
||||
|
||||
.table-wrapper {
|
||||
font-size: 1rem;
|
||||
@include font-sans;
|
||||
@include text-primary;
|
||||
}
|
||||
|
||||
.table--header {
|
||||
width: 100%;
|
||||
h2.table--header--title {
|
||||
font-weight: 500;
|
||||
@include text-primary;
|
||||
font-size: 1.33rem;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
p.table--header--dek {
|
||||
@include font-sans;
|
||||
@include text-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
section.table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -375,35 +357,27 @@
|
|||
background-color: transparent;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
border-bottom: 1px solid var(--theme-colour-text-primary);
|
||||
@include text-primary;
|
||||
|
||||
@include bg;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
text-align: inherit;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06rem;
|
||||
line-height: 1.4;
|
||||
padding: 0.5rem 0.75rem 0.5rem 0;
|
||||
&.sortable {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table--thead--sortarrow {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 0.125rem;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
padding: 0.5rem 0.75rem 0.5rem 0;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid
|
||||
var(--theme-colour-brand-rules, var(--tr-muted-grey));
|
||||
|
|
@ -413,15 +387,12 @@
|
|||
}
|
||||
}
|
||||
tfoot.table--tfoot {
|
||||
display: table-row;
|
||||
border-spacing: 0 clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
|
||||
tr {
|
||||
border-bottom: 0;
|
||||
}
|
||||
td {
|
||||
font-weight: 300;
|
||||
@include text-primary;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 0 0 0;
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
&.truncated {
|
||||
|
|
@ -458,20 +429,12 @@
|
|||
}
|
||||
|
||||
nav.show-all {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
button {
|
||||
font-size: 0.8rem;
|
||||
@include font-sans;
|
||||
font-weight: 500;
|
||||
min-width: 175px;
|
||||
padding: 0.33rem 0.5rem;
|
||||
min-width: 13rem;
|
||||
height: 2.15rem;
|
||||
border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
@include bg;
|
||||
@include text-primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue