ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

style donations info for mobile

Browse Source
This commit is contained in:
Alina Beck 2019-11-11 15:57:29 +03:00
parent 2cd7ee9ac6
commit d15a1a8105
3 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/DonationInfo/DonationInfo.vue
View File

@ -46,5 +46,12 @@ export default {
display: flex;
align-items: flex-end;
height: 100%;
@media (max-width: 546px) {
width: 100%;
height: 50%;
justify-content: flex-end;
margin-bottom: $space-x-small;
}
}
</style>

15
webapp/components/ProgressBar/ProgressBar.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="progress-bar">
<h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
<div class="progress-bar__goal"></div>
<div class="progress-bar__progress" :style="progressBarWidth"></div>
<h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
<span v-if="label" class="progress-bar__label">{{ label }}</span>
</div>
</template>
@ -39,6 +39,15 @@ export default {
height: 100%;
width: 240px;
margin-right: $space-x-small;
@media (max-width: 680px) {
width: 180px;
}
@media (max-width: 546px) {
flex-basis: 50%;
flex-grow: 1;
}
}
.progress-bar__title {
@ -46,6 +55,10 @@ export default {
top: -2px;
left: $space-xx-small;
margin: 0;
@media (max-width: 546px) {
top: $space-xx-small;
}
}
.progress-bar__goal {

9
webapp/pages/index.vue
View File

@ -265,11 +265,20 @@ export default {
.sorting-dropdown {
width: 250px;
position: relative;
@media (max-width: 680px) {
width: 180px;
}
}
.top-info-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
@media (max-width: 546px) {
grid-row-end: span 3 !important;
flex-direction: column;
}
}
</style>