style: minor ui fixes tree search

addon/components/data-table.hbs

@@ -1,6 +1,6 @@
 <div class="uk-flex uk-flex-right uk-width-1">
   <form
-    class="uk-search uk-search-default uk-width-1-3 search-input-form"
+    class="uk-search uk-search-default uk-width-1-3@m uk-width-2-3@s search-input-form"
     {{on "submit" this.updateSearch}}
     {{on "reset" this.resetSearch}}
   >

addon/components/tree-node.hbs

@@ -1,4 +1,4 @@
-<li class="{{if (and (not @flat) @item.children.length 0) 'childless'}}">
+<li class="{{if (and (not @flat) (lt @item.children.length 1)) 'childless'}}">
   {{#if (and (not @flat) @item.children)}}
     <UkButton class="tree-node-icon" @color="link" {{on "click" this.toggle}}>
       <UkIcon @icon={{if this.expanded "chevron-down" "chevron-right"}} />

addon/components/tree.hbs

@@ -11,14 +11,16 @@
       {{on "input" this.filter}}
     />
   </div>
-  <ul class="tree">
-    {{#each (sort-by "name" this.items) as |item|}}
-      <TreeNode
-        @item={{item}}
-        @itemRoute={{@itemRoute}}
-        @activeItem={{@activeItem}}
-        @expandedItems={{this.expandedItems}}
-        @flat={{this.hasFilter}}/>
-    {{/each}}
-  </ul>
+  {{#if this.items}}
+    <ul class="tree">
+      {{#each (sort-by "name" this.items) as |item|}}
+        <TreeNode
+          @item={{item}}
+          @itemRoute={{@itemRoute}}
+          @activeItem={{@activeItem}}
+          @expandedItems={{this.expandedItems}}
+          @flat={{this.hasFilter}}/>
+      {{/each}}
+    </ul>
+  {{/if}}
 </div>

addon/templates/application.hbs

@@ -1,4 +1,4 @@
-<div class="uk-padding uk-overflow-auto">
+<div class="uk-padding-small uk-overflow-auto">
   <Nav>
     <Nav::Item @route="users" data-test-nav-users>
       {{t "emeis.users.title"}}

addon/templates/scopes.hbs

@@ -1,15 +1,16 @@
 <SectionTitle @model="scopes" />
 
 <div class="uk-grid">
-  <div class="uk-width-1-4 uk-first-column emeis-border-right">
+  <div class="uk-width-xlarge@l uk-width-1-3@m uk-width-1-2@s uk-first-column tree-border-right">
     <Tree
       class="uk-margin-small-left"
       @items={{this.rootScopes}}
       @itemRoute={{this.itemRoute}}
       @activeItem={{this.activeScope}}
     />
+    <hr class="uk-hidden@s uk-margin-small-bottom"/>
   </div>
-  <div class="uk-width-3-4">
+  <div class="uk-width-expand">
     {{outlet}}
   </div>
 </div>

app/styles/ember-emeis.scss

@@ -1,7 +1,15 @@
 @import "ember-uikit/variables-theme";
-
 // you can use the uikit SCSS variables here
 
+$ember-power-select-default-border-radius: 0;
+$ember-power-select-border-color: $global-border;
+@import "ember-power-select";
+
+/* GENERAL INPUTS */
+[class*="uk-width-"] {
+  transition: width 0.3s ease-out;
+}
+
 [class*="uk-search-icon"] {
   &:focus,
   &:hover {
@@ -10,6 +18,15 @@
   border: solid 1px $global-border;
 }
 
+[class*="search-reset-icon"] {
+  &:focus,
+  &:hover {
+    background: $global-muted-background;
+  }
+  border: solid 1px $global-border;
+  border-left-color: transparent;
+}
+
 .no-style-button {
   background: none;
   border: none;
@@ -38,46 +55,48 @@
     left: unset;
   }
 
-  button.uk-search-icon {
-    border-right-color: transparent;
-  }
-
   input.uk-search-input {
     padding: 0 40px;
   }
 
   input:focus ~ button.uk-search-icon {
-    border-color: #1e87f0;
+    border-color: $global-primary-background;
     border-right-color: transparent;
   }
 
   input:focus ~ button.search-reset-icon {
-    border-color: #1e87f0;
+    border-color: $global-primary-background;
     border-left-color: transparent;
   }
 }
+/* END GENERAL INPUTS*/
 
-$ember-power-select-default-border-radius: 0;
-$ember-power-select-border-color: $global-border;
-@import "ember-power-select";
-
-.emeis-border-right {
-  border-right: solid 1px $global-border;
+/* TREE VIEW */
+@media screen and (min-width: 640px) {
+  .tree-border-right {
+    border-right: solid 1px $global-border;
+  }
 }
 
+$tree_node_height: 1.9em;
 $tree_indicator_width: 0.6em;
-$tree_indicator_height: 0.6em;
+$tree_indicator_height: $tree_node_height/2;
+$tree_node_icon_margin: $tree_indicator_height/2;
 
 .tree-wrapper {
   display: flex;
   flex-direction: column;
 
-  padding-right: $tree_indicator_width;
+  padding-right: $tree_node_icon_margin;
   position: relative;
   max-height: 100%;
 
   .tree {
     overflow-y: auto;
+
+    a {
+      line-height: $tree_node_height;
+    }
   }
 }
 
@@ -134,3 +153,4 @@ ul.tree li:last-child:before {
 ul.tree li button.tree-node-icon {
   margin: 0 -0.25em 0.25em -0.25em;
 }
+/* END TREE VIEW */