From 383bfc8356d444cbed1dab7e5c1b3bb16becfdfd Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 21 Apr 2017 11:06:33 +0200 Subject: Client: responsive design --- .../friends/friend-list/friend-list.component.html | 4 +- .../friends/friend-list/friend-list.component.scss | 4 +- .../request-stats/request-stats.component.html | 51 +++++++++--------- .../request-stats/request-stats.component.scss | 15 ------ client/src/app/account/account.component.html | 18 ++++--- client/src/app/account/account.component.scss | 2 +- client/src/app/app.component.html | 36 ++++++------- client/src/app/app.component.scss | 23 -------- client/src/app/core/menu/menu-admin.component.html | 32 ++++++------ client/src/app/core/menu/menu-admin.component.scss | 26 +++++++++ client/src/app/core/menu/menu-admin.component.ts | 3 +- client/src/app/core/menu/menu.component.html | 46 ++++++++-------- client/src/app/core/menu/menu.component.ts | 3 +- client/src/app/shared/search/search.component.html | 20 ++++--- client/src/app/shared/search/search.component.scss | 51 ++++++++++++++++++ client/src/app/shared/search/search.component.ts | 3 +- .../videos/video-list/video-list.component.scss | 2 + .../app/videos/video-list/video-list.component.ts | 2 +- .../video-list/video-miniature.component.html | 20 +++---- .../video-list/video-miniature.component.scss | 61 ++++++++++++---------- 20 files changed, 244 insertions(+), 178 deletions(-) create mode 100644 client/src/app/core/menu/menu-admin.component.scss create mode 100644 client/src/app/shared/search/search.component.scss (limited to 'client/src/app') diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html index 254d0c65e..e15ecde14 100644 --- a/client/src/app/+admin/friends/friend-list/friend-list.component.html +++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html @@ -2,10 +2,10 @@ - + Quit friends - + Make friends diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.scss b/client/src/app/+admin/friends/friend-list/friend-list.component.scss index cb597e12b..0a0f621c6 100644 --- a/client/src/app/+admin/friends/friend-list/friend-list.component.scss +++ b/client/src/app/+admin/friends/friend-list/friend-list.component.scss @@ -1,3 +1,3 @@ -table { - margin-bottom: 40px; +.btn { + margin-top: 10px; } diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.html b/client/src/app/+admin/requests/request-stats/request-stats.component.html index ca531258c..f35da6535 100644 --- a/client/src/app/+admin/requests/request-stats/request-stats.component.html +++ b/client/src/app/+admin/requests/request-stats/request-stats.component.html @@ -1,37 +1,38 @@

Requests stats

-
-
-

{{ statsTitles[requestSchedulerName] }}

+
+
+
{{ statsTitles[requestSchedulerName] }}
-
-
- Remaining requests: - {{ stats[requestSchedulerName].totalRequests }} -
+
+
+
+ Remaining requests: + {{ stats[requestSchedulerName].totalRequests }} +
-
- Interval seconds between requests: - {{ stats[requestSchedulerName].secondsInterval }} -
+
+ Interval seconds between requests: + {{ stats[requestSchedulerName].secondsInterval }} +
-
- Remaining time before the scheduled request: - {{ stats[requestSchedulerName].remainingSeconds }} +
+ Remaining time before the scheduled request: + {{ stats[requestSchedulerName].remainingSeconds }} +
-
-
-
- Maximum number of different pods for a scheduled request: - {{ stats[requestSchedulerName].requestsLimitPods }} -
+
+
+ Maximum number of different pods for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPods }} +
-
- Maximum number of requests per pod for a scheduled request: - {{ stats[requestSchedulerName].requestsLimitPerPod }} +
+ Maximum number of requests per pod for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPerPod }} +
-
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.scss b/client/src/app/+admin/requests/request-stats/request-stats.component.scss index c9f724604..b2c413259 100644 --- a/client/src/app/+admin/requests/request-stats/request-stats.component.scss +++ b/client/src/app/+admin/requests/request-stats/request-stats.component.scss @@ -1,23 +1,8 @@ -.block { - margin-bottom: 40px; -} - .label-description { - display: inline-block; font-weight: bold; color: black; } -.requests-general { - .label-description { - width: 320px; - } -} - .requests-limit { margin-top: 20px; - - .label-description { - width: 430px; - } } diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html index 6f10e79cd..24bcdf947 100644 --- a/client/src/app/account/account.component.html +++ b/client/src/app/account/account.component.html @@ -1,11 +1,17 @@

