Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

better display of search results

Browse Source
This commit is contained in:
Nicolas Constant 2018-11-03 00:34:56 -04:00
parent db0debb359
commit 12502a0319
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/floating-column/search/search.component.html
View File

@ -11,7 +11,7 @@
<div *ngIf="accounts.length > 0" class="search-results">
<h3 class="search-results__title">Accounts</h3>
<a href *ngFor="let account of accounts" class="account">
<a href *ngFor="let account of accounts" class="account" title="open account">
<img src="{{account.avatar}}" class="account__avatar" />
<div class="account__name">{{ account.username }}</div>
<div class="account__fullhandle">@{{ account.acct }}</div>
@ -25,7 +25,7 @@
<div *ngIf="hashtags.length > 0" class="search-results">
<h3 class="search-results__title">Hashtags</h3>
<a href *ngFor="let hashtag of hashtags" class="search-results__hashtag">
<a (click)="addHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="add hashtag column">
#{{ hashtag }}
</a>
</div>

82
src/app/components/floating-column/search/search.component.scss
View File

@ -2,10 +2,12 @@
@import "mixins";
@import "panel";
@import "commons";
$separator-color:$color-primary;
$button-size: 30px;
$button-color: darken(white, 30);
$button-color-hover: white;
$button-background-color: $color-primary;
$button-background-color-hover: lighten($color-primary, 20);
.form-section {
overflow: auto;
width: 100%;
@ -22,77 +24,81 @@ $button-size: 30px;
border: none;
outline: none;
cursor: pointer;
background-color: $color-primary;
color: darken(white, 30);
// font-weight: bold;
background-color: $button-background-color;
color: $button-color;
transition: all .2s;
&:hover {
background-color: lighten($color-primary, 20);
color: white;
// transform: scale(1.2);
background-color: $button-background-color-hover;
color: $button-color-hover;
}
}
.search-results {
// outline: 1px solid greenyellow;
margin-top: 10px;
// &:first-of-type{
margin-top: 10px; // &:first-of-type{
// margin-top: 10px;
// }
&__title {
text-transform: uppercase;
font-size: 13px;
}
&__hashtag {
border-radius: 2px;
display: block;
padding: 5px;
color: white;
border-top: 1px solid $separator-color;
&:last-of-type{
border-bottom: 1px solid $separator-color;
}
}
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;
}
}
}
.account {
display: block;
color: white;
display: block;
color: white;
&:hover {
text-decoration: none;
}
border-radius: 2px;
transition: all .3s;
&:hover &__name {
text-decoration: underline;
}
border-top: 1px solid $separator-color;
&:last-of-type{
// &:hover &__name {
// text-decoration: underline;
// }
border-top: 1px solid $separator-color;
&:last-of-type {
border-bottom: 1px solid $separator-color;
}
}
&__avatar {
width: 40px;
margin: 5px 10px 5px 5px;
float: left;
border-radius: 2px;
}
&__name {
margin: 7px 0 0 0;
margin: 7px 0 0 0;
}
&__fullhandle {
margin: 0 0 5px 0;
color: $status-secondary-color;
transition: all .3s;
// &:hover {
// color: white;
// }
}
&:hover,
&:hover &__fullhandle {
color: white;
text-decoration: none;
background-color: $button-background-color-hover;
}
@include clearfix;

13
src/app/components/floating-column/search/search.component.ts
View File

@ -33,6 +33,11 @@ export class SearchComponent implements OnInit {
return false;
}
addHashtag(hashtag: string): boolean {
console.warn(hashtag);
return false;
}
private search(data: string) {
this.accounts.length = 0;
this.statuses.length = 0;
@ -50,14 +55,8 @@ export class SearchComponent implements OnInit {
.then((results: Results) => {
if (results) {
console.warn(results);
this.accounts = results.accounts;
//this.statuses = results.statuses;
this.accounts = results.accounts.slice(0, 5);
this.hashtags = results.hashtags;
//TODO: Pleroma return more than mastodon, will have to handle that
if (this.accounts.length > 5) {
this.accounts.length = 5;
}
}
})
.catch((err) => console.error(err))