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

fix challenge layout (#11620)

Browse Source 
* wrap challenge task icons + margins

* full width challenge card on small devices + padding under add-challenge button
This commit is contained in:
negue
2019-12-23 18:10:48 +01:00
committed by Matteo Pagliazzi
parent 04a9c97393
commit dd0bcfab97
3 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/client/src/components/challenges/challengeItem.vue
View File

@@ -294,8 +294,9 @@
justify-content: space-evenly;
background-color: $gray-700;
text-align: center;
padding: 16px;
padding: 8px;
border-radius: .25em;
flex-wrap: wrap;
> div {
.value {
@@ -326,6 +327,8 @@
}
> div.muted {
margin: 8px;
.value {
opacity: 0.5;
font-size: 20px;

11
website/client/src/components/challenges/findChallenges.vue
View File

@@ -68,6 +68,17 @@
<style lang='scss' scoped>
@import '~@/assets/scss/colors.scss';
@media only screen and (max-width: 768px) {
.header-row {
margin-bottom: 1rem;
}
.col-10.standard-page {
// full width on smaller devices
max-width: 100%;
}
}
.header-row {
h1 {
color: $purple-200;

11
website/client/src/components/challenges/myChallenges.vue
View File

@@ -88,6 +88,17 @@
<style lang='scss' scoped>
@import '~@/assets/scss/colors.scss';
@media only screen and (max-width: 768px) {
.header-row {
margin-bottom: 1rem;
}
.col-10.standard-page {
// full width on smaller devices
max-width: 100%;
}
}
.header-row {
h1 {
color: $purple-200;