Skip to content

Commit

Permalink
Merge pull request #877 from newswangerd/responsive-search
Browse files Browse the repository at this point in the history 
Responsive search
  • Loading branch information
@newswangerd
newswangerd authored Jul 17, 2018
2 parents 11dbba0 + e9c0e43 commit 81d0351
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 138 deletions.
16 changes: 5 additions & 11 deletions galaxyui/src/app/search/popular/popular.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,10 @@
[itemTemplate]="itemTemplate"
(onClick)="handleClick($event)">
<ng-template #itemTemplate let-item="item" let-index="index">
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title text-overflow-pf">
<span class="item-name">{{item.name}}</span>
</div>
<div class="list-pf-description text-right item-hide">
<span class="item-count">{{ item.roles_count | number }}</span>
</div>
</div>
<div class="list-wrapper">
<div class="item-name">{{item.name}}</div>
<div class="item-count">{{ item.roles_count | number }}</div>
</div>
</ng-template>
</ng-template>
</pfng-list>
</div>
</div>
38 changes: 21 additions & 17 deletions galaxyui/src/app/search/popular/popular.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,26 @@
padding: 8px;
border-bottom: 1px solid @ansible-dark-grey;
}
.text-right {
text-align: right;
}
.item-name {
padding: 2px 4px;
border-radius: 1px;
background-color: @blue;
color: @white;
}
.item-name:hover {
cursor: pointer;
}
.item-count {
padding: 2px 4px;
border-radius: 1px;
color: @white;
background-color: @ansible-dark-grey;

.list-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
.item-name {
font-weight: bold;
padding: 2px 4px;
border-radius: 1px;
background-color: @blue;
color: @white;
}
.item-name:hover {
cursor: pointer;
}
.item-count {
padding: 2px 4px;
border-radius: 1px;
color: @white;
background-color: @ansible-dark-grey;
}
}
}
102 changes: 53 additions & 49 deletions galaxyui/src/app/search/search.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div id="search-page" class="container-fluid">
<div class="row">
<div class="col-sm-9">
<div class="col-lg-9">
<pfng-toolbar
[config]="getToolbarConfig()"
(onFilterChange)="filterChanged($event)"
Expand All @@ -14,24 +14,17 @@
[items]="contentItems"
[itemTemplate]="itemTemplate">
<ng-template #itemTemplate let-item="item" let-index="index">
<div class="list-pf-left">
<div class="namespace-container">
<a [routerLink]="['/', item.summary_fields.namespace.name]"
[tooltip]="'View more content from ' + item['displayNamespace']"
container="body">
<table class="img-wrapper">
<tr>
<td>
<img [src]="item.avatar_url" class="namespace-avatar">
<div class="namespace-name">{{ item['namespace_name'] }}</div>
</td>
</tr>
</table>
</a>
</div>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">

<div class="list-pf-content-wrapper row list-row">
<div class="col-sm-7 search-list-left">
<div class="namespace-container">
<a [routerLink]="['/', item.summary_fields.namespace.name]"
[tooltip]="'View more content from ' + item['displayNamespace']"
container="body">
<img [src]="item.avatar_url" class="avatar-image" >
<div class="namespace-name">{{ item['namespace_name'] }}</div>
</a>
</div>
<div class="list-pf-title">
<div class="content-name">
<div class="icon">
Expand All @@ -52,48 +45,59 @@
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-reduced-margin">
<div class="list-pf-description">
<div class="travis" *ngIf="item.summary_fields.repository.travis_build_url">
<a href="{{ item.summary_fields.repository.travis_build_url }}" target="_blank" tooltip="View Travis build output. Opens in new tab or window.">
<img src="{{ item.summary_fields.repository.travis_status_url }}"
class="travis-status-img" title="Travis Build Status" />
</a>
</div>
<div class="counts">
<div class="repo-count">
<i class="fa fa-download"></i>
<span class="count">{{ item.download_count }}</span>
<span class="count-text">Downloads</span>
</div>
<div class="repository-details">
<span class="columns">
<ul class="count-left">
<li class="repo-count">
<i class="fa fa-download fa count-digits"></i>
<span class="count-digits">{{ item.download_count }}</span>
<span>Downloads</span>
</li>
<li class="repo-count">
<i class="fa fa-eye fa count-digits"></i>
<span class="count-digits">{{ item.summary_fields.repository.watchers_count }}</span>
<span>Watchers</span>
</li>
</ul>
</span>

<div class="repo-count">
<i class="fa fa-eye"></i>
<span class="count">{{ item.summary_fields.repository.watchers_count }}</span>
<span class="count-text">Watchers</span>
</div>

<div class="repo-count">
<i class="fa fa-star"></i>
<span class="count">{{ item.summary_fields.repository.stargazers_count }}</span>
<span class="count-text">Stars</span>
<span class="columns">
<ul class="count-right">
<li class="repo-count">
<i class="fa fa-star fa count-digits"></i>
<span class="count-digits">{{ item.summary_fields.repository.stargazers_count }}</span>
<span>Stars</span>
</li>
<li class="repo-count">
<i class="fa fa-copy fa count-digits"></i>
<span class="count-digits">{{ item.summary_fields.repository.forks_count }}</span>
<span>Forks</span>
</li>
</ul>
</span>
</div>
<div class="extra-detail">
<div class="import">
<div class="import-text">Last Imported</div>
<div class="import-date">{{ item.imported }}</div>
</div>

<div class="repo-count">
<i class="fa fa-copy"></i>
<span class="count">{{ item.summary_fields.repository.forks_count }}</span>
<span class="count-text">Forks</span>
<div class="relevance" *ngIf="showRelevance">
<span class="relevance-text">Best Match</span>
<span class="relevance-score">{{ item.relevance | number:'1.4-4' }}</span>
</div>
</div>
<div class="import">
<div class="import-text">Last Imported</div>
<div class="import-date">{{ item.imported }}</div>
</div>
<div class="relevance" *ngIf="showRelevance">
<span class="relevance-text">Best Match</span>
<span class="relevance-score">{{ item.relevance | number:'1.4-4' }}</span>
</div>
</div>
</div>

</div>
</ng-template>
</pfng-list>
Expand All @@ -106,7 +110,7 @@
</pfng-pagination>
</div>
</div>
<div class="col-sm-3">
<div class="col-lg-3">
<popular-widget
[popularTitle]="'Popular Tags'"
[popularType]="'tags'"
Expand Down
Loading

0 comments on commit 81d0351

Please sign in to comment.