Implement progress bar again, first step

webapp/components/CommentForm/CommentForm.vue

@@ -23,7 +23,7 @@
 
 <script>
 import HcEditor from '~/components/Editor/Editor'
-import { COMMENT_MIN_LENGTH } from '../../constants/comment'
+import { COMMENT_MIN_LENGTH } from '~/constants/comment'
 import { minimisedUserQuery } from '~/graphql/User'
 import CommentMutations from '~/graphql/CommentMutations'
 

webapp/components/DonationInfo/DonationInfo.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="donation-info">
-    <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
+    <progress-bar :title="computedTitle" :label="label" :goal="goal" :progress="progress" />
-    <a target="_blank" :href="links.DONATE">
+    <!-- Wolle <a target="_blank" :href="links.DONATE">
       <base-button filled>{{ $t('donations.donate-now') }}</base-button>
-    </a>
+    </a> -->
   </div>
 </template>
 
@@ -16,6 +16,9 @@ export default {
   components: {
     ProgressBar,
   },
+  props: {
+    title: { type: String, required: false },
+  },
   data() {
     return {
       links,
@@ -24,7 +27,8 @@ export default {
     }
   },
   computed: {
-    title() {
+    computedTitle() {
+      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}`
@@ -54,9 +58,10 @@ export default {
 
 <style lang="scss">
 .donation-info {
+  // Wolle
   display: flex;
   align-items: flex-end;
-  height: 100%;
+  // height: 100%;
 
   @media (max-width: 546px) {
     width: 100%;

webapp/components/ProgressBar/ProgressBar.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="progress-bar">
+  <div>
-    <div class="progress-bar__goal"></div>
-    <div class="progress-bar__progress" :style="progressBarWidth"></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>
     <span v-if="label" class="progress-bar__label">{{ label }}</span>
   </div>
 </template>
@@ -40,33 +42,34 @@ export default {
   width: 240px;
   margin-right: $space-x-small;
 
-  @media (max-width: 680px) {
+  // @media (max-width: 680px) {
-    width: 180px;
+  //   width: 180px;
-  }
+  // }
 
-  @media (max-width: 546px) {
+  // @media (max-width: 546px) {
-    flex-basis: 50%;
+  //   flex-basis: 50%;
-    flex-grow: 1;
+  //   flex-grow: 1;
-  }
+  // }
 }
 
 .progress-bar__title {
-  position: absolute;
+  // Wolle
-  top: -2px;
+  // position: absolute;
-  left: $space-xx-small;
+  // top: -2px;
-  margin: 0;
+  // left: $space-xx-small;
+  // margin: 0;
 
-  @media (max-width: 546px) {
+  // @media (max-width: 546px) {
-    top: $space-xx-small;
+  //   top: $space-xx-small;
-  }
+  // }
 
-  @media (max-width: 350px) {
+  // @media (max-width: 350px) {
-    font-size: $font-size-small;
+  //   font-size: $font-size-small;
-  }
+  // }
 }
 
 .progress-bar__goal {
-  position: absolute;
+  position: relative;
   bottom: 0;
   left: 0;
   height: 37.5px; // styleguide-button-size
@@ -77,8 +80,8 @@ export default {
 
 .progress-bar__progress {
   position: absolute;
-  bottom: 1px;
+  top: 1px;
-  left: 0;
+  left: 1px;
   height: 35.5px; // styleguide-button-size - 2px border
   max-width: 100%;
   background-color: $color-yellow;
@@ -86,12 +89,13 @@ export default {
 }
 
 .progress-bar__label {
-  position: absolute;
+  // Wolle
-  top: 50%;
+  // position: absolute;
-  left: $space-xx-small;
+  // top: 50px;
+  // left: $space-xx-small;
 
-  @media (max-width: 350px) {
+  // @media (max-width: 350px) {
-    font-size: $font-size-small;
+  //   font-size: $font-size-small;
-  }
+  // }
 }
 </style>

webapp/constants/donations.js

@@ -0,0 +1,2 @@
+export const DONATIONS_SHOW_MENU_BUTTON = true
+export const DONATIONS_SHOW_INFO = true

webapp/constants/newsfeed.js

@@ -0,0 +1 @@
+export const NEWSFEED_SHOW_INFO_LEFT_LANE = true

webapp/pages/index.vue

@@ -1,47 +1,69 @@
 <template>
   <div>
-    <masonry-grid>
+    <ds-space />
-      <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
+    <ds-flex :width="{ base: '100%' }" gutter="base">
-        <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
+      <ds-flex-item
-      </ds-grid-item>
+        v-if="NEWSFEED_SHOW_INFO_LEFT_LANE"
-      <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
+        :width="{ base: '100%', sm: 2, md: 2, lg: 1 }"
-        <!--<donation-info /> -->
+      >
-        <div>
+        <donation-info
+          v-if="DONATIONS_SHOW_INFO"
+          class="newsfeed-left-side-navigation"
+          :title="'Donations progress'"
+        />
+        <!-- Wolle -->
+        <!-- Wolle <div v-if-else>
           <a target="_blank" :href="links.DONATE">
             <base-button filled>{{ $t('donations.donate-now') }}</base-button>
           </a>
-        </div>
+        </div> -->
-        <div class="sorting-dropdown">
+      </ds-flex-item>
-          <ds-select
+
-            v-model="selected"
+      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-            :options="sortingOptions"
+        <masonry-grid>
-            size="large"
+          <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
-            :icon-right="sortingIcon"
+            <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
-          ></ds-select>
+          </ds-grid-item>
-        </div>
+          <!-- Wolle <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar"> -->
-      </ds-grid-item>
+          <!--<donation-info /> -->
-      <template v-if="hasResults">
+          <!-- Wolle <div>
-        <masonry-grid-item
+              <a target="_blank" :href="links.DONATE">
-          v-for="post in posts"
+                <base-button filled>{{ $t('donations.donate-now') }}</base-button>
-          :key="post.id"
+              </a>
-          :imageAspectRatio="post.image && post.image.aspectRatio"
+            </div> -->
-        >
+          <!-- Wolle <div class="sorting-dropdown">
-          <post-teaser
+              <ds-select
-            :post="post"
+                v-model="selected"
-            @removePostFromList="posts = removePostFromList(post, posts)"
+                :options="sortingOptions"
-            @pinPost="pinPost(post, refetchPostList)"
+                size="large"
-            @unpinPost="unpinPost(post, refetchPostList)"
+                :icon-right="sortingIcon"
-          />
+              ></ds-select>
-        </masonry-grid-item>
+            </div> -->
-      </template>
+          <!-- </ds-grid-item> -->
-      <template v-else>
+          <template v-if="hasResults">
-        <ds-grid-item :row-span="2" column-span="fullWidth">
+            <masonry-grid-item
-          <hc-empty icon="docs" />
+              v-for="post in posts"
-          <ds-text align="center">{{ $t('index.no-results') }}</ds-text>
+              :key="post.id"
-          <ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
+              :imageAspectRatio="post.image && post.image.aspectRatio"
-        </ds-grid-item>
+            >
-      </template>
+              <post-teaser
-    </masonry-grid>
+                :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>
     <client-only>
       <nuxt-link :to="{ name: 'post-create' }">
         <base-button
@@ -64,8 +86,10 @@
 </template>
 
 <script>
+import { DONATIONS_SHOW_INFO } from '~/constants/donations'
+import { NEWSFEED_SHOW_INFO_LEFT_LANE } from '~/constants/newsfeed'
 import postListActions from '~/mixins/postListActions'
-// import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
+import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
 import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue'
 import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
@@ -78,7 +102,7 @@ import links from '~/constants/links.js'
 
 export default {
   components: {
-    // DonationInfo,
+    DonationInfo,
     HashtagsFilter,
     PostTeaser,
     HcEmpty,
@@ -89,6 +113,8 @@ export default {
   data() {
     const { hashtag = null } = this.$route.query
     return {
+      DONATIONS_SHOW_INFO,
+      NEWSFEED_SHOW_INFO_LEFT_LANE,
       links,
       posts: [],
       hasMore: true,
@@ -196,6 +222,12 @@ export default {
 </script>
 
 <style lang="scss">
+.newsfeed-left-side-navigation {
+  position: sticky;
+  top: 65px;
+  z-index: 2;
+}
+
 .masonry-grid {
   display: grid;
   grid-gap: 10px;