limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-26 20:07:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ability to set header image for a Page (#6210)

Browse source 
* Ability to set header image for a Page

 - Add header image to Page
 - Show it on Page view
 - Show correctly it on Page list view
 - On the Page list view, pages have a light border
   to make it easier to see an image belongs to a page

* Maybe it looks better

* Use <img> instead if <x-image>

* src -> :src; set width

* Update page.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
Balazs Nadasdi 2020-04-05 10:55:51 +02:00 committed by GitHub
parent f4325b484b
commit decdec2c1d
3 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/components/page-preview.vue
View file

@ -35,6 +35,7 @@ export default Vue.extend({
border: solid var(--lineWidth) var(--urlPreviewBorder); border: solid var(--lineWidth) var(--urlPreviewBorder);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--divider);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -42,9 +43,8 @@ export default Vue.extend({
} }
> .thumbnail { > .thumbnail {
position: absolute; width: 100%;
width: 100px; height: 200px;
height: 100%;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
display: flex; display: flex;

5
src/client/pages/page-editor/page-editor.vue
View file

@ -102,6 +102,7 @@ import { blockDefs } from '../../scripts/aiscript/index';
import { ASTypeChecker } from '../../scripts/aiscript/type-checker'; import { ASTypeChecker } from '../../scripts/aiscript/type-checker';
import { url } from '../../config'; import { url } from '../../config';
import { collectPageVars } from '../../scripts/collect-page-vars'; import { collectPageVars } from '../../scripts/collect-page-vars';
import { selectDriveFile } from '../../scripts/select-drive-file';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
@ -405,9 +406,7 @@ export default Vue.extend({
}, },
setEyeCatchingImage() { setEyeCatchingImage() {
this.$chooseDriveFile({ selectDriveFile(this.$root, false).then(file => {
multiple: false
}).then(file => {
this.eyeCatchingImageId = file.id; this.eyeCatchingImageId = file.id;
}); });
}, },

5
src/client/pages/page.vue
View file

@ -5,6 +5,7 @@
<div class="_card" v-if="page" :key="page.id"> <div class="_card" v-if="page" :key="page.id">
<div class="_title">{{ page.title }}</div> <div class="_title">{{ page.title }}</div>
<img class="header" :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId" />
<div class="_content"> <div class="_content">
<x-page :page="page"/> <x-page :page="page"/>
</div> </div>
@ -115,6 +116,8 @@ export default Vue.extend({
<style lang="scss" scoped> <style lang="scss" scoped>
.xcukqgmh { .xcukqgmh {
> ._card > .header {
max-width: 100%;
}
} }
</style> </style>