2 rows per overview section
This commit is contained in:
Chocobozzz
parent
32157c0892
commit
0f4905e120
|
|
@ -10,79 +10,84 @@
|
|||
height: 195px;
|
||||
vertical-align: top;
|
||||
|
||||
.video-miniature-information {
|
||||
width: 200px;
|
||||
line-height: normal;
|
||||
|
||||
.video-miniature-name {
|
||||
@include miniature-name;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.video-miniature-account,
|
||||
.video-miniature-channel {
|
||||
@include disable-default-a-behaviour;
|
||||
@include ellipsis;
|
||||
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: $grey-foreground-color;
|
||||
|
||||
&:hover {
|
||||
color: $grey-foreground-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-privacy,
|
||||
.video-info-blacklisted .blacklisted-label,
|
||||
.video-info-nsfw {
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.video-info-blacklisted {
|
||||
color: red;
|
||||
|
||||
.blacklisted-reason::before {
|
||||
content: ' - ';
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-nsfw {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.video-bottom {
|
||||
display: flex;
|
||||
|
||||
.video-miniature-information {
|
||||
width: 200px;
|
||||
line-height: normal;
|
||||
|
||||
.video-miniature-name {
|
||||
@include miniature-name;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.video-miniature-account,
|
||||
.video-miniature-channel {
|
||||
@include disable-default-a-behaviour;
|
||||
@include ellipsis;
|
||||
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: $grey-foreground-color;
|
||||
|
||||
&:hover {
|
||||
color: $grey-foreground-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-privacy,
|
||||
.video-info-blacklisted .blacklisted-label,
|
||||
.video-info-nsfw {
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.video-info-blacklisted {
|
||||
color: red;
|
||||
|
||||
.blacklisted-reason::before {
|
||||
content: ' - ';
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-nsfw {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.video-actions {
|
||||
margin-top: 3px;
|
||||
margin-right: 10px;
|
||||
|
||||
/deep/ .dropdown-root:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .dropdown-root:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover /deep/ .dropdown-root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
|
||||
&:hover .video-actions /deep/ .dropdown-root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
.video-actions {
|
||||
margin-right: 0;
|
||||
.video-miniature-information .video-miniature-name {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/deep/ .dropdown-root {
|
||||
display: block !important;
|
||||
.video-actions {
|
||||
margin: 0;
|
||||
top: -3px;
|
||||
|
||||
/deep/ .dropdown-root {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -97,36 +102,38 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.video-miniature-information {
|
||||
width: auto;
|
||||
min-width: 500px;
|
||||
.video-bottom {
|
||||
.video-miniature-information {
|
||||
width: auto;
|
||||
min-width: 500px;
|
||||
|
||||
.video-miniature-name {
|
||||
@include ellipsis-multiline(1.3em, 2);
|
||||
.video-miniature-name {
|
||||
@include ellipsis-multiline(1.3em, 2);
|
||||
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views,
|
||||
.video-miniature-account,
|
||||
.video-miniature-channel {
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.video-info-privacy {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.video-info-blacklisted {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views,
|
||||
.video-miniature-account,
|
||||
.video-miniature-channel {
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
.video-actions {
|
||||
margin: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.video-info-privacy {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.video-info-blacklisted {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-bottom .video-actions {
|
||||
margin: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
@import '_miniature';
|
||||
|
||||
.section {
|
||||
max-height: 500px; // 2 rows max
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -44,11 +46,18 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.margin-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.section {
|
||||
max-height: initial;
|
||||
overflow: initial;
|
||||
|
||||
@include video-miniature-small-screen;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ async function getVideos (
|
|||
) {
|
||||
const query = Object.assign({
|
||||
start: 0,
|
||||
count: 10,
|
||||
count: 12,
|
||||
sort: '-createdAt',
|
||||
includeLocalVideos: true,
|
||||
nsfw: buildNSFWFilter(res),
|
||||
|
|
|
|||
Loading…
Reference in New Issue