fix: Fix Widgets Placeholder and height - MEED-7396 - Meeds-io/MIPs#155…

… (#520)
Meeds-io · Sep 2, 2024 · b1e13be · b1e13be
1 parent 7b2cf9b
commit b1e13be
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverview.vue b/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverview.vue
@@ -6,17 +6,20 @@
       :title="$t('exoplatform.kudos.button.rewardedKudos')"
       extra-class="application-body">
       <template #action>
-        <select
-          v-model="periodType"
-          class="kudosOverviewPeriodSelect header-height width-auto my-auto py-0 ignore-vuetify-classes"
-          size="1">
-          <option
-            v-for="period in periods"
-            :key="period.value"
-            :value="period.value">
-            {{ period.text }}
-          </option>
-        </select>
+        <div class="position-relative">
+          <select
+            v-model="periodType"
+            :class="$vuetify.rtl && 'l-0' || 'r-0'"
+            class="kudosOverviewPeriodSelect absolute-vertical-center header-height width-auto my-auto py-0 ignore-vuetify-classes"
+            size="1">
+            <option
+              v-for="period in periods"
+              :key="period.value"
+              :value="period.value">
+              {{ period.text }}
+            </option>
+          </select>
+        </div>
       </template>
       <kudos-overview-row
         :period-type="periodType"

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverviewCard.vue b/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverviewCard.vue
@@ -6,14 +6,14 @@
       click: () => $emit('open-drawer')
     }">
     <div class="d-flex">
-      <div class="ms-2 me-1 my-auto kudosOverviewIcon pa-0">
+      <div class="ms-2 me-1 my-2 kudosOverviewIcon pa-0">
         <v-icon class="uiIconKudos height-auto tertiary-color" size="32">fa fa-award</v-icon>
       </div>
       <div class="kudosOverviewCount mx-2 text-h5 font-weight-bold pa-0 d-flex align-center">
         <slot name="count"></slot>
       </div>
     </div>
-    <div class="px-0 mx-0 mt-2 d-flex justify-center">
+    <div class="px-0 mx-0 d-flex justify-center text-body-1">
       <slot name="label"></slot>
     </div>
   </v-card>

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverviewRow.vue b/kudos-webapps/src/main/webapp/vue-app/kudos-overview/components/KudosOverviewRow.vue
@@ -19,7 +19,7 @@
       v-if="hasKudos"
       id="kudosOverviewCardsParent"
       class="white border-box-sizing ma-0 align-center">
-      <v-col class="kudosOverviewCard">
+      <v-col class="kudosOverviewCard col-6 pa-0">
         <kudos-overview-card
           :clickable="isOwner && receivedKudosCount > 0"
           class="kudosReceivedOverviewPeriod mx-n4"
@@ -32,7 +32,7 @@
           </template> 
         </kudos-overview-card>
       </v-col>
-      <v-col class="kudosOverviewCard">
+      <v-col class="kudosOverviewCard col-6 pa-0">
         <kudos-overview-card
           :clickable="isOwner && sentKudosCount > 0"
           class="kudosSentOverviewPeriod mx-n4"
@@ -47,11 +47,11 @@
       </v-col>
     </v-row>
     <div v-else-if="!loading" class="d-flex flex-column align-center justify-center">
-      <v-icon color="tertiary" size="54">fa-award</v-icon>
+      <v-icon color="tertiary" size="60">fa-award</v-icon>
       <span
         v-if="isOverviewDisplay || isOwner"
         v-html="emptyKudosSummaryText"
-        class="mt-7"></span>
+        class="mt-5"></span>
       <span
         v-else
         class="subtitle-1 mt-3 text-wrap">
@@ -132,7 +132,7 @@ export default {
     refresh() {
       document.dispatchEvent(new CustomEvent('displayTopBarLoading'));
       this.loading = true;
-      getKudosSent(this.identityId, 0, true, this.periodType, 0)
+      return getKudosSent(this.identityId, 0, true, this.periodType, 0)
         .then(kudosList => {
           this.sentKudosCount = kudosList && kudosList.size || 0;
           this.sentKudos = kudosList && kudosList.kudos || [];