Verified Commit d7941370 authored by Chocobozzz's avatar Chocobozzz

Refactor horizontal margins

parent 218f730c
Pipeline #403154 passed with stages
in 15 minutes and 42 seconds
......@@ -4,7 +4,7 @@
.playlist-info {
background-color: pvar(--submenuBackgroundColor);
margin-left: -$not-expanded-horizontal-margins;
margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom;
padding: 10px;
......@@ -63,7 +63,7 @@
.playlist-info {
width: 100vw;
padding-top: 20px;
margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
margin-bottom: 10px;
}
.playlist-elements {
......
......@@ -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) {
.videos-header {
flex-direction: column;
......
......@@ -131,7 +131,7 @@ $input-border-radius: 3px;
border-right: none;
:last-child {
margin-right: $not-expanded-horizontal-margins;
margin-right: pvar(--horizontalMarginContent);
}
}
......
......@@ -57,7 +57,8 @@ body {
--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-weight: $font-regular;
......@@ -150,8 +151,8 @@ my-input-toggle-hidden ::ng-deep input {
outline: none;
.margin-content {
margin-left: $not-expanded-horizontal-margins;
margin-right: $not-expanded-horizontal-margins;
margin-left: pvar(--horizontalMarginContent);
margin-right: pvar(--horizontalMarginContent);
flex-grow: 1;
}
......@@ -160,14 +161,16 @@ my-input-toggle-hidden ::ng-deep input {
width: 100%;
display: flex;
align-items: center;
padding-left: $not-expanded-horizontal-margins;
padding-right: $not-expanded-horizontal-margins;
padding-left: pvar(--horizontalMarginContent);
padding-right: pvar(--horizontalMarginContent);
height: $sub-menu-height;
margin-bottom: $sub-menu-margin-bottom;
overflow-x: auto;
&.sub-menu-fixed {
position: fixed;
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)
&.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins};
--mainColWidth: 100vw;
margin-left: 0;
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 + * {
......@@ -336,30 +332,23 @@ ngx-loading-bar {
}
@media screen and (max-width: #{breakpoint(xxl)}) {
.main-col {
&.expanded {
.margin-content {
--expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
}
}
.main-col.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins/2};
}
}
@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 */
.main-col {
&, &.expanded {
.margin-content {
--expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3};
}
.main-col,
.main-col.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins/3};
.sub-menu {
padding-left: 50px;
padding-right: 50px;
.sub-menu {
padding-left: 50px;
padding-right: 50px;
.title-page {
font-size: 17px;
}
.title-page {
font-size: 17px;
}
}
}
......@@ -372,98 +361,46 @@ ngx-loading-bar {
}
@media screen and (max-width: $small-view) {
.main-col {
margin-left: 0;
&, &.expanded {
.margin-content {
--expanded-horizontal-margin-content: 15px;
}
.sub-menu {
width: 100vw;
padding-left: 15px;
padding-right: 15px;
margin-bottom: $sub-menu-margin-bottom-small-view;
overflow-x: auto;
}
// Use an appropriate offset top when sub-menu fixed
.margin-content.offset-content {
padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
}
.admin-sub-header {
@include admin-sub-header-responsive(15px*2);
}
my-markdown-textarea {
.root {
max-width: 100% !important;
}
}
.main-col,
.main-col.expanded {
--horizontalMarginContent: 15px;
input[type=text],
input[type=password],
input[type=email],
textarea,
.peertube-select-container {
flex-grow: 1;
}
.caption input[type=text] {
width: unset !important;
flex-grow: 1;
}
}
}
}
margin-left: 0;
// 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);
.sub-menu {
width: 100vw;
padding-left: 15px;
padding-right: 15px;
margin-bottom: $sub-menu-margin-bottom-small-view;
overflow-x: auto;
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
// Use an appropriate offset top when sub-menu fixed
.margin-content.offset-content {
padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
}
}
}
@media screen and (max-width: #{breakpoint(lg)}) {
.main-col {
&.expanded {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
.admin-sub-header {
@include admin-sub-header-responsive;
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
my-markdown-textarea {
.root {
max-width: 100% !important;
}
}
}
}
@media screen and (max-width: $small-view) {
.main-col {
&:not(.expanded),
&.expanded {
@include overflow-datatable(breakpoint(lg), 15px);
input[type=text],
input[type=password],
input[type=email],
textarea,
.peertube-select-container {
flex-grow: 1;
}
}
}
@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});
}
.caption input[type=text] {
width: unset !important;
flex-grow: 1;
}
}
}
......@@ -178,32 +178,20 @@ $play-overlay-width: 18px;
// Use margin by default, or padding if $margin is false
@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
--fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
@if $margin {
margin-left: $not-expanded-horizontal-margins !important;
margin-right: $not-expanded-horizontal-margins !important;
margin-left: var(--fluidVideosMiniatureMargins) !important;
margin-right: var(--fluidVideosMiniatureMargins) !important;
} @else {
padding-left: $not-expanded-horizontal-margins !important;
padding-right: $not-expanded-horizontal-margins !important;
padding-left: var(--fluidVideosMiniatureMargins) !important;
padding-right: var(--fluidVideosMiniatureMargins) !important;
}
@media screen and (max-width: $mobile-view) {
width: auto;
--fluidVideosMiniatureMargins: $min-margin;
@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;
}
width: auto;
}
}
......
......@@ -856,7 +856,7 @@
}
}
@mixin admin-sub-header-responsive ($horizontal-margins) {
@mixin admin-sub-header-responsive {
flex-direction: column;
.form-sub-title {
......@@ -871,7 +871,7 @@
white-space: nowrap;
height: 50px;
padding: 10px 0;
width: calc(100vw - #{$horizontal-margins*2});
width: 100%;
a {
margin-left: 5px;
......
......@@ -34,7 +34,7 @@ $green: #39CC0B;
$grey-actor-name: #777272;
$expanded-horizontal-margins: 150px;
$not-expanded-horizontal-margins: 30px;
$not-expanded-horizontal-margins: 60px;
$button-height: 30px;
......@@ -122,11 +122,19 @@ $variables: (
--supportButtonHeartColor: var(--supportButtonHeartColor),
--embedForegroundColor: var(--embedForegroundColor),
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
--horizontalMarginContent: var(--horizontalMarginContent),
--mainColWidth: var(--mainColWidth)
);
// SASS type check our CSS variables
@function pvar($variable) {
@return map-get($variables, $variable);
@if map-has-key($variables, $variable) {
@return map-get($variables, $variable);
} @else {
@error "ERROR: Variable #{$variable} does not exist";
}
}
/*** z-index groups ***/
......
......@@ -14,7 +14,7 @@ $context-menu-width: 350px;
.vjs-menu-content {
opacity: $primary-foreground-opacity;
color: pvar(--embedForegroundCsolor);
color: pvar(--embedForegroundColor);
font-size: $font-size !important;
font-weight: $font-semibold;
}
......
......@@ -753,29 +753,32 @@ p-table {
}
// overflow data table
@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
p-table {
.p-datatable-wrapper {
overflow-x: auto;
max-width: calc(100vw - #{$horizontal-margins * 2});
table {
min-width: $table-min-width;
}
}
p-table {
.p-datatable-wrapper {
overflow-x: auto;
max-width: 100%;
@if $mobile-paginator {
p-paginator .p-paginator-bottom {
display: block;
table {
min-width: breakpoint(lg);
}
}
.p-paginator-current {
position: relative;
display: block;
}
@media screen and (max-width: #{breakpoint(lg)}) {
// Prevent overflow
p-paginator {
.p-paginator-current,
.p-dropdown {
top: 0;
margin-top: 30px;
}
}
}
a, .p-paginator-pages {
vertical-align: middle;
}
@media screen and (max-width: $mobile-view) {
// Prevent overflow
p-paginator {
.p-paginator-pages > .p-paginator-page:not(.p-highlight) {
display: none;
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment