ami/tl-vikunja
1
0
Fork 0
Code Activity

Fix header layout for long list titles

Browse Source
This commit is contained in:
kolaente
2021-06-23 22:08:20 +02:00
parent f58a48bc1f
commit 543df91aba
6 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/styles/components/list.scss
View File

@ -24,9 +24,17 @@
align-items: center;
justify-content: center;
$edit-icon-width: 1rem;
@media screen and (min-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
--nav-username-width: 0;
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
}
@media screen and (max-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - 1rem); // -1rem for the edit icon
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
}
h1 {

2
src/styles/components/notifications.scss
View File

@ -1,5 +1,5 @@
.notifications {
width: 50px;
width: $navbar-icon-width;
.unread-indicator {
position: absolute;

16
src/styles/theme/navigation.scss
View File

@ -1,7 +1,7 @@
@use "sass:math";
.navbar {
z-index: 2;
z-index: 4 !important;
.navbar-dropdown {
box-shadow: $navbar-dropdown-boxed-shadow;
@ -11,6 +11,10 @@
.navbar-brand {
display: flex;
align-items: center;
.logo img {
width: $vikunja-nav-logo-full-width;
}
}
}
@ -73,10 +77,6 @@
margin: 0 0.5rem;
}
.navbar {
z-index: 4 !important;
}
.app-container {
.namespace-container {
background: $vikunja-nav-background;
@ -327,11 +327,15 @@
.trigger-button {
cursor: pointer;
color: $grey-400;
padding: 1rem;
padding: .5rem;
font-size: 1.25rem;
position: relative;
}
> * > .trigger-button {
width: $navbar-icon-width;
}
.user {
span {
font-family: $vikunja-font;

2
src/styles/theme/variables/variables.scss
View File

@ -29,6 +29,7 @@ $navbar-padding: 2rem;
$vikunja-nav-background: $light-background;
$vikunja-nav-color: $grey-700;
$vikunja-nav-selected-width: 0.4rem;
$vikunja-nav-logo-full-width: 164px;
$transition-duration: 150ms;
$transition: $transition-duration ease;
@ -47,6 +48,7 @@ $hamburger-menu-icon-spacing: 1rem;
$hamburger-menu-icon-width: 28px;
$navbar-height: 4rem;
$navbar-width: 300px;
$navbar-icon-width: 40px;
$editor-border-color: #ddd;