diff --git a/client/.bootstraprc b/client/.bootstraprc index b7468b2fe..d266656c1 100644 --- a/client/.bootstraprc +++ b/client/.bootstraprc @@ -10,9 +10,9 @@ useCustomIconFontPath: true # Webpack loaders, order matters styleLoaders: - - style - - css - - sass + - style-loader + - css-loader + - sass-loader # Extract styles to stand-alone css file # Different settings for different environments can be used, @@ -94,7 +94,7 @@ styles: progress-bars: true media: true list-group: false - panels: false + panels: true wells: false responsive-embed: true close: true diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js index 80d77b400..6067d94e7 100644 --- a/client/config/webpack.common.js +++ b/client/config/webpack.common.js @@ -119,8 +119,25 @@ module.exports = function (options) { { test: /\.(sass|scss)$/, - use: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url-loader', 'sass-loader?sourceMap'], - exclude: [ helpers.root('src', 'styles') ] + use: [ + 'css-to-string-loader', + 'css-loader?sourceMap', + 'resolve-url-loader', + { + loader: 'sass-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-resources-loader', + options: { + resources: [ + helpers.root('src/sass/_variables.scss') + ] + } + } + ] }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }, @@ -133,7 +150,10 @@ module.exports = function (options) { { test: /\.html$/, loader: 'raw-loader', - exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ] + exclude: [ + helpers.root('src/index.html'), + helpers.root('src/standalone/videos/embed.html') + ] } ] @@ -262,7 +282,8 @@ module.exports = function (options) { new LoaderOptionsPlugin({ options: { sassLoader: { - precision: 10 + precision: 10, + includePaths: [ helpers.root('src/sass') ] } } }), diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js index 3468dba78..5e0f36d7f 100644 --- a/client/config/webpack.dev.js +++ b/client/config/webpack.dev.js @@ -90,23 +90,24 @@ module.exports = function (env) { module: { - rules: [ - { - test: /\.ts$/, - use: [ - { - loader: 'tslint-loader', - options: { - configFile: 'tslint.json' - } - } - ], - exclude: [ - /\.(spec|e2e)\.ts$/, - /node_modules\// - ] - } - ] + // Too slow, life is short + // rules: [ + // { + // test: /\.ts$/, + // use: [ + // { + // loader: 'tslint-loader', + // options: { + // configFile: 'tslint.json' + // } + // } + // ], + // exclude: [ + // /\.(spec|e2e)\.ts$/, + // /node_modules\// + // ] + // } + // ] }, plugins: [ @@ -202,6 +203,7 @@ module.exports = function (env) { tslint: { emitErrors: false, failOnHint: false, + typeCheck: true, resourcePath: 'src' }, diff --git a/client/package.json b/client/package.json index 84cb8e13a..998ae8fcc 100644 --- a/client/package.json +++ b/client/package.json @@ -18,10 +18,10 @@ }, "license": "GPLv3", "dependencies": { - "@angular/animations": "^4.0.2", + "@angular/animations": "~4.0.0", "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", - "@angular/compiler-cli": "^4.0.0", + "@angular/compiler-cli": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", @@ -43,14 +43,14 @@ "assets-webpack-plugin": "^3.4.0", "awesome-typescript-loader": "3.0.0-beta.18", "bootstrap": "^3.3.6", - "bootstrap-loader": "2.0.0-beta.18", + "bootstrap-loader": "2.0.0", "bootstrap-sass": "^3.3.6", "copy-webpack-plugin": "^4.0.0", "core-js": "^2.4.1", - "css-loader": "^0.25.0", + "css-loader": "^0.28.0", "css-to-string-loader": "^0.1.2", "es6-shim": "^0.35.0", - "file-loader": "^0.9.0", + "file-loader": "^0.11.0", "html-webpack-plugin": "^2.19.0", "ie-shim": "^0.1.0", "intl": "^1.2.4", @@ -59,7 +59,7 @@ "ng2-file-upload": "^1.1.4-2", "ng2-smart-table": "1.0.3", "ng2-tag-input": "^1.0.5", - "ngc-webpack": "1.1.0", + "ngc-webpack": "2.0.0", "ngx-bootstrap": "1.6.6", "node-sass": "^4.1.1", "normalize.css": "^5.0.0", @@ -68,11 +68,12 @@ "reflect-metadata": "^0.1.9", "resolve-url-loader": "^1.6.0", "rxjs": "~5.0.0-rc.5", - "sass-loader": "^4.0.2", + "sass-loader": "^6.0.3", + "sass-resources-loader": "^1.2.1", "script-ext-html-webpack-plugin": "^1.3.2", - "source-map-loader": "^0.1.5", + "source-map-loader": "^0.2.1", "string-replace-loader": "^1.0.3", - "style-loader": "^0.13.1", + "style-loader": "^0.16.1", "tslib": "^1.5.0", "tslint": "~4.3.1", "tslint-loader": "^3.3.0", @@ -82,14 +83,14 @@ "videojs-dock": "^2.0.2", "webpack": "^2.2.0", "webpack-md5-hash": "0.0.5", - "webpack-merge": "~2.3.1", + "webpack-merge": "~4.1.0", "webpack-notifier": "^1.3.0", "webtorrent": "^0.98.0", - "zone.js": "~0.7.2" + "zone.js": "~0.8.5" }, "devDependencies": { "add-asset-html-webpack-plugin": "^1.0.2", - "codelyzer": "^2.0.0", + "codelyzer": "^3.0.0-beta.4", "standard": "^10.0.0", "webpack-bundle-analyzer": "^2.2.1", "webpack-dll-bundles-plugin": "^1.0.0-beta.5" 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 }} +
+ +
+ Remaining time before the scheduled request: + {{ stats[requestSchedulerName].remainingSeconds }} +
-
- Interval seconds between requests: - {{ stats[requestSchedulerName].secondsInterval }} -
+
+
+ Maximum number of different pods for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPods }} +
-
- Remaining time before the scheduled request: - {{ stats[requestSchedulerName].remainingSeconds }} +
+ Maximum number of requests per pod for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPerPod }} +
- -
-
- 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 }} -
-
-
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 }} - -
+
+ + {{ getVideoName() }} {{ 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 { diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss new file mode 100644 index 000000000..be57db304 --- /dev/null +++ b/client/src/sass/_variables.scss @@ -0,0 +1,8 @@ +$black-background: #1d2125; +$grey-background: #f6f2f2; + +$header-height: 60px; +$header-border-color: #e9eff6; + +$video-miniature-title-color: #16a2b7; +$video-miniature-other-infos: #686767; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index df3ee6c20..25d79a0cb 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,44 +1,81 @@ @import '../../node_modules/video.js/dist/video-js.css'; -body { - padding: 20px; +[hidden] { + display: none !important; +} - @media screen and (max-width: 400px) { - padding: 3px; +input.readonly { + /* Force blank on readonly inputs */ + background-color: #fff !important; +} + +.form-control, .btn { + border-radius: 0; +} + +.glyphicon-black { + color: black; +} + +.header { + height: $header-height; + + .search-col { + height: 100%; + margin-left: -15px; + padding: 0; } } -menu { - @media screen and (max-width: 600px) { - margin-right: 3px !important; - padding: 3px !important; - min-height: 400px !important; - } +.main-col { + padding: 0; - min-height: 600px; - margin-right: 20px; - border-right: 1px solid rgba(0, 0, 0, 0.2); + .main-row { + padding: 15px 30px; - .panel-block:not(:last-child) { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } - - .panel-button { - margin: 8px; - cursor: pointer; - transition: margin 0.2s; - - &:hover { - margin-left: 15px; + @media screen and (min-width: 1400px) { + padding: 15px 40px; } + @media screen and (min-width: 1600px) { + padding: 15px 50px; + } + + @media screen and (min-width: 1800px) { + padding: 15px 60px; + } + } +} + +.title-menu-left { + height: calc(100vh - #{$header-height}); + padding-right: 0; + + .title-menu-left-block { + margin-left: -15px; + + &.menu { + height: 100%; + } + } + + #peertube-title { + background-color: #fff; + border-right: 2px solid $header-border-color; + font-size: 25px; + line-height: $header-height; + text-align: center; + margin-top: 0; + margin-bottom: 0; + a { - color: #333333; - } - } + color: inherit !important; - .glyphicon { - margin: 5px; + &:hover { + color: inherit !important; + text-decoration: none !important; + } + } } } @@ -63,19 +100,6 @@ ng2-smart-table { } } -[hidden] { - display: none !important; -} - -input.readonly { - /* Force blank on readonly inputs */ - background-color: #fff !important; -} - -.glyphicon-black { - color: black; -} - footer { border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 10px; diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss index 0703b0c9a..693489828 100644 --- a/client/src/sass/pre-customizations.scss +++ b/client/src/sass/pre-customizations.scss @@ -1,3 +1,5 @@ +@import '_variables.scss'; + $bootstrap-sass-asset-helper: false !default; // // Variables diff --git a/client/tslint.json b/client/tslint.json index 5b2c1c505..50b90be65 100644 --- a/client/tslint.json +++ b/client/tslint.json @@ -46,7 +46,6 @@ "pipe-naming": [true, "camelCase", "my"], "component-class-suffix": true, "directive-class-suffix": true, - "import-destructuring-spacing": true, "templates-use-public": true, "no-access-missing-member": true, "invoke-injectable": true,