mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2024-12-29 11:06:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

web/sidebar: redo padding on mobile & desktop

Browse source 
- accommodate space for scaling animation
- replace static padding with variable in calculations
- no more weird padding on mobile
This commit is contained in:
wukko 2024-07-12 20:22:12 +06:00
parent 914be64153
commit 96be9ffbc3
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/src/components/sidebar/CobaltLogo.svelte
View file

@ -11,7 +11,12 @@
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--padding) * 2 - 2px);
padding: calc(var(--padding) * 2);
/* accommodate space for scaling animation */
padding-bottom: calc(
var(--padding) * 2 - var(--sidebar-inner-padding)
);
}
@media screen and (max-width: 535px) {

10
web/src/components/sidebar/Sidebar.svelte
View file

@ -56,9 +56,8 @@
#sidebar {
background: var(--sidebar-bg);
height: 100vh;
width: var(--sidebar-width);
width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2);
position: sticky;
padding: 0 var(--sidebar-inner-padding);
}
#sidebar-tabs {
@ -66,6 +65,8 @@
justify-content: space-between;
padding-bottom: var(--padding);
overflow-y: scroll;
padding: var(--sidebar-inner-padding);
width: var(--sidebar-width);
}
@media screen and (max-width: 535px) {
@ -80,8 +81,8 @@
height: var(--sidebar-height-mobile);
position: fixed;
bottom: 0;
padding: var(--sidebar-inner-padding) 0;
justify-content: center;
align-items: flex-start;
}
#sidebar::before {
@ -99,6 +100,9 @@
overflow-y: visible;
overflow-x: scroll;
padding-bottom: 0;
padding: var(--sidebar-inner-padding) 0;
width: unset;
height: fit-content;
}
#sidebar :global(.sidebar-inner-container:first-child) {

22
web/src/components/sidebar/SidebarTab.svelte
View file

@ -27,10 +27,10 @@
$: if (isTabActive && tab) {
showTab(tab);
tab.classList.add("animate")
tab.classList.add("animate");
setTimeout(() => {
tab.classList.remove("animate")
}, 220)
tab.classList.remove("animate");
}, 220);
}
</script>
@ -90,15 +90,19 @@
transform: scale(0.95);
}
:global([data-reduce-motion="true"]) .sidebar-tab:active:not(.active) {
transform: none;
}
@keyframes pressButton {
0% {
transform: scale(0.95)
transform: scale(0.95);
}
50% {
transform: scale(1.01)
transform: scale(1.01);
}
100% {
transform: none
transform: none;
}
}
@ -129,13 +133,13 @@
@keyframes pressButton {
0% {
transform: scale(0.9)
transform: scale(0.9);
}
60% {
transform: scale(1.01)
transform: scale(1.015);
}
100% {
transform: scale(1)
transform: scale(1);
}
}
}

18
web/src/routes/+layout.svelte
View file

@ -70,9 +70,13 @@
--border-radius: 11px;
--sidebar-width: 80px;
--sidebar-height-mobile: calc(52px + env(safe-area-inset-bottom));
--sidebar-font-size: 11px;
--sidebar-inner-padding: 4px;
--sidebar-height-mobile: calc(
50px
+ calc(var(--sidebar-inner-padding) * 2)
+ env(safe-area-inset-bottom)
);
--safe-area-inset-top: env(safe-area-inset-top);
@ -134,7 +138,9 @@
height: 100%;
width: 100%;
display: grid;
grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
grid-template-columns: calc(
var(--sidebar-width) + var(--sidebar-inner-padding) * 2
) 1fr;
overflow: hidden;
background-color: var(--sidebar-bg);
color: var(--secondary);
@ -144,7 +150,11 @@
@media screen and (orientation: landscape) {
#cobalt[data-iphone="true"] {
grid-template-columns:
calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px)
calc(
var(--sidebar-width)
+ var(--sidebar-inner-padding) * 2
+ env(safe-area-inset-left)
)
1fr;
}
@ -166,7 +176,7 @@
#cobalt {
display: grid;
grid-template-columns: unset;
grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
grid-template-rows: 1fr var(--sidebar-height-mobile);
}
#content {
padding-top: env(safe-area-inset-top);