IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement donation progress bar, second step

Browse Source
This commit is contained in:
Wolfgang Huß 2021-04-08 17:44:35 +02:00
parent 371e83404c
commit 90b9ffb917
3 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,10 @@
<template>
<div class="donation-info">
<progress-bar :title="computedTitle" :label="label" :goal="goal" :progress="progress" />
<!-- Wolle <a target="_blank" :href="links.DONATE">
<base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a> -->
<progress-bar :title="computedTitle" :label="label" :goal="goal" :progress="progress">
<a target="_blank" :href="links.DONATE" align="right">
<base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a>
</progress-bar>
</div>
</template>
@ -60,14 +61,16 @@ export default {
.donation-info {
// Wolle
display: flex;
align-items: flex-end;
// align-items: flex-end;
width: 100%;
// height: 100%;
margin-bottom: $space-x-small;
@media (max-width: 546px) {
width: 100%;
height: 50%;
justify-content: flex-end;
margin-bottom: $space-x-small;
}
// @media (max-width: 546px) {
// // width: 100%;
// height: 50%;
// // justify-content: flex-end;
// // margin-bottom: $space-x-small;
// }
}
</style>

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

@ -1,10 +1,17 @@
<template>
<div>
<h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
<div class="progress-bar">
<div class="progress-bar__goal"></div>
<div class="progress-bar__progress" :style="progressBarWidth"></div>
</div>
<ds-flex :width="{ base: '300px' }">
<ds-flex-item :width="{ base: '152px' }">
<div class="progress-bar">
<div class="progress-bar__goal"></div>
<div class="progress-bar__progress" :style="progressBarWidth"></div>
</div>
</ds-flex-item>
<ds-flex-item :width="{ base: '100px' }">
<slot />
</ds-flex-item>
</ds-flex>
<span v-if="label" class="progress-bar__label">{{ label }}</span>
</div>
</template>
@ -39,7 +46,7 @@ export default {
.progress-bar {
position: relative;
height: 100%;
width: 240px;
width: 150px;
margin-right: $space-x-small;
// @media (max-width: 680px) {
@ -56,16 +63,16 @@ export default {
// Wolle
// position: absolute;
// top: -2px;
// left: $space-xx-small;
margin-left: $space-xxx-small;
// margin: 0;
// @media (max-width: 546px) {
// top: $space-xx-small;
// }
@media (max-width: 546px) {
top: $space-xx-small;
}
// @media (max-width: 350px) {
// font-size: $font-size-small;
// }
@media (max-width: 350px) {
font-size: $font-size-small;
}
}
.progress-bar__goal {
@ -92,10 +99,10 @@ export default {
// Wolle
// position: absolute;
// top: 50px;
// left: $space-xx-small;
margin-left: $space-xxx-small;
// @media (max-width: 350px) {
// font-size: $font-size-small;
// }
@media (max-width: 350px) {
font-size: $font-size-small;
}
}
</style>

14
webapp/pages/index.vue
View File

@ -1,17 +1,19 @@
<template>
<div>
<ds-space />
<ds-flex :width="{ base: '100%' }" gutter="base">
<ds-flex-item
<!-- <ds-space /> -->
<!-- <ds-flex :width="{ base: '100%' }" gutter="base"> -->
<ds-flex>
<!-- <ds-flex-item
v-if="NEWSFEED_SHOW_INFO_LEFT_LANE"
:width="{ base: '100%', sm: 2, md: 2, lg: 1 }"
>
> -->
<ds-flex-item v-if="NEWSFEED_SHOW_INFO_LEFT_LANE" :width="{ base: '270px' }">
<!-- Wolle -->
<donation-info
v-if="DONATIONS_SHOW_INFO"
class="newsfeed-left-side-navigation"
:title="'Donations progress'"
:title="'Donation progress'"
/>
<!-- Wolle -->
<!-- Wolle <div v-if-else>
<a target="_blank" :href="links.DONATE">
<base-button filled>{{ $t('donations.donate-now') }}</base-button>