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

Move progress bar on top of the news feed again, with full width

Browse Source
This commit is contained in:
Wolfgang Huß 2021-04-13 16:42:32 +02:00
parent d259b27943
commit 4c72dd7481
4 changed files with 118 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
webapp/components/ProgressBar/ProgressBar.spec.js
View File

@ -1,6 +1,8 @@
import { mount } from '@vue/test-utils'
import ProgressBar from './ProgressBar'
const localVue = global.localVue
describe('ProgessBar.vue', () => {
let propsData
@ -11,7 +13,7 @@ describe('ProgessBar.vue', () => {
}
})
const Wrapper = () => mount(ProgressBar, { propsData })
const Wrapper = () => mount(ProgressBar, { localVue, propsData })
describe('given only goal and progress', () => {
it('renders no title', () => {

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

@ -1,18 +1,23 @@
<template>
<div>
<h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
<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 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>
</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>
@ -43,10 +48,34 @@ export default {
</script>
<style lang="scss">
.progress-bar-component {
height: 100%;
// width: 150px;
// width: 100%;
// flex: 0 0 100%;
// align-self: stretch;
flex: 1;
display: flex;
// 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: 150px;
// width: 100%;
// flex: 0 0 100%;
// align-self: stretch;
flex: 1;
margin-right: $space-x-small;
// @media (max-width: 680px) {
@ -79,17 +108,17 @@ export default {
position: relative;
bottom: 0;
left: 0;
height: 37.5px; // styleguide-button-size
width: 100%;
height: 36px; // styleguide-button-size
// width: 100%;
background-color: $color-neutral-100;
border-radius: $border-radius-base;
}
.progress-bar__progress {
position: absolute;
top: 1px;
left: 1px;
height: 35.5px; // styleguide-button-size - 2px border
top: 0px;
left: 0px;
height: 36px; // styleguide-button-size
max-width: 100%;
background-color: $color-yellow;
border-radius: $border-radius-base;
@ -105,4 +134,9 @@ export default {
font-size: $font-size-small;
}
}
.progress-bar-button {
// justify-content: flex-end;
float: right;
}
</style>

112
webapp/pages/index.vue
View File

@ -1,39 +1,41 @@
<template>
<div>
<!-- <ds-space /> -->
<!-- Wolle <ds-space /> -->
<!-- <ds-flex :width="{ base: '100%' }" gutter="base"> -->
<ds-flex>
<!-- <ds-flex-item
<!-- <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
<!-- <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="'Donation progress'"
/>
<!-- Wolle <div v-if-else>
/> -->
<!-- Wolle <div v-if-else>
<a target="_blank" :href="links.DONATE">
<base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a>
</div> -->
</ds-flex-item>
<!-- </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<masonry-grid>
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<!-- Wolle <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar"> -->
<!--<donation-info /> -->
<!-- Wolle <div>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }"> -->
<masonry-grid>
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<ds-grid-item class="top-info-bar" :row-span="1" column-span="fullWidth">
<!--<donation-info /> -->
<donation-info v-if="DONATIONS_SHOW_INFO" :title="'Donation progress'" />
<!-- class="newsfeed-left-side-navigation" -->
<!-- Wolle <div>
<a target="_blank" :href="links.DONATE">
<base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a>
</div> -->
<!-- Wolle <div class="sorting-dropdown">
<!-- Wolle <div class="sorting-dropdown">
<ds-select
v-model="selected"
:options="sortingOptions"
@ -41,31 +43,31 @@
:icon-right="sortingIcon"
></ds-select>
</div> -->
<!-- </ds-grid-item> -->
<template v-if="hasResults">
<masonry-grid-item
v-for="post in posts"
:key="post.id"
:imageAspectRatio="post.image && post.image.aspectRatio"
>
<post-teaser
:post="post"
@removePostFromList="posts = removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)"
/>
</masonry-grid-item>
</template>
<template v-else>
<ds-grid-item :row-span="2" column-span="fullWidth">
<hc-empty icon="docs" />
<ds-text align="center">{{ $t('index.no-results') }}</ds-text>
<ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
</ds-grid-item>
</template>
</masonry-grid>
</ds-flex-item>
</ds-flex>
</ds-grid-item>
<template v-if="hasResults">
<masonry-grid-item
v-for="post in posts"
:key="post.id"
:imageAspectRatio="post.image && post.image.aspectRatio"
>
<post-teaser
:post="post"
@removePostFromList="posts = removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)"
/>
</masonry-grid-item>
</template>
<template v-else>
<ds-grid-item :row-span="2" column-span="fullWidth">
<hc-empty icon="docs" />
<ds-text align="center">{{ $t('index.no-results') }}</ds-text>
<ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
</ds-grid-item>
</template>
</masonry-grid>
<!-- </ds-flex-item> -->
<!-- Wolle </ds-flex> -->
<client-only>
<nuxt-link :to="{ name: 'post-create' }">
<base-button
@ -205,11 +207,11 @@ export default {
</script>
<style lang="scss">
.newsfeed-left-side-navigation {
position: sticky;
top: 65px;
z-index: 2;
}
// Wolle .newsfeed-left-side-navigation {
// position: sticky;
// top: 65px;
// z-index: 2;
// }
.masonry-grid {
display: grid;
@ -248,13 +250,15 @@ export default {
}
.top-info-bar {
// margin-bottom: $space-x-small;
display: flex;
justify-content: space-between;
align-items: flex-end;
// justify-content: space-between;
// align-items: flex-end;
align-items: center;
@media (max-width: 546px) {
grid-row-end: span 3 !important;
flex-direction: column;
}
// Wolle @media (max-width: 546px) {
// grid-row-end: span 3 !important;
// flex-direction: column;
// }
}
</style>