Restructure of component and styling

public/app/features/explore/ExploreToolbar.tsx

 import React, { PureComponent } from 'react';
 import { ExploreId } from 'app/types/explore';
-import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui';
 import TimePicker from './TimePicker';
+import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 
 interface Props {
   datasourceMissing: boolean;
@@ -29,70 +29,136 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
   constructor(props) {
     super(props);
     this.timepickerRef = React.createRef();
+    this.createResponsiveButton = this.createResponsiveButton.bind(this);
+    this.createDatasourcePicker = this.createDatasourcePicker.bind(this);
+    this.createSplittedClassName = this.createSplittedClassName.bind(this);
+  }
+
+  createDatasourcePicker() {
+    const { exploreDatasources, selectedDatasource } = this.props;
+
+    return (
+      <DataSourcePicker
+        onChange={this.props.onChangeDatasource}
+        datasources={exploreDatasources}
+        current={selectedDatasource}
+      />
+    );
+  }
+
+  createResponsiveButton(options: {
+    title: string;
+    onClick: () => void;
+    buttonClassName?: string;
+    iconClassName?: string;
+  }) {
+    const { splitted } = this.props;
+    const { title, onClick, buttonClassName, iconClassName } = options;
+
+    return (
+      <>
+        <button className={`btn navbar-button large-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
+          {!splitted ? title : ''}
+          {iconClassName && <i className={iconClassName} />}
+        </button>
+        <button className={`btn navbar-button small-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
+          {iconClassName && <i className={iconClassName} />}
+        </button>
+      </>
+    );
+  }
+
+  createSplittedClassName(className: string) {
+    const { splitted } = this.props;
+
+    return splitted ? `${className}-splitted` : className;
   }
 
   render() {
-    const {
-      datasourceMissing,
-      exploreDatasources,
-      exploreId,
-      loading,
-      range,
-      selectedDatasource,
-      splitted,
-    } = this.props;
+    const { datasourceMissing, exploreId, loading, range, splitted } = this.props;
+    const toolbar = this.createSplittedClassName('toolbar');
+    const toolbarItem = this.createSplittedClassName('toolbar-item');
+    const toolbarHeader = this.createSplittedClassName('toolbar-header');
+    const timepickerLarge = this.createSplittedClassName('toolbar-content-item timepicker-large-screens');
+    const timepickerSmall = this.createSplittedClassName('toolbar-content-item timepicker-small-screens');
 
     return (
-      <div className="navbar">
-        {exploreId === 'left' ? (
-          <div>
-            <a className="navbar-page-btn">
-              <i className="fa fa-rocket" />
-              Explore
-            </a>
+      <div className={toolbar}>
+        <div className={toolbarItem}>
+          <div className={toolbarHeader}>
+            <div className="toolbar-header-title">
+              {exploreId === 'left' && (
+                <a className="navbar-page-btn">
+                  <i className="fa fa-rocket fa-fw" />
+                  Explore
+                </a>
+              )}
+            </div>
+            <div className="toolbar-header-datasource large-screens">
+              <div className="datasource-picker">
+                {!datasourceMissing && !splitted ? this.createDatasourcePicker() : null}
+              </div>
+            </div>
+            <div className="toolbar-header-close">
+              {exploreId === 'right' && (
+                <a onClick={this.props.onCloseSplit}>
+                  <i className="fa fa-times" />
+                </a>
+              )}
+            </div>
           </div>
-        ) : (
-          <>
-            <div className="navbar-page-btn" />
-            <div className="navbar-buttons explore-first-button">
-              <button className="btn navbar-button" onClick={this.props.onCloseSplit}>
-                Close Split
+        </div>
+        <div className={toolbarItem}>
+          {!datasourceMissing && splitted ? (
+            <div className="datasource-picker">{this.createDatasourcePicker()}</div>
+          ) : null}
+        </div>
+        <div className={toolbarItem}>
+          <div className="toolbar-content">
+            {!datasourceMissing && !splitted ? (
+              <div className="toolbar-content-item small-screens">
+                <div className="datasource-picker">{this.createDatasourcePicker()}</div>
+              </div>
+            ) : null}
+            {exploreId === 'left' && !splitted ? (
+              <div className="toolbar-content-item">
+                {this.createResponsiveButton({
+                  title: 'Split',
+                  onClick: this.props.onSplit,
+                  iconClassName: 'fa fa-fw fa-columns',
+                })}
+              </div>
+            ) : null}
+            <div className={timepickerLarge}>
+              <TimePicker
+                ref={this.timepickerRef}
+                range={range}
+                onChangeTime={this.props.onChangeTime}
+                iconOnly={false}
+              />
+            </div>
+            <div className={timepickerSmall}>
+              <TimePicker
+                ref={this.timepickerRef}
+                range={range}
+                onChangeTime={this.props.onChangeTime}
+                iconOnly={true}
+              />
+            </div>
+            <div className="toolbar-content-item">
+              <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
+                Clear All
               </button>
             </div>
-          </>
-        )}
-        {!datasourceMissing ? (
-          <div className="navbar-buttons">
-            <DataSourcePicker
-              onChange={this.props.onChangeDatasource}
-              datasources={exploreDatasources}
-              current={selectedDatasource}
-            />
-          </div>
-        ) : null}
-        <div className="navbar__spacer" />
-        {exploreId === 'left' && !splitted ? (
-          <div className="navbar-buttons">
-            <button className="btn navbar-button" onClick={this.props.onSplit}>
-              Split
-            </button>
+            <div className="toolbar-content-item">
+              {this.createResponsiveButton({
+                title: 'Run Query',
+                onClick: this.props.onRunQuery,
+                buttonClassName: 'navbar-button--primary',
+                iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
+              })}
+            </div>
           </div>
-        ) : null}
-        <TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
-        <div className="navbar-buttons">
-          <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
-            Clear All
-          </button>
-        </div>
-        <div className="navbar-buttons relative">
-          <button className="btn navbar-button navbar-button--primary" onClick={this.props.onRunQuery}>
-            Run Query{' '}
-            {loading ? (
-              <i className="fa fa-spinner fa-fw fa-spin run-icon" />
-            ) : (
-              <i className="fa fa-level-down fa-fw run-icon" />
-            )}
-          </button>
         </div>
       </div>
     );

public/app/features/explore/TimePicker.tsx

@@ -39,6 +39,7 @@ interface TimePickerProps {
   isUtc?: boolean;
   range?: RawTimeRange;
   onChangeTime?: (range: RawTimeRange, scanning?: boolean) => void;
+  iconOnly?: boolean;
 }
 
 interface TimePickerState {
@@ -292,19 +293,27 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
   }
 
   render() {
+    const { iconOnly } = this.props;
     const { isUtc, rangeString, refreshInterval } = this.state;
+
     return (
       <div className="timepicker">
         <div className="navbar-buttons">
           <button className="btn navbar-button navbar-button--tight timepicker-left" onClick={this.handleClickLeft}>
             <i className="fa fa-chevron-left" />
           </button>
-          <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
-            <i className="fa fa-clock-o" />
-            <span className="timepicker-rangestring">{rangeString}</span>
-            {isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
-            {refreshInterval ? <span className="text-warning">&nbsp; Refresh every {refreshInterval}</span> : null}
-          </button>
+          {iconOnly ? (
+            <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
+              <i className="fa fa-clock-o" />
+            </button>
+          ) : (
+            <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
+              <i className="fa fa-clock-o" />
+              <span className="timepicker-rangestring">{rangeString}</span>
+              {isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
+              {refreshInterval ? <span className="text-warning">&nbsp; Refresh every {refreshInterval}</span> : null}
+            </button>
+          )}
           <button className="btn navbar-button navbar-button--tight timepicker-right" onClick={this.handleClickRight}>
             <i className="fa fa-chevron-right" />
           </button>