Merge pull request #1768 from jaypoulz/jpToolsOverflow

Modified styling so tools would no longer overflow and hide.

app/assets/javascripts/visualizations/highvis/runtime.coffee

@@ -145,11 +145,19 @@ $ ->
 
     # Toggle control panel
     resizeVis = (toggleControls = true, aniLength = 600) ->
+      # Adjust height
       if (globals.fullscreen? and globals.fullscreen)
         ($ "#viscontainer").height(($ window).height())
       else
         ($ "#viscontainer").height(($ window).height() - h)
 
+      # Adjust tool position
+      if (globals.fullscreen? and globals.fullscreen or
+      globals.options? and globals.options.isEmbed? and globals.options.isEmbed)
+        ($ "#controlcontainer").css("right", "0px")
+      else
+        ($ "#controlcontainer").css("right", "30px")
+
       containerSize = ($ '#viscontainer').innerWidth()
       hiderSize     = ($ '#controlhider').outerWidth()
       controlSize   = ($ '#controldiv').outerWidth()

app/assets/javascripts/visualizations/visualizations.js.coffee

@@ -1,13 +1,13 @@
 $ ->
   if namespace.controller is "visualizations" and namespace.action in ["displayVis","show"]
     hidden = false
-    originalWidth = 210
-    ($ '#fullscreen-viz').click (e) ->
+    originalWidth = 220
+    ($ '#fullscreen-vis').click (e) ->
       fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled ||
       document.webkitFullscreenEnabled
       fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
       document.webkitFullscreenElement
-      icon = ($ '#fullscreen-viz').find('i')
+      icon = ($ '#fullscreen-vis').find('i')
       if !fullscreenElement
         window.globals.fullscreen = true
         icon.removeClass('icon-resize-full')
@@ -28,20 +28,20 @@ $ ->
           document.cancelFullScreen()
         else if (document.msExitFullscreen)
           document.msExitFullscreen()
-          
+
     ($ document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', ->
       if !hidden
         ($ '#controldiv').width(originalWidth)
-      #Deal with Safari and Firefox resizing peculiarities
+      # Deal with Safari and Firefox resizing peculiarities
       if ((navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) or
          navigator.userAgent.indexOf('Firefox') > -1)
         ($ window).trigger('resize')
-      if ($ '#fullscreen-viz').attr('title') == 'Maximize'
-        ($ '#fullscreen-viz').attr('title', 'Minimize')
-      else if ($ '#fullscreen-viz').attr('title') == 'Minimize'
-        ($ '#fullscreen-viz').attr('title', 'Maximize')
+      if ($ '#fullscreen-vis').attr('title') == 'Maximize'
+        ($ '#fullscreen-vis').attr('title', 'Minimize')
+      else if ($ '#fullscreen-vis').attr('title') == 'Minimize'
+        ($ '#fullscreen-vis').attr('title', 'Maximize')
     )
 
     ($ '#control_hide_button').on('click', () ->
       hidden = !hidden
-    )
+    )

app/assets/stylesheets/visualizations.css.scss

@@ -42,23 +42,23 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
   }
 
   #controlcontainer {
-    float: right;
-    max-width: 20%;
+    position: absolute;
     height: 100%;
   }
 
   #controlhider {
     float: left;
+    left: 0;
     display: inline-block;
     height: 100%;
 
-    #control_hide_button { // eventually put this next to #fullscreen-viz?
+    #control_hide_button { // eventually put this next to #fullscreen-vis?
       @include unselectable;
       background-image: $light-bkg;
       border: $border;
       border-radius: 3px;
       outline: none;
-      margin: 10px 5px 5px;
+      margin: 5px 5px 5px;
       padding: 8px 6px;
     }
   }
@@ -67,7 +67,8 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
   #controldiv {
     width: 220px;
     height: 100%;
-    float: right;
+    position: absolute;
+    right: 0px;
     overflow-x: hidden;
     overflow-y: auto;
     // This would be the correct place to add padding-right, but it break the
@@ -92,11 +93,11 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
     }
 
     .ui-accordion {
-      margin: 10px 0 0; // add some space between accordions
+      margin: 5px 0 0; // add some space between accordions
     }
 
     .ui-accordion .ui-accordion-content {
-      padding: 0.5em 0.5em;
+      padding: 3px;
       overflow-y: hidden;
     }
 
@@ -112,10 +113,10 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
 
     .ui-accordion-header {
       @include unselectable;
-      height: 38px;
+      vertical-align: middle;
+      height: 34px;
       outline: none;
       margin: 0 5px 0 0; // see #controldiv above for explanation
-      padding: 3px 0 7px 5px;
       border: thin solid #ABABAB;
       border-radius: 3px;
       background-image: $light-bkg;
@@ -183,7 +184,7 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
   }
 
   // button that enables fullscreen vis, not the fullscreen viz itself
-  #fullscreen-viz {
+  #fullscreen-vis {
     margin: 1px;
   }
 
@@ -307,7 +308,7 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
   }
 
   #summary_canvas {
-    text-align:center;
+    text-align: center;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0px 5px;

app/views/visualizations/displayVis.html.erb

@@ -46,7 +46,7 @@
 
 <div style="margin: 0px 10px 10px;">
   <div id="viscontainer" style="height:500px;">
-    <div class="pull-right"><button class="btn btn-default" id="fullscreen-viz" title="Maximize"><i class="fa fa-arrows-alt"></i></button></div>
+    <div class="pull-right"><button class="btn btn-default" id="fullscreen-vis" title="Maximize"><i class="fa fa-arrows-alt"></i></button></div>
     <ul id='visTabList'></ul>
     <div class="clear"></div>
 

app/views/visualizations/show.html.erb

@@ -56,7 +56,7 @@
 
 <div>
   <div id="viscontainer">
-    <div class="pull-right"><button class="btn btn-default" id="fullscreen-viz" title="Maximize"><i class="fa fa-arrows-alt"></i></button></div>
+    <div class="pull-right"><button class="btn btn-default" id="fullscreen-vis" title="Maximize"><i class="fa fa-arrows-alt"></i></button></div>
     <ul id='visTabList'></ul>
     <div class="clear"></div>