holm/fediwall
1
1
Fork 0
forked from extern/fediwall
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix layout: Remove whitespace on sides

Browse Source 
Using rem-based sizing for the columns means that there is up to hallf a column (10rem) space on each side before another column can be added. We now use percent-based sizing instead and decide on the column count via CSS media queries based on avalable screen space. Still relative ro rem, so zoom still works.
This commit is contained in:
Marcel Hellkamp 2023-07-15 12:59:22 +02:00
parent 8c16791086
commit f59515adf9
1 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/App.vue
View File

@ -278,8 +278,7 @@ const privacyLink = computed(() => {
<main>
<div v-if="filteredPosts.length === 0 && updateInProgress">Loading first posts ...</div>
<div v-else-if="filteredPosts.length === 0">Nothing there yet ...</div>
<div v-else v-masonry transition-duration="1s" item-selector=".wall-item" stamp=".stamp" percent-position="true"
fit-width="true" id="wall">
<div v-else v-masonry transition-duration="1s" item-selector=".wall-item" percent-position="true" id="wall">
<Card v-masonry-tile class="wall-item secret-hover" v-for="(post, index) in filteredPosts" :key="post.id"
:post="post">
<template v-slot:topleft>
@ -330,7 +329,7 @@ body {
}
#page main {
padding: 1rem 1rem;
padding: 1rem 2rem;
}
.secret-hover .secret {
@ -361,16 +360,58 @@ body {
}
.wall-item {
width: 100%;
max-width: 25rem;
width: 10%;
}
@media (max-width: 40rem) {
@media (max-width: 180rem) {
.wall-item {
width: 100%;
max-width: 100%;
width: 12.5%;
}
}
@media (max-width: 160rem) {
.wall-item {
width: 14.7%;
}
}
@media (max-width: 140rem) {
.wall-item {
width: 16.6%;
}
}
@media (max-width: 120rem) {
.wall-item {
width: 20%;
}
}
@media (max-width: 100rem) {
.wall-item {
width: 25%;
}
}
@media (max-width: 80rem) {
.wall-item {
width: 33%;
}
}
@media (max-width: 60rem) {
#page main {
padding: 1rem .5rem;
}
.wall-item {
width: 50%;
}
}
@media (max-width: 40rem) {
.wall-item {
width: 100%;
}
}
</style>