freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust the size of images on blogs and about pages

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-05 12:23:07 -07:00
parent 87e736d008
commit 2771aa1676
3 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/public/About.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<div class="directories_containter"> <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> <p>{{ directory.title_text }}</p>
<img :src="directory.cover_picture" /> <img class="directory_cover_image" :src="directory.cover_picture" />
<p>{{ directory.summary_text }}</p> <p>{{ directory.summary_text }}</p>
</div> </div>
</div> </div>
@ -47,4 +52,7 @@ export default {
@extend .container; @extend .container;
cursor: pointer; cursor: pointer;
} }
.directory_cover_image{
height: 20vh;
}
</style> </style>

13
frontend/src/pages/public/Blogs.vue
View File

@ -1,13 +1,8 @@
<template> <template>
<div v-if="blogs" class="blogs_containter"> <div v-if="blogs" class="blogs_containter">
<div <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
class="blog_containter"
v-for="(blog, index) in blogs"
:key="index"
@click="view_blog(blog)"
>
<h2>{{ blog.blog_name }}</h2> <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> <p v-text="retrieve_summary(blog)"></p>
</div> </div>
</div> </div>
@ -54,4 +49,8 @@ export default {
@extend .container; @extend .container;
cursor: pointer; cursor: pointer;
} }
.blog_cover_image {
height: 20vh;
}
</style> </style>

24
frontend/src/pages/public/LinkContentViewer.vue
View File

@ -1,9 +1,21 @@
<template> <template>
<div class="content_containter"><iframe class="link-iframe" :src="get_link()" <div class="content_containter">
frameborder="0" marginheight="0" marginwidth="0" max-width="100%" <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" 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 scrolling="no"
msallowfullscreen webkitallowfullscreen></iframe></div> style="border: none; max-width: 100%; max-height: 100vh"
allowfullscreen
mozallowfullscreen
msallowfullscreen
webkitallowfullscreen
></iframe>
</div>
</template> </template>
<script> <script>
export default { export default {
@ -16,7 +28,7 @@ export default {
}, },
components: {}, components: {},
computed: {}, computed: {},
mounted() { }, mounted() {},
methods: { methods: {
get_link() { get_link() {
return atob(this.content_link_based64) return atob(this.content_link_based64)
@ -37,4 +49,4 @@ export default {
@extend .container; @extend .container;
height: 70vh; height: 70vh;
} }
</style> </style>