Merge pull request #785 from taigaio/issue/3024/search-table-layout

Issue/3024/search table layout
stable
David Barragán Merino 2016-01-07 13:02:21 +01:00
commit e87f8fbeb7
4 changed files with 68 additions and 54 deletions

View File

@ -174,7 +174,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
linkTable = ($scope, $el, $attrs, $ctrl) ->
applyAutoTab = true
activeSectionName = "userstories"
tabsDom = $el.find("section.search-filter")
tabsDom = $el.find(".search-filter")
lastSearchResults = null
getActiveSection = (data) ->
@ -197,7 +197,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
maxVal = value.length
selectedSection.name = name
selectedSection.value = value
break;
break
if maxVal == 0
return selectedSection
@ -206,7 +206,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
renderFilterTabs = (data) ->
for name, value of data
continue if name == "count"
tabsDom.find("li.#{name}").show()
tabsDom.find("li.#{name} .num").html(value.length)
markSectionTabActive = (section) ->

View File

@ -1,30 +1,36 @@
section.search-filter
ul
li.userstories(data-name="userstories")
a.active(href="#")
span.icon.icon-bulk
span.num 0
span.name(translate="SEARCH.FILTER_USER_STORIES")
ul.search-filter
li.userstories(data-name="userstories")
a.active(
href="#"
title="{{ 'SEARCH.FILTER_USER_STORIES' | translate }}"
)
span.icon.icon-bulk
span.num
span.name(translate="SEARCH.FILTER_USER_STORIES")
li.issues(data-name="issues")
a(href="#")
span.icon.icon-issues
span.num 0
span.name(translate="SEARCH.FILTER_ISSUES")
li.issues(data-name="issues")
a(
href="#"
title="{{ 'SEARCH.FILTER_ISSUES' | translate }}"
)
span.icon.icon-issues
span.num
span.name(translate="SEARCH.FILTER_ISSUES")
li.tasks(data-name="tasks")
a(href="#")
span.icon.icon-bulk
span.num 0
span.name(translate="SEARCH.FILTER_TASKS")
li.tasks(data-name="tasks")
a(
href="#"
title="{{ 'SEARCH.FILTER_TASKS' | translate }}"
)
span.icon.icon-bulk
span.num
span.name(translate="SEARCH.FILTER_TASKS")
li.wikipages(data-name="wikipages")
a(href="#")
span.icon.icon-wiki
span.num 0
span.name(translate="SEARCH.FILTER_WIKI")
//- li
//- a(href="#")
//- span.icon.icon-edit
//- | 3 Users
li.wikipages(data-name="wikipages")
a(
href="#"
title="{{ 'SEARCH.FILTER_WIKI' | translate }}"
)
span.icon.icon-wiki
span.num
span.name(translate="SEARCH.FILTER_WIKI")

View File

@ -1,26 +1,33 @@
.search-filter {
ul {
border-bottom: 3px solid $gray-light;
display: flex;
padding-bottom: .5rem;
}
li {
margin-right: 1rem;
}
border-top: 1px solid $whitish;
display: flex;
margin-bottom: 0;
z-index: 9;
a {
@extend %large;
@extend %title;
opacity: .2;
background: $white;
color: $gray-light;
display: inline-block;
margin-right: 1rem;
padding: 1rem 1.25rem;
&:hover {
color: $gray;
opacity: 1;
transition: opacity .3s linear;
transition: color .3s linear;
.icon {
margin-right: .4rem;
}
.name {
padding-left: 5px;
}
}
&.active {
border-left: 1px solid $whitish;
border-right: 1px solid $whitish;
color: $grayer;
position: relative;
top: 1px;
.icon {
color: $primary-light;
}
}
}
.active {
color: $gray;
opacity: 1;
transition: opacity .3s linear;
}
.icon {
margin-right: .4rem;

View File

@ -1,14 +1,11 @@
.search-result-table {
border-top: 1px solid $whitish;
.row {
align-content: center;
align-items: center;
display: flex;
justify-content: space-between;
padding: .5rem;
&:hover {
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.ref {
flex-basis: 30px;
flex-grow: 1;
@ -83,6 +80,10 @@
}
}
.search-result-table-header {
@extend %bold;
}
.empty-search-results {
margin-top: 4rem;
text-align: center;