local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix list title on mobile

Browse source
This commit is contained in:
kolaente 2020-06-12 19:32:37 +02:00
parent 7065b52053
commit cd98b41bec
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
5 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -14,6 +14,9 @@
<img src="/images/logo-full.svg" alt="Vikunja"/>
</router-link>
</div>
<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
<icon icon="bars"></icon>
</a>
<div class="list-title" v-if="currentList.id">
<h1
class="title"
@ -57,9 +60,6 @@
</div>
</nav>
<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
<icon icon="bars"></icon>
</a>
<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
<icon icon="times"></icon>
</a>

6
src/styles/components/list.scss
View file

@ -40,6 +40,12 @@
.list-title {
display: flex;
align-items: center;
justify-content: center;
@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
}
h1 {
margin: 0;

2
src/styles/theme/content.scss
View file

@ -1,7 +1,7 @@
.app-container {
min-height: calc(100vh - 65px);
@media screen and (max-width: $tablet) {
padding-top: $navbar-height + 0.75rem;
padding-top: $navbar-height;
}
.app-content {

23
src/styles/theme/navigation.scss
View file

@ -25,6 +25,9 @@
.title {
margin: 0;
font-size: 1.75rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-end {
@ -37,15 +40,11 @@
@media screen and (max-width: $tablet) {
.navbar-brand {
// This prevents the user icon from snapping to the left into the menu button
width: 0;
overflow: hidden;
display: none;
}
}
@media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
.user {
width: 4rem;
width: $user-dropdown-width-mobile;
display: flex;
align-items: center;
@ -110,7 +109,7 @@
transition: all $transition;
position: fixed;
bottom: 0;
top: $navbar-height + 0.75rem;
top: $navbar-height;
overflow-x: auto;
width: 17vw;
@ -350,7 +349,6 @@
.mobilemenu-hide-button, .mobilemenu-show-button {
display: none;
position: fixed;
z-index: 31;
font-weight: bold;
font-size: 2em;
@ -363,7 +361,7 @@
}
.mobilemenu-hide-button {
color: $dark;
position: fixed;
&:hover, &:focus {
color: $dark;
@ -386,14 +384,13 @@
@media screen and (max-width: $tablet) {
.mobilemenu-hide-button {
display: block;
top: 1rem;
right: 1rem;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
.mobilemenu-show-button {
display: block;
top: 1rem;
left: 1rem;
margin-left: $hamburger-menu-icon-spacing;
}
.mobile-overlay {

13
src/styles/theme/variables.scss
View file

@ -1,6 +1,4 @@
$black: hsl(0, 0%, 4%) !default
$black: hsl(0, 0%, 4%) !default;
$orange: #ff851b;
$green: #00CE6E;
$blue: #5974d9;
@ -22,7 +20,7 @@ $transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: darken(#fff, 10%);
$vikunja-blue: #7F23FF;// #7F23FF; // #5974d9
$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
$vikunja-green: #4DB788;
$navbar-padding: 2em;
@ -46,4 +44,9 @@ $scrollbar-hover-color: lighten($dark, 30);
$button-height: 2.648em;
$switch-view-height: 43px;
$switch-view-height: 43px;
$user-dropdown-width-mobile: 4rem;
$hamburger-menu-icon-spacing: 1rem;
$hamburger-menu-icon-width: 28px;
$navbar-height: 4rem;