Frontend created and rewritten a few times, with some backend fixes #1

Merged
leo merged 110 commits from plaintable into main 2023-11-08 20:38:40 +00:00
5 changed files with 55 additions and 29 deletions
Showing only changes of commit 5386508e28 - Show all commits

View File

@ -8,6 +8,8 @@
--primary-color: #000;
--accent-color: #f80;
--transition-time: 0.2s;
--header-font-size: 1rem;
--header-height: calc(8 * var(--header-font-size));
}
@media (prefers-color-scheme: dark) {
:root {
@ -23,6 +25,18 @@
display: none;
}
}
@media screen and (orientation: landscape) and (min-width: 600px) {
/* Breadcrumbs and buttons side by side */
header {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: end;
}
.breadcrumb {
font-size: 1.7em;
}
}
@media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) {
html {
font-size: 1.5rem;
@ -39,6 +53,17 @@
font-size: 2rem;
}
}
@media screen and (max-height: 600px) {
:root {
--header-font-size: calc(16 * 100vh / 600); /* 16px (1rem nominal) at 600px height */
}
}
@media screen and (max-height: 300px) {
:root {
--header-font-size: 0.5rem; /* Don't go smaller than this, no benefit */
--header-height: calc(1.75 * 16px);
}
}
@media print {
:root {
--primary-color: black;
@ -90,7 +115,9 @@
left: 0;
}
}
html {
overflow: hidden;
}
/* Hide scrollbar for all browsers */
main::-webkit-scrollbar {
display: none;
@ -113,6 +140,7 @@ tbody .modified {
header {
background-color: var(--header-background);
color: var(--header-color);
font-size: var(--header-font-size);
}
main {
height: 100%;
@ -162,8 +190,8 @@ nav {
z-index: 10;
}
main {
height: calc(100svh - 9rem); /* fill almost the rest of the screen after header */
padding-bottom: 3rem; /* convenience space on the bottom */
height: calc(100svh - var(--header-height));
padding-bottom: 3em; /* convenience space on the bottom */
overflow-y: scroll;
}
[data-tooltip]:hover:after {
@ -174,8 +202,8 @@ main {
text-align: center;
padding: .5rem 1rem;
border-radius: 3rem 0 3rem 0;
box-shadow: 0 0 2rem var(--accent-color);
transform: translate(calc(1rem + -50%), 150%);
box-shadow: 0 0 1rem var(--accent-color);
transform: translate(calc(1rem + -50%), 100%);
background-color: var(--accent-color);
color: var(--primary-color);
white-space: pre;

View File

@ -32,22 +32,21 @@ const props = defineProps<{
padding: 0 1em 0 0;
}
.breadcrumb > a {
margin: 0 -0.7rem 0 -0.7rem;
margin: 0 -0.5em 0 -0.5em;
padding: 0;
max-width: 8rem;
font-size: 1.3rem;
max-width: 8em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 1.5rem;
height: 1.5em;
color: var(--breadcrumb-color);
padding: 0.3rem 1.5rem;
clip-path: polygon(0 0, 1rem 50%, 0 100%, 100% 100%, 100% 0, 0 0);
padding: 0.3em 1.5em;
clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
transition: all var(--breadcrumb-transtime);
}
.breadcrumb a:first-child {
margin-left: 0;
padding-left: .2rem;
padding-left: .2em;
clip-path: none;
}
.breadcrumb a:last-child {
@ -74,9 +73,9 @@ const props = defineProps<{
}
.breadcrumb svg {
/* FIXME: Custom positioning to align it well; needs proper solution */
padding-left: 0.6rem;
width: 1.3rem;
height: 1.3rem;
padding-left: 0.8em;
width: 1.3em;
height: 1.3em;
fill: var(--breadcrumb-color);
transition: fill var(--breadcrumb-transtime);
}

View File

@ -356,9 +356,9 @@ tbody tr {
}
table thead input[type='checkbox'] {
position: inherit;
width: 1rem;
height: 1rem;
padding: 0.5rem;
width: 1em;
height: 1em;
padding: 0.5rem 0.5em;
}
table tbody input[type='checkbox'] {
width: 2rem;
@ -366,7 +366,6 @@ table tbody input[type='checkbox'] {
}
table .selection {
width: 2rem;
height: 2rem;
text-align: center;
text-overflow: clip;
}
@ -429,18 +428,18 @@ tbody tr.cursor {
color: var(--accent-color);
}
.sortcolumn {
padding-right: 1.7em;
padding-right: 1.5rem;
}
.sortcolumn::after {
content: '▸';
color: #888;
margin: 0 1em 0 0.5em;
margin-left: 0.5em;
position: absolute;
transition: all var(--transition-time) linear;
}
.sortactive::after {
transform: rotate(90deg);
color: #000;
color: var(--accent-color);
}
.name a {
text-decoration: none;

View File

@ -57,7 +57,7 @@ defineExpose({
padding: 0;
display: flex;
align-items: center;
height: 3.5rem;
height: 3.5em;
z-index: 10;
}
.buttons > * {
@ -70,10 +70,10 @@ input[type='search'] {
background: var(--primary-background);
color: var(--primary-color);
border: 0;
border-radius: 0.1rem;
padding: 0.5rem;
border-radius: 0.1em;
padding: 0.5em;
outline: none;
font-size: 1.5rem;
font-size: 1.5em;
max-width: 30vw;
}
</style>

View File

@ -22,9 +22,9 @@ const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`)
color: #ccc;
cursor: pointer;
transition: all 0.2s ease;
padding: 0.2rem;
width: 3rem;
height: 3rem;
padding: 0.2em;
width: 3em;
height: 3em;
}
.action-button:hover,
.action-button:focus {