From 2771aa1676464e21e133ee45e1295ea152c3c804 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Wed, 5 Jun 2024 12:23:07 -0700
Subject: [PATCH] adjust the size of images on blogs and about pages

---
 frontend/src/pages/public/About.vue           | 12 ++++++++--
 frontend/src/pages/public/Blogs.vue           | 13 +++++-----
 .../src/pages/public/LinkContentViewer.vue    | 24 ++++++++++++++-----
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 9aca813..67d19da 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="directories_containter">
-    <div class="directory_container" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
+    <div
+      class="directory_container"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
       <p>{{ directory.title_text }}</p>
-      <img :src="directory.cover_picture" />
+      <img class="directory_cover_image" :src="directory.cover_picture" />
       <p>{{ directory.summary_text }}</p>
     </div>
   </div>
@@ -47,4 +52,7 @@ export default {
   @extend .container;
   cursor: pointer;
 }
+.directory_cover_image{
+  height: 20vh;
+}
 </style>
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 28bca13..5a1fd5b 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -1,13 +1,8 @@
 <template>
   <div v-if="blogs" class="blogs_containter">
-    <div
-      class="blog_containter"
-      v-for="(blog, index) in blogs"
-      :key="index"
-      @click="view_blog(blog)"
-    >
+    <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
       <h2>{{ blog.blog_name }}</h2>
-      <img :src="blog.cover_picture" />
+      <img class="blog_cover_image" :src="blog.cover_picture" />
       <p v-text="retrieve_summary(blog)"></p>
     </div>
   </div>
@@ -54,4 +49,8 @@ export default {
   @extend .container;
   cursor: pointer;
 }
+
+.blog_cover_image {
+  height: 20vh;
+}
 </style>
diff --git a/frontend/src/pages/public/LinkContentViewer.vue b/frontend/src/pages/public/LinkContentViewer.vue
index c03a98b..cc4987d 100644
--- a/frontend/src/pages/public/LinkContentViewer.vue
+++ b/frontend/src/pages/public/LinkContentViewer.vue
@@ -1,9 +1,21 @@
 <template>
-  <div class="content_containter"><iframe class="link-iframe" :src="get_link()"
-      frameborder="0" marginheight="0" marginwidth="0" max-width="100%"
+  <div class="content_containter">
+    <iframe
+      class="link-iframe"
+      :src="get_link()"
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0"
+      max-width="100%"
       sandbox="allow-forms allow-modals allow-orientation-lock allow-popups allow-same-origin allow-scripts"
-      scrolling="no" style="border: none; max-width: 100%; max-height: 100vh" allowfullscreen mozallowfullscreen
-      msallowfullscreen webkitallowfullscreen></iframe></div>
+      scrolling="no"
+      style="border: none; max-width: 100%; max-height: 100vh"
+      allowfullscreen
+      mozallowfullscreen
+      msallowfullscreen
+      webkitallowfullscreen
+    ></iframe>
+  </div>
 </template>
 <script>
 export default {
@@ -16,7 +28,7 @@ export default {
   },
   components: {},
   computed: {},
-  mounted() { },
+  mounted() {},
   methods: {
     get_link() {
       return atob(this.content_link_based64)
@@ -37,4 +49,4 @@ export default {
   @extend .container;
   height: 70vh;
 }
-</style>
\ No newline at end of file
+</style>