From b8db646bbfafa1c27869ba17bffd11d5495c9c31 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Thu, 4 Aug 2022 00:36:24 +0530
Subject: [PATCH 1/7] Loaded added till data loads

---
 src/components/AllApps.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index 5647991..d042010 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -3,7 +3,8 @@
 		<div class="welcome__label">
 			<h2>{{ WelcomeBack }} {{ userInfo.ownerDisplayName }}</h2>
 		</div>
-		<div @click="isHidden = !isHidden">
+		<div v-if="AppDataloading" class="loader" />
+		<div v-if="!AppDataloading" @click="isHidden = !isHidden">
 			<span v-if="!isHidden" class="toggle_apps show-all">{{
 				showAllApps
 			}}</span>
@@ -11,7 +12,7 @@
 				showLessApps
 			}}</span>
 		</div>
-		<div class="app-container">
+		<div v-if="!AppDataloading" class="app-container">
 			<a
 				v-for="entry in entries"
 				:key="entry.message"
@@ -44,6 +45,7 @@ export default {
 	name: 'AllApps',
 	data() {
 		return {
+			AppDataloading: false,
 			isHidden: false,
 			entries: [],
 			external: [],
@@ -59,9 +61,11 @@ export default {
 	},
 	methods: {
 		getEntries() {
+			this.loading = true
 			axios
 				.get(generateUrl('/apps/ecloud-dashboard/get-apps'))
 				.then((response) => {
+					this.loading = false
 					this.entries = response.data.apps
 					this.entries = this.entries.map((entry) => {
 						entry.active = window.location.pathname.includes(entry.href)
@@ -208,4 +212,22 @@ export default {
     margin: auto;
   }
 }
+
+.loader {
+  border: 16px solid #f86710;
+  border-top: 16px solid #000000;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
-- 
GitLab


From 9fbada7e08388c77fcbf1fee1d105bed42a5ba43 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Thu, 4 Aug 2022 01:19:47 +0530
Subject: [PATCH 2/7] changed condition based on length

---
 src/components/AllApps.vue       | 29 ++---------
 src/components/StorageLayout.vue | 82 ++------------------------------
 2 files changed, 9 insertions(+), 102 deletions(-)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index d042010..3be13bf 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -3,8 +3,7 @@
 		<div class="welcome__label">
 			<h2>{{ WelcomeBack }} {{ userInfo.ownerDisplayName }}</h2>
 		</div>
-		<div v-if="AppDataloading" class="loader" />
-		<div v-if="!AppDataloading" @click="isHidden = !isHidden">
+		<div @click="isHidden = !isHidden"  v-if="entries.length">
 			<span v-if="!isHidden" class="toggle_apps show-all">{{
 				showAllApps
 			}}</span>
@@ -12,7 +11,10 @@
 				showLessApps
 			}}</span>
 		</div>
-		<div v-if="!AppDataloading" class="app-container">
+		<div v-if="!entries.length">
+			Loading...
+		</div>
+		<div class="app-container" v-if="entries.length">
 			<a
 				v-for="entry in entries"
 				:key="entry.message"
@@ -45,7 +47,6 @@ export default {
 	name: 'AllApps',
 	data() {
 		return {
-			AppDataloading: false,
 			isHidden: false,
 			entries: [],
 			external: [],
@@ -61,11 +62,9 @@ export default {
 	},
 	methods: {
 		getEntries() {
-			this.loading = true
 			axios
 				.get(generateUrl('/apps/ecloud-dashboard/get-apps'))
 				.then((response) => {
-					this.loading = false
 					this.entries = response.data.apps
 					this.entries = this.entries.map((entry) => {
 						entry.active = window.location.pathname.includes(entry.href)
@@ -212,22 +211,4 @@ export default {
     margin: auto;
   }
 }
-
-.loader {
-  border: 16px solid #f86710;
-  border-top: 16px solid #000000;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 </style>
diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index d7a5d40..ad630e6 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -13,9 +13,12 @@
 						style="background-color: #0086ff !important" />
 				</div>
 				<div class="upgrade__main_div">
-					<div class="usage-info">
+					<div class="usage-info"  v-if="!storageInfo.length">
 						{{ usageinfo }}
 					</div>
+					<div class="usage-info"  v-if="storageInfo.length">
+						Loading...
+					</div>
 					<div v-if="storageLink && storageInfo.quota > 0" class="upgrade-storage__div">
 						<a id="upgrade-btn" :href="storageLink">
 							{{ upgradeStorage }}
@@ -120,83 +123,6 @@ export default {
 }
 </script>
 
-<script>
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-
-export default {
-  name: 'StorageLayout',
-  components: {},
-  data() {
-    return {
-      storageInfo: [],
-      redirectURL: '',
-      storageLink: '',
-      storage: OC.L10N.translate('ecloud-dashboard', 'Storage'),
-      upgradeStorage: OC.L10N.translate('ecloud-dashboard', 'Upgrade Storage'),
-      getCredits: OC.L10N.translate('ecloud-dashboard', 'getCredits'),
-      openAnAccount: OC.L10N.translate('ecloud-dashboard', 'openAnAccount'),
-      inviteYourFriends: OC.L10N.translate(
-        'ecloud-dashboard',
-        'Invite Your Friends'
-      ),
-    }
-  },
-  computed: {
-    totalSpaceUsedInPercentage() {
-      const percent = (this.storageInfo.used * 100) / this.storageInfo.quota
-      return percent.toFixed(2)
-    },
-    usageinfo() {
-      try {
-        const humanUsed = this.storageInfo.used
-        const humanQuota = this.storageInfo.quota
-        const humanReadableUsed = OC.Util.humanFileSize(humanUsed)
-        const humanReadableQuota = OC.Util.humanFileSize(humanQuota)
-        let percent = (this.storageInfo.used * 100) / this.storageInfo.quota
-        percent = percent.toFixed(2)
-        if (this.storageInfo.quota > 0) {
-          return (
-            humanReadableUsed +
-            ' of ' +
-            humanReadableQuota +
-            ' (' +
-            percent +
-            '%)' +
-            ' used'
-          )
-        } else {
-          return humanReadableUsed + ' used'
-        }
-      } catch (err) {
-        return err.message
-      }
-    },
-  },
-  mounted() {
-    this.getRedirections()
-    this.getDetails()
-  },
-  methods: {
-    getDetails() {
-      axios
-        .get(generateUrl('/apps/files/ajax/getstoragestats.php'))
-        .then((response) => {
-          this.storageInfo = response.data.data
-        })
-    },
-    getRedirections() {
-      axios
-        .get(generateUrl('/apps/ecloud-dashboard/apps/get-redirections'))
-        .then((response) => {
-          this.storageLink = response.data.storageLink
-          this.redirectURL = response.data.redirectURL
-        })
-    },
-  },
-}
-</script>
-
 <style scoped="">
 h3 {
   margin: 40px 0 0;
-- 
GitLab


From 12409fc04ce3ec371c25bd8fa23ff35855da49de Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Thu, 4 Aug 2022 01:26:13 +0530
Subject: [PATCH 3/7] changed condition based on length #2

---
 src/components/StorageLayout.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index ad630e6..6739930 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -13,12 +13,9 @@
 						style="background-color: #0086ff !important" />
 				</div>
 				<div class="upgrade__main_div">
-					<div class="usage-info"  v-if="!storageInfo.length">
+					<div class="usage-info">
 						{{ usageinfo }}
 					</div>
-					<div class="usage-info"  v-if="storageInfo.length">
-						Loading...
-					</div>
 					<div v-if="storageLink && storageInfo.quota > 0" class="upgrade-storage__div">
 						<a id="upgrade-btn" :href="storageLink">
 							{{ upgradeStorage }}
@@ -56,6 +53,7 @@ export default {
 	data() {
 		return {
 			storageInfo: [],
+			storageFetchStatus: false,
 			redirectURL: '',
 			storageLink: '',
 			storage: OC.L10N.translate('ecloud-dashboard', 'Storage'),
@@ -75,6 +73,9 @@ export default {
 		},
 		usageinfo() {
 			try {
+				if (!this.storageFetchStatus) {
+					return 'Loading...'
+				}
 				const humanUsed = this.storageInfo.used
 				const humanQuota = this.storageInfo.quota
 				const humanReadableUsed = OC.Util.humanFileSize(humanUsed)
@@ -105,10 +106,12 @@ export default {
 	},
 	methods: {
 		getDetails() {
+			this.storageFetchStatus = false
 			axios
 				.get(generateUrl('/apps/files/ajax/getstoragestats.php'))
 				.then((response) => {
 					this.storageInfo = response.data.data
+					this.storageFetchStatus = true
 				})
 		},
 		getRedirections() {
-- 
GitLab


From 6ab97ad3f12cb5f24f733fc692629e27ae2b1ba8 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Wed, 10 Aug 2022 14:12:32 +0530
Subject: [PATCH 4/7] added ui skeleton

---
 src/components/AllApps.vue       | 148 ++++++++++++++++++++++++-------
 src/components/StorageLayout.vue | 148 +++++++++++++++++++++++--------
 2 files changed, 227 insertions(+), 69 deletions(-)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index 3be13bf..e819b1f 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -1,40 +1,63 @@
 <template>
-	<div class="new-icons">
-		<div class="welcome__label">
-			<h2>{{ WelcomeBack }} {{ userInfo.ownerDisplayName }}</h2>
-		</div>
-		<div @click="isHidden = !isHidden"  v-if="entries.length">
-			<span v-if="!isHidden" class="toggle_apps show-all">{{
-				showAllApps
-			}}</span>
-			<span v-if="isHidden" class="toggle_apps show-less">{{
-				showLessApps
-			}}</span>
-		</div>
+	<div class="main---div">
 		<div v-if="!entries.length">
-			Loading...
-		</div>
-		<div class="app-container" v-if="entries.length">
-			<a
-				v-for="entry in entries"
-				:key="entry.message"
-				class="item"
-				:href="entry.href"
-				@click="handleOfficeClick(entry, $event)">
-				<div class="color-icons" :class="entry.id" :style="entry.style" />
-				<div class="item-label">{{ entry.name }}</div>
-			</a>
+			<ul class="o-vertical-spacing o-vertical-spacing--l">
+				<li class="blog-post o-media">
+					<div class="o-media__body">
+						<div class="o-vertical-spacing">
+							<h3 class="blog-post__headline">
+								<span class="skeleton-box" style="width:30%;height: 1.2em;"></span>
+							</h3>
+							<div class="blog-post__meta align__end">
+								<span class="skeleton-box" style="width:70px;"></span>
+							</div>
+							<div class="o-media__figure">
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
 		</div>
-		<div v-if="isHidden" class="app-container">
-			<a
-				v-for="entry in external"
-				:key="entry.message"
-				class="item"
-				:href="entry.href"
-				@click="handleOfficeClick(entry, $event)">
-				<div class="color-icons" :class="entry.id" :style="entry.style" />
-				<div class="item-label">{{ entry.name }}</div>
-			</a>
+		<div class="new-icons" v-if="entries.length">
+			<div class="welcome__label">
+				<h2>{{ WelcomeBack }} {{ userInfo.ownerDisplayName }}</h2>
+			</div>
+			<div @click="isHidden = !isHidden">
+				<span v-if="!isHidden" class="toggle_apps show-all">{{
+					showAllApps
+				}}</span>
+				<span v-if="isHidden" class="toggle_apps show-less">{{
+					showLessApps
+				}}</span>
+			</div>
+			<div class="app-container">
+				<a
+					v-for="entry in entries"
+					:key="entry.message"
+					class="item"
+					:href="entry.href"
+					@click="handleOfficeClick(entry, $event)">
+					<div class="color-icons" :class="entry.id" :style="entry.style" />
+					<div class="item-label">{{ entry.name }}</div>
+				</a>
+			</div>
+			<div v-if="isHidden" class="app-container">
+				<a
+					v-for="entry in external"
+					:key="entry.message"
+					class="item"
+					:href="entry.href"
+					@click="handleOfficeClick(entry, $event)">
+					<div class="color-icons" :class="entry.id" :style="entry.style" />
+					<div class="item-label">{{ entry.name }}</div>
+				</a>
+			</div>
 		</div>
 	</div>
 </template>
@@ -211,4 +234,61 @@ export default {
     margin: auto;
   }
 }
+.skeleton-box {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: #DDDBDD;
+}
+.skeleton-box::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
+  -webkit-animation: shimmer 3s infinite;
+          animation: shimmer 3s infinite;
+  content: "";
+}
+@-webkit-keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.blog-post__headline {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+.blog-post__meta {
+  font-size: 0.85em;
+  color: #6b6b6b;
+}
+.o-media {
+  display: flex;
+}
+.o-media__body {
+  flex-grow: 1;
+}
+.o-vertical-spacing > * + * {
+  margin-top: 3em;
+}
+.o-vertical-spacing--l > * + * {
+  margin-top: 2em;
+}
+.o-media__figure span {
+  margin-left: 25px;
+  margin-right: 25px;
+}
+.align__end{
+  text-align: end;
+}
 </style>
diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index 6739930..6851cdf 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -1,40 +1,64 @@
 <template>
-	<div class="row margin0">
-		<div class="row margin0 storage-layout">
-			<hr>
+	<div class="storage-main-div">
+		<div v-if="!storageFetchStatus">
+			<ul class="o-vertical-spacing o-vertical-spacing--l">
+				<li class="blog-post o-media">
+					<div class="o-media__body">
+						<div class="o-vertical-spacing">
+							<h3 class="blog-post__headline">
+								<span class="skeleton-box" style="width:10%;height: 1.2em;"></span>
+							</h3>
+							<div class="blog-post__meta">
+								<span class="skeleton-box" style="width: 100%;height: 5px;"></span>
+							</div>
+							<h3 class="blog-post__headline">
+								<span class="skeleton-box" style="width:10%;height: 0.80em;"></span>
+							</h3>
+							<div class="o-media__figure">
+								<span class="skeleton-box" style="width: 95%;height: 80px;"></span>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
 		</div>
-		<div class="row margin0">
-			<div class="row margintop10">
-				<b class="storage">{{ storage }}</b>
-				<div class="progress">
-					<div
-						class="progress-bar"
-						:style="{ width: totalSpaceUsedInPercentage + '%' }"
-						style="background-color: #0086ff !important" />
-				</div>
-				<div class="upgrade__main_div">
-					<div class="usage-info">
-						{{ usageinfo }}
+		<div class="row margin0" v-if="storageFetchStatus">
+			<div class="row margin0 storage-layout">
+				<hr>
+			</div>
+			<div class="row margin0">
+				<div class="row margintop10">
+					<b class="storage">{{ storage }}</b>
+					<div class="progress">
+						<div
+							class="progress-bar"
+							:style="{ width: totalSpaceUsedInPercentage + '%' }"
+							style="background-color: #0086ff !important" />
 					</div>
-					<div v-if="storageLink && storageInfo.quota > 0" class="upgrade-storage__div">
-						<a id="upgrade-btn" :href="storageLink">
-							{{ upgradeStorage }}
-						</a>
+					<div class="upgrade__main_div">
+						<div class="usage-info">
+							{{ usageinfo }}
+						</div>
+						<div v-if="storageLink && storageInfo.quota > 0" class="upgrade-storage__div">
+							<a id="upgrade-btn" :href="storageLink">
+								{{ upgradeStorage }}
+							</a>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="row margin0">
-				<div class="col-lg-12 instructions">
-					<div class="row margin0">
-						<div id="storage-redeem" class="storage-space-div width90">
-							<div class="instructions__label">
-								{{ getCredits }}
-							</div>
-							<div class="instructions__sublabel">
-								{{ openAnAccount }}
-							</div>
-							<div class="urllink">
-								<a :href="redirectURL">{{ inviteYourFriends }}</a>
+				<div class="row margin0">
+					<div class="col-lg-12 instructions">
+						<div class="row margin0">
+							<div id="storage-redeem" class="storage-space-div width90">
+								<div class="instructions__label">
+									{{ getCredits }}
+								</div>
+								<div class="instructions__sublabel">
+									{{ openAnAccount }}
+								</div>
+								<div class="urllink">
+									<a :href="redirectURL">{{ inviteYourFriends }}</a>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -73,9 +97,6 @@ export default {
 		},
 		usageinfo() {
 			try {
-				if (!this.storageFetchStatus) {
-					return 'Loading...'
-				}
 				const humanUsed = this.storageInfo.used
 				const humanQuota = this.storageInfo.quota
 				const humanReadableUsed = OC.Util.humanFileSize(humanUsed)
@@ -331,4 +352,61 @@ a {
     padding-top: unset;
   }
 }
+.skeleton-box {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: #DDDBDD;
+}
+.skeleton-box::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
+  -webkit-animation: shimmer 3s infinite;
+          animation: shimmer 3s infinite;
+  content: "";
+}
+@-webkit-keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.blog-post__headline {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+.blog-post__meta {
+  font-size: 0.85em;
+  color: #6b6b6b;
+}
+.o-media {
+  display: flex;
+}
+.o-media__body {
+  flex-grow: 1;
+}
+.o-vertical-spacing > * + * {
+  margin-top: 0.70em;
+}
+.o-vertical-spacing--l > * + * {
+  margin-top: 2em;
+}
+.o-media__figure span {
+  margin-left: 25px;
+  margin-right: 25px;
+}
+.align__end{
+  text-align: end;
+}
 </style>
-- 
GitLab


From f7d314fc9d5113a8dffebe414035276ea0c82140 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Wed, 10 Aug 2022 15:35:12 +0530
Subject: [PATCH 5/7] removed px, changed classname

---
 src/components/AllApps.vue       | 14 +++++++-------
 src/components/StorageLayout.vue | 16 ++++++++--------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index e819b1f..1a3f679 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -2,13 +2,13 @@
 	<div class="main---div">
 		<div v-if="!entries.length">
 			<ul class="o-vertical-spacing o-vertical-spacing--l">
-				<li class="blog-post o-media">
+				<li class="uiskeleton-post o-media">
 					<div class="o-media__body">
 						<div class="o-vertical-spacing">
-							<h3 class="blog-post__headline">
+							<h3 class="uiskeleton-post__headline">
 								<span class="skeleton-box" style="width:30%;height: 1.2em;"></span>
 							</h3>
-							<div class="blog-post__meta align__end">
+							<div class="uiskeleton-post__meta align__end">
 								<span class="skeleton-box" style="width:70px;"></span>
 							</div>
 							<div class="o-media__figure">
@@ -264,11 +264,11 @@ export default {
   }
 }
 
-.blog-post__headline {
+.uiskeleton-post__headline {
   font-size: 1.25em;
   font-weight: bold;
 }
-.blog-post__meta {
+.uiskeleton-post__meta {
   font-size: 0.85em;
   color: #6b6b6b;
 }
@@ -285,8 +285,8 @@ export default {
   margin-top: 2em;
 }
 .o-media__figure span {
-  margin-left: 25px;
-  margin-right: 25px;
+  margin-left: 1em;
+  margin-right: 1em;
 }
 .align__end{
   text-align: end;
diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index 6851cdf..a84cddd 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -2,16 +2,16 @@
 	<div class="storage-main-div">
 		<div v-if="!storageFetchStatus">
 			<ul class="o-vertical-spacing o-vertical-spacing--l">
-				<li class="blog-post o-media">
+				<li class="uiskeleton-post o-media">
 					<div class="o-media__body">
 						<div class="o-vertical-spacing">
-							<h3 class="blog-post__headline">
+							<h3 class="uiskeleton-post__headline">
 								<span class="skeleton-box" style="width:10%;height: 1.2em;"></span>
 							</h3>
-							<div class="blog-post__meta">
+							<div class="uiskeleton-post__meta">
 								<span class="skeleton-box" style="width: 100%;height: 5px;"></span>
 							</div>
-							<h3 class="blog-post__headline">
+							<h3 class="uiskeleton-post__headline">
 								<span class="skeleton-box" style="width:10%;height: 0.80em;"></span>
 							</h3>
 							<div class="o-media__figure">
@@ -382,11 +382,11 @@ a {
   }
 }
 
-.blog-post__headline {
+.uiskeleton-post__headline {
   font-size: 1.25em;
   font-weight: bold;
 }
-.blog-post__meta {
+.uiskeleton-post__meta {
   font-size: 0.85em;
   color: #6b6b6b;
 }
@@ -403,8 +403,8 @@ a {
   margin-top: 2em;
 }
 .o-media__figure span {
-  margin-left: 25px;
-  margin-right: 25px;
+  margin-left: 1em;
+  margin-right: 1em;
 }
 .align__end{
   text-align: end;
-- 
GitLab


From 9bdb4ecec21f7a5ee087f386c0cb6fc8f8ba5d89 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Wed, 10 Aug 2022 15:48:42 +0530
Subject: [PATCH 6/7] feedback work

---
 src/components/AllApps.vue       | 29 +++++++++++++++++++--------
 src/components/StorageLayout.vue | 34 ++++++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index 1a3f679..2087fee 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -6,18 +6,18 @@
 					<div class="o-media__body">
 						<div class="o-vertical-spacing">
 							<h3 class="uiskeleton-post__headline">
-								<span class="skeleton-box" style="width:30%;height: 1.2em;"></span>
+								<span class="skeleton-box skeleton-headline__name"></span>
 							</h3>
 							<div class="uiskeleton-post__meta align__end">
-								<span class="skeleton-box" style="width:70px;"></span>
+								<span class="skeleton-box width-2_8"></span>
 							</div>
 							<div class="o-media__figure">
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
-								<span class="skeleton-box" style="width:100px;height:80px;"></span>
+								<span class="skeleton-box skeleton-img"></span>
+								<span class="skeleton-box skeleton-img"></span>
+								<span class="skeleton-box skeleton-img"></span>
+								<span class="skeleton-box skeleton-img"></span>
+								<span class="skeleton-box skeleton-img"></span>
+								<span class="skeleton-box skeleton-img"></span>
 							</div>
 						</div>
 					</div>
@@ -291,4 +291,17 @@ export default {
 .align__end{
   text-align: end;
 }
+.skeleton-img
+{
+  width: 12%;
+  height: 5em;
+}
+.width-2_8
+{
+  width:2.8em;
+}
+.skeleton-headline__name{
+  width:30%;
+  height: 1.2em;
+}
 </style>
diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index a84cddd..35bac03 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -5,17 +5,17 @@
 				<li class="uiskeleton-post o-media">
 					<div class="o-media__body">
 						<div class="o-vertical-spacing">
-							<h3 class="uiskeleton-post__headline">
-								<span class="skeleton-box" style="width:10%;height: 1.2em;"></span>
+							<h3 class="uiskeleton-post__headline headline_1">
+								<span class="skeleton-box width10"></span>
 							</h3>
 							<div class="uiskeleton-post__meta">
-								<span class="skeleton-box" style="width: 100%;height: 5px;"></span>
+								<span class="skeleton-box width100"></span>
 							</div>
-							<h3 class="uiskeleton-post__headline">
-								<span class="skeleton-box" style="width:10%;height: 0.80em;"></span>
+							<h3 class="uiskeleton-post__headline headline_2">
+								<span class="skeleton-box width10"></span>
 							</h3>
 							<div class="o-media__figure">
-								<span class="skeleton-box" style="width: 95%;height: 80px;"></span>
+								<span class="skeleton-box width95"></span>
 							</div>
 						</div>
 					</div>
@@ -409,4 +409,26 @@ a {
 .align__end{
   text-align: end;
 }
+.width100{
+  width: 100%;
+}
+.width10{
+  width: 10%;
+}
+.width95{
+  width: 95%;
+}
+.headline_1 .skeleton-box{
+  height: 1.2em
+}
+.uiskeleton-post__meta .skeleton-box{
+  height: 0.2em
+}
+.headline_2 .skeleton-box{
+  height: 0.80em
+}
+.o-media__figure .skeleton-box{
+  height: 3.2em
+}
+
 </style>
-- 
GitLab


From 8b90b088004c4b269e9cf433635e1d4f3ba43a96 Mon Sep 17 00:00:00 2001
From: Ronak Patel <ronak.patel@e.email>
Date: Mon, 22 Aug 2022 09:54:42 +0530
Subject: [PATCH 7/7] added border-radius

---
 src/components/AllApps.vue       | 1 +
 src/components/StorageLayout.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/AllApps.vue b/src/components/AllApps.vue
index 2087fee..b2384be 100755
--- a/src/components/AllApps.vue
+++ b/src/components/AllApps.vue
@@ -240,6 +240,7 @@ export default {
   position: relative;
   overflow: hidden;
   background-color: #DDDBDD;
+  border-radius: 5px;
 }
 .skeleton-box::after {
   position: absolute;
diff --git a/src/components/StorageLayout.vue b/src/components/StorageLayout.vue
index 35bac03..3635405 100755
--- a/src/components/StorageLayout.vue
+++ b/src/components/StorageLayout.vue
@@ -358,6 +358,7 @@ a {
   position: relative;
   overflow: hidden;
   background-color: #DDDBDD;
+  border-radius: 5px;
 }
 .skeleton-box::after {
   position: absolute;
-- 
GitLab