aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-13 15:30:23 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-13 15:30:27 +0100
commitc4741804bceac6f5f3ea06f9041c5b4fde7a3d7d (patch)
tree6890c6e3a47b5162c306a62a862949cd9a8df668
parentbaab47ca81742deae15acd671e8c332a4e1d6eb7 (diff)
downloadPeerTube-c4741804bceac6f5f3ea06f9041c5b4fde7a3d7d.tar.gz
PeerTube-c4741804bceac6f5f3ea06f9041c5b4fde7a3d7d.tar.zst
PeerTube-c4741804bceac6f5f3ea06f9041c5b4fde7a3d7d.zip
Fix margins/widths with top-menu and main-col on small screens
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss1
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss1
-rw-r--r--client/src/app/+my-account/my-account.component.scss7
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.html2
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/app.component.scss1
-rw-r--r--client/src/sass/application.scss7
8 files changed, 23 insertions, 8 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 7cd5c3b46..0b292850e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -15,8 +15,13 @@
15 } 15 }
16 16
17 & > div { 17 & > div {
18 padding: 10px;
18 width: 350px; 19 width: 350px;
19 20
21 &:nth-child(2) {
22 max-width: 60px !important;
23 }
24
20 @media screen and (max-width: $small-view) { 25 @media screen and (max-width: $small-view) {
21 width: auto; 26 width: auto;
22 27
@@ -25,9 +30,4 @@
25 } 30 }
26 } 31 }
27 } 32 }
28
29 & > div {
30 padding: 10px
31 }
32} 33}
33
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index 2f8df81d4..5995bae4a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -25,6 +25,7 @@ input[type=submit] {
25 25
26textarea { 26textarea {
27 @include peertube-textarea(500px, 150px); 27 @include peertube-textarea(500px, 150px);
28 max-width: 100%;
28 29
29 display: block; 30 display: block;
30} 31}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 2b90cc8cf..e1a00fb8b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -16,4 +16,5 @@
16 16
17.progress { 17.progress {
18 width: 500px; 18 width: 500px;
19 max-width: 100%;
19} 20}
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 4f111efdf..d452a2b21 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,3 +1,10 @@
1
2
1.row { 3.row {
2 flex-direction: column; 4 flex-direction: column;
5 width: 100%;
6
7 & > my-top-menu-dropdown:nth-child(1) {
8 flex-grow: 1;
9 }
3} 10}
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
index b992d0ebd..a5a435726 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html
@@ -5,7 +5,7 @@
5 <div class="actor-img-edit-container"> 5 <div class="actor-img-edit-container">
6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body"> 6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body">
7 <my-global-icon iconName="edit"></my-global-icon> 7 <my-global-icon iconName="edit"></my-global-icon>
8 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> 8 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index d5fec61e6..b86b94e8c 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -22,7 +22,7 @@
22 <div class="sub-header-container"> 22 <div class="sub-header-container">
23 <my-menu *ngIf="menu.isMenuDisplayed"></my-menu> 23 <my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
24 24
25 <div id="content" tabindex="-1" class="main-col container-fluid" [ngClass]="{ expanded: menu.isMenuDisplayed === false }"> 25 <div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
26 26
27 <div class="main-row"> 27 <div class="main-row">
28 <router-outlet></router-outlet> 28 <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index d9dace16b..f1b49a1e2 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -8,6 +8,7 @@
8.sub-header-container { 8.sub-header-container {
9 margin-top: $header-height; 9 margin-top: $header-height;
10 background-color: var(--mainBackgroundColor); 10 background-color: var(--mainBackgroundColor);
11 width: 100%;
11} 12}
12 13
13.header { 14.header {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 89957704b..413f8c49d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -106,9 +106,13 @@ label {
106 color: black; 106 color: black;
107} 107}
108 108
109.row {
110 margin: 0;
111}
112
109.main-col { 113.main-col {
110 margin-left: $menu-width; 114 margin-left: $menu-width;
111 width: auto; 115 width: calc(100% - #{$menu-width});
112 116
113 .margin-content { 117 .margin-content {
114 margin-left: $not-expanded-horizontal-margins; 118 margin-left: $not-expanded-horizontal-margins;
@@ -130,6 +134,7 @@ label {
130 // Override some properties if the main content is expanded (no menu on the left) 134 // Override some properties if the main content is expanded (no menu on the left)
131 &.expanded { 135 &.expanded {
132 margin-left: 0; 136 margin-left: 0;
137 width: 100%;
133 138
134 .margin-content { 139 .margin-content {
135 margin-left: $expanded-horizontal-margins; 140 margin-left: $expanded-horizontal-margins;