From 4c72dd74815f55b5f432d2d48a344372d1114a64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Apr 2021 16:42:32 +0200
Subject: [PATCH] Move progress bar on top of the news feed again, with full
 width

---
 .../components/DonationInfo/DonationInfo.vue  |   5 +-
 .../ProgressBar/ProgressBar.spec.js           |   4 +-
 webapp/components/ProgressBar/ProgressBar.vue |  74 ++++++++----
 webapp/pages/index.vue                        | 112 +++++++++---------
 4 files changed, 118 insertions(+), 77 deletions(-)

diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index 0abfd93b7..1234c67c4 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -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) {
diff --git a/webapp/components/ProgressBar/ProgressBar.spec.js b/webapp/components/ProgressBar/ProgressBar.spec.js
index e6617fc43..575de5b1c 100644
--- a/webapp/components/ProgressBar/ProgressBar.spec.js
+++ b/webapp/components/ProgressBar/ProgressBar.spec.js
@@ -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', () => {
diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue
index 4eee12af7..8d040ca17 100644
--- a/webapp/components/ProgressBar/ProgressBar.vue
+++ b/webapp/components/ProgressBar/ProgressBar.vue
@@ -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>
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 7041f0fa5..29f80aba5 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -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>