aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 08:50:43 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 08:50:43 +0100
commit3daf400219fe8cc94025886ba14876bc59a45244 (patch)
tree149c657338a79c7970a5466f6731c8fa513bb8b2 /client
parentb1a134ee525bd23d7e359573eca24f133974de84 (diff)
downloadPeerTube-3daf400219fe8cc94025886ba14876bc59a45244.tar.gz
PeerTube-3daf400219fe8cc94025886ba14876bc59a45244.tar.zst
PeerTube-3daf400219fe8cc94025886ba14876bc59a45244.zip
Responsive homepage
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.html7
-rw-r--r--client/src/app/app.component.scss2
-rw-r--r--client/src/app/header/header.component.html2
-rw-r--r--client/src/app/header/header.component.scss21
-rw-r--r--client/src/app/shared/video/abstract-video-list.html1
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss7
-rw-r--r--client/src/sass/application.scss19
7 files changed, 47 insertions, 12 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index cb1f4e4ef..da4273dda 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -16,11 +16,8 @@
16 </div> 16 </div>
17 17
18 <div class="sub-header-container"> 18 <div class="sub-header-container">
19 <div class="title-menu-left"> 19 <div *ngIf="isMenuDisplayed" class="title-menu-left">
20 20 <my-menu></my-menu>
21 <div class="title-menu-left-block menu">
22 <my-menu *ngIf="isMenuDisplayed"></my-menu>
23 </div>
24 </div> 21 </div>
25 22
26 <div class="main-col container-fluid" [ngClass]="getMainColClasses()"> 23 <div class="main-col container-fluid" [ngClass]="getMainColClasses()">
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 10af9debe..008c6d1f0 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -61,6 +61,8 @@
61 } 61 }
62 62
63 @media screen and (max-width: 500px) { 63 @media screen and (max-width: 500px) {
64 width: 70px;
65
64 #peertube-title { 66 #peertube-title {
65 display: none; 67 display: none;
66 } 68 }
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index aa72fb68a..c853d2b1b 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -6,5 +6,5 @@
6 6
7<a class="upload-button" routerLink="/videos/upload"> 7<a class="upload-button" routerLink="/videos/upload">
8 <span class="icon icon-upload"></span> 8 <span class="icon icon-upload"></span>
9 Upload 9 <span class="upload-button-label">Upload</span>
10</a> 10</a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index ed8695eab..5f64ede98 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -6,6 +6,14 @@
6 &::placeholder { 6 &::placeholder {
7 color: #000; 7 color: #000;
8 } 8 }
9
10 @media screen and (max-width: 800px) {
11 width: calc(100% - 150px);
12 }
13
14 @media screen and (max-width: 400px) {
15 width: calc(100% - 70px);
16 }
9} 17}
10 18
11.icon.icon-search { 19.icon.icon-search {
@@ -34,4 +42,17 @@
34 vertical-align: middle; 42 vertical-align: middle;
35 margin-right: 6px; 43 margin-right: 6px;
36 } 44 }
45
46 @media screen and (max-width: 400px) {
47 margin-right: 10px;
48 padding: 0 10px;
49
50 .icon.icon-upload {
51 margin-right: 0;
52 }
53
54 .upload-button-label {
55 display: none;
56 }
57 }
37} 58}
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 5d07a276b..5761f2c81 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -4,6 +4,7 @@
4 </div> 4 </div>
5 5
6 <div 6 <div
7 class="videos"
7 infiniteScroll 8 infiniteScroll
8 [infiniteScrollUpDistance]="1.5" 9 [infiniteScrollUpDistance]="1.5"
9 [infiniteScrollDistance]="0.5" 10 [infiniteScrollDistance]="0.5"
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index e69de29bb..52797bc6c 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -0,0 +1,7 @@
1.videos {
2 text-align: center;
3
4 my-video-miniature {
5 text-align: left;
6 }
7}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5a4aa4cd9..f7d83c5c3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -107,8 +107,8 @@ label {
107 font-weight: bold; 107 font-weight: bold;
108} 108}
109 109
110// On small screen, menu is absolute and displayed over the page 110// On small screen, menu is absolute
111@media screen and (max-width: 500px) { 111@media screen and (max-width: 800px) {
112 .title-menu-left { 112 .title-menu-left {
113 width: 120px; 113 width: 120px;
114 position: absolute !important; 114 position: absolute !important;
@@ -116,11 +116,18 @@ label {
116 } 116 }
117 117
118 .main-col { 118 .main-col {
119 width: 100% !important; 119 margin-left: 0;
120 }
121 120
122 .fake-menu { 121 &, &.expanded {
123 display: none; 122 .margin-content {
123 //display: flex;
124 //flex-direction: column;
125 //align-items: center;
126 //justify-content: center;
127 margin-left: auto;
128 margin-right: auto;
129 }
130 }
124 } 131 }
125} 132}
126 133