Commit ecb59b2d authored by Robert Knight's avatar Robert Knight Committed by Nick Stenning

Add radio buttons in sort dropdown menu to indicate selected item

T-91
parent d41ba362
...@@ -328,6 +328,27 @@ html { ...@@ -328,6 +328,27 @@ html {
visibility: visible; visibility: visible;
} }
.dropdown-menu__row {
display: flex;
flex-direction: row;
align-items: center;
}
.dropdown-menu-radio {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
margin-right: 8px;
border: 1px solid $color-silver;
}
.dropdown-menu-radio.is-selected {
border: 4px solid $color-dove-gray;
}
.masthead { .masthead {
margin-bottom: 1em; margin-bottom: 1em;
......
...@@ -15,9 +15,11 @@ ...@@ -15,9 +15,11 @@
<i class="h-icon-sort"></i> <i class="h-icon-sort"></i>
</button> </button>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-repeat="sortOption in sortOptions" <li class="dropdown-menu__row"
ng-repeat="sortOption in sortOptions"
ng-click="onChangeSortBy({sortBy: sortOption})" ng-click="onChangeSortBy({sortBy: sortOption})"
><span ng-class="sortOption === sortBy ? 'dropdown-menu__radio-btn--selected' : ''" ><span class="dropdown-menu-radio"
ng-class="{'is-selected' : sortOption === sortBy}"
></span><a class="dropdown-menu__link" href="">{{sortOption}}</a></li> ></span><a class="dropdown-menu__link" href="">{{sortOption}}</a></li>
</ul> </ul>
</span> </span>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment