mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Clean up
This commit is contained in:
parent
59dfb4662e
commit
da951c6fb6
@ -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,
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -245,8 +245,7 @@
|
||||
},
|
||||
"donations": {
|
||||
"amount-of-total": "{amount} из {total} € собрано",
|
||||
"donate-now": "Пожертвуйте сейчас",
|
||||
"donations-for": "Пожертвования для"
|
||||
"donate-now": "Пожертвуйте сейчас"
|
||||
},
|
||||
"editor": {
|
||||
"embed": {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user