interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor horizontal margins

This commit is contained in:
Chocobozzz 2021-03-31 11:21:10 +02:00
parent 218f730c7b
commit d794137057
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
9 changed files with 100 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
View File

@ -4,7 +4,7 @@
.playlist-info { .playlist-info {
background-color: pvar(--submenuBackgroundColor); background-color: pvar(--submenuBackgroundColor);
margin-left: -$not-expanded-horizontal-margins; margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom; margin-top: -$sub-menu-margin-bottom;
padding: 10px; padding: 10px;
@ -63,7 +63,7 @@
.playlist-info { .playlist-info {
width: 100vw; width: 100vw;
padding-top: 20px; padding-top: 20px;
margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1); margin-bottom: 10px;
} }
.playlist-elements { .playlist-elements {

15
client/src/app/+my-library/my-videos/my-videos.component.scss
View File

@ -112,21 +112,6 @@ my-edit-button {
} }
} }
// Adapt my-video-miniature on small screens with menu
@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
:host-context(.main-col:not(.expanded)) {
::ng-deep {
.video-miniature {
flex-direction: column;
.video-miniature-name {
max-width: $video-thumbnail-width;
}
}
}
}
}
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.videos-header { .videos-header {
flex-direction: column; flex-direction: column;

2
client/src/app/shared/shared-forms/markdown-textarea.component.scss
View File

@ -131,7 +131,7 @@ $input-border-radius: 3px;
border-right: none; border-right: none;
:last-child { :last-child {
margin-right: $not-expanded-horizontal-margins; margin-right: pvar(--horizontalMarginContent);
} }
} }

105
client/src/sass/application.scss
View File

