This commit is contained in:
Wolfgang Huß 2021-05-06 16:37:31 +02:00
parent 59dfb4662e
commit da951c6fb6
14 changed files with 25 additions and 151 deletions

View File

@ -2,10 +2,15 @@ import { v4 as uuid } from 'uuid'
export default {
id: { type: 'string', primary: true, default: uuid },
showDonations: { type: 'boolean' },
goal: { type: 'number' },
progress: { type: 'number' },
createdAt: { type: 'string', isoDate: true, default: () => new Date().toISOString() },
showDonations: { type: 'boolean', required: true },
goal: { type: 'number', required: true },
progress: { type: 'number', required: true },
createdAt: {
type: 'string',
isoDate: true,
required: true,
default: () => new Date().toISOString(),
},
updatedAt: {
type: 'string',
isoDate: true,

View File

@ -1,10 +1,10 @@
type Donations {
id: ID!
createdAt: String
updatedAt: String
showDonations: Boolean! # Wolle make it required in the schema
goal: Int! # Wolle make it required in the schema
progress: Int! # Wolle make it required in the schema
createdAt: String!
updatedAt: String!
showDonations: Boolean!
goal: Int!
progress: Int!
}
type Query {

View File

@ -1,6 +1,6 @@
<template>
<div class="donation-info">
<progress-bar :title="computedTitle" :label="label" :goal="goal" :progress="progress">
<progress-bar :label="label" :goal="goal" :progress="progress">
<a target="_blank" :href="links.DONATE">
<base-button size="small" filled>{{ $t('donations.donate-now') }}</base-button>
</a>
@ -10,7 +10,6 @@
<script>
import links from '~/constants/links.js'
// Wolle import { DonationsQuery } from '~/graphql/Donations'
import ProgressBar from '~/components/ProgressBar/ProgressBar.vue'
export default {
@ -19,30 +18,15 @@ export default {
},
props: {
title: { type: String, required: false, default: () => null },
goal: {
type: Number,
required: true,
},
progress: {
type: Number,
required: true,
},
goal: { type: Number, required: true },
progress: { type: Number, required: true },
},
data() {
return {
links,
// Wolle goal: 15000,
// progress: 0,
}
},
computed: {
computedTitle() {
// Wolle
if (this.title) return this.title
const today = new Date()
const month = today.toLocaleString(this.$i18n.locale(), { month: 'long' })
return `${this.$t('donations.donations-for')} ${month}`
},
label() {
return this.$t('donations.amount-of-total', {
amount: this.progress.toLocaleString(this.$i18n.locale()),
@ -50,37 +34,13 @@ export default {
})
},
},
// Wolle apollo: {
// Donations: {
// query() {
// return DonationsQuery()
// },
// update({ Donations }) {
// if (!Donations[0]) return
// const { goal, progress } = Donations[0] // Wolle showDonations
// this.goal = goal
// this.progress = progress
// },
// },
// },
}
</script>
<style lang="scss">
.donation-info {
// Wolle
display: flex;
// align-items: flex-end;
// width: 100%;
// height: 100%;
flex: 1;
margin-bottom: $space-x-small;
// @media (max-width: 546px) {
// // width: 100%;
// height: 50%;
// // justify-content: flex-end;
// // margin-bottom: $space-x-small;
// }
}
</style>

View File

@ -29,17 +29,6 @@ describe('ProgessBar.vue', () => {
})
})
describe('given a title', () => {
beforeEach(() => {
propsData.title = 'This is progress'
})
// Wolle
it.skip('renders the title', () => {
expect(Wrapper().find('.progress-bar__title').text()).toBe('This is progress')
})
})
describe('given a label', () => {
beforeEach(() => {
propsData.label = 'Going well'

View File

@ -1,10 +1,5 @@
<template>
<div class="progress-bar-component">
<!-- <h4 v-if="title" class="progress-bar__title">{{ title }}</h4> -->
<!-- <ds-flex :width="{ base: '300px' }"> -->
<!-- <ds-flex > -->
<!-- <ds-flex-item :width="{ base: '152px' }"> -->
<!-- <ds-flex-item> -->
<div class="progress-bar">
<div class="progress-bar__goal"></div>
<div class="progress-bar__progress" :style="progressBarWidth"></div>
@ -12,15 +7,9 @@
<span v-if="label" class="progress-bar__label">{{ label }}</span>
</div>
</div>
<!-- </ds-flex-item> -->
<!-- <ds-flex-item :width="{ base: '100px' }"> -->
<!-- <ds-flex-item> -->
<div class="progress-bar-button">
<slot />
</div>
<!-- </ds-flex-item> -->
<!-- </ds-flex> -->
<!-- <span v-if="label" class="progress-bar__label">{{ label }}</span> -->
</div>
</template>
@ -35,9 +24,6 @@ export default {
type: Number,
required: true,
},
title: {
type: String,
},
label: {
type: String,
},
@ -54,68 +40,22 @@ export default {
.progress-bar-component {
height: 100%;
position: relative;
// width: 150px;
// width: 100%;
// flex: 0 0 100%;
// align-self: stretch;
flex: 1;
display: flex;
top: $space-xx-small;
// margin-right: $space-x-small;
// @media (max-width: 680px) {
// width: 180px;
// }
// @media (max-width: 546px) {
// flex-basis: 50%;
// flex-grow: 1;
// }
}
.progress-bar {
position: relative;
height: 100%;
// width: 150px;
// width: 100%;
// flex: 0 0 100%;
// align-self: stretch;
flex: 1;
margin-right: $space-x-small;
// @media (max-width: 680px) {
// width: 180px;
// }
// @media (max-width: 546px) {
// flex-basis: 50%;
// flex-grow: 1;
// }
}
.progress-bar__title {
// Wolle
// position: absolute;
// top: -2px;
margin-left: $space-xxx-small;
// margin: 0;
@media (max-width: 546px) {
top: $space-xx-small;
}
@media (max-width: 350px) {
font-size: $font-size-small;
}
}
.progress-bar__goal {
position: relative;
height: 26px; // styleguide-button-size
// Wolle width: 100%;
border: 1px solid $color-primary;
// Wolle background-color: $color-neutral-100;
// background-color: $color-neutral-70;
background: repeating-linear-gradient(120deg, $color-neutral-80, $color-neutral-70);
border-radius: $border-radius-base;
}
@ -126,11 +66,6 @@ export default {
left: 0px;
height: 26px; // styleguide-button-size
max-width: 100%;
// Wolle background-color: $color-yellow;
// background: repeating-linear-gradient(60deg, $color-primary-light, $color-primary-light 35px, $color-primary 35px, $color-primary 70px);
// background: repeating-linear-gradient(60deg, $color-primary-light, $color-primary-light 35px, $color-primary 35px, $color-primary 50px);
// background: repeating-linear-gradient(60deg, $color-primary-light, $color-primary-light 25px, $color-primary 35px, $color-primary 50px, $color-primary-light, $color-primary, $color-primary);
// background: repeating-linear-gradient(120deg, $color-primary 0px, $color-primary 35px, $color-primary-light 45px, $color-primary-light 80px, $color-primary 90px);
background: repeating-linear-gradient(
120deg,
$color-primary 0px,
@ -151,22 +86,15 @@ export default {
display: inline-flex;
align-items: center;
justify-content: center;
// Wolle border: 1px solid $color-primary;
border-radius: $border-radius-base;
}
.progress-bar__label {
// Wolle
position: relative;
// top: 8px;
// right: 8px;
// text-align: right;
float: right;
// margin-left: $space-xxx-small;
@media (max-width: 350px) {
font-size: $font-size-small;
// top: 10px;
}
}

View File

@ -299,8 +299,7 @@
},
"donations": {
"amount-of-total": "{amount} von {total} € erreicht",
"donate-now": "Jetzt spenden",
"donations-for": "Spenden für"
"donate-now": "Jetzt spenden"
},
"editor": {
"embed": {

View File

@ -299,8 +299,7 @@
},
"donations": {
"amount-of-total": "{amount} of {total} € collected",
"donate-now": "Donate now",
"donations-for": "Donations for"
"donate-now": "Donate now"
},
"editor": {
"embed": {

View File

@ -245,8 +245,7 @@
},
"donations": {
"amount-of-total": "{amount} de {total} € recaudados",
"donate-now": "Donar ahora",
"donations-for": "Donaciones para"
"donate-now": "Donar ahora"
},
"editor": {
"embed": {

View File

@ -245,8 +245,7 @@
},
"donations": {
"amount-of-total": "{amount} de {total} € collectés",
"donate-now": "Faites un don",
"donations-for": "Dons pour"
"donate-now": "Faites un don"
},
"editor": {
"embed": {

View File

@ -253,9 +253,7 @@
},
"donations": {
"amount-of-total": "{amount} of {total} € collezionato",
"donate-now": "Dona ora",
"donations-for": "Donazioni per"
},
"donate-now": "Dona ora" },
"editor": {
"embed": {
"always_allow": null,

View File

@ -291,8 +291,7 @@
},
"donations": {
"amount-of-total": "{amount} dos {total} € foram coletados",
"donate-now": "Doe agora",
"donations-for": "Doações para"
"donate-now": "Doe agora"
},
"editor": {
"embed": {

View File

@ -245,8 +245,7 @@
},
"donations": {
"amount-of-total": "{amount} из {total} € собрано",
"donate-now": "Пожертвуйте сейчас",
"donations-for": "Пожертвования для"
"donate-now": "Пожертвуйте сейчас"
},
"editor": {
"embed": {

View File

@ -30,7 +30,6 @@
:disabled="!showDonations"
/>
<base-button class="donations-info-button" filled type="submit">
<!-- Wolle :disabled="formData.showDonations === null || !formData.goal || !formData.progress" -->
{{ $t('actions.save') }}
</base-button>
</ds-form>

View File

@ -5,6 +5,7 @@
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<!-- donation info -->
<!-- Wolle test appearence or hiding -->
<ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
<donation-info :goal="goal" :progress="progress" />
</ds-grid-item>