Account

-
-

Change password

- +
+
Change password
+ +
+ +
-
-

Update my informations

- +
+
Update my informations
+ +
+ +
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss index e0437e792..61b80d0a7 100644 --- a/client/src/app/account/account.component.scss +++ b/client/src/app/account/account.component.scss @@ -1,3 +1,3 @@ -.block { +.panel { margin-top: 40px; } diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 0c8e18a2f..f1eb6e021 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,31 +1,31 @@ -
- -
-
-

+
+
+
+

PeerTube

-
-
- +
+ + +
-

+
+
+ +
-
- - - -
- +
+ +
- - -
PeerTube, CopyLeft 2015-2017
+ + + diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 30d1bebde..e69de29bb 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -1,23 +0,0 @@ -#peertube-title a { - color: inherit !important; - - &:hover { - color: inherit !important; - text-decoration: none !important; - } -} - -header div { - line-height: 25px; - margin-bottom: 30px; -} - -.router-outlet-container { - @media screen and (max-width: 400px) { - padding: 0 3px 0 3px; - } -} - -[hidden] { - display: none !important; -} diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html index ad7a7a1b4..027799ee1 100644 --- a/client/src/app/core/menu/menu-admin.component.html +++ b/client/src/app/core/menu/menu-admin.component.html @@ -1,31 +1,31 @@ - +
- + List users + - + List friends + - + Request stats + - + Video abuses +
- + Quit admin. +
diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss new file mode 100644 index 000000000..487461224 --- /dev/null +++ b/client/src/app/core/menu/menu-admin.component.scss @@ -0,0 +1,26 @@ +menu { + background-color: $black-background; + padding: 20px; + margin: 0; + height: 100%; + + a { + display: block; + height: 30px; + color: #9cabb8; + cursor: pointer; + + &:hover, &:focus { + text-decoration: none !important; + outline: none !important; + } + + .glyphicon { + margin-right: 20px; + } + + &:hover, &.active { + color: #fff; + } + } +} diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts index 59ffccf9f..a3d920fdd 100644 --- a/client/src/app/core/menu/menu-admin.component.ts +++ b/client/src/app/core/menu/menu-admin.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-menu-admin', - templateUrl: './menu-admin.component.html' + templateUrl: './menu-admin.component.html', + styleUrls: [ './menu-admin.component.scss' ] }) export class MenuAdminComponent { } diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html index de17940a1..0b093882f 100644 --- a/client/src/app/core/menu/menu.component.html +++ b/client/src/app/core/menu/menu.component.html @@ -1,44 +1,44 @@ - +
- + - Login - + Login + - + - Logout - + Logout +
- + Signup + - + My account +
- + See videos + - + Upload a video +
-
-
+
+ - Administration -
+ Administration +
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts index d1f0fa807..e2b998747 100644 --- a/client/src/app/core/menu/menu.component.ts +++ b/client/src/app/core/menu/menu.component.ts @@ -6,7 +6,8 @@ import { ConfigService } from '../config'; @Component({ selector: 'my-menu', - templateUrl: './menu.component.html' + templateUrl: './menu.component.html', + styleUrls: [ './menu-admin.component.scss' ] }) export class MenuComponent implements OnInit { isLoggedIn: boolean; diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html index 0c7b5038a..b03b977dc 100644 --- a/client/src/app/shared/search/search.component.html +++ b/client/src/app/shared/search/search.component.html @@ -1,17 +1,23 @@ +
-
+ + + + + + + +
-
- -
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss new file mode 100644 index 000000000..583f9586f --- /dev/null +++ b/client/src/app/shared/search/search.component.scss @@ -0,0 +1,51 @@ +.icon-addon { + background-color: #fff; + border-radius: 0; + border-color: $header-border-color; + border-width: 0 0 1px 0; + text-align: right; + + .glyphicon-search { + width: 30px; + font-size: 20px; + } +} + +input, button, .input-group { + height: 100%; +} + +input, .input-group-btn { + border-radius: 0; + border-top: none; + border-left: none; +} + +input { + height: $header-height; + border-right: none; + font-weight: bold; + box-shadow: none; + + &, &:focus { + border-bottom: 1px solid $header-border-color !important; + outline: none !important; + box-shadow: none !important; + } +} + +button { + + &, &:hover, &:focus, &:active, &:visited { + background-color: #fff !important; + border-color: $header-border-color !important; + color: #858585 !important; + outline: none !important; + + height: $header-height; + border-width: 0 0 1px 0; + font-weight: bold; + text-decoration: none; + box-shadow: none; + } +} diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts index 9f7e156ec..48413b4f2 100644 --- a/client/src/app/shared/search/search.component.ts +++ b/client/src/app/shared/search/search.component.ts @@ -7,7 +7,8 @@ import { SearchService } from './search.service'; @Component({ selector: 'my-search', - templateUrl: './search.component.html' + templateUrl: './search.component.html', + styleUrls: [ './search.component.scss' ] }) export class SearchComponent implements OnInit { diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss index 010f0dbfe..5ece9d003 100644 --- a/client/src/app/videos/video-list/video-list.component.scss +++ b/client/src/app/videos/video-list/video-list.component.scss @@ -25,8 +25,10 @@ .videos-miniatures { min-height: 720px; + text-align: center; my-video-miniature { + text-align: left; transition: all 0.5s ease; &.ng-enter { diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts index b9f19b4f1..16e1b5bcc 100644 --- a/client/src/app/videos/video-list/video-list.component.ts +++ b/client/src/app/videos/video-list/video-list.component.ts @@ -22,7 +22,7 @@ export class VideoListComponent implements OnInit, OnDestroy { loading: BehaviorSubject = new BehaviorSubject(false); pagination: RestPagination = { currentPage: 1, - itemsPerPage: 9, + itemsPerPage: 25, totalItems: null }; sort: SortField; diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html index b8b448631..0b0b0d944 100644 --- a/client/src/app/videos/video-list/video-miniature.component.html +++ b/client/src/app/videos/video-list/video-miniature.component.html @@ -1,4 +1,4 @@ -
+
- {{ video.duration }} +
+ {{ video.views }} views + {{ video.duration }} +
+ +
- + {{ getVideoName() }} - -
- - {{ tag }} - -
{{ video.by }} diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss index f88ced819..1a73648c4 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss @@ -1,15 +1,11 @@ @import "../../../sass/pre-customizations.scss"; .video-miniature { - @media screen and (max-width: 400px) { - padding: 0; - } - margin-top: 30px; display: inline-block; position: relative; - min-width: 220px; height: 190px; + width: 220px; .video-miniature-thumbnail { display: inline-block; @@ -30,37 +26,48 @@ height: 110px; } - .video-miniature-duration { + img, .thumbnail-nsfw { + border-radius: 3px; + } + + .video-miniature-thumbnail-overlay { position: absolute; - right: 5px; - bottom: 2px; + right: 0px; + bottom: 0px; display: inline-block; - background-color: rgba(0, 0, 0, 0.8); - color: rgba(255, 255, 255, 0.8); - padding: 2px; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + padding: 3px 5px; font-size: 11px; + font-weight: bold; + width: 100%; + + .video-miniature-thumbnail-overlay-views { + + } + + .video-miniature-thumbnail-overlay-duration { + float: right; + } } } .video-miniature-informations { width: 200px; - .video-miniature-name-tags { + .video-miniature-name { + height: 23px; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + transition: color 0.2s; + font-size: 15px; + color: $video-miniature-title-color; - .video-miniature-name { - height: 23px; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: bold; - transition: color 0.2s; - font-size: 15px; - - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; } .video-miniature-tags { @@ -84,8 +91,8 @@ .video-miniature-author, .video-miniature-views-created-at { display: block; margin-left: 1px; - font-size: 12px; - color: #337ab7; + font-size: 11px; + color: $video-miniature-other-infos; opacity: 0.9; .video-miniature-created-at::before { -- cgit v1.2.3