jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: show 2 posts per row on mobile instead of 3.

Browse Source 
Three thumbnails per row was pretty tight for most phones since the most
common phone resolution is 360x640. Two thumbnails per row lets us have
thumbnails up to 180x180 in size.
This commit is contained in:
evazion
2021-12-02 21:29:16 -06:00
parent 74e28e14b8
commit e8f9e3ab28
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/post_gallery_component/post_gallery_component.html.erb
View File

@@ -2,7 +2,7 @@
<% if empty? %>
<p>No posts found.</p>
<% else %>
<div class="posts-container user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
<div class="posts-container grid gap-1 grid-cols-2 md:block user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
<% posts.each do |post| -%>
<% %><%= post_preview(post, **options) -%>
<% end -%>

4
app/components/post_gallery_component/post_gallery_component.scss
View File

@@ -15,10 +15,6 @@
@media screen and (max-width: 660px) {
.post-gallery-full {
.posts-container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.25rem;
&.user-disable-cropped-false article.post-preview img.has-cropped-true {
object-fit: none;
}

20
app/javascript/src/styles/common/utilities.scss
View File

@@ -13,7 +13,9 @@ $spacer: 0.25rem; /* 4px */
.font-bold { font-weight: bold; }
.inline-block { display: inline-block; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-text-color); }
@@ -34,8 +36,10 @@ $spacer: 0.25rem; /* 4px */
.absolute { position: absolute; }
.top-0\.5 { top: 0.5 * $spacer; }
.left-0\.5 { left: 0.5 * $spacer; }
.top-0\.5 { top: 0.5 * $spacer; }
.bottom-0\.5 { bottom: 0.5 * $spacer; }
.left-0\.5 { left: 0.5 * $spacer; }
.right-0\.5 { right: 0.5 * $spacer; }
.rounded-sm { border-radius: 0.5 * $spacer; }
.rounded { border-radius: 1.0 * $spacer; }
@@ -75,6 +79,8 @@ $spacer: 0.25rem; /* 4px */
.space-x-4 > * + * { margin-left: 4 * $spacer; }
.space-y-4 > * + * { margin-top: 4 * $spacer; }
.gap-1 { gap: 1 * $spacer; }
.divide-y-1 > * + * { border-top: 1px solid var(--divider-border-color); }
.align-top { vertical-align: top; }
@@ -87,6 +93,14 @@ $spacer: 0.25rem; /* 4px */
.float-right { float: right; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.thin-scrollbar {
overflow-x: hidden;
overflow-y: auto;
@@ -143,7 +157,9 @@ $spacer: 0.25rem; /* 4px */
@media screen and (min-width: 660px) {
.md\:inline-block { display: inline-block; }
.md\:block { display: block; }
.md\:flex { display: flex; }
.md\:grid { display: grid; }
.md\:space-x-4 > * + * { margin-left: 4 * $spacer; }
.md\:space-x-8 > * + * { margin-left: 8 * $spacer; }