FIX posters licence flick effect

inab · Jul 11, 2024 · 309e64c · 309e64c
1 parent 9f1f0dc
commit 309e64c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/components/Cards/PosterList.vue b/components/Cards/PosterList.vue
@@ -95,18 +95,24 @@
 								<a
 									class="chip-icon"
 									target="_blank"
+                  title="Creative Commons Attribution 4.0 International License"
 									href="https://creativecommons.org/licenses/by/4.0/deed.en"
 								>
 									<img
 										src="@/static/posters/cc.png"
-										alt="CC"
+										alt="Creative Commons Attribution 4.0 International License"
+                    title="Creative Commons Attribution 4.0 International License"
 										class="logo chip-with-logo"
 									/>
 								</a>
-								<a target="_blank" :href="poster.link" class="chip-icon">
+								<a target="_blank"
+                  :href="poster.link"
+                  class="chip-icon"
+                  title="doi">
 									<img
 										src="@/static/posters/doi.svg"
-										alt="CC"
+										alt="doi"
+                    title="doi"
 										class="logo chip-with-logo"
 									/>
 								</a>
@@ -269,31 +275,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.logo {
-	width: 25px;
-	height: 25px;
-	border-radius: 50%;
-	opacity: 0.7;
-}
-
-.logo:hover {
-	width: 28px;
-	height: 28px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 20%);
-	transition: box-shadow 0.3s ease-in-out;
-}
-
 .chip {
 	height: 35px;
 	text-align: center;
 	justify-content: center;
 	display: flex;
 	justify-content: center;
+  align-items: end;
 	gap: 10px;
-	a:hover {
-		display: block;
-		height: 28px;
-	}
+  flex: 1;
+  padding-bottom: 10px;
+	.chip-icon{
+    height: 23px;
+    transition: all .3s ease-in-out;
+    display: block;
+    &:hover {
+      transform: scale(1.4);
+    }
+    img {
+      height: 100%;
+      border-radius: 50%;
+      opacity: 0.7;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
 }
 
 .poster-grid {
@@ -323,6 +330,7 @@ export default {
 	text-align: left;
 	word-break: break-word; /* Allow breaking long words */
 	overflow: hidden; /* Hide overflow text */
+  flex: 2;
 }
 
 .poster-title:hover {

diff --git a/pages/publications.vue b/pages/publications.vue
@@ -17,7 +17,7 @@
 
 		<v-tabs :vertical="vertical" class="mt-10">
 			<!-- Manuscripts -->
-			<v-tab>
+			<v-tab class="tab-aligned">
 				<v-icon left>mdi-text-box-multiple-outline</v-icon>
 				Manuscripts
 			</v-tab>
@@ -64,7 +64,7 @@
 			</v-tab-item>
 
 			<!-- Posters -->
-			<v-tab>
+			<v-tab class="tab-aligned">
 				<v-icon left>mdi-file-table-outline</v-icon>
 				Posters
 			</v-tab>
@@ -303,4 +303,8 @@ export default {
 .posters-container {
 	width: 100%; /* Ensure full width */
 }
+
+.tab-aligned {
+  justify-content: start;
+}
 </style>