krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make profile modal nav tabs better responsive (#10946)

Browse Source 
* Make profile modal nav tabs better responsive

Remove offset & specific width  and use flexbox centering
Fixes #10944

* Change profile modal nav height to min-height

So that height changes accordingly if nav elements wrap to second row
This commit is contained in:
Carl Vuorinen
2019-01-26 19:59:17 +02:00
committed by Matteo Pagliazzi
parent d10f1304de
commit 8904c58510
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/client/components/userMenu/profile.vue
View File

@@ -33,7 +33,7 @@ div
.col-12 .col-12
member-details(:member="user") member-details(:member="user")
.row .row
.col-12.col-md-6.offset-md-3.text-center.nav .col-12.text-center.nav
.nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }} .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
.nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }} .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
.nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }} .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
@@ -228,12 +228,13 @@ div
.nav { .nav {
font-weight: bold; font-weight: bold;
height: 40px; min-height: 40px;
justify-content: center;
} }
.nav-item { .nav-item {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 1.2em;
padding: 1em; padding: 1em;
} }