Longer Titles in Entity Grids en

Installations 47 Likes 4

Allows images in the grid view of entity lists to shrink so that longer titles are less likely to be truncated. Works in desktop and mobile layouts, and you can control the maximum lines of text allowed for both, as well as depending on whether each entity has a custom image or defaults to the standard gradient.

Customization

The theme defaults to 3 or 4 lines on mobile for entities with or without a custom image, and 4 or 5 lines on desktop. With fonts (face, size, line-height) similar to Kanka’s standards, these values will show a reasonable slice of the image and leave enough room for the privacy icon where needed. If your fonts differ noticeably or you just prefer your images to shrink less, you can adjust each value accordingly by adding the following lines to your campaign CSS:

:root {
    /* Line limits for entity titles in grid view */
    --entity-grid-max-lines: 4; /* desktop, custom image */
    --entity-grid-max-lines-noimg: 5; /* desktop, default gradient */
    --entity-grid-mobile-max-lines: 3; /* mobile, custom image*/
    --entity-grid-mobile-max-lines-noimg: 4; /* mobile, default gradient */
}

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Theme enabled – now you know what’s what

Latest version 2 View content

Released 1 year ago

The Back tile in nested entity lists now has a text box height consistent with other single-line tiles. Thanks to scanime for pointing it out!

Plugin CSS for 2


/* BEGIN Longer Titles in Entity Grids by Salvatos */
/* Undo default overflows and replace with multiline overflow */
.entities-grid div.entity.block:not(.entity-stack) .truncate.h-12 {
	text-overflow: unset;
	white-space: unset;
	height: auto;
	padding-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--entity-grid-max-lines, 4);
    overflow: hidden;
}
/* More available height for text when no image */
.entities-grid .block.avatar[style*="images/defaults/"] + .truncate.h-12 {
    -webkit-line-clamp: var(--entity-grid-max-lines-noimg, 5);
}
/* Fix padding */
.entities-grid div.entity.block:not(.entity-stack) {
    padding-bottom: 1rem;
}
/* Consistent height for the Back tile in nested pages */
a.entity.block:first-of-type > .bg-box {
	height: auto;
}
/* Mobile view is %-based, tweak accordingly */
@media(max-width:639px) {
    /* Lines of text with & without image */
    .entities-grid .entity.block:not(.entity-stack) .truncate.h-12 {
        -webkit-line-clamp: var(--entity-grid-mobile-max-lines, 3);
        
    }
    .entities-grid .block.avatar[style*="images/defaults/"] + .truncate.h-12 {
        -webkit-line-clamp: var(--entity-grid-mobile-max-lines-noimg, 4);
    }
    /* More suitable padding */
    .entities-grid .entity.block:not(.entity-stack) {
        padding-bottom: 0.6rem;
    }
}
/* END Longer Titles in Entity Grids by Salvatos */