aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-01 09:20:19 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-01 10:55:56 +0100
commitb33f657c304b77938c1f68164d8e754787f5aae5 (patch)
tree93c47cfff0124a1084e7c5344969a82ed60ee926 /client/src/app
parentfef2c7164e025b12a64185dbab058ef4129733c6 (diff)
downloadPeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.tar.gz
PeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.tar.zst
PeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.zip
Begin new menu design
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/app.component.html18
-rw-r--r--client/src/app/app.component.scss63
-rw-r--r--client/src/app/app.component.ts17
-rw-r--r--client/src/app/app.module.ts6
-rw-r--r--client/src/app/core/core.module.ts8
-rw-r--r--client/src/app/core/index.ts1
-rw-r--r--client/src/app/core/menu/menu.component.html55
-rw-r--r--client/src/app/core/menu/menu.component.scss51
-rw-r--r--client/src/app/menu/index.ts (renamed from client/src/app/core/menu/index.ts)0
-rw-r--r--client/src/app/menu/menu-admin.component.html (renamed from client/src/app/core/menu/menu-admin.component.html)0
-rw-r--r--client/src/app/menu/menu-admin.component.ts (renamed from client/src/app/core/menu/menu-admin.component.ts)4
-rw-r--r--client/src/app/menu/menu.component.html48
-rw-r--r--client/src/app/menu/menu.component.scss131
-rw-r--r--client/src/app/menu/menu.component.ts (renamed from client/src/app/core/menu/menu.component.ts)15
-rw-r--r--client/src/app/shared/search/search.component.html26
-rw-r--r--client/src/app/shared/search/search.component.scss51
16 files changed, 241 insertions, 253 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 8a826e783..f4672c7ec 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,7 +1,7 @@
1<div class="container-fluid"> 1<div class="container-fluid">
2 <div class="row header"> 2 <div class="row header">
3 3
4 <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }"> 4 <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
5 <div class="hamburger-block" (click)="toggleMenu()"> 5 <div class="hamburger-block" (click)="toggleMenu()">
6 <span class="glyphicon glyphicon-menu-hamburger"></span> 6 <span class="glyphicon glyphicon-menu-hamburger"></span>
7 </div> 7 </div>
@@ -11,15 +11,13 @@
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <!-- Used for the fixed title --> 14 <div class="header-right">
15 <div class="col-md-2 col-sm-3 col-xs-3 fake-title-block"></div> 15 <my-search></my-search>
16 16 </div>
17 <!-- We need to reset col-md-* because my-search is in fixed position -->
18 <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
19 </div> 17 </div>
20 18
21 <div class="row"> 19 <div class="row sub-header-container">
22 <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left"> 20 <div class="title-menu-left">
23 21
24 <div class="title-menu-left-block menu"> 22 <div class="title-menu-left-block menu">
25 <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu> 23 <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu>
@@ -27,10 +25,6 @@
27 </div> 25 </div>
28 </div> 26 </div>
29 27
30 <!-- Used for the fixed menu -->
31 <div class="fake-menu col-md-2 col-sm-3 col-xs-3">
32 </div>
33
34 <div class="main-col" [ngClass]="getMainColClasses()"> 28 <div class="main-col" [ngClass]="getMainColClasses()">
35 29
36 <div class="main-row"> 30 <div class="main-row">
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index a656d5c29..28e86097c 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -2,10 +2,23 @@
2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); 2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
3} 3}
4 4
5.main-col {
6 margin-left: $menu-width;
7
8 &.expanded {
9 margin-left: 0;
10 }
11}
12
13.sub-header-container {
14 margin-top: $header-height;
15}
16
5.title-menu-left { 17.title-menu-left {
6 position: fixed; 18 position: fixed;
7 height: calc(100vh - #{$header-height}); 19 height: calc(100vh - #{$header-height});
8 padding: 0; 20 padding: 0;
21 width: $menu-width;
9 22
10 .title-menu-left-block.menu { 23 .title-menu-left-block.menu {
11 height: 100%; 24 height: 100%;
@@ -14,35 +27,28 @@
14 27
15.header { 28.header {
16 height: $header-height; 29 height: $header-height;
17 30 position: fixed;
18 .fake-title-block { 31 width: 100%;
19 display: inline-block; 32 background-color: #fff;
20 } 33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
34 display: flex;
21 35
22 .top-left-block { 36 .top-left-block {
23 z-index: 100; 37 width: $menu-width;
24 background-color: #fff; 38 z-index: 1001;
25 border-right: 1px solid $header-border-color;
26 height: $header-height; 39 height: $header-height;
27 line-height: $header-height; 40 line-height: $header-height;
28 margin-top: 0; 41 margin-top: 0;
29 margin-bottom: 0; 42 margin-bottom: 0;
30 display: flex; 43 display: flex;
31 position: fixed;
32 padding: 0; 44 padding: 0;
33 45
34 &.border-bottom {
35 border-bottom: 1px solid $header-border-color;
36 }
37
38 .hamburger-block { 46 .hamburger-block {
39 margin-right: 15px; 47 margin-right: 10px;
40 margin-left: 15px; 48 margin-left: 25px;
41 49
42 .glyphicon { 50 .glyphicon {
43 cursor: pointer; 51 cursor: pointer;
44 position: relative;
45 top: 4px;
46 } 52 }
47 } 53 }
48 54
@@ -50,12 +56,9 @@
50 a { 56 a {
51 color: inherit !important; 57 color: inherit !important;
52 display: block; 58 display: block;
53 background: url('../assets/logo.png') no-repeat; 59 background: url('../assets/logo.svg') no-repeat;
54 background-size: contain; 60 width: 24px;
55 background-position: center; 61 height: 24px;
56 height: 100%;
57 margin: auto;
58 width: 135px;
59 62
60 &:hover { 63 &:hover {
61 color: inherit !important; 64 color: inherit !important;
@@ -122,17 +125,11 @@
122 } 125 }
123 } 126 }
124 127
125 my-search { 128 .header-right {
126 position: fixed; 129 text-align: right;
127 z-index: 1000; 130 height: $header-height;
128 // Fix col-md-* padding 131 margin-left: $menu-width;
129 padding: 0; 132 flex-grow: 1;
130 }
131
132 .search-col {
133 height: 100%;
134 margin-left: -15px;
135 padding: 0;
136 } 133 }
137} 134}
138 135
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 9b699fafd..b1818c298 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,8 +1,6 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3
4import { AuthService, ServerService } from './core' 3import { AuthService, ServerService } from './core'
5import { UserService } from './shared'
6 4
7@Component({ 5@Component({
8 selector: 'my-app', 6 selector: 'my-app',
@@ -62,20 +60,9 @@ export class AppComponent implements OnInit {
62 } 60 }
63 61
64 getMainColClasses () { 62 getMainColClasses () {
65 const colSizes = {
66 md: 10,
67 sm: 9,
68 xs: 9
69 }
70
71 // Take all width is the menu is not displayed 63 // Take all width is the menu is not displayed
72 if (this.isMenuDisplayed === false) { 64 if (this.isMenuDisplayed === false) return [ 'expanded' ]
73 Object.keys(colSizes).forEach(col => colSizes[col] = 12)
74 }
75
76 const classes = []
77 Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`))
78 65
79 return classes 66 return []
80 } 67 }
81} 68}
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index e71641e0d..342589003 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { LoginModule } from './login'
20import { SignupModule } from './signup' 20import { SignupModule } from './signup'
21import { SharedModule } from './shared' 21import { SharedModule } from './shared'
22import { VideosModule } from './videos' 22import { VideosModule } from './videos'
23import { MenuComponent, MenuAdminComponent } from './menu'
23 24
24export function metaFactory (): MetaLoader { 25export function metaFactory (): MetaLoader {
25 return new MetaStaticLoader({ 26 return new MetaStaticLoader({
@@ -47,7 +48,10 @@ const APP_PROVIDERS = [
47@NgModule({ 48@NgModule({
48 bootstrap: [ AppComponent ], 49 bootstrap: [ AppComponent ],
49 declarations: [ 50 declarations: [
50 AppComponent 51 AppComponent,
52
53 MenuComponent,
54 MenuAdminComponent
51 ], 55 ],
52 imports: [ 56 imports: [
53 BrowserModule, 57 BrowserModule,
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index c4ce2b637..75262e6cf 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -26,17 +26,13 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
26 ], 26 ],
27 27
28 declarations: [ 28 declarations: [
29 ConfirmComponent, 29 ConfirmComponent
30 MenuComponent,
31 MenuAdminComponent
32 ], 30 ],
33 31
34 exports: [ 32 exports: [
35 SimpleNotificationsModule, 33 SimpleNotificationsModule,
36 34
37 ConfirmComponent, 35 ConfirmComponent
38 MenuComponent,
39 MenuAdminComponent
40 ], 36 ],
41 37
42 providers: [ 38 providers: [
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 8358261ae..3c01e05aa 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,6 +1,5 @@
1export * from './auth' 1export * from './auth'
2export * from './server' 2export * from './server'
3export * from './confirm' 3export * from './confirm'
4export * from './menu'
5export * from './routing' 4export * from './routing'
6export * from './core.module' 5export * from './core.module'
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
deleted file mode 100644
index fcde23fdd..000000000
--- a/client/src/app/core/menu/menu.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
1<menu>
2 <div class="panel-block">
3 <div class="block-title">Account</div>
4
5 <div id="panel-user-login" class="panel-button">
6 <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
7 <span class="hidden-xs glyphicon glyphicon-log-in"></span>
8 Login
9 </a>
10
11 <a *ngIf="isLoggedIn" (click)="logout()">
12 <span class="hidden-xs glyphicon glyphicon-log-out"></span>
13 Logout
14 </a>
15 </div>
16
17 <a *ngIf="!isLoggedIn && isRegistrationAllowed()" routerLink="/signup" routerLinkActive="active">
18 <span class="hidden-xs glyphicon glyphicon-user"></span>
19 Signup
20 </a>
21
22 <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
23 <span class="hidden-xs glyphicon glyphicon-user"></span>
24 My account
25 </a>
26
27 <a *ngIf="isLoggedIn" routerLink="/videos/mine" routerLinkActive="active">
28 <span class="hidden-xs glyphicon glyphicon-folder-open"></span>
29 My videos
30 </a>
31 </div>
32
33 <div class="panel-block">
34 <div class="block-title">Videos</div>
35
36 <a routerLink="/videos/list" routerLinkActive="active">
37 <span class="hidden-xs glyphicon glyphicon-list"></span>
38 See videos
39 </a>
40
41 <a *ngIf="isLoggedIn" routerLink="/videos/upload" routerLinkActive="active">
42 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
43 Upload a video
44 </a>
45 </div>
46
47 <div *ngIf="userHasAdminAccess" class="panel-block">
48 <div class="block-title">Other</div>
49
50 <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
51 <span class="hidden-xs glyphicon glyphicon-cog"></span>
52 Administration
53 </a>
54 </div>
55</menu>
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss
deleted file mode 100644
index 45679c310..000000000
--- a/client/src/app/core/menu/menu.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
1menu {
2 background-color: $black-background;
3 padding: 15px;
4 margin: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10
11 @media screen and (max-width: 550px) {
12 font-size: 90%;
13 }
14
15 @media screen and (min-width: 1200px) {
16 padding: 25px;
17 }
18
19 .panel-block {
20 margin-bottom: 15px;
21 }
22
23 .block-title {
24 text-transform: uppercase;
25 font-weight: bold;
26 color: $menu-color-block;
27 margin-bottom: 10px;
28 }
29
30 a {
31 display: block;
32 margin-left: 5px;
33 height: 30px;
34 color: $menu-color-link;
35 cursor: pointer;
36 transition: color 0.3s;
37
38 &:hover, &:focus {
39 text-decoration: none !important;
40 outline: none !important;
41 }
42
43 .glyphicon {
44 margin-right: 15px;
45 }
46
47 &:hover, &.active {
48 color: #fff;
49 }
50 }
51}
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/menu/index.ts
index c905ed20a..c905ed20a 100644
--- a/client/src/app/core/menu/index.ts
+++ b/client/src/app/menu/index.ts
diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/menu/menu-admin.component.html
index 9857b2e3e..9857b2e3e 100644
--- a/client/src/app/core/menu/menu-admin.component.html
+++ b/client/src/app/menu/menu-admin.component.html
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/menu/menu-admin.component.ts
index ea8d5f57c..1babf5eb6 100644
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ b/client/src/app/menu/menu-admin.component.ts
@@ -1,7 +1,7 @@
1import { Component } from '@angular/core' 1import { Component } from '@angular/core'
2 2
3import { AuthService } from '../auth/auth.service' 3import { AuthService } from '../core/auth/auth.service'
4import { UserRight } from '../../../../../shared' 4import { UserRight } from '../../../../shared'
5 5
6@Component({ 6@Component({
7 selector: 'my-menu-admin', 7 selector: 'my-menu-admin',
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
new file mode 100644
index 000000000..bb0caaef5
--- /dev/null
+++ b/client/src/app/menu/menu.component.html
@@ -0,0 +1,48 @@
1<menu>
2 <div *ngIf="isLoggedIn" class="logged-in-block">
3 <div class="logged-in-info">
4 <div class="logged-in-username">{{ user.username }}</div>
5 <div class="logged-in-email">{{ user.email }}</div>
6 </div>
7
8 <div class="logged-in-more" dropdown placement="right" container="body">
9 <span class="glyphicon glyphicon-option-vertical" dropdownToggle></span>
10
11 <ul *dropdownMenu class="dropdown-menu">
12 <li>
13 <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
14 Log out
15 </a>
16 </li>
17 </ul>
18 </div>
19 </div>
20
21 <div *ngIf="!isLoggedIn" class="button-block">
22 <a routerLink="/login"class="login-button">Login</a>
23 <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
24 </div>
25
26 <div class="panel-block">
27 <div class="block-title">Videos</div>
28
29 <a routerLink="/videos/list" routerLinkActive="active">
30 <span class="icon icon-videos-trending"></span>
31 Trending
32 </a>
33
34 <a routerLink="/videos/list" routerLinkActive="active">
35 <span class="icon icon-videos-recently-added"></span>
36 Recently added
37 </a>
38 </div>
39
40 <div *ngIf="userHasAdminAccess" class="panel-block">
41 <div class="block-title">More</div>
42
43 <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
44 <span class="icon icon-administration"></span>
45 Administration
46 </a>
47 </div>
48</menu>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
new file mode 100644
index 000000000..8a4910605
--- /dev/null
+++ b/client/src/app/menu/menu.component.scss
@@ -0,0 +1,131 @@
1menu {
2 background-color: $black-background;
3 margin: 0;
4 padding: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10 color: $menu-color;
11
12 @media screen and (max-width: 550px) {
13 font-size: 90%;
14 }
15
16 .logged-in-block {
17 height: 100px;
18 background-color: rgba(255, 255, 255, 0.15);
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 margin-bottom: 35px;
23
24 .logged-in-info {
25 flex-grow: 1;
26 margin-left: 40px;
27
28 .logged-in-username {
29 font-size: 16px;
30 font-weight: $font-semibold;
31 }
32
33 .logged-in-email {
34 font-size: 13px;
35 color: #C6C6C6;
36 }
37 }
38
39 .logged-in-more {
40 margin-right: 20px;
41
42 .glyphicon {
43 cursor: pointer;
44 font-size: 18px;
45 }
46 }
47 }
48
49 .button-block {
50 margin: 30px 25px 35px 25px;
51
52 .login-button, .create-account-button {
53 font-weight: $font-semibold;
54 font-size: 15px;
55 height: $button-height;
56 line-height: $button-height;
57 width: 190px;
58 border-radius: 3px;
59 text-align: center;
60
61 &.login-button {
62 background-color: $orange-color;
63 margin-bottom: 10px;
64 }
65
66 &.create-account-button {
67 background-color: rgba(255, 255, 255, 0.25);
68 }
69 }
70 }
71
72 .block-title {
73 text-transform: uppercase;
74 font-weight: $font-bold; // Bold
75 font-size: 13px;
76 margin-bottom: 25px;
77 }
78
79 .panel-block {
80 margin-bottom: 45px;
81 margin-left: 26px;
82
83 a {
84 display: flex;
85
86 .icon {
87 width: 22px;
88 height: 22px;
89 display: inline-block;
90 margin-right: 18px;
91 background-size: contain;
92
93 &.icon-videos-trending {
94 position: relative;
95 top: -2px;
96 background-image: url('../../assets/menu/trending.svg');
97 }
98
99 &.icon-videos-recently-added {
100 width: 23px;
101 height: 23px;
102 position: relative;
103 top: -1px;
104 background-image: url('../../assets/menu/recently-added.svg');
105 }
106
107 &.icon-administration {
108 width: 23px;
109 height: 23px;
110
111 background-image: url('../../assets/menu/administration.svg');
112 }
113 }
114 }
115 }
116
117 a {
118 color: $menu-color;
119 height: 22px;
120 line-height: 22px;
121 display: block;
122 font-size: 16px;
123 cursor: pointer;
124 margin-bottom: 15px;
125
126 &:hover, &:focus {
127 text-decoration: none !important;
128 outline: none !important;
129 }
130 }
131}
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index d2bd71534..4c35bb3a5 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,9 +1,8 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3 3import { UserRight } from '../../../../shared/models/users/user-right.enum'
4import { AuthService, AuthStatus } from '../auth' 4import { AuthService, AuthStatus, ServerService } from '../core'
5import { ServerService } from '../server' 5import { User } from '../shared/users/user.model'
6import { UserRight } from '../../../../../shared/models/users/user-right.enum'
7 6
8@Component({ 7@Component({
9 selector: 'my-menu', 8 selector: 'my-menu',
@@ -11,6 +10,7 @@ import { UserRight } from '../../../../../shared/models/users/user-right.enum'
11 styleUrls: [ './menu.component.scss' ] 10 styleUrls: [ './menu.component.scss' ]
12}) 11})
13export class MenuComponent implements OnInit { 12export class MenuComponent implements OnInit {
13 user: User
14 isLoggedIn: boolean 14 isLoggedIn: boolean
15 userHasAdminAccess = false 15 userHasAdminAccess = false
16 16
@@ -29,16 +29,19 @@ export class MenuComponent implements OnInit {
29 29
30 ngOnInit () { 30 ngOnInit () {
31 this.isLoggedIn = this.authService.isLoggedIn() 31 this.isLoggedIn = this.authService.isLoggedIn()
32 if (this.isLoggedIn === true) this.user = this.authService.getUser()
32 this.computeIsUserHasAdminAccess() 33 this.computeIsUserHasAdminAccess()
33 34
34 this.authService.loginChangedSource.subscribe( 35 this.authService.loginChangedSource.subscribe(
35 status => { 36 status => {
36 if (status === AuthStatus.LoggedIn) { 37 if (status === AuthStatus.LoggedIn) {
37 this.isLoggedIn = true 38 this.isLoggedIn = true
39 this.user = this.authService.getUser()
38 this.computeIsUserHasAdminAccess() 40 this.computeIsUserHasAdminAccess()
39 console.log('Logged in.') 41 console.log('Logged in.')
40 } else if (status === AuthStatus.LoggedOut) { 42 } else if (status === AuthStatus.LoggedOut) {
41 this.isLoggedIn = false 43 this.isLoggedIn = false
44 this.user = undefined
42 this.computeIsUserHasAdminAccess() 45 this.computeIsUserHasAdminAccess()
43 console.log('Logged out.') 46 console.log('Logged out.')
44 } else { 47 } else {
@@ -78,7 +81,9 @@ export class MenuComponent implements OnInit {
78 return this.routesPerRight[right] 81 return this.routesPerRight[right]
79 } 82 }
80 83
81 logout () { 84 logout (event: Event) {
85 event.preventDefault()
86
82 this.authService.logout() 87 this.authService.logout()
83 // Redirect to home page 88 // Redirect to home page
84 this.router.navigate(['/videos/list']) 89 this.router.navigate(['/videos/list'])
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 75e9dfa59..0e3de150c 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,22 +1,6 @@
1<div class="input-group"> 1<input
2 type="text" id="search-video" name="search-video" placeholder="Search"
3 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
4>
2 5
3 <span class="hidden-xs input-group-addon icon-addon"> 6<a routerLink="/videos/upload">Upload</a>
4 <span class="glyphicon glyphicon-search"></span>
5 </span>
6
7 <input
8 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
9 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
10 >
11
12 <div class="input-group-btn" dropdown placement="bottom right">
13 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
14 {{ getStringChoice(searchCriteria.field) }} <span class="caret"></span>
15 </button>
16 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
17 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
18 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
19 </li>
20 </ul>
21 </div>
22</div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index 583f9586f..e69de29bb 100644
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -1,51 +0,0 @@
1.icon-addon {
2 background-color: #fff;
3 border-radius: 0;
4 border-color: $header-border-color;
5 border-width: 0 0 1px 0;
6 text-align: right;
7
8 .glyphicon-search {
9 width: 30px;
10 font-size: 20px;
11 }
12}
13
14input, button, .input-group {
15 height: 100%;
16}
17
18input, .input-group-btn {
19 border-radius: 0;
20 border-top: none;
21 border-left: none;
22}
23
24input {
25 height: $header-height;
26 border-right: none;
27 font-weight: bold;
28 box-shadow: none;
29
30 &, &:focus {
31 border-bottom: 1px solid $header-border-color !important;
32 outline: none !important;
33 box-shadow: none !important;
34 }
35}
36
37button {
38
39 &, &:hover, &:focus, &:active, &:visited {
40 background-color: #fff !important;
41 border-color: $header-border-color !important;
42 color: #858585 !important;
43 outline: none !important;
44
45 height: $header-height;
46 border-width: 0 0 1px 0;
47 font-weight: bold;
48 text-decoration: none;
49 box-shadow: none;
50 }
51}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 09:00:49 +0000