aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 09:39:40 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 09:39:40 +0100
commit9b7d1c723d7c11572d91d606954997e413f56a1f (patch)
treed6d9e34910b31e155c8c7a58bfe2fa0fe3677fc6
parenta86309b4af9ad8391822f628d74fc5c7d1a01974 (diff)
downloadPeerTube-9b7d1c723d7c11572d91d606954997e413f56a1f.tar.gz
PeerTube-9b7d1c723d7c11572d91d606954997e413f56a1f.tar.zst
PeerTube-9b7d1c723d7c11572d91d606954997e413f56a1f.zip
Responsive my account
-rw-r--r--client/src/app/account/account-videos/account-videos.component.html5
-rw-r--r--client/src/app/account/account-videos/account-videos.component.scss20
-rw-r--r--client/src/app/menu/menu.component.scss62
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss2
-rw-r--r--client/src/sass/application.scss19
5 files changed, 94 insertions, 14 deletions
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 641fcb38a..77f959fef 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -1,4 +1,5 @@
1<div 1<div
2 class="videos"
2 infiniteScroll 3 infiniteScroll
3 [infiniteScrollDistance]="0.5" 4 [infiniteScrollDistance]="0.5"
4 [infiniteScrollUpDistance]="1.5" 5 [infiniteScrollUpDistance]="1.5"
@@ -29,10 +30,10 @@
29 </div> 30 </div>
30 </div> 31 </div>
31 32
32 <ng-template [ngIf]="isInSelectionMode() === false"> 33 <div class="video-buttons" *ngIf="isInSelectionMode() === false">
33 <my-delete-button (click)="deleteVideo(video)"></my-delete-button> 34 <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
34 35
35 <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button> 36 <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button>
36 </ng-template> 37 </div>
37 </div> 38 </div>
38</div> 39</div>
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 670fe992c..4c00431fa 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -64,3 +64,23 @@
64 } 64 }
65 } 65 }
66} 66}
67
68@media screen and (max-width: 800px) {
69 .video {
70 flex-direction: column;
71 height: auto;
72 text-align: center;
73
74 input[type=checkbox] {
75 display: none;
76 }
77
78 my-video-thumbnail {
79 margin-right: 0;
80 }
81
82 .video-buttons {
83 margin-top: 10px;
84 }
85 }
86}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 63d63d287..97ceadde3 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,10 +9,6 @@ menu {
9 z-index: 1000; 9 z-index: 1000;
10 color: $menu-color; 10 color: $menu-color;
11 11
12 @media screen and (max-width: 550px) {
13 font-size: 90%;
14 }
15
16 .logged-in-block { 12 .logged-in-block {
17 height: 100px; 13 height: 100px;
18 background-color: rgba(255, 255, 255, 0.15); 14 background-color: rgba(255, 255, 255, 0.15);
@@ -68,7 +64,7 @@ menu {
68 font-size: 15px; 64 font-size: 15px;
69 height: $button-height; 65 height: $button-height;
70 line-height: $button-height; 66 line-height: $button-height;
71 width: 190px; 67 width: 100%;
72 border-radius: 3px; 68 border-radius: 3px;
73 text-align: center; 69 text-align: center;
74 color: $menu-color; 70 color: $menu-color;
@@ -139,3 +135,59 @@ menu {
139 } 135 }
140 } 136 }
141} 137}
138
139@media screen and (max-width: 800px) {
140 menu {
141 .logged-in-block {
142 padding-left: 10px;
143
144 img {
145 display: none;
146 }
147
148 .logged-in-info {
149 .logged-in-username {
150 font-size: 14px;
151 }
152
153 .logged-in-email {
154 font-size: 11px;
155 max-width: 120px;
156 }
157 }
158
159 .logged-in-more {
160 margin-right: 5px;
161
162 .login-button, .create-account-button {
163 font-weight: $font-semibold;
164 font-size: 15px;
165 height: $button-height;
166 line-height: $button-height;
167 width: 190px;
168 }
169 }
170 }
171
172 .button-block {
173 margin: 20px 10px 25px 10px;
174
175 .login-button, .create-account-button {
176 font-size: 13px;
177 }
178 }
179
180 .panel-block {
181 margin-bottom: 30px;
182 margin-left: 10px;
183
184 a {
185 font-size: 14px;
186
187 .icon {
188 margin-right: 10px;
189 }
190 }
191 }
192 }
193}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index fcf625d6c..83a7cc41d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -223,6 +223,8 @@
223 223
224 .video-bottom { 224 .video-bottom {
225 .video-info { 225 .video-info {
226 margin-right: 10px;
227
226 .video-info-name-actions { 228 .video-info-name-actions {
227 align-items: left; 229 align-items: left;
228 flex-direction: column; 230 flex-direction: column;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f7d83c5c3..6352dd4fb 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -110,7 +110,7 @@ label {
110// On small screen, menu is absolute 110// On small screen, menu is absolute
111@media screen and (max-width: 800px) { 111@media screen and (max-width: 800px) {
112 .title-menu-left { 112 .title-menu-left {
113 width: 120px; 113 width: 150px !important;
114 position: absolute !important; 114 position: absolute !important;
115 z-index: 10000; 115 z-index: 10000;
116 } 116 }
@@ -120,12 +120,17 @@ label {
120 120
121 &, &.expanded { 121 &, &.expanded {
122 .margin-content { 122 .margin-content {
123 //display: flex; 123 margin-left: 10px;
124 //flex-direction: column; 124 margin-right: 10px;
125 //align-items: center; 125 }
126 //justify-content: center; 126
127 margin-left: auto; 127 .sub-menu {
128 margin-right: auto; 128 padding-left: 10px;
129 margin-bottom: 10px;
130 }
131
132 input[type=text], input[type=password] {
133 width: 100% !important;
129 } 134 }
130 } 135 }
131 } 136 }