💄 Allow horizontal resizing of image in link page

WebCrateApp · Oct 20, 2021 · 6057621 · 6057621
1 parent 8502e63
commit 6057621
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 26 deletions.
diff --git a/client/components/ImageDisplay.vue b/client/components/ImageDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="image-wrapper" :style="{ '--max-height': maxHeight }">
+  <div class="image-wrapper" :style="{ '--max-height': maxHeight, '--resize': resize }">
     <div class="image" @click.stop="fullscreen">
       <img :src="src" :class="!loaded && 'loading'" @error="onError" @load="onLoad">
     </div>
@@ -16,6 +16,10 @@ export default {
 		maxHeight: {
 			type: String,
 			default: '300px'
+		},
+		resize: {
+			type: String,
+			default: 'vertical'
 		}
 	},
 	data() {
@@ -43,13 +47,15 @@ export default {
 
 <style lang="scss" scoped>
 	.image-wrapper {
+			margin: auto;
 			margin-top: 1rem;
 			margin-bottom: 1rem;
 			background: var(--background-2nd);
 			overflow: hidden;
 			border-radius: var(--border-radius);
-			resize: vertical;
+			resize: var(--resize);
 			height: var(--max-height);
+			max-width: 100%;
 		}
 
 		.image {

diff --git a/client/pages/link/_.vue b/client/pages/link/_.vue
@@ -46,7 +46,7 @@
     </div>
     <hr>
     <div class="link-content">
-      <ImageDisplay v-if="link.meta && link.meta.image" :src="imageUrl" max-height="400px" />
+      <ImageDisplay v-if="link.meta && link.meta.image" :src="imageUrl" max-height="400px" resize="both" />
       <LinkEditor v-model="linkDescription" :editable="editable" placeholder="Add some notes …" />
     </div>
   </div>
@@ -479,28 +479,5 @@ export default {
 
 	.link-content {
 		padding-top: 1rem;
-
-		.image-wrapper {
-			margin-bottom: 1rem;
-			background: var(--background-2nd);
-			overflow: hidden;
-			border-radius: var(--border-radius);
-			resize: vertical;
-		}
-
-		.image {
-			max-width: 100%;
-			max-height: 300px;
-			overflow: hidden;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			& img {
-				width: 100%;
-				height: 100%;
-				pointer-events: none;
-			}
-		}
 	}
 </style>