fix(facets): Fix flow issue on smaller screens.

Closes #863
NCI-GDC · Jun 8, 2015 · f085139 · f085139
1 parent f72155d
commit f085139
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/app/scripts/components/facets/styles/facets.less b/app/scripts/components/facets/styles/facets.less
@@ -12,6 +12,17 @@
   .filter {
     margin-right: 5px;
 
+    span.facet-block {
+      display: inline-block;
+      line-height: 2rem;
+    }
+
+    // This is applied to only immediate child spans to prevent
+    // extra padding added
+    ~ span {
+      padding: 5px;
+    }
+
     .facet-name:hover ~ .terms-container .term-container,
     .facet-name:focus ~ .terms-container .term-container {
       text-decoration: line-through;
@@ -20,7 +31,8 @@
 
     .facet-name, .facet-term {
       cursor: pointer;
-      line-height: 3rem;
+      line-height: 2rem;
+      padding: 4px 5px;
 
       &:hover, &:focus {
         text-decoration: line-through;
@@ -30,6 +42,11 @@
 
     .terms-container {
       white-space: inherit;
+      padding: 5px 0;
+
+      .term-container {
+        padding: 0;
+      }
 
       .term-separator {
         color: @orange;
@@ -48,11 +65,6 @@
     }
   }
 
-
-  .label.and {
-    margin-left: 5px;
-  }
-
   .in, .is {
     text-transform: uppercase;
     cursor: default;

diff --git a/app/scripts/components/facets/templates/current.html b/app/scripts/components/facets/templates/current.html
@@ -9,36 +9,39 @@
     </span>
 
     <span class="filter" data-ng-repeat="filter in cfc.currentFilters">
-      <span class="label label-primary facet-name"
+      <span class="facet-block label label-primary facet-name"
             data-ng-click="cfc.removeTerm(filter.content.field, null, $event, filter.op)"
             data-ng-keypress="cfc.removeTerm(filter.content.field, null, $event, filter.op)">
         {{ filter.content.field | translate | humanify }}
       </span>
       <span data-ng-switch="filter.op">
         <span data-ng-switch-when="in">
-          <span data-ng-if="filter.content.value.length === 1" class="is label label-danger">is</span>
-          <span data-ng-if="filter.content.value.length > 1" class="in label label-danger">in</span>
+          <span data-ng-if="filter.content.value.length === 1" class="facet-block is label label-danger">is</span>
+          <span data-ng-if="filter.content.value.length > 1" class="facet-block in label label-danger">in</span>
         </span>
         <span data-ng-switch-default>
-          <span class="range label label-danger">{{ filter.op }} </span>
+          <span class="facet-block range label label-danger">{{ filter.op }} </span>
         </span>
       </span>
-      <span class="terms-container"
+      <span class="facet-block terms-container"
             data-ng-class="{ multiterm: filter.content.value.length > 1 }">
-        <span data-ng-repeat="v in filter.content.value">
-          <span data-ng-hide="$index > 1 && !filter.expanded" class="label label-success term-container">
-            <span class="facet-term"
+        <span data-ng-repeat="v in filter.content.value" class="facet-block">
+          <span data-ng-hide="$index > 1 && !filter.expanded"
+                class="facet-block label label-success term-container">
+            <span class="facet-block facet-term"
                   data-ng-click="cfc.removeTerm(filter.content.field, v, $event, filter.op)"
                   data-ng-keypress="cfc.removeTerm(filter.content.field, v, $event, filter.op)">
-              <span data-ng-if="filter.content.field.toLowerCase().indexOf('datetime') > -1"> {{ v*1000 | date }} </span>
-              <span data-ng-if="filter.content.field.toLowerCase().indexOf('datetime') === -1">{{ v | translate | humanify }}</span>
+              <span data-ng-if="filter.content.field.toLowerCase().indexOf('datetime') > -1"
+                    class="facet-block"> {{ v*1000 | date }} </span>
+              <span data-ng-if="filter.content.field.toLowerCase().indexOf('datetime') === -1"
+                    class="facet-block">{{ v | translate | humanify }}</span>
             </span>
-            <span data-ng-if="cfc.isInMyProjects(filter) && $last" data-ng-translate>
+            <span class="facet-block" data-ng-if="cfc.isInMyProjects(filter) && $last" data-ng-translate>
               and in My Projects
             </span>
           </span>
           <span data-ng-if="!$last" data-ng-hide="$index > 1 && !filter.expanded"
-                class="term-separator">, </span>
+                class="facet-block term-separator">, </span>
         </span>
         <span data-ng-if="!filter.expanded && filter.content.value.length > 2" class="expand-terms"
               data-ng-click="cfc.expandTerms($event, filter)"
@@ -47,7 +50,7 @@
               data-ng-click="cfc.expandTerms($event, filter)"
               data-ng-keypress="cfc.expandTerms($event, filter)"> ... Less</span>
       </span>
-      <span class="label label-warning and" data-ng-if="!$last">AND</span>
+      <span class="facet-block label label-warning and" data-ng-if="!$last">AND</span>
     </span>
 
 </div>