mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
masonry - z layout #106
This commit is contained in:
rimu
parent
97cc67809c
commit
513e419af0
5 changed files with 97 additions and 89 deletions
|
|
@ -14,6 +14,40 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
setupLightboxGallery();
|
||||
});
|
||||
|
||||
function renderMasonry(masonry, htmlSnippets) {
|
||||
const mainPane = document.querySelector('.main_pane');
|
||||
const mainPaneWidth = mainPane.offsetWidth;
|
||||
let numColumns;
|
||||
|
||||
if (mainPaneWidth < 600) {
|
||||
numColumns = 2; // 2 columns for mobile
|
||||
} else if (mainPaneWidth < 992) {
|
||||
numColumns = 3; // 3 columns for phablet
|
||||
} else if (mainPaneWidth < 1200) {
|
||||
numColumns = 4; // 4 columns for tablet or laptop
|
||||
} else {
|
||||
numColumns = 5; // 5 columns for larger screens
|
||||
}
|
||||
const columns = [];
|
||||
|
||||
// Create and append column divs
|
||||
for (let i = 0; i < numColumns; i++) {
|
||||
const column = document.createElement('div');
|
||||
column.classList.add('column');
|
||||
masonry.appendChild(column);
|
||||
columns.push(column);
|
||||
}
|
||||
|
||||
// Distribute HTML snippets to columns
|
||||
htmlSnippets.forEach(function(htmlSnippet, index) {
|
||||
const columnIndex = index % numColumns;
|
||||
const column = columns[columnIndex];
|
||||
const item = document.createElement('div');
|
||||
item.innerHTML = htmlSnippet;
|
||||
column.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function setupLightboxGallery() {
|
||||
// Check if there are elements with either "post_list_masonry_wide" or "post_list_masonry" class
|
||||
var widePosts = document.querySelectorAll('.post_list_masonry_wide');
|
||||
|
|
|
|||
|
|
@ -773,79 +773,73 @@ fieldset legend {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.post_list_masonry, .post_list_masonry_wide {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
clear: both;
|
||||
#masonry {
|
||||
display: flex;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.post_list_masonry, .post_list_masonry_wide {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
#masonry .column {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
#masonry .column:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.post_list_masonry .post_teaser, .post_list_masonry_wide .post_teaser {
|
||||
margin-bottom: 5px;
|
||||
#masonry .item {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.post_list_masonry .post_teaser img, .post_list_masonry_wide .post_teaser img {
|
||||
#masonry .item img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
/* Ensure aspect ratio is maintained */
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_thumb a, .post_list_masonry_wide .post_teaser .masonry_thumb a {
|
||||
#masonry .item .masonry_thumb a {
|
||||
border: none;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info, .post_list_masonry_wide .post_teaser .masonry_info {
|
||||
#masonry .item .masonry_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .voting_buttons_masonry, .post_list_masonry_wide .post_teaser .masonry_info .voting_buttons_masonry {
|
||||
#masonry .item .masonry_info .voting_buttons_masonry {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info p, .post_list_masonry_wide .post_teaser .masonry_info p {
|
||||
#masonry .item .masonry_info p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a {
|
||||
#masonry .item .masonry_info p a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
line-height: 40px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a {
|
||||
#masonry .item .masonry_info p a {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row, .post_list_masonry_wide .post_teaser .masonry_info .row {
|
||||
#masonry .item .masonry_info .row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col, .post_list_masonry_wide .post_teaser .masonry_info .row .col {
|
||||
#masonry .item .masonry_info .row .col {
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
|
||||
#masonry .item .masonry_info .row .col a {
|
||||
color: white;
|
||||
padding-top: 6px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
|
||||
#masonry .item .masonry_info .row .col a {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
|
||||
#masonry .item .masonry_info .row .col .upvote_button, #masonry .item .masonry_info .row .col .downvote_button {
|
||||
display: inline;
|
||||
color: white;
|
||||
padding-top: 10px;
|
||||
|
|
@ -853,58 +847,47 @@ fieldset legend {
|
|||
position: relative;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
|
||||
#masonry .item .masonry_info .row .col .upvote_button, #masonry .item .masonry_info .row .col .downvote_button {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator {
|
||||
#masonry .item .masonry_info .row .col .upvote_button .htmx-indicator, #masonry .item .masonry_info .row .col .downvote_button .htmx-indicator {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 7px;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_up {
|
||||
#masonry .item .masonry_info .row .col .upvote_button.voted_up, #masonry .item .masonry_info .row .col .downvote_button.voted_up {
|
||||
color: #00b550;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_down {
|
||||
#masonry .item .masonry_info .row .col .upvote_button.voted_down, #masonry .item .masonry_info .row .col .downvote_button.voted_down {
|
||||
color: red;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col-8, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 {
|
||||
#masonry .item .masonry_info .row .col-8 {
|
||||
justify-content: center;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col-8 p, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 p {
|
||||
#masonry .item .masonry_info .row .col-8 p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .reply_col, .post_list_masonry_wide .post_teaser .masonry_info .row .reply_col {
|
||||
#masonry .item .masonry_info .row .reply_col {
|
||||
justify-content: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info_no_image, .post_list_masonry_wide .post_teaser .masonry_info_no_image {
|
||||
#masonry .item .masonry_info_no_image {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info_no_image p, .post_list_masonry_wide .post_teaser .masonry_info_no_image p {
|
||||
#masonry .item .masonry_info_no_image p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info_no_image p a, .post_list_masonry_wide .post_teaser .masonry_info_no_image p a {
|
||||
#masonry .item .masonry_info_no_image p a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.post_list_masonry_wide {
|
||||
-webkit-column-count: 5;
|
||||
-moz-column-count: 5;
|
||||
column-count: 5;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.layout_switcher {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -385,30 +385,24 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.post_list_masonry, .post_list_masonry_wide {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
clear: both;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
#masonry {
|
||||
display: flex;
|
||||
.column {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-right: 5px;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post_teaser {
|
||||
margin-bottom: 5px;
|
||||
.item {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
height: auto; /* Ensure aspect ratio is maintained */
|
||||
}
|
||||
|
||||
.masonry_thumb a {
|
||||
|
|
@ -510,17 +504,6 @@ html {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post_list_masonry_wide {
|
||||
@include breakpoint(tablet) {
|
||||
-webkit-column-count: 5;
|
||||
-moz-column-count: 5;
|
||||
column-count: 5;
|
||||
-webkit-column-gap: 5px;
|
||||
-moz-column-gap: 5px;
|
||||
column-gap: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,13 +69,20 @@
|
|||
{% endif %}
|
||||
{% include "community/_community_nav.html" %}
|
||||
{% if post_layout == 'masonry' or post_layout == 'masonry_wide' %}
|
||||
<div class="post_list_{{ post_layout }}">
|
||||
{% for post in posts.items %}
|
||||
{% include 'post/_post_teaser_masonry.html' %}
|
||||
{% else %}
|
||||
<p>{{ _('No posts in this community yet.') }}</p>
|
||||
{% endfor %}
|
||||
<div class="masonry" id="masonry">
|
||||
<!-- Masonry columns will be added here -->
|
||||
</div>
|
||||
<script nonce="{{ session['nonce'] }}">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const masonry = document.getElementById('masonry');
|
||||
const htmlSnippets = [
|
||||
{% for post in posts.items %}
|
||||
{% raw %}`{% endraw %}{% include 'post/_post_teaser_masonry.html' %}{% raw %}`{% endraw %},
|
||||
{% endfor %}
|
||||
];
|
||||
renderMasonry(masonry, htmlSnippets);
|
||||
});
|
||||
</script>
|
||||
{% else %}
|
||||
<div class="post_list">
|
||||
{% for post in posts.items %}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{# do not use any single quotes in the HTML produced by this template - javascript needs to load it as a string. See community.html #}
|
||||
{% set content_blocked = post.blocked_by_content_filter(content_filters) %}
|
||||
{% if content_blocked and content_blocked == '-1' %}
|
||||
{# do nothing - blocked by keyword filter #}
|
||||
{% else %}
|
||||
<div class="post_teaser{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}"
|
||||
<div class="item{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}"
|
||||
{% if content_blocked %} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% endif %}>
|
||||
{% if post.image_id %}
|
||||
{% if post_layout == 'masonry' or low_bandwidth %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue