diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 2c2106733..9d67ca66c 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -28,6 +28,10 @@ menu {
.logged-in-username {
font-size: 16px;
font-weight: $font-semibold;
+ color: $menu-color;
+ cursor: pointer;
+
+ @include disable-default-a-behaviour;
}
.logged-in-email {
@@ -57,6 +61,12 @@ menu {
width: 190px;
border-radius: 3px;
text-align: center;
+ color: $menu-color;
+ display: block;
+ cursor: pointer;
+ margin-bottom: 15px;
+
+ @include disable-default-a-behaviour;
&.login-button {
background-color: $orange-color;
@@ -82,6 +92,13 @@ menu {
a {
display: flex;
+ color: $menu-color;
+ cursor: pointer;
+ height: 22px;
+ line-height: 22px;
+ font-size: 16px;
+ margin-bottom: 15px;
+ @include disable-default-a-behaviour;
.icon {
width: 22px;
@@ -113,16 +130,4 @@ menu {
}
}
}
-
- a {
- color: $menu-color;
- height: 22px;
- line-height: 22px;
- display: block;
- font-size: 16px;
- cursor: pointer;
- margin-bottom: 15px;
-
- @include disable-default-a-behaviour;
- }
}
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index ffd891904..191d3d597 100644
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -1,13 +1,7 @@
#search-video {
- display: inline-block;
- height: $button-height;
- width: $search-input-width;
+ @include peertube-input-text($search-input-width);
margin-right: 15px;
padding-right: 25px; // For the search icon
- background: #fff;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding-left: 15px;
&::placeholder {
color: #000;
@@ -29,19 +23,9 @@
}
.upload-button {
- display: inline-block;
- color: #fff;
- font-weight: $font-semibold;
- font-size: 15px;
- height: $button-height;
- line-height: $button-height;
- border-radius: 3px;
- text-align: center;
- margin-right: 25px;
- background-color: $orange-color;
- padding: 0 17px 0 13px;
+ @include peertube-button-link;
- @include disable-default-a-behaviour;
+ margin-right: 25px;
.icon.icon-upload {
display: inline-block;
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index a5a60364a..594e31984 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,4 +1,3 @@
-export * from './my-videos.component'
export * from './video-recently-added.component'
export * from './video-trending.component'
export * from './shared'
diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts
deleted file mode 100644
index 146db8262..000000000
--- a/client/src/app/videos/video-list/my-videos.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { AbstractVideoList } from './shared'
-import { VideoService } from '../shared'
-
-@Component({
- selector: 'my-videos',
- styleUrls: [ './shared/abstract-video-list.scss' ],
- templateUrl: './shared/abstract-video-list.html'
-})
-export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
-
- constructor (
- protected router: Router,
- protected route: ActivatedRoute,
- protected notificationsService: NotificationsService,
- private videoService: VideoService
- ) {
- super()
- }
-
- ngOnInit () {
- super.ngOnInit()
- }
-
- ngOnDestroy () {
- super.ngOnDestroy()
- }
-
- getVideosObservable () {
- return this.videoService.getMyVideos(this.pagination, this.sort)
- }
-}
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
index 69e16319e..bd4f6b1f8 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
@@ -1,18 +1,19 @@
-
- {{ titlePage }}
-
+
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss
index de174802b..e69de29bb 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.scss
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss
@@ -1,23 +0,0 @@
-.videos-info {
- @media screen and (max-width: 400px) {
- margin-left: 0;
- }
-
- border-bottom: 1px solid #f1f1f1;
- height: 40px;
- line-height: 40px;
-
- .videos-total-results {
- font-size: 13px;
- }
-
- my-loader {
- display: inline-block;
- margin-left: 5px;
- }
-}
-
-pagination {
- display: block;
- text-align: center;
-}
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts
index 44cdc1d9f..a684ffef4 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts
@@ -36,7 +36,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
}
ngOnDestroy () {
- this.subActivatedRoute.unsubscribe()
+ if (this.subActivatedRoute) {
+ this.subActivatedRoute.unsubscribe()
+ }
}
onNearOfTop () {
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 1f894df7a..204851c81 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -1,7 +1,6 @@
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { MetaGuard } from '@ngx-meta/core'
-import { MyVideosComponent } from './video-list'
import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
import { VideoTrendingComponent } from './video-list/video-trending.component'
import { VideosComponent } from './videos.component'
@@ -17,15 +16,6 @@ const videosRoutes: Routes = [
pathMatch: 'full',
redirectTo: 'recently-added'
},
- {
- path: 'mine',
- component: MyVideosComponent,
- data: {
- meta: {
- title: 'My videos'
- }
- }
- },
{
path: 'trending',
component: VideoTrendingComponent,
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index f3981d275..1d6194158 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
import { InfiniteScrollModule } from 'ngx-infinite-scroll'
import { SharedModule } from '../shared'
import { VideoService } from './shared'
-import { MyVideosComponent, VideoMiniatureComponent } from './video-list'
+import { VideoMiniatureComponent } from './video-list'
import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
import { VideoTrendingComponent } from './video-list/video-trending.component'
import { VideosRoutingModule } from './videos-routing.module'
@@ -20,7 +20,6 @@ import { VideosComponent } from './videos.component'
VideoTrendingComponent,
VideoRecentlyAddedComponent,
- MyVideosComponent,
VideoMiniatureComponent
],
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 681657d90..5798b8f6e 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -4,3 +4,38 @@
outline: none !important;
}
}
+
+@mixin peertube-input-text($width) {
+ display: inline-block;
+ height: $button-height;
+ width: $width;
+ background: #fff;
+ border: 1px solid #C6C6C6;
+ border-radius: 3px;
+ padding-left: 15px;
+
+ &::placeholder {
+ color: #585858;
+ }
+}
+
+@mixin peertube-button {
+ border: none;
+ color: #fff;
+ font-weight: $font-semibold;
+ font-size: 15px;
+ height: $button-height;
+ line-height: $button-height;
+ border-radius: 3px;
+ text-align: center;
+ background-color: $orange-color;
+ padding: 0 17px 0 13px;
+ cursor: pointer;
+}
+
+@mixin peertube-button-link {
+ display: inline-block;
+
+ @include peertube-button;
+ @include disable-default-a-behaviour;
+}
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index e32b37462..d05452367 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -8,6 +8,8 @@ $orange-color: #F1680D;
$black-background: #000;
$grey-background: #f6f2f2;
+$expanded-horizontal-margins: 150px;
+
$button-height: 30px;
$header-height: 50px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fc61a22da..db63db5f5 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -33,14 +33,50 @@ input.readonly {
}
.main-col {
- padding: 30px;
+ margin-left: $menu-width;
.title-page {
+ color: #000;
font-size: 16px;
- font-weight: $font-bold;
display: inline-block;
- border-bottom: 2px solid $orange-color;
- margin-bottom: 25px;
+ margin-right: 55px;
+ font-weight: $font-semibold;
+ @include disable-default-a-behaviour;
+
+ &.active, &.title-page-single {
+ border-bottom: 2px solid $orange-color;
+ font-weight: $font-bold;
+ margin-top: 30px;
+ margin-bottom: 25px;
+ }
+ }
+
+ .margin-content {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .sub-menu {
+ background-color: #F7F7F7;
+ width: 100%;
+ height: 81px;
+ margin-bottom: 30px;
+ display: flex;
+ align-items: center;
+ }
+
+ // Override some properties if the main content is expanded (no menu on the left)
+ &.expanded {
+ margin-left: 0;
+
+ .margin-content {
+ margin-left: $expanded-horizontal-margins;
+ margin-right: $expanded-horizontal-margins;
+ }
+
+ .sub-menu {
+ padding-left: $expanded-horizontal-margins;
+ }
}
}
diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss
index 693489828..52eef50f2 100644
--- a/client/src/sass/pre-customizations.scss
+++ b/client/src/sass/pre-customizations.scss
@@ -1,4 +1,5 @@
@import '_variables.scss';
+@import '_mixins.scss';
$bootstrap-sass-asset-helper: false !default;
//