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

votes: show votes when hovering over post score.

Browse Source 
Make it so you can hover over a post's score to see the list of public
upvotes. Also show the upvote count, the downvote count, and the upvote
ratio.
This commit is contained in:
evazion
2021-11-18 01:05:24 -06:00
parent a9997d0d2b
commit 5585d1f7d6
20 changed files with 262 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/src/styles/base/040_colors.css
View File

@@ -218,6 +218,9 @@ html {
--post-artist-commentary-container-background: var(--grey-0);
--post-artist-commentary-container-border-color: var(--grey-1);
--post-upvote-color: var(--link-color);
--post-downvote-color: var(--red-5);
--note-body-background: #FFE;
--note-body-text-color: var(--black);
--note-body-border-color: var(--black);
@@ -418,6 +421,9 @@ body[data-current-user-theme="dark"] {
--post-artist-commentary-container-background: var(--grey-8);
--post-artist-commentary-container-border-color: var(--grey-7);
--post-upvote-color: var(--link-color);
--post-downvote-color: var(--red-4);
--unsaved-note-box-border-color: var(--red-5);
--movable-note-box-border-color: var(--blue-5);
--note-preview-border-color: var(--red-5);

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

@@ -22,6 +22,12 @@ $spacer: 0.25rem; /* 4px */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leading-none { line-height: 1; }
.absolute { position: absolute; }
@@ -52,6 +58,9 @@ $spacer: 0.25rem; /* 4px */
.p-0\.5 { padding: 0.5 * $spacer; }
.p-4 { padding: 4 * $spacer; }
.pr-2 { padding-right: 2 * $spacer; }
.pr-4 { padding-right: 4 * $spacer; }
.w-1\/4 { width: 25%; }
.w-full { width: 100%; }
@@ -73,6 +82,60 @@ $spacer: 0.25rem; /* 4px */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.thin-scrollbar {
overflow-x: hidden;
overflow-y: auto;
padding-right: 2 * $spacer;
overscroll-behavior: contain; // https://caniuse.com/css-overscroll-behavior
// Firefox only
// https://caniuse.com/?search=scrollbar-width
// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-button {
width: 0;
height: 0;
}
&::-webkit-scrollbar-thumb {
background: var(--post-tooltip-scrollbar-background);
border: none;
border-radius: 0;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-thumb:active {
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-track {
background: var(--post-tooltip-scrollbar-track-background);
border: none;
border-radius: 0;
}
&::-webkit-scrollbar-track:hover {
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-track:active {
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-corner {
background: transparent;
}
}
@media screen and (min-width: 660px) {
.md\:inline-block { display: inline-block; }
.md\:flex { display: flex; }

45
app/javascript/src/styles/specific/post_tooltips.scss
View File

@@ -1,50 +1,6 @@
$tooltip-line-height: 16px;
$tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
@mixin thin-scrollbar {
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-button {
width: 0;
height: 0;
}
&::-webkit-scrollbar-thumb {
background: var(--post-tooltip-scrollbar-background);
border: none;
border-radius: 0;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-thumb:active {
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-track {
background: var(--post-tooltip-scrollbar-track-background);
border: none;
border-radius: 0;
}
&::-webkit-scrollbar-track:hover {
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-track:active {
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-corner {
background: transparent;
}
}
.tippy-box[data-theme~="post-tooltip"] {
min-width: 20em;
max-width: 40em !important;
@@ -59,7 +15,6 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
}
.post-tooltip-body {
@include thin-scrollbar;
max-height: $tooltip-body-height;
overflow-y: auto;
display: flex;