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

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

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

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

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

112
webapp/pages/index.vue
View File

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