graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-30 11:53:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Improve UI

Browse source
This commit is contained in:
syuilo 2021-04-16 09:41:56 +09:00
parent 18fbaee9df
commit 9c34ef7d74
2 changed files with 65 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/client/components/ui/container.vue
View file

@ -16,8 +16,11 @@
@leave="leave" @leave="leave"
@after-leave="afterLeave" @after-leave="afterLeave"
> >
<div v-show="showBody"> <div v-show="showBody" class="content" :class="{ omitted }" ref="content">
<slot></slot> <slot></slot>
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
<span>{{ $ts.showMore }}</span>
</button>
</div> </div>
</transition> </transition>
</div> </div>
@ -54,10 +57,17 @@ export default defineComponent({
required: false, required: false,
default: false default: false
}, },
maxHeight: {
type: Number,
required: false,
default: null
},
}, },
data() { data() {
return { return {
showBody: this.expanded, showBody: this.expanded,
omitted: null,
ignoreOmit: false,
faAngleUp, faAngleDown faAngleUp, faAngleDown
}; };
}, },
@ -73,6 +83,19 @@ export default defineComponent({
}, { }, {
immediate: true immediate: true
}); });
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
const calcOmit = () => {
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
const height = this.$refs.content.offsetHeight;
this.omitted = height > this.maxHeight;
};
calcOmit();
new ResizeObserver((entries, observer) => {
calcOmit();
}).observe(this.$refs.content);
}, },
methods: { methods: {
toggleContent(show: boolean) { toggleContent(show: boolean) {
@ -127,7 +150,7 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> div { > .content {
overflow: auto; overflow: auto;
} }
} }
@ -169,12 +192,35 @@ export default defineComponent({
} }
} }
> div { > .content {
> ::v-deep(._content) { &.omitted {
padding: 24px; position: relative;
max-height: var(--maxHeight);
overflow: hidden;
& + ._content { > .fade {
border-top: solid 0.5px var(--divider); display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
> span {
display: inline-block;
background: var(--panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
&:hover {
> span {
background: var(--panelHighlight);
}
}
} }
} }
} }
@ -187,10 +233,7 @@ export default defineComponent({
} }
} }
> div { > .content {
> ::v-deep(._content) {
padding: 16px;
}
} }
} }
} }

19
src/client/pages/user/index.photos.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer> <MkContainer :max-height="300">
<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template> <template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template>
<div class="ujigsodd"> <div class="ujigsodd">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
@ -8,6 +8,7 @@
class="img" class="img"
:style="`background-image: url(${thumbnail(image.file)})`" :style="`background-image: url(${thumbnail(image.file)})`"
:to="notePage(image.note)" :to="notePage(image.note)"
:key="image.id"
></MkA> ></MkA>
</div> </div>
<p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p> <p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p>
@ -52,18 +53,16 @@ export default defineComponent({
userId: this.user.id, userId: this.user.id,
fileType: image, fileType: image,
excludeNsfw: this.$store.state.nsfw !== 'ignore', excludeNsfw: this.$store.state.nsfw !== 'ignore',
limit: 9, limit: 10,
}).then(notes => { }).then(notes => {
for (const note of notes) { for (const note of notes) {
for (const file of note.files) { for (const file of note.files) {
if (this.images.length < 9) {
this.images.push({ this.images.push({
note, note,
file file
}); });
} }
} }
}
this.fetching = false; this.fetching = false;
}); });
}, },
@ -83,19 +82,15 @@ export default defineComponent({
padding: 8px; padding: 8px;
> .stream { > .stream {
display: flex; display: grid;
justify-content: center; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
flex-wrap: wrap; grid-gap: 6px;
> .img { > .img {
flex: 1 1 33%; height: 128px;
width: 33%;
height: 90px;
box-sizing: border-box;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-clip: content-box; background-clip: content-box;
border: solid 2px transparent;
border-radius: 6px; border-radius: 6px;
} }
} }