Chevron position fix

Author: laemtl

htdocs/bootstrap/css/custom-css.css

@@ -760,6 +760,16 @@ a.btn.btn-primary:hover:not(.download, .split-nav) {
     box-shadow: 2px 3px 4px 1px rgba(0,0,0,0.175);
 }
 
+.panel-heading {
+    display: flex;
+    align-items: center;
+}
+
+.panel-title {
+    width: 100%;
+    padding-right: 10px;
+}
+
 .panel-default {
     border-color: #C3D5DB;
 }

jsx/Panel.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
  *
  * @author Alex I.
  * @version 2.0.0
- *
  * @param {object} props
  * @return {JSX.Element}
  */
@@ -64,18 +63,16 @@ const Panel = (props) => {
       );
     }
     panelViews = (
-      <div className='pull-right'>
-        <div className='btn-group views'>
-          <button type='button'
-                  className='btn btn-default btn-xs dropdown-toggle'
-                  data-toggle='dropdown'>
-            Views<span className='caret'/>
-          </button>
-          <ul className='dropdown-menu pull-right'
-              role='menu'>
-            {views}
-          </ul>
-        </div>
+      <div className='btn-group views'>
+        <button type='button'
+                className='btn btn-default btn-xs dropdown-toggle'
+                data-toggle='dropdown'>
+          Views<span className='caret'/>
+        </button>
+        <ul className='dropdown-menu pull-right'
+            role='menu'>
+          {views}
+        </ul>
       </div>
     );
   }
@@ -92,16 +89,16 @@ const Panel = (props) => {
           ? props.views[activeView]['title']
           : props.title}
       </h3>
+      {panelViews}
       {props.collapsing
         ? <span className={collapsed ?
-          'glyphicon pull-right glyphicon-chevron-down' :
-          'glyphicon pull-right glyphicon-chevron-up'}
+          'glyphicon glyphicon-chevron-down' :
+          'glyphicon glyphicon-chevron-up'}
                 onClick={toggleCollapsed}
                 data-toggle='collapse'
                 data-target={`#${props.id}`}
                 style={{cursor: 'pointer'}}/>
         : null}
-      {panelViews}
     </div>
   ) : '';
 
@@ -130,6 +127,7 @@ const Panel = (props) => {
 };
 Panel.propTypes = {
   initCollapsed: PropTypes.bool,
+  props.collapsed: PropTypes.bool,
   parentId: PropTypes.string,
   id: PropTypes.string,
   height: PropTypes.string,

modules/dashboard/css/dashboard.css

@@ -51,7 +51,6 @@
 
 .views {
     margin-right: 10px;
-    margin-top: -10px;
 }
 
 .welcome {

modules/dashboard/templates/panel.tpl

@@ -2,9 +2,7 @@
     {if $title}
     <div class="panel-heading">
         <h3 class="panel-title">{$title}</h3>
-        <span class="pull-right clickable glyphicon glyphicon-chevron-up"></span>
         {if !empty($menus)}
-        <div class="pull-right">
             <div class="btn-group views">
                 <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Views<span class="caret"></span></button>
                 <ul class="dropdown-menu pull-right" role="menu">
@@ -13,8 +11,8 @@
                     {/foreach}
                 </ul>
             </div>
-        </div>
         {/if}
+        <span class="clickable glyphicon glyphicon-chevron-up"></span>
     </div>
     {/if}
     <div class="panel-body">

modules/imaging_browser/css/imaging_browser.css

@@ -75,7 +75,6 @@ h3 {
 
 .views {
     margin-right: 10px;
-    margin-top: -2px;
 }
 
 .mri-second-row-panel {

modules/imaging_browser/jsx/ImagePanel.js

@@ -59,17 +59,15 @@ class ImagePanelHeader extends Component {
               </span>;
     }
     let headerButton = (
-      <div className="pull-right">
-        <div className="btn-group views">
-          <button
-            type="button"
-            className="btn btn-default btn-xs dropdown-toggle"
-            onClick={this.props.onToggleHeaders}
-            aria-expanded={this.props.HeadersExpanded}>
-            Header Info
-          </button>
-          <span className="caret"></span>
-        </div>
+      <div className="btn-group views">
+        <button
+          type="button"
+          className="btn btn-default btn-xs dropdown-toggle"
+          onClick={this.props.onToggleHeaders}
+          aria-expanded={this.props.HeadersExpanded}>
+          Header Info
+        </button>
+        <span className="caret"></span>
       </div>
     );
     return (
@@ -84,8 +82,8 @@ class ImagePanelHeader extends Component {
           {this.props.Filename}
         </h3>
         {QCStatusLabel}
-        {arrow}
         {headerButton}
+        {arrow}
       </div>
     );
   }

modules/issue_tracker/css/issue_tracker.css

@@ -54,7 +54,6 @@ h3 {
 
 .views {
     margin-right: 10px;
-    margin-top: -2px;
 }
 
 .btn-volume-viewer {