Merge pull request #647 from inab/oeb-widgets-dev

Fix some flicks on hover publications links
inab · Jul 12, 2024 · af1c13c · af1c13c
2 parents b46cb28 + 6fbd59c
commit af1c13c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 25 deletions.
diff --git a/components/Cards/PosterList.vue b/components/Cards/PosterList.vue
@@ -95,18 +95,26 @@
 								<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,30 +277,31 @@ 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 {
+	flex: 1;
+	padding-bottom: 10px;
+	.chip-icon {
+		height: 23px;
+		transition: all 0.3s ease-in-out;
 		display: block;
-		height: 28px;
+		&:hover {
+			transform: scale(1.4);
+		}
+		img {
+			height: 100%;
+			border-radius: 50%;
+			opacity: 0.7;
+		}
+		&:focus {
+			outline: none;
+		}
 	}
 }
 
@@ -323,6 +332,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>
@@ -32,7 +32,7 @@
 						</v-tab>
 
 						<v-tab-item class="ma-5 mt-5 mt-md-0" :transition="false">
-							<div class="transition-container" key="core">
+							<div key="core" class="transition-container">
 								<transition name="slide">
 									<div v-if="loading" class="loader-container">
 										<img :src="loaderGif" alt="Loading..." class="loader" />
@@ -46,7 +46,7 @@
 							</div>
 						</v-tab-item>
 						<v-tab-item class="ma-5 mt-5 mt-md-0">
-							<div class="transition-container" key="collaboration">
+							<div key="collaboration" class="transition-container">
 								<transition name="slide">
 									<div v-if="loading" class="loader-container">
 										<img :src="loaderGif" alt="Loading..." class="loader" />
@@ -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>
@@ -80,7 +80,7 @@
 						<br />
 
 						<v-tab-item class="ma-5 mt-5 mt-md-0" :transition="false">
-							<div class="transition-container" key="OEB">
+							<div key="OEB" class="transition-container">
 								<transition name="slide">
 									<div v-if="loading" class="loader-container">
 										<img :src="loaderGif" alt="Loading..." class="loader" />
@@ -94,7 +94,7 @@
 							</div>
 						</v-tab-item>
 						<v-tab-item class="ma-5 mt-5 mt-md-0" :transition="false">
-							<div class="transition-container" key="MENTION">
+							<div key="MENTION" class="transition-container">
 								<transition name="slide">
 									<div v-if="loading" class="loader-container">
 										<img :src="loaderGif" alt="Loading..." class="loader" />
@@ -303,4 +303,8 @@ export default {
 .posters-container {
 	width: 100%; /* Ensure full width */
 }
+
+.tab-aligned {
+	justify-content: start;
+}
 </style>