@ -57,7 +57,8 @@ body {
--activatedActionButtonColor: #{$activated-action-button-color}; --activatedActionButtonColor: #{$activated-action-button-color};
--expanded-horizontal-margin-content: #{$expanded-horizontal-margins}; --horizontalMarginContent: #{$not-expanded-horizontal-margins};
--mainColWidth: calc(100vw - #{$menu-width});
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
@ -150,8 +151,8 @@ my-input-toggle-hidden ::ng-deep input {
outline: none; outline: none;
.margin-content { .margin-content {
margin-left: $not-expanded-horizontal-margins; margin-left: pvar(--horizontalMarginContent);
margin-right: $not-expanded-horizontal-margins; margin-right: pvar(--horizontalMarginContent);
flex-grow: 1; flex-grow: 1;
} }
@ -160,14 +161,16 @@ my-input-toggle-hidden ::ng-deep input {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: $not-expanded-horizontal-margins; padding-left: pvar(--horizontalMarginContent);
padding-right: $not-expanded-horizontal-margins; padding-right: pvar(--horizontalMarginContent);
height: $sub-menu-height; height: $sub-menu-height;
margin-bottom: $sub-menu-margin-bottom; margin-bottom: $sub-menu-margin-bottom;
overflow-x: auto;
&.sub-menu-fixed { &.sub-menu-fixed {
position: fixed; position: fixed;
z-index: #{z('sub-menu') - 1}; z-index: #{z('sub-menu') - 1};
max-width: pvar(--mainColWidth);
} }
} }
@ -178,18 +181,11 @@ my-input-toggle-hidden ::ng-deep input {
// Override some properties if the main content is expanded (no menu on the left) // Override some properties if the main content is expanded (no menu on the left)
&.expanded { &.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins};
--mainColWidth: 100vw;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
.margin-content {
margin-left: var(--expanded-horizontal-margin-content);
margin-right: var(--expanded-horizontal-margin-content);
}
.sub-menu {
padding-left: var(--expanded-horizontal-margin-content);
padding-right: var(--expanded-horizontal-margin-content);
}
} }
&.lock-scroll .main-row > router-outlet + * { &.lock-scroll .main-row > router-outlet + * {
@ -336,22 +332,16 @@ ngx-loading-bar {
} }
@media screen and (max-width: #{breakpoint(xxl)}) { @media screen and (max-width: #{breakpoint(xxl)}) {
.main-col { .main-col.expanded {
&.expanded { --horizontalMarginContent: #{$expanded-horizontal-margins/2};
.margin-content {
--expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
}
}
} }
} }
@media screen and (max-width: #{breakpoint(lg)}) { @media screen and (max-width: #{breakpoint(lg)}) {
/* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
.main-col { .main-col,
&, &.expanded { .main-col.expanded {
.margin-content { --horizontalMarginContent: #{$expanded-horizontal-margins/3};
--expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3};
}
.sub-menu { .sub-menu {
padding-left: 50px; padding-left: 50px;
@ -362,7 +352,6 @@ ngx-loading-bar {
} }
} }
} }
}
} }
@media screen and (min-width: $mobile-view) and (max-width: $small-view) { @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
@ -372,13 +361,11 @@ ngx-loading-bar {
} }
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.main-col { .main-col,
margin-left: 0; .main-col.expanded {
--horizontalMarginContent: 15px;
&, &.expanded { margin-left: 0;
.margin-content {
--expanded-horizontal-margin-content: 15px;
}
.sub-menu { .sub-menu {
width: 100vw; width: 100vw;
@ -394,7 +381,7 @@ ngx-loading-bar {
} }
.admin-sub-header { .admin-sub-header {
@include admin-sub-header-responsive(15px*2); @include admin-sub-header-responsive;
} }
my-markdown-textarea { my-markdown-textarea {
@ -416,54 +403,4 @@ ngx-loading-bar {
flex-grow: 1; flex-grow: 1;
} }
} }
}
}
// overflow-databale responsive rules
@media screen and (min-width: #{breakpoint(lg)}) {
.main-col {
&.expanded {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
}
}
}
@media screen and (max-width: #{breakpoint(lg)}) {
.main-col {
&.expanded {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
}
}
}
@media screen and (max-width: $small-view) {
.main-col {
&:not(.expanded),
&.expanded {
@include overflow-datatable(breakpoint(lg), 15px);
}
}
}
@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
.main-col {
&:not(.expanded) {
.admin-sub-header {
@include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
}
.sub-menu {
overflow-x: auto;
width: calc(100vw - #{$menu-width});
}
}
}
} }

28
client/src/sass/include/_miniature.scss
View File

@ -178,32 +178,20 @@ $play-overlay-width: 18px;
// Use margin by default, or padding if $margin is false // Use margin by default, or padding if $margin is false
@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
--fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
@if $margin { @if $margin {
margin-left: $not-expanded-horizontal-margins !important; margin-left: var(--fluidVideosMiniatureMargins) !important;
margin-right: $not-expanded-horizontal-margins !important; margin-right: var(--fluidVideosMiniatureMargins) !important;
} @else { } @else {
padding-left: $not-expanded-horizontal-margins !important; padding-left: var(--fluidVideosMiniatureMargins) !important;
padding-right: $not-expanded-horizontal-margins !important; padding-right: var(--fluidVideosMiniatureMargins) !important;
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
--fluidVideosMiniatureMargins: $min-margin;
width: auto; width: auto;
@if $margin {
margin: $min-margin !important;
} @else {
padding: $min-margin !important;
}
}
@media screen and (min-width: #{breakpoint(fhd)}) {
@if $margin {
margin-left: 6vw !important;
margin-right: 6vw !important;
} @else {
padding-left: 6vw !important;
padding-right: 6vw !important;
}
} }
} }

4
client/src/sass/include/_mixins.scss
View File

@ -856,7 +856,7 @@
} }
} }
@mixin admin-sub-header-responsive ($horizontal-margins) { @mixin admin-sub-header-responsive {
flex-direction: column; flex-direction: column;
.form-sub-title { .form-sub-title {
@ -871,7 +871,7 @@
white-space: nowrap; white-space: nowrap;
height: 50px; height: 50px;
padding: 10px 0; padding: 10px 0;
width: calc(100vw - #{$horizontal-margins*2}); width: 100%;
a { a {
margin-left: 5px; margin-left: 5px;

12
client/src/sass/include/_variables.scss
View File

@ -34,7 +34,7 @@ $green: #39CC0B;
$grey-actor-name: #777272; $grey-actor-name: #777272;
$expanded-horizontal-margins: 150px; $expanded-horizontal-margins: 150px;
$not-expanded-horizontal-margins: 30px; $not-expanded-horizontal-margins: 60px;
$button-height: 30px; $button-height: 30px;
@ -122,11 +122,19 @@ $variables: (
--supportButtonHeartColor: var(--supportButtonHeartColor), --supportButtonHeartColor: var(--supportButtonHeartColor),
--embedForegroundColor: var(--embedForegroundColor), --embedForegroundColor: var(--embedForegroundColor),
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
--horizontalMarginContent: var(--horizontalMarginContent),
--mainColWidth: var(--mainColWidth)
); );
// SASS type check our CSS variables
@function pvar($variable) { @function pvar($variable) {
@if map-has-key($variables, $variable) {
@return map-get($variables, $variable); @return map-get($variables, $variable);
} @else {
@error "ERROR: Variable #{$variable} does not exist";
}
} }
/*** z-index groups ***/ /*** z-index groups ***/

2
client/src/sass/player/context-menu.scss
View File

@ -14,7 +14,7 @@ $context-menu-width: 350px;
.vjs-menu-content { .vjs-menu-content {
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
color: pvar(--embedForegroundCsolor); color: pvar(--embedForegroundColor);
font-size: $font-size !important; font-size: $font-size !important;
font-weight: $font-semibold; font-weight: $font-semibold;
} }

31
client/src/sass/primeng-custom.scss
View File

@ -753,29 +753,32 @@ p-table {
} }
// overflow data table // overflow data table
@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) { p-table {
p-table {
.p-datatable-wrapper { .p-datatable-wrapper {
overflow-x: auto; overflow-x: auto;
max-width: calc(100vw - #{$horizontal-margins * 2}); max-width: 100%;
table { table {
min-width: $table-min-width; min-width: breakpoint(lg);
} }
} }
@if $mobile-paginator { @media screen and (max-width: #{breakpoint(lg)}) {
p-paginator .p-paginator-bottom { // Prevent overflow
display: block; p-paginator {
.p-paginator-current,
.p-paginator-current { .p-dropdown {
position: relative; top: 0;
display: block; margin-top: 30px;
}
}
} }
a, .p-paginator-pages { @media screen and (max-width: $mobile-view) {
vertical-align: middle; // Prevent overflow
} p-paginator {
.p-paginator-pages > .p-paginator-page:not(.p-highlight) {
display: none;
} }
} }
} }