Add icons to filter-component tabs
authorChloe Laisne <chloe.laisne@gmail.com>
Mon, 26 Sep 2016 20:49:10 +0200
changeset 298 a915633aa6cf
parent 297 50c80dda4fb8
child 299 2c16302b06f7
Add icons to filter-component tabs
cms/app-client/app/styles/components/filter-component.scss
cms/app-client/app/templates/components/filter-component.hbs
--- a/cms/app-client/app/styles/components/filter-component.scss	Mon Sep 26 20:17:26 2016 +0200
+++ b/cms/app-client/app/styles/components/filter-component.scss	Mon Sep 26 20:49:10 2016 +0200
@@ -40,33 +40,12 @@
     margin: 5px 10px 5px 0px;
 }
 
-.filter-component ul li::before {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    content: '';
-    margin-right: 10px;
+.filter-component ul li:last-child {
+    margin-right: 0px;
 }
 
-.filter-component ul li.location::before{
-    background-color: #3985AB;
-}
-.filter-component ul li.language::before{
-    background-color: #B94A43;
-}
-.filter-component ul li.discourse::before{
-    background-color: #468842;
-}
-.filter-component ul li.date::before{
-    background-color: #E50086;
-}
-.filter-component ul li.theme::before{
-    background-color: #F89406;
-}
-
-.filter-component ul li:last-child {
-    margin-right: 0px;
+.filter-component ul li .fa {
+    margin-right: 5px;
 }
 
 .filter-component ul li .remove {
--- a/cms/app-client/app/templates/components/filter-component.hbs	Mon Sep 26 20:17:26 2016 +0200
+++ b/cms/app-client/app/templates/components/filter-component.hbs	Mon Sep 26 20:49:10 2016 +0200
@@ -1,21 +1,21 @@
 {{#if (ifOr filter.location filter.language filter.discourse filter.date filter.theme)}}
 <ul>
 	{{#if filter.location}}
-    <li class="filter location">{{filter.location}}<span class="remove"{{action 'removeFilter' 'location'}}>&#10005;</span></li>
+    <li class="filter location"><i class="fa fa-globe"></i>{{filter.location}}<span class="remove"{{action 'removeFilter' 'location'}}>&#10005;</span></li>
 	{{/if}}
 	{{#if filter.language}}
-    <li class="filter language">{{doc-language class="label" url=filter.language}}<span class="remove"{{action 'removeFilter' 'language'}}>&#10005;</span></li>
+    <li class="filter language"><i class="fa fa-language"></i>{{doc-language class="label" url=filter.language}}<span class="remove"{{action 'removeFilter' 'language'}}>&#10005;</span></li>
 	{{/if}}
 	{{#if filter.discourse}}
-	<li class="filter discourse">{{doc-subject url=filter.discourse}}<span class="remove"{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
+	<li class="filter discourse"><i class="fa fa-comments"></i>{{doc-subject url=filter.discourse}}<span class="remove"{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
 	{{/if}}
 	{{#if filter.date}}
     {{#each intervals as |interval| }}
-    <li class="filter date" data-dates="{{interval}}">{{interval interval}}<span class="remove"{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
+    <li class="filter date" data-dates="{{interval}}"><i class="fa fa-clock-o"></i>{{interval interval}}<span class="remove"{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
     {{/each}}
 	{{/if}}
 	{{#if filter.theme}}
-    <li class="filter theme">{{doc-subject url=filter.theme}}<span class="remove"{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
+    <li class="filter theme"><i class="fa fa-bookmark"></i>{{doc-subject url=filter.theme}}<span class="remove"{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
 	{{/if}}
 </ul>
 {{/if}}
\ No newline at end of file