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

posts: refactor post previews to use ViewComponent.

Browse Source 
Refactor the post preview html to use the ViewComponent framework. This
lets us encapsulate all the HTML, CSS, and helper methods for a UI
component in a single place.

See https://viewcomponent.org.
This commit is contained in:
evazion
2021-01-12 02:04:38 -06:00
parent 097220fd88
commit 1b30b71a07
40 changed files with 449 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/javascript/src/styles/specific/posts.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
@keyframes heartbeat {
0% {
transform:scale(1);
@@ -24,54 +22,6 @@
}
}
article.post-preview {
height: 154px;
width: 154px;
margin: 0 10px 10px 0;
overflow: hidden;
text-align: center;
display: inline-block;
position: relative;
a {
display: inline-block;
}
&.captioned {
height: auto;
vertical-align: text-top;
}
&.post-preview-compact {
width: auto;
height: auto;
}
.desc {
font-size: 80%;
margin-bottom: 0;
}
img {
margin: auto;
}
&[data-tags~=animated]::before, &[data-file-ext=swf]::before, &[data-file-ext=webm]::before, &[data-file-ext=mp4]::before, &[data-file-ext=zip]::before {
@include animated-icon;
}
&[data-has-sound=true]::before {
@include sound-icon;
}
}
/* Avoid dead space around thumbnails in tables. */
table article.post-preview {
height: auto;
width: auto;
margin: 0;
}
#saved-searches-nav {
margin-top: 1em;
}
@@ -89,84 +39,6 @@ table article.post-preview {
}
}
.post-preview {
img {
border: 2px solid transparent;
}
&.post-status-has-children img {
border-color: var(--preview-has-children-color);
}
&.post-status-has-parent img {
border-color: var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent img {
border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);
}
&.post-status-deleted img {
border-color: var(--preview-deleted-color);
}
&.post-status-has-children.post-status-deleted img {
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-deleted img {
border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-deleted img {
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
}
/* Pending and flagged posts have blue borders (except in the modqueue). */
&.post-status-pending:not(.mod-queue-preview) img,
&.post-status-flagged:not(.mod-queue-preview) img {
border-color: var(--preview-pending-color);
}
&.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
}
}
/* Flagged posts have red borders for approvers. */
body[data-current-user-can-approve-posts="true"] .post-preview {
&.post-status-flagged img {
border-color: var(--preview-flagged-color);
}
&.post-status-has-children.post-status-flagged img {
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-flagged img {
border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-flagged img {
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
}
.post-preview.current-post {
background-color: var(--preview-current-post-background);
}
#has-parent-relationship-preview, #has-children-relationship-preview {
overflow-x: auto;
white-space: nowrap;

33
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -66,37 +66,4 @@
align-items: center;
justify-content: flex-start;
}
article.post-preview {
margin: 0;
text-align: center;
vertical-align: middle;
display: inline-block;
a {
margin: 0 auto;
}
img {
width: 33.3vw;
border: none !important;
}
}
.user-disable-cropped-false {
article.post-preview {
width: 33.3%;
height: 33.3vw;
overflow: hidden;
}
img {
width: 33.3vw;
height: 33.3vw;
&.has-cropped-false {
object-fit: cover;
}
}
}
}