diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-01 11:10:27 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-01 16:54:49 +0200 |
commit | 0f7407d926cf7774f8f730dba08327569c11680c (patch) | |
tree | 6b44be72187390514d9068b78851b48b1a9b7244 /client/src/sass/include/_mixins.scss | |
parent | 33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff) | |
download | PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.gz PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.zst PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.zip |
Refactor video miniature
Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 44 |
1 files changed, 39 insertions, 5 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index eac2f1a7f..e37b89c62 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -620,17 +620,23 @@ | |||
620 | @include button-with-icon(20px, 5px, -1px); | 620 | @include button-with-icon(20px, 5px, -1px); |
621 | } | 621 | } |
622 | 622 | ||
623 | @mixin row-blocks { | 623 | @mixin row-blocks ($column-responsive: true) { |
624 | display: flex; | 624 | display: flex; |
625 | min-height: 130px; | 625 | min-height: 130px; |
626 | padding-bottom: 20px; | 626 | padding-bottom: 20px; |
627 | margin-bottom: 20px; | 627 | margin-bottom: 20px; |
628 | border-bottom: 1px solid #C6C6C6; | 628 | border-bottom: 1px solid #C6C6C6; |
629 | 629 | ||
630 | @media screen and (max-width: 800px) { | 630 | @media screen and (max-width: $small-view) { |
631 | flex-direction: column; | 631 | @if $column-responsive { |
632 | height: auto; | 632 | flex-direction: column; |
633 | align-items: center; | 633 | height: auto; |
634 | align-items: center; | ||
635 | } @else { | ||
636 | min-height: initial; | ||
637 | padding-bottom: 10px; | ||
638 | margin-bottom: 10px; | ||
639 | } | ||
634 | } | 640 | } |
635 | } | 641 | } |
636 | 642 | ||
@@ -932,3 +938,31 @@ | |||
932 | 938 | ||
933 | border-left: $width solid rgba(255, 255, 255, 0.95); | 939 | border-left: $width solid rgba(255, 255, 255, 0.95); |
934 | } | 940 | } |
941 | |||
942 | @mixin on-small-main-col () { | ||
943 | :host-context(.main-col:not(.expanded)) { | ||
944 | @media screen and (max-width: $small-view + $menu-width) { | ||
945 | @content; | ||
946 | } | ||
947 | } | ||
948 | |||
949 | :host-context(.main-col.expanded) { | ||
950 | @media screen and (max-width: $small-view) { | ||
951 | @content; | ||
952 | } | ||
953 | } | ||
954 | } | ||
955 | |||
956 | @mixin on-mobile-main-col () { | ||
957 | :host-context(.main-col:not(.expanded)) { | ||
958 | @media screen and (max-width: $mobile-view + $menu-width) { | ||
959 | @content; | ||
960 | } | ||
961 | } | ||
962 | |||
963 | :host-context(.main-col.expanded) { | ||
964 | @media screen and (max-width: $mobile-view) { | ||
965 | @content; | ||
966 | } | ||
967 | } | ||
968 | } | ||