contribution style nav and items

2025-12-13 07:45:54 +00:00 · 2022-12-15 10:43:09 +01:00 · 2022-12-15 10:43:09 +01:00 · 2d36bc2af2
commit 2d36bc2af2
parent 971cf97ccf
7 changed files with 208 additions and 166 deletions
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@ -9,10 +9,6 @@ body {
  cursor: pointer;
 }

-.bg-gray300 {
-  background-color: $gray-300;
-}
-
 .shadow-default {
  box-shadow: rgb(0 0 0 / 14%) 0 4px 10px;
 }
@ -24,14 +20,7 @@ body {
 .c-blau {
  color: #0e79bc !important;
 }
-
-.text-gradido {
-  color: rgb(249 205 105 / 100%);
-}
-
-.gradient-gradido {
-  background-image: linear-gradient(146deg, rgb(220 167 44) 50%, rgb(197 141 56 / 100%) 100%);
-}
+ 

 /* Navbar  */
 a,
@ -163,6 +152,18 @@ a:hover,
  border-bottom-color: rgb(195 230 203 / 85%);
 }

+.b-toast-warning .toast .toast-header {
+  color: #fcfcfb;
+  background-color: #c58d38 !important;
+  border-bottom-color: rgba(207, 130, 14, 0.85);
+}
+
+.b-toast-warning .toast .toast-body {
+  color: #010602;
+  background-color: rgba(247, 248, 247, 0.85);
+  border-bottom-color: rgba(207, 130, 14, 0.85);
+}
+
 // .btn-primary pim {
 .btn-primary {
  background-color: #5a7b02;
@ -236,6 +237,13 @@ a:hover,
  background-color: #ebebeba3 !important;
  border-radius: 25pt;
 }
+.gradido-bg-f5 {
+  background-color: #f5f5f5 !important;
+}
+
+.gradido-bg-orange {
+  background-color: rgb( 197 141 56) !important;
+}

 .gradido-width-300 {
  width: 300px;
@ -247,6 +255,7 @@ a:hover,

 .gradido-border-radius {
  border-radius: 26px;
+  overflow: hidden;
 }

 .gradido-no-border-radius {
@ -264,3 +273,42 @@ a:hover,
 .list-group-item {
  background-color: rgb(255 255 255 / 0%);
 }
+
+
+.pulse {
+  // margin:100px;
+  // display: block;
+  // width: 22px;
+  // height: 22px;
+  // border-radius: 50%;
+  // background: #cca92c;
+  // cursor: pointer;
+  box-shadow: 0 0 0 #c58d38;
+  animation: pulse 2s infinite;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 #c58d387e;
+  }
+  70% {
+      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
+  }
+  100% {
+      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+  }
+}
+@keyframes pulse {
+  0% {
+    -moz-box-shadow: 0 0 0 0 #c58d387e;
+    box-shadow: 0 0 0 0 #c58d387e;
+  }
+  70% {
+      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
+      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
+  }
+  100% {
+      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+  }
+}
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@ -1,88 +1,87 @@
 <template>
-  <div
-    class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3"
-    :class="state === 'IN_PROGRESS' ? 'border gradido-global-border-color-danger' : ''"
-  >
-    <slot>
-      <div class="">
-        <b-row>
-          <b-col cols="2">
-            <b-avatar
-              v-if="firstName"
-              :text="avatarText"
-              :badge-variant="variant"
-              size="3em"
-              class="font-weight-bold"
-            >
-              <template #badge><b-icon :icon="icon"></b-icon></template>
-            </b-avatar>
-            <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
-          </b-col>
-          <b-col>
-            <div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
-            <div class="small">
-              {{ $d(new Date(contributionDate), 'monthAndYear') }}
-            </div>
-            <div class="mt-3 h5">{{ $t('contributionText') }}</div>
-            <div>{{ memo }}</div>
-            <div v-if="state === 'IN_PROGRESS'" class="text-danger">
-              {{ $t('contribution.alert.answerQuestion') }}
-            </div>
-            <!-- <div class="small">
+  <div>
+    <div
+      class="contribution-list-item bg-white appBoxShadow gradido-border-radius pt-3 px-3"
+      :class="state === 'IN_PROGRESS' ? 'pulse' : ''"
+    >
+      <b-row>
+        <b-col cols="2">
+          <b-avatar
+            v-if="firstName"
+            :text="avatarText"
+            :badge-variant="variant"
+            size="3em"
+            class="font-weight-bold"
+          >
+            <template #badge><b-icon :icon="icon"></b-icon></template>
+          </b-avatar>
+          <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
+        </b-col>
+        <b-col>
+          <div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
+          <div class="small">
+            {{ $d(new Date(contributionDate), 'monthAndYear') }}
+          </div>
+          <div class="mt-3 h5">{{ $t('contributionText') }}</div>
+          <div>{{ memo }}</div>
+          <div v-if="state === 'IN_PROGRESS'" class="text-danger">
+            {{ $t('contribution.alert.answerQuestion') }}
+          </div>
+          <!-- <div class="small">
            contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
          </div>
          <div class="small">createdAt {{ createdAt }}</div> -->
-          </b-col>
-          <b-col cols="3">
-            <div class="small">{{ $t('creation') }}</div>
-            <div class="font-weight-bold">{{ amount | GDD }}</div>
-          </b-col>
-          <b-col cols="1" @click="visible = !visible">
-            <collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
-          </b-col>
-        </b-row>
-        <b-row
-          v-if="
-            (!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0
-          "
-          class="mt-4 bg-gray300 p-4"
-        >
-          <b-col>
-            <div
-              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
-              class="test-delete-contribution pointer mr-3"
-              @click="deleteContribution({ id })"
-            >
-              <b-icon icon="trash"></b-icon>
-              {{ $t('delete') }}
-            </div>
-          </b-col>
-          <b-col class="text-center">
-            <div
-              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
-              class="test-edit-contribution pointer mr-3"
-              @click="
-                $emit('update-contribution-form', {
-                  id: id,
-                  contributionDate: contributionDate,
-                  memo: memo,
-                  amount: amount,
-                })
-              "
-            >
-              <b-icon icon="pencil"></b-icon>
-              {{ $t('edit') }}
-            </div>
-          </b-col>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('creation') }}</div>
+          <div class="font-weight-bold">{{ amount | GDD }}</div>
+        </b-col>
+        <b-col cols="1">
+          <div v-if="messagesCount > 0" @click="visible = !visible">
+            <collapse-icon class="text-right" :visible="visible" />
+          </div>
+        </b-col>
+      </b-row>
+      <b-row
+        v-if="(!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0"
+        class="mt-4 gradido-bg-orange text-white p-2"
+      >
+        <b-col>
+          <div
+            v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+            class="test-delete-contribution pointer mr-3"
+            @click="deleteContribution({ id })"
+          >
+            <b-icon icon="trash"></b-icon>
+            {{ $t('delete') }}
+          </div>
+        </b-col>
+        <b-col class="text-center">
+          <div
+            v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+            class="test-edit-contribution pointer mr-3"
+            @click="
+              $emit('update-contribution-form', {
+                id: id,
+                contributionDate: contributionDate,
+                memo: memo,
+                amount: amount,
+              })
+            "
+          >
+            <b-icon icon="pencil"></b-icon>
+            {{ $t('edit') }}
+          </div>
+        </b-col>
+
+        <b-col class="text-right">
+          <div v-if="messagesCount > 0" class="pointer" @click="visible = !visible">
+            <b-icon icon="chat-dots"></b-icon>
+            {{ $t('moderatorChat') }}
+          </div>
+        </b-col>
+      </b-row>

-          <b-col class="text-right">
-            <div v-if="messagesCount > 0" class="pointer">
-              <b-icon icon="chat-dots" @click="visible = !visible"></b-icon>
-              {{ $t('moderatorChat') }}
-            </div>
-          </b-col>
-        </b-row>
-      </div>
      <!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
        <div>
          <div class="d-inline-flex">
@ -175,7 +174,7 @@
          />
        </b-card>
      </b-collapse>
-    </slot>
+    </div>
  </div>
 </template>
 <script>
--- a/frontend/src/components/Contributions/GradidoNotification.vue
+++ b/frontend/src/components/Contributions/GradidoNotification.vue
@ -1,53 +0,0 @@
-<template>
-  <div class="contribution-list-info container">
-    <b-alert v-if="list === 'my'" show dismissible fade variant="secondary" class="text-dark">
-      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
-      <p>
-        {{ $t('contribution.alert.myContributionNoteList') }}
-      </p>
-      <ul class="h2">
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="question-square" variant="warning"></b-icon>
-          {{ $t('contribution.alert.in_progress') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-        <li>
-          <b-icon icon="x-circle" variant="danger"></b-icon>
-          {{ $t('contribution.alert.rejected') }}
-        </li>
-      </ul>
-      <hr />
-    </b-alert>
-    <b-alert v-if="list === 'all'" show dismissible fade variant="secondary" class="text-dark">
-      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
-      <p>
-        {{ $t('contribution.alert.communityNoteList') }}
-      </p>
-      <ul class="h2">
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-      </ul>
-    </b-alert>
-  </div>
-</template>
-<script>
-export default {
-  name: 'ContributionListInfo',
-  props: {
-    list: { type: String, required: true },
-  },
-}
-</script>
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@ -2,13 +2,13 @@
  <div class="nav-community">
    <b-row class="nav-row">
      <b-col cols="12" md="4" lg="4" class="mb-2 mb-md-0 mb-lg-0">
-        <b-button block to="#edit">{{ $t('community.submitContribution') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#edit"><b-icon icon="pencil" class="mr-2"/>{{ $t('community.submitContribution') }}</b-btn>
      </b-col>
      <b-col cols="12" md="4" lg="4" class="text-center mb-2 mb-md-0 mb-lg-0">
-        <b-button block to="#my">{{ $t('community.myContributions') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#my"><b-icon icon="person" class="mr-2"/>{{ $t('community.myContributions') }}</b-btn>
      </b-col>
      <b-col cols="12" md="4" lg="4" class="text-right">
-        <b-button block to="#all">{{ $t('community.community') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#all"><b-icon icon="people" class="mr-2"/>{{ $t('community.community') }}</b-btn>
      </b-col>
    </b-row>
  </div>
@ -25,12 +25,8 @@ export default {
  border-radius: 26px;
 }

-/* .router-link-exact-active {
-  background-color: rgb(14, 121, 188);
+.btn-active {
+  background-color: rgb(23 141 129);
  color: white;
-  border-radius: 26px;
-  padding: 10px;
-  padding-left: 25px;
-  padding-right: 25px;
-} */
+}
 </style>
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@ -1,11 +1,53 @@
 <template>
  <div class="contribution-info d-none d-lg-block">
-    <div>
-      <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
-      {{ $t('contribution.formText.bringYourTalentsTo') }}
+    <div v-if="hash === '#my'">
+      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
+      <p>
+        {{ $t('contribution.alert.myContributionNoteList') }}
+      </p>
+      <ul>
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="question-square" variant="warning"></b-icon>
+          {{ $t('contribution.alert.in_progress') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+        <li>
+          <b-icon icon="x-circle" variant="danger"></b-icon>
+          {{ $t('contribution.alert.rejected') }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="hash === '#all'" show fade variant="secondary" class="text-dark">
+      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
+      <p>
+        {{ $t('contribution.alert.communityNoteList') }}
+      </p>
+      <ul>
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="hash === '#edit'" show fade variant="secondary" class="text-dark">
+      <div>
+        <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
+        {{ $t('contribution.formText.bringYourTalentsTo') }}

-      <div class="my-3">
-        <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+        <div class="my-3">
+          <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+        </div>
      </div>
    </div>
  </div>
@ -13,5 +55,10 @@
 <script>
 export default {
  name: 'LastContributions',
+  computed: {
+    hash() {
+      return this.$route.hash
+    },
+  },
 }
 </script>
--- a/frontend/src/mixins/toaster.js
+++ b/frontend/src/mixins/toaster.js
@ -12,6 +12,12 @@ export const toasters = {
        variant: 'danger',
      })
    },
+    toastInfo(message) {
+      this.toast(message, {
+        title: this.$t('navigation.info'),
+        variant: 'warning',
+      })
+    },
    toast(message, options) {
      if (message.replace) message = message.replace(/^GraphQL error: /, '')
      this.$root.$bvToast.toast(message, {
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@ -20,7 +20,6 @@
          />
        </b-tab>
        <b-tab no-body>
-          <gradido-notification list="my" />
          <contribution-list
            @closeAllOpenCollapse="closeAllOpenCollapse"
            :items="items"
@ -34,7 +33,6 @@
          />
        </b-tab>
        <b-tab no-body>
-          <gradido-notification list="all" />
          <contribution-list
            :items="itemsAll"
            @update-list-contributions="updateListAllContributions"
@ -53,14 +51,12 @@
 import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
-import GradidoNotification from '@/components/Contributions/GradidoNotification.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'

 export default {
  name: 'Community',
  components: {
-    GradidoNotification,
    ContributionForm,
    ContributionList,
    OpenCreationsAmount,
@ -250,7 +246,10 @@ export default {
          this.contributionCount = listContributions.contributionCount
          this.items = listContributions.contributionList
          if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-            this.tabIndex = 1
+            // this.tabIndex = 1
+            // this.$route.hash = 'my'
+            this.$router.push({ path: '#my' })
+            this.toastInfo('Du hast eine Rückfrage auf eine Contribution. Bitte beantworte diese!')
          }
        })
        .catch((err) => {