Refactor A Few Rendering Issues (#656)

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -70,6 +70,7 @@
     box-shadow: 0 1px 3px 1px rgba($black, 0.05);
     border: solid 1px $accent-light;
     border-radius: 2px;
+    z-index: 6;
   }
 
   .Select-option {

frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { filter } from 'lodash';
 
 import Icon from 'components/Icon';
-import InputFieldWithIcon from 'components/forms/fields/InputFieldWithIcon';
+import InputField from 'components/forms/fields/InputField';
 import labelInterface from 'interfaces/label';
 import PanelGroup from 'components/side_panels/HostSidePanel/PanelGroup';
 import SecondarySidePanelContainer from 'components/side_panels/SecondarySidePanelContainer';
@@ -68,15 +68,15 @@ class HostSidePanel extends Component {
           <Icon name="label" />
           <span className="title">LABELS</span>
         </div>
-        <div className={`${baseClass}__panel-group-item`}>
-          <InputFieldWithIcon
+        <div className={`${baseClass}__panel-group-item ${baseClass}__panel-group-item--filter`}>
+          <InputField
             name="tags-filter"
             onChange={onFilterLabels}
             placeholder="Filter Labels by Name..."
             value={labelFilter}
-            iconName="search"
-            className={`${baseClass}__filter-labels`}
+            inputWrapperClass={`${baseClass}__filter-labels`}
           />
+          <Icon name="search" />
         </div>
         <PanelGroup
           groupItems={customLabels}

frontend/components/side_panels/HostSidePanel/_styles.scss

@@ -30,7 +30,7 @@
       }
 
       &__icon {
-        top: 8px;
+        top: 6px;
       }
     }
   }
@@ -49,33 +49,30 @@
     color: $text-medium;
     padding: $pad-half $pad-large;
 
+    &--filter {
+      position: relative;
+
+      .kolidecon {
+        position: absolute;
+        top: calc(#{$pad-half} + 8px);
+        left: calc(#{$pad-large} + 10px);
+        font-size: 22px;
+        color: $text-light;
+      }
+    }
+
     .title {
       padding-left: 20px;
       font-size: 16px;
     }
-
-    .icon {
-      font-size: 16px;
-    }
-
-    .input-field {
-      width: 100%;
-    }
   }
 
   &__filter-labels {
-    border-radius: 3px;
-    background-color: $white;
-    border: 1px solid $silver;
-    font-size: 14px;
-    font-weight: $normal;
-    letter-spacing: 0.7px;
-    text-align: left;
-    padding: 6px 25px 6px 20px;
-    color: $text-dark;
+    margin: 0;
 
-    @include placeholder {
-      color: $text-light;
+    .input-field {
+      padding-left: 42px;
+      width: 100%;
     }
   }
 }

frontend/components/side_panels/SiteNavHeader/_styles.scss

@@ -16,12 +16,13 @@
       background: $bg-medium;
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       padding: 0;
     }
 
     &--open {
       background-color: $text-dark;
+      z-index: 6;
 
       .site-nav-header__org {
         border-color: $text-ultradark;
@@ -40,7 +41,7 @@
         background-color: $text-dark;
       }
 
-      @include breakpoint(tablet) {
+      @include breakpoint(smalldesk) {
         width: 240px;
 
         .site-nav-header__org,
@@ -98,7 +99,7 @@
     border: 1px solid $accent-medium;
     border-radius: 50%;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       margin: 24px 5px 10px;
     }
   }
@@ -113,7 +114,7 @@
     white-space: nowrap;
     text-transform: none;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
       margin: 24px 0 5px 63px;
     }
@@ -131,7 +132,7 @@
       background-color: $success;
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
     }
   }
@@ -146,7 +147,7 @@
     position: relative;
     line-height: 16px;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
     }
   }
@@ -157,7 +158,7 @@
     font-size: 12px;
     float: right;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       float: none;
       text-align: center;
       display: block;
@@ -179,7 +180,7 @@
   opacity: 0;
   box-sizing: border-box;
 
-  @include breakpoint(tablet) {
+  @include breakpoint(smalldesk) {
     width: 240px;
   }
 
@@ -196,7 +197,7 @@
     border-radius: 50%;
     margin: 0 10px 0 $pad-medium;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       margin: $pad-xsmall 5px;
     }
   }
@@ -212,14 +213,14 @@
     text-transform: none;
     font-weight: $normal;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
       margin-left: 15px;
     }
   }
 
   &__name {
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       margin-top: 4px;
     }
   }
@@ -258,7 +259,7 @@
       }
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       span {
         display: none;
       }

frontend/components/side_panels/SiteNavSidePanel/_styles.scss

@@ -8,7 +8,7 @@
     margin-right: $pad-medium;
     vertical-align: sub;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: block;
       text-align: center;
       margin-right: 0;
@@ -22,7 +22,7 @@
     font-weight: $normal;
     font-size: 14px;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
     }
   }
@@ -43,7 +43,7 @@
       color: $text-dark;
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       height: 50px;
     }
   }
@@ -66,7 +66,7 @@
         z-index: 1;
       }
 
-      @include breakpoint(tablet) {
+      @include breakpoint(smalldesk) {
         border-bottom: 6px solid #9a61c6;
         border-left: 6px solid #9a61c6;
         padding: 0;
@@ -78,7 +78,7 @@
       }
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       .site-nav-item__icon {
         @include transform(translate(-2px, 3px));
       }
@@ -89,7 +89,7 @@
     border-top: 1px solid $accent-light;
     padding-top: 15px;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       margin-right: 0;
     }
   }
@@ -129,7 +129,7 @@
       top: 50%;
       margin: -3px 0 0 -4px;
 
-      @include breakpoint(tablet) {
+      @include breakpoint(smalldesk) {
         display: none;
       }
     }
@@ -150,7 +150,7 @@
       color: rgba($white, 0.9);
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       text-align: center;
       padding: 3px 0 9px;
       height: 44px;
@@ -172,7 +172,7 @@
       display: inline-block;
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: none;
     }
   }
@@ -182,7 +182,7 @@
       display: none;
     }
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       display: inline-block;
       font-size: 25px;
 
@@ -192,7 +192,7 @@
     }
   }
 
-  @include breakpoint(tablet) {
+  @include breakpoint(smalldesk) {
     &:first-child {
       display: none;
     }
@@ -208,7 +208,7 @@
   padding: 0;
   position: relative;
 
-  @include breakpoint(tablet) {
+  @include breakpoint(smalldesk) {
     @include linear-gradient(to bottom, #9a61c6 0%, $brand 18%, $brand 82%, #9a61c6 100%);
     box-shadow: none;
   }
@@ -217,14 +217,14 @@
     padding: 12px 0;
     margin: 0;
 
-    @include breakpoint(tablet) {
+    @include breakpoint(smalldesk) {
       padding: 0;
       text-align: center;
       width: 100%;
     }
 
     &--expanded {
-      @include breakpoint(tablet) {
+      @include breakpoint(smalldesk) {
         display: inline-block;
       }
     }
@@ -240,7 +240,7 @@
   right: 4px;
   top: 0;
 
-  @include breakpoint(gttablet) {
+  @include breakpoint(gtsmalldesk) {
     display: none;
   }
 }

frontend/layouts/CoreLayout/_styles.scss

@@ -16,8 +16,9 @@
   box-sizing: border-box;
   min-width: 240px;
 
-  @include breakpoint(tablet) {
+  @include breakpoint(smalldesk) {
     padding-left: 0;
     min-width: 55px;
+    max-width: 55px;
   }
 }

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -306,17 +306,19 @@ export class ManageHostsPage extends Component {
 
   render () {
     const { renderForm, renderHeader, renderHosts, renderSidePanel } = this;
-    const { display } = this.props;
+    const { display, isAddLabel } = this.props;
 
     return (
       <div className="has-sidebar">
-        <div className={`${baseClass} body-wrap`}>
-          {renderHeader()}
-          {renderForm()}
-          <div className={`${baseClass}__list ${baseClass}__list--${display.toLowerCase()}`}>
-            {renderHosts()}
+        {renderForm()}
+        {!isAddLabel &&
+          <div className={`${baseClass} body-wrap`}>
+            {renderHeader()}
+            <div className={`${baseClass}__list ${baseClass}__list--${display.toLowerCase()}`}>
+              {renderHosts()}
+            </div>
           </div>
-        </div>
+        }
 
         {renderSidePanel()}
       </div>

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -69,15 +69,17 @@
 
 .hosts-page-side-panel {
   &-enter {
+    @include transition(margin 300ms ease-in);
     margin-right: -250px;
 
     &.hosts-page-side-panel-enter-active {
-      @include transition(margin 3000ms ease-in);
+      @include transition(margin 300ms ease-in);
       margin-right: 0;
     }
   }
 
   &-leave {
+    @include transition(margin 300ms ease-in);
     margin-right: 0;
 
     &.hosts-page-side-panel-leave-active {

frontend/styles/global/_global.scss

@@ -49,7 +49,7 @@ h3 {
   background-color: $white;
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
   border: solid 1px $silver;
-  min-width: 630px;
+  min-width: 610px;
   box-sizing: border-box;
   margin-top: $pad-base;
   margin-right: $pad-base;

frontend/styles/var/mixins.scss

@@ -24,6 +24,10 @@ $max-width: 2560px;
     @media (min-width: $medium-width) and (max-width: $max-width) {
       @content;
     }
+  } @else if ($size == smalldesk) {
+    @media (max-width: 1185px) {
+      @content;
+    }
   } @else {
     @content;
   }