HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Re-centering images after changing image component

Browse source 
Also fixing scaling issues in pages when image is thinner than page width.
This commit is contained in:
Алексей Ермолаев 2023-07-21 17:50:09 +03:00
parent 40350c5eab
commit 3d0a56e4c6
5 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/MkDriveFileThumbnail.vue
View file

@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => {
border: 0; border: 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
align-items: center;
justify-content: center;
> .icon-sub { > .icon-sub {
position: absolute; position: absolute;

3
packages/client/src/components/MkGalleryPostPreview.vue
View file

@ -53,8 +53,11 @@ const props = defineProps<{
} }
> .thumbnail { > .thumbnail {
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center;
align-items: center;
position: absolute; position: absolute;
transition: all 0.5s ease; transition: all 0.5s ease;

5
packages/client/src/components/page/page.image.vue
View file

@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find(
<style lang="scss" scoped> <style lang="scss" scoped>
.lzyxtsnt { .lzyxtsnt {
> img { display: flex;
max-width: 100%; justify-content: center;
}
} }
</style> </style>

1
packages/client/src/pages/gallery/post.vue
View file

@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
import MkContainer from "@/components/MkContainer.vue"; import MkContainer from "@/components/MkContainer.vue";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import MkPagination from "@/components/MkPagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue"; import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
import MkFollowButton from "@/components/MkFollowButton.vue"; import MkFollowButton from "@/components/MkFollowButton.vue";

3
packages/client/src/pages/user/index.photos.vue
View file

@ -98,6 +98,9 @@ onMounted(() => {
grid-gap: 6px; grid-gap: 6px;
> .img { > .img {
display: flex;
justify-content: center;
align-items: center;
position: relative; position: relative;
height: 128px; height: 128px;
border-radius: 6px; border-radius: 6px;