Vasanko/cista-storage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More consistent and properly scaling header layout and positioning. Search keyboard tooltip hidden for mobile users.

Browse Source
This commit is contained in:
Leo Vasanko
2026-02-04 16:13:03 +00:00
parent 598c63278a
commit 78890347cc
4 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/main.css
+3 -2
View File
@@ -13,8 +13,8 @@
--transition-time: 0.2s; --transition-time: 0.2s;
/* The following are overridden by responsive layouts */ /* The following are overridden by responsive layouts */
--root-font-size: 1rem; --root-font-size: 1rem;
--header-font-size: 1rem; --header-font-size: clamp(0.7rem, 2.5vw, 1rem);
--header-height: 4rem; --header-height: clamp(2.8rem, 10vw, 4rem);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
@@ -36,6 +36,7 @@
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
:root { :root {
--root-font-size: calc(8px + 8 * 100vw / 1000); --root-font-size: calc(8px + 8 * 100vw / 1000);
--header-font-size: 1rem;
} }
} }
@media screen and (min-width: 2000px) { @media screen and (min-width: 2000px) {
frontend/src/components/DiskSpacePopup.vue
+2 -2
View File
@@ -320,8 +320,8 @@ onUnmounted(() => {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 3em; width: 100%;
height: 3em; height: 100%;
cursor: pointer; cursor: pointer;
will-change: transform; will-change: transform;
} }
frontend/src/components/HeaderMain.vue
+21 -3
View File
@@ -151,12 +151,21 @@ defineExpose({
padding: 0 0.3em; padding: 0 0.3em;
transition: background 0.2s ease; transition: background 0.2s ease;
flex: 1 1 auto; flex: 1 1 auto;
min-width: 5.5em; min-width: 2.5em;
max-width: 20em; max-width: 20em;
} }
.search-group:hover,
.search-group:focus-within { .search-group:focus-within {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
.search-group:hover :deep(button.action-button),
.search-group:focus-within :deep(button.action-button) {
transform: scale(1.1);
}
.search-group:hover :deep(button.action-button svg),
.search-group:focus-within :deep(button.action-button svg) {
fill: #fff;
}
.search-group:focus-within .search-hint { .search-group:focus-within .search-hint {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@@ -164,6 +173,8 @@ defineExpose({
.search-group :deep(.action-button) { .search-group :deep(.action-button) {
width: 2.2em; width: 2.2em;
height: 2.2em; height: 2.2em;
min-width: 1.5em;
min-height: 1.5em;
flex-shrink: 0; flex-shrink: 0;
} }
.search-group input[type='search'] { .search-group input[type='search'] {
@@ -172,9 +183,10 @@ defineExpose({
border: none; border: none;
outline: none; outline: none;
padding: 0.2em 0.5em 0.2em 0; padding: 0.2em 0.5em 0.2em 0;
font-size: var(--header-font-size); font-size: inherit;
flex: 1 1 3em; flex: 1 1 3em;
min-width: 3em; min-width: 0;
width: 100%;
} }
.search-hint { .search-hint {
position: absolute; position: absolute;
@@ -190,5 +202,11 @@ defineExpose({
line-height: 1.4; line-height: 1.4;
cursor: pointer; cursor: pointer;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
display: none;
}
@media (hover: hover) and (pointer: fine) {
.search-hint {
display: block;
}
} }
</style> </style>
frontend/src/components/SvgButton.vue
+16 -5
View File
@@ -32,18 +32,29 @@ const tooltipText = props.tooltip ?? ''
color: #ccc; color: #ccc;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 0.2em; margin: 0 0.2em;
width: 3em; padding: 0;
height: 3em; width: 2.7em;
height: 2.7em;
min-width: 1.9em;
min-height: 1.9em;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
} }
.action-button:hover, .action-button:hover,
.action-button:focus { .action-button:focus {
color: #fff; color: #fff;
transform: scale(1.1); transform: scale(1.1);
} }
svg { .action-button svg {
fill: #ccc; fill: #ccc;
transform: fill 0.2s ease; transition: fill 0.2s ease;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
} }
.action-button:hover svg, .action-button:hover svg,
.action-button:focus svg { .action-button:focus svg {