aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/search
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 11:06:33 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (patch)
treeae0541d99056d75b08f14e8e4ea73f67f173d942 /client/src/app/shared/search
parent240c64c5f4277f0ce36c094f0663bd30d264ec40 (diff)
downloadPeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.gz
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.zst
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.zip
Client: responsive design
Diffstat (limited to 'client/src/app/shared/search')
-rw-r--r--client/src/app/shared/search/search.component.html20
-rw-r--r--client/src/app/shared/search/search.component.scss51
-rw-r--r--client/src/app/shared/search/search.component.ts3
3 files changed, 66 insertions, 8 deletions
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 @@
1
1<div class="input-group"> 2<div class="input-group">
2 <div class="input-group-btn" dropdown> 3
4 <span class="input-group-addon icon-addon">
5 <span class="glyphicon glyphicon-search"></span>
6 </span>
7
8 <input
9 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
10 [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
11 >
12
13 <div class="input-group-btn" dropdown placement="bottom right">
3 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle> 14 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
4 {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span> 15 {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
5 </button> 16 </button>
6 <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu> 17 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
7 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item"> 18 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
8 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a> 19 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
9 </li> 20 </li>
10 </ul> 21 </ul>
11 </div> 22 </div>
12
13 <input
14 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
15 [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
16 >
17</div> 23</div>
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 @@
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}
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';
7 7
8@Component({ 8@Component({
9 selector: 'my-search', 9 selector: 'my-search',
10 templateUrl: './search.component.html' 10 templateUrl: './search.component.html',
11 styleUrls: [ './search.component.scss' ]
11}) 12})
12 13
13export class SearchComponent implements OnInit { 14export class SearchComponent implements OnInit {