fix search panel not displaying scroll bar when needed
This commit is contained in:
Nicolas Constant
parent
814b1b4bff
commit
b3d49d0e07
|
|
@ -1,39 +1,44 @@
|
|||
<div class="panel">
|
||||
<h3 class="panel__title">search</h3>
|
||||
|
||||
<form class="form-section" (ngSubmit)="onSubmit()">
|
||||
<input type="text" class="form-control form-control-sm form-with-button" [(ngModel)]="searchHandle" name="searchHandle"
|
||||
placeholder="Search" autocomplete="off" />
|
||||
<button class="form-button" type="submit" title="search">GO</button>
|
||||
</form>
|
||||
<div class="search-result-form">
|
||||
<h3 class="panel__title">search</h3>
|
||||
|
||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||
|
||||
<div *ngIf="accounts.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Accounts</h3>
|
||||
<a href *ngFor="let account of accounts" class="account" title="open account"
|
||||
(click)="browseAccount(account.acct)">
|
||||
<img src="{{account.avatar}}" class="account__avatar" />
|
||||
<div class="account__name">{{ account.username }}</div>
|
||||
<div class="account__fullhandle">@{{ account.acct }}</div>
|
||||
</a>
|
||||
<form class="form-section" (ngSubmit)="onSubmit()">
|
||||
<input type="text" class="form-control form-control-sm form-with-button" [(ngModel)]="searchHandle"
|
||||
name="searchHandle" placeholder="Search" autocomplete="off" />
|
||||
<button class="form-button" type="submit" title="search">GO</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div *ngIf="hashtags.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Hashtags</h3>
|
||||
<a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
|
||||
#{{ hashtag }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-result-display flexcroll">
|
||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||
|
||||
<div *ngIf="statuses.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Statuses</h3>
|
||||
<div *ngIf="accounts.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Accounts</h3>
|
||||
<a href *ngFor="let account of accounts" class="account" title="open account"
|
||||
(click)="browseAccount(account.acct)">
|
||||
<img src="{{account.avatar}}" class="account__avatar" />
|
||||
<div class="account__name">{{ account.username }}</div>
|
||||
<div class="account__fullhandle">@{{ account.acct }}</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="search-results__status" *ngFor="let statusWrapper of statuses">
|
||||
<app-status [statusWrapper]="statusWrapper"
|
||||
(browseAccountEvent)="browseAccount($event)"
|
||||
(browseHashtagEvent)="browseHashtag($event)"
|
||||
(browseThreadEvent)="browseThread($event)"></app-status>
|
||||
<div *ngIf="hashtags.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Hashtags</h3>
|
||||
<a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag"
|
||||
title="browse hashtag">
|
||||
#{{ hashtag }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="statuses.length > 0" class="search-results">
|
||||
<h3 class="search-results__title">Statuses</h3>
|
||||
|
||||
<div class="search-results__status" *ngFor="let statusWrapper of statuses">
|
||||
<app-status [statusWrapper]="statusWrapper" (browseAccountEvent)="browseAccount($event)"
|
||||
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
|
||||
</app-status>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,7 +2,10 @@
|
|||
@import "mixins";
|
||||
@import "panel";
|
||||
@import "commons";
|
||||
|
||||
.panel {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
overflow: auto;
|
||||
|
|
@ -29,10 +32,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
$search-form-height: 70px;
|
||||
.search-result-form {
|
||||
height: $search-form-height;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-bottom: 1px solid #222736;
|
||||
}
|
||||
|
||||
.search-result-display {
|
||||
overflow: auto;
|
||||
height: calc(100% - #{$search-form-height});
|
||||
}
|
||||
|
||||
.search-results {
|
||||
// outline: 1px solid greenyellow;
|
||||
margin-top: 10px; // &:first-of-type{
|
||||
// margin-top: 10px;
|
||||
padding-left: 10px; // margin-top: 10px;
|
||||
padding-right: 10px; // margin-top: 10px;
|
||||
// }
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
|
|
@ -44,18 +61,15 @@
|
|||
padding: 5px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
transition: all .3s;
|
||||
&:hover {
|
||||
background-color: $button-background-color-hover;
|
||||
}
|
||||
|
||||
border-top: 1px solid $separator-color;
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid $separator-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 15px;
|
||||
border-top: 1px solid $separator-color;
|
||||
|
|
@ -68,12 +82,8 @@
|
|||
.account {
|
||||
display: block;
|
||||
color: white;
|
||||
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
|
||||
|
||||
// &:hover &__name {
|
||||
transition: all .3s; // &:hover &__name {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
border-top: 1px solid $separator-color;
|
||||
|
|
@ -92,18 +102,15 @@
|
|||
&__fullhandle {
|
||||
margin: 0 0 5px 0;
|
||||
color: $status-secondary-color;
|
||||
transition: all .3s;
|
||||
// &:hover {
|
||||
transition: all .3s; // &:hover {
|
||||
// color: white;
|
||||
// }
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:hover &__fullhandle {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: $button-background-color-hover;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
padding: 10px 10px 0 7px;
|
||||
font-size: $small-font-size;
|
||||
white-space: normal;
|
||||
// overflow: auto;
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
Loading…
Reference in New Issue