diff options
| author | Balazs Nadasdi <yitsushi@gmail.com> | 2020-04-05 10:55:51 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-04-05 17:55:51 +0900 |
| commit | 10d72742f548d4e9ed187b1960dd3d5adab6a0e6 (patch) | |
| tree | a13c3004274f0934c19d1a3c3e370fcfc5e03ce8 /src | |
| parent | chore: Update dependencies :rocket: (diff) | |
| download | sharkey-10d72742f548d4e9ed187b1960dd3d5adab6a0e6.tar.gz sharkey-10d72742f548d4e9ed187b1960dd3d5adab6a0e6.tar.bz2 sharkey-10d72742f548d4e9ed187b1960dd3d5adab6a0e6.zip | |
Ability to set header image for a Page (#6210)
* 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>
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/components/page-preview.vue | 6 | ||||
| -rw-r--r-- | src/client/pages/page-editor/page-editor.vue | 5 | ||||
| -rw-r--r-- | src/client/pages/page.vue | 5 |
3 files changed, 9 insertions, 7 deletions
diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue index 5ba226c481..8c41a070bd 100644 --- a/src/client/components/page-preview.vue +++ b/src/client/components/page-preview.vue @@ -35,6 +35,7 @@ export default Vue.extend({ border: solid var(--lineWidth) var(--urlPreviewBorder); border-radius: 4px; overflow: hidden; + border: 1px solid var(--divider); &:hover { text-decoration: none; @@ -42,9 +43,8 @@ export default Vue.extend({ } > .thumbnail { - position: absolute; - width: 100px; - height: 100%; + width: 100%; + height: 200px; background-position: center; background-size: cover; display: flex; diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue index 6144b0bd9c..04117b501f 100644 --- a/src/client/pages/page-editor/page-editor.vue +++ b/src/client/pages/page-editor/page-editor.vue @@ -102,6 +102,7 @@ import { blockDefs } from '../../scripts/aiscript/index'; import { ASTypeChecker } from '../../scripts/aiscript/type-checker'; import { url } from '../../config'; import { collectPageVars } from '../../scripts/collect-page-vars'; +import { selectDriveFile } from '../../scripts/select-drive-file'; export default Vue.extend({ i18n, @@ -405,9 +406,7 @@ export default Vue.extend({ }, setEyeCatchingImage() { - this.$chooseDriveFile({ - multiple: false - }).then(file => { + selectDriveFile(this.$root, false).then(file => { this.eyeCatchingImageId = file.id; }); }, diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue index d55596ae7d..0f7108a5d6 100644 --- a/src/client/pages/page.vue +++ b/src/client/pages/page.vue @@ -5,6 +5,7 @@ <div class="_card" v-if="page" :key="page.id"> <div class="_title">{{ page.title }}</div> + <img class="header" :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId" /> <div class="_content"> <x-page :page="page"/> </div> @@ -115,6 +116,8 @@ export default Vue.extend({ <style lang="scss" scoped> .xcukqgmh { - + > ._card > .header { + max-width: 100%; + } } </style> |