mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-14 18:23:08 +02:00
Tweak UI
This commit is contained in:
parent
9c34ef7d74
commit
481b46ac9e
5 changed files with 11 additions and 11 deletions
|
@ -26,7 +26,7 @@ import {
|
||||||
faFileArchive,
|
faFileArchive,
|
||||||
faFilm
|
faFilm
|
||||||
} from '@fortawesome/free-solid-svg-icons';
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
import ImgWithBlurhash from './img-with-blurhash.vue';
|
import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
|
||||||
import { ColdDeviceStorage } from '@client/store';
|
import { ColdDeviceStorage } from '@client/store';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
|
@ -71,6 +71,7 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.xubzgfgb {
|
.xubzgfgb {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
@ -82,6 +83,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
> canvas {
|
> canvas {
|
||||||
|
position: absolute;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,7 @@ import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-i
|
||||||
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
|
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
|
||||||
import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
|
import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
|
||||||
import ImageViewer from './image-viewer.vue';
|
import ImageViewer from './image-viewer.vue';
|
||||||
import ImgWithBlurhash from './img-with-blurhash.vue';
|
import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
|
@ -6,10 +6,11 @@
|
||||||
<div class="stream" v-if="!fetching && images.length > 0">
|
<div class="stream" v-if="!fetching && images.length > 0">
|
||||||
<MkA v-for="image in images"
|
<MkA v-for="image in images"
|
||||||
class="img"
|
class="img"
|
||||||
:style="`background-image: url(${thumbnail(image.file)})`"
|
|
||||||
:to="notePage(image.note)"
|
:to="notePage(image.note)"
|
||||||
:key="image.id"
|
:key="image.id"
|
||||||
></MkA>
|
>
|
||||||
|
<ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/>
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,10 +24,12 @@ import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
|
||||||
import notePage from '../../filters/note';
|
import notePage from '../../filters/note';
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import MkContainer from '@client/components/ui/container.vue';
|
import MkContainer from '@client/components/ui/container.vue';
|
||||||
|
import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MkContainer,
|
MkContainer,
|
||||||
|
ImgWithBlurhash,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
user: {
|
user: {
|
||||||
|
@ -88,10 +91,8 @@ export default defineComponent({
|
||||||
|
|
||||||
> .img {
|
> .img {
|
||||||
height: 128px;
|
height: 128px;
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-clip: content-box;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
overflow: clip;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,6 +26,7 @@ html {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
overflow-wrap: break-word;
|
||||||
font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
|
font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
text-size-adjust: 100%;
|
text-size-adjust: 100%;
|
||||||
|
@ -88,10 +89,6 @@ html._themeChanging_ {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Loading…
Reference in a new issue