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>
<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>

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

@ -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>

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

@ -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)