Tidy backend table styles, fix layout and add scrolling
This commit is contained in:
parent
4e3be6b7b7
commit
aab4fd0832
3 changed files with 51 additions and 50 deletions
|
@ -54,7 +54,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="table-controls">
|
|
||||||
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
|
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
|
||||||
<div class="popovers">
|
<div class="popovers">
|
||||||
<ColumnPopover />
|
<ColumnPopover />
|
||||||
|
@ -63,7 +62,6 @@
|
||||||
<ViewPopover />
|
<ViewPopover />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<table class="bb-table">
|
<table class="bb-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -80,7 +78,10 @@
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#if paginatedData.length === 0}
|
{#if paginatedData.length === 0}
|
||||||
<div class="no-data">No Data.</div>
|
<td class="no-border">No data.</td>
|
||||||
|
{#each headers as header}
|
||||||
|
<td class="no-border" />
|
||||||
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
{#each paginatedData as row}
|
{#each paginatedData as row}
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -108,30 +109,31 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popovers {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: 1px solid var(--grey-4);
|
border: 1px solid var(--grey-4);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 3px;
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
height: 40px;
|
|
||||||
background: var(--grey-3);
|
background: var(--grey-3);
|
||||||
border: 1px solid var(--grey-4);
|
border-bottom: 1px solid var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th {
|
thead th {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
@ -140,13 +142,15 @@
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
transition: 0.5s all;
|
transition: 0.5s all;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-header {
|
.edit-header {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-header:hover {
|
.edit-header:hover {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
@ -161,30 +165,24 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
border: 1px solid var(--grey-4);
|
border: 1px solid var(--grey-4);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: pre;
|
white-space: nowrap;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding: var(--spacing-l) var(--spacing-m);
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
}
|
||||||
|
td.no-border {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
border: 1px solid var(--grey-4);
|
||||||
|
}
|
||||||
tbody tr {
|
tbody tr {
|
||||||
border-bottom: 1px solid var(--grey-4);
|
border-bottom: 1px solid var(--grey-4);
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:hover {
|
tbody tr:hover {
|
||||||
background: var(--grey-1);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-controls {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popovers {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data {
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -54,7 +54,11 @@
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#if paginatedData.length === 0}
|
{#if paginatedData.length === 0}
|
||||||
<div class="no-data">No Data.</div>
|
{#each columns as header, idx}
|
||||||
|
<td class="no-border">
|
||||||
|
{#if idx === 0}No data.{/if}
|
||||||
|
</td>
|
||||||
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
{#each paginatedData as row}
|
{#each paginatedData as row}
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -77,29 +81,24 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: 1px solid var(--grey-4);
|
border: 1px solid var(--grey-4);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 3px;
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
height: 40px;
|
|
||||||
background: var(--grey-3);
|
background: var(--grey-3);
|
||||||
border: 1px solid var(--grey-4);
|
border: 1px solid var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th {
|
thead th {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
@ -108,9 +107,11 @@
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
transition: 0.5s all;
|
transition: 0.5s all;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
thead th:hover {
|
||||||
th:hover {
|
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -119,15 +120,20 @@
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
border: 1px solid var(--grey-4);
|
border: 1px solid var(--grey-4);
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: var(--spacing-l) var(--spacing-m);
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
}
|
||||||
|
td.no-border {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr {
|
tbody tr {
|
||||||
border-bottom: 1px solid var(--grey-4);
|
border-bottom: 1px solid var(--grey-4);
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:hover {
|
tbody tr:hover {
|
||||||
background: var(--grey-1);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
@ -143,8 +149,4 @@
|
||||||
:global(.popovers > div) {
|
:global(.popovers > div) {
|
||||||
margin-right: var(--spacing-m);
|
margin-right: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-data {
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -25,7 +25,8 @@
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
margin: var(--spacing-xl) 40px;
|
padding: var(--spacing-xl) 40px;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.nav {
|
.nav {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
Loading…
Reference in a new issue