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

Modal responsive improvements (#14087)

Browse Source 
* stack profile actions on smaller screens

* stack avatar and stats for even smaller screens

* remove unnecessary classes to keep profile nav on the same line

* adjust media query width

* refactor stats removing unnecessary classes and simplifying with less elements and relying more on flexbox

* adjust breakpoints for modal vs pofile page

* more margin for avatar

* handle allocation on middle size more gracefully

Co-authored-by: scoffrin <scoffrin@indeed.com>
This commit is contained in:
Scott Coffrin
2022-07-08 14:49:22 -06:00
committed by GitHub
parent b04df06a37
commit 8ecb0f45b5
3 changed files with 102 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/client/src/components/memberDetails.vue
View File

@@ -4,7 +4,7 @@
:class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
@click="showMemberModal(member)"
>
<div :class="{ 'col-4': !isHeader }">
<div class="avatar-container" :class="{ 'col-4': !isHeader }">
<avatar
:member="member"
:hide-class-badge="classBadgePosition !== 'under-avatar'"
@@ -92,6 +92,10 @@
.member-details {
white-space: nowrap;
transition: all 0.15s ease-out;
.avatar-container {
margin-bottom: 20px;
}
}
.member-stats {

25
website/client/src/components/userMenu/profile.vue
View File

@@ -126,7 +126,7 @@
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 offset-md-3 text-center nav">
<div class="text-center nav">
<div
class="nav-item"
:class="{active: selectedPage === 'profile'}"
@@ -470,6 +470,7 @@
.gift-icon svg {
height: 14px;
}
</style>
<style lang="scss" scoped>
@@ -538,6 +539,7 @@
}
.nav {
width: 100%;
font-weight: bold;
min-height: 40px;
justify-content: center;
@@ -710,6 +712,27 @@
}
}
}
@media (max-width: 990px) {
.profile-actions {
flex-direction: column;
}
.profile-actions :not(:last-child) {
margin-bottom: 15px;
}
.profile-actions {
margin-right: 0;
}
}
@media (max-width: 550px) {
.member-details {
flex-direction: column;
}
.member-details .avatar {
margin-bottom: 15px;
}
}
</style>
<script>

68
website/client/src/components/userMenu/profileStats.vue
View File

@@ -4,7 +4,7 @@
class="standard-page"
>
<div class="row">
<div class="col-12 col-md-6">
<div class="stats-section-equipment col-12 col-md-6">
<h2 class="text-center">
{{ $t('equipment') }}
</h2>
@@ -12,7 +12,7 @@
<div
v-for="(label, key) in equipTypes"
:key="key"
class="col-12 col-md-4 item-wrapper"
class="item-wrapper"
>
<div
v-if="label !== 'skip'"
@@ -48,7 +48,7 @@
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="stats-section-costume col-12 col-md-6">
<h2 class="text-center">
{{ $t('costume') }}
</h2>
@@ -57,7 +57,7 @@
<div
v-for="(label, key) in equipTypes"
:key="key"
class="col-12 col-md-4 item-wrapper"
class="item-wrapper"
>
<!-- Append a "C" to the key name since HTML IDs have to be unique.-->
<div
@@ -111,7 +111,7 @@
</div>
</div>
<div class="row pet-mount-row">
<div class="col-12 col-md-6">
<div class="stats-section-pets col-12 col-md-6">
<h2
v-once
class="text-center"
@@ -119,8 +119,7 @@
{{ $t('pets') }}
</h2>
<div class="well pet-mount-well">
<div class="row col-12">
<div class="col-12 col-md-4">
<div class="pet-mount-well-image">
<div
class="box"
:class="{white: user.items.currentPet}"
@@ -131,7 +130,7 @@
></div>
</div>
</div>
<div class="col-12 col-md-8">
<div class="pet-mount-well-text">
<div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
<div>
<strong>{{ $t('petsFound') }}:</strong>
@@ -144,8 +143,7 @@
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="stats-section-mounts col-12 col-md-6">
<h2
v-once
class="text-center"
@@ -153,8 +151,7 @@
{{ $t('mounts') }}
</h2>
<div class="well pet-mount-well">
<div class="row col-12">
<div class="col-12 col-md-4">
<div class="pet-mount-well-image">
<div
class="box"
:class="{white: user.items.currentMount}"
@@ -165,7 +162,7 @@
></div>
</div>
</div>
<div class="col-12 col-md-8">
<div class="pet-mount-well-text">
<div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div>
<div>
<strong>{{ $t('mountsTamed') }}:</strong>
@@ -179,7 +176,6 @@
</div>
</div>
</div>
</div>
<div
id="attributes"
class="row"
@@ -309,7 +305,6 @@
v-if="showStatsSave"
class="row save-row"
>
<div class="col-12 col-md-6 offset-md-3 text-center">
<button
class="btn btn-primary"
:disabled="loading"
@@ -320,7 +315,6 @@
</div>
</div>
</div>
</div>
</template>
<script>
@@ -650,10 +644,17 @@ export default {
border-radius: 2px;
padding: 0.4em;
padding-top: 1em;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.well.pet-mount-well {
padding-left: 15px;
padding-bottom: 1em;
flex-wrap: nowrap;
justify-content: flex-start;
strong {
margin-right: .2em;
@@ -690,12 +691,13 @@ export default {
}
.save-row {
margin-top: 1em;
margin: 2em 0 1em 0;
justify-content: center;
}
.gear.box {
vertical-align: top;
margin: 0 auto;
// margin: 0 auto;
}
.gear-label {
@@ -721,4 +723,34 @@ export default {
// breaks the long words without a space
word-break: break-word;
}
@media (max-width: 850px) {
#stats .col-md-6 {
flex: none;
max-width: 100%;
}
}
@media(max-width: 990px) {
.modal-body #stats .col-md-6 {
flex: none;
max-width: 100%;
}
[class^="stats-section-"] {
margin-bottom: 30px;
}
#allocation {
.box {
width: 100%;
height: 100%;
.col-9 {
padding: 0;
margin: 0;
}
.col-9 div:first-child {
font-size: 13px;
}
}
}
}
</style>