Made view mode selector responsive. (#2421)

weaveworks · Apr 7, 2017 · 9c56656 · 9c56656
1 parent d71fc31
commit 9c56656
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js
@@ -21,9 +21,10 @@ const Item = (icons, label, isSelected, onClick, isEnabled = true) => {
     <div
       className={className}
       disabled={!isEnabled}
-      onClick={isEnabled && onClick}>
+      onClick={isEnabled && onClick}
+      title={`View ${label.toLowerCase()}`}>
       <span className={icons} style={{fontSize: 12}} />
-      <span>{label}</span>
+      <span className="label">{label}</span>
     </div>
   );
 };

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
@@ -227,6 +227,7 @@
     opacity: 0.9;
     margin-bottom: 3px;
     border: 1px solid transparent;
+    white-space: nowrap;
 
     &-active, &:hover {
       color: $text-color;
@@ -1234,6 +1235,7 @@
     border-radius: $border-radius;
     border: 1px solid $background-darker-color;
     display: inline-block;
+    white-space: nowrap;
   }
 
   &-action {
@@ -1301,10 +1303,12 @@
   }
 }
 
-.view-mode-selector-wrapper .fa {
-  margin-right: 4px;
-  margin-left: 0;
-  color: $text-secondary-color;
+.view-mode-selector-wrapper {
+  .label { margin-left: 4px; }
+  .fa {
+    margin-left: 0;
+    color: $text-secondary-color;
+  }
 }
 
 .network-selector-action {
@@ -1872,3 +1876,7 @@
     width: 25px;
   }
 }
+
+@media (max-width: 1330px) {
+  .view-mode-selector .label { display: none; }
+}