aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-05-01 00:51:09 +0200
committerGitHub <noreply@github.com>2020-05-01 00:51:09 +0200
commit7a03209d28f3f31d706dee08ae487d2ca1926893 (patch)
treee7d91832a312871d500590601cdde916455ba187
parent0ac458bffb9389d649adcd86038385795bb6ad65 (diff)
downloadPeerTube-7a03209d28f3f31d706dee08ae487d2ca1926893.tar.gz
PeerTube-7a03209d28f3f31d706dee08ae487d2ca1926893.tar.zst
PeerTube-7a03209d28f3f31d706dee08ae487d2ca1926893.zip
Make admin sub-navs, selects, buttons responsive (#2702)
-rw-r--r--client/src/app/+admin/plugins/plugins.component.scss26
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss1
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss35
-rw-r--r--client/src/sass/application.scss14
-rw-r--r--client/src/sass/include/_mixins.scss23
5 files changed, 99 insertions, 0 deletions
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
index 9f61bcf7a..04ca8126a 100644
--- a/client/src/app/+admin/plugins/plugins.component.scss
+++ b/client/src/app/+admin/plugins/plugins.component.scss
@@ -5,3 +5,29 @@
5 flex-grow: 0; 5 flex-grow: 0;
6 margin-right: 30px; 6 margin-right: 30px;
7} 7}
8
9@media screen and (max-width: $small-view) {
10 ::ng-deep .plugins .plugin .first-row {
11 flex-wrap: wrap;
12
13 .plugin-name,
14 .plugin-version,
15 .plugin-icon {
16 margin-bottom: 10px;
17 }
18
19 .buttons {
20 my-edit-button,
21 my-delete-button,
22 my-button {
23 .action-button {
24 padding: 0 13px;
25 }
26
27 .button-label {
28 display: none;
29 }
30 }
31 }
32 }
33}
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 4a3de9274..c33e14292 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -18,6 +18,7 @@
18} 18}
19 19
20.admin-sub-header { 20.admin-sub-header {
21 flex-direction: row !important;
21 justify-content: flex-end; 22 justify-content: flex-end;
22 23
23 .select-filter-block { 24 .select-filter-block {
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index c4690ac9e..087155254 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -57,3 +57,38 @@
57 } 57 }
58} 58}
59 59
60@media screen and (max-width: $small-view) {
61 .header {
62 flex-direction: column;
63
64 .peertube-select-container,
65 my-button {
66 width: 100% !important;
67 margin-left: 0px !important;
68 margin-bottom: 10px !important;
69 }
70
71 my-button {
72 text-align: center;
73 }
74 }
75}
76
77@media screen and (max-width: #{$small-view + $menu-width}) {
78 :host-context(.main-col:not(.expanded)) {
79 .header {
80 flex-direction: column;
81
82 .peertube-select-container,
83 my-button {
84 width: 100% !important;
85 margin-left: 0px !important;
86 margin-bottom: 10px !important;
87 }
88
89 my-button {
90 text-align: center;
91 }
92 }
93 }
94}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index b62c91384..ab0bf0a08 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -322,6 +322,10 @@ table {
322 margin-bottom: $sub-menu-margin-bottom-small-view; 322 margin-bottom: $sub-menu-margin-bottom-small-view;
323 } 323 }
324 324
325 .admin-sub-header {
326 @include admin-sub-header-responsive(15px*2);
327 }
328
325 my-markdown-textarea { 329 my-markdown-textarea {
326 .root { 330 .root {
327 max-width: 100% !important; 331 max-width: 100% !important;
@@ -338,3 +342,13 @@ table {
338 } 342 }
339 } 343 }
340} 344}
345
346@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
347 .main-col {
348 &:not(.expanded) {
349 .admin-sub-header {
350 @include admin-sub-header-responsive($menu-width/2 + $expanded-horizontal-margins/3);
351 }
352 }
353 }
354}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 75046798c..cfb14ef65 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -875,3 +875,26 @@
875 } 875 }
876 } 876 }
877} 877}
878
879@mixin admin-sub-header-responsive ($horizontal-margins) {
880 flex-direction: column;
881
882 .form-sub-title {
883 margin-right: 0px !important;
884 margin-bottom: 10px;
885 text-align: center;
886 }
887
888 .admin-sub-nav {
889 display: block;
890 overflow-x: auto;
891 white-space: nowrap;
892 height: 50px;
893 padding: 10px 0;
894 width: calc(100vw - #{$horizontal-margins*2});
895
896 a {
897 margin-left: 5px;
898 }
899 }
900}