ux(sass): added bootstrap 4 grid and breakpoint system

public/app/features/playlist/partials/playlist.html

@@ -18,35 +18,34 @@
 		</div>
 	</div>
 
-	<div class="row" style="max-width: 400px">
-		<h5>Add dashboards</h5>
-		<div style="">
-			<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
+	<div class="row">
+		<div class="col-xl-6">
+			<h5>Add dashboards</h5>
+			<div style="">
+				<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
+			</div>
 		</div>
 	</div>
 
 	<div class="row">
-		<div class="span5 pull-left" ng-if="ctrl.filteredDashboards.length > 0">
+		<div class="col-lg-5">
 			<h5>Search results ({{ctrl.filteredDashboards.length}})</h5>
-			<table class="grafana-options-table">
-				<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
-					<td style="white-space: nowrap;">
-						{{playlistItem.title}}
-					</td>
-					<td style="text-align: center">
-						<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
-							<i class="fa fa-plus"></i>
-							Add to playlist
-						</button>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
-			<div class="row">
-				<div class="span6 offset1">
+			<div ng-if="ctrl.filteredDashboards.length > 0">
+				<table class="grafana-options-table">
+					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
+						<td style="white-space: nowrap;">
+							{{playlistItem.title}}
+						</td>
+						<td style="text-align: center">
+							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
+								<i class="fa fa-plus"></i>
+								Add to playlist
+							</button>
+						</td>
+					</tr>
+				</table>
+				<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
 					<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
-						ng-class="{'selected': $index === selectedIndex }"
 						ng-click="ctrl.addTagPlaylistItem(tag, $event)">
 						<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
 							<i class="fa fa-tag"></i>
@@ -56,7 +55,8 @@
 				</div>
 			</div>
 		</div>
-		<div class="span5 pull-left">
+
+		<div class="col-lg-5">
 			<h5>Added dashboards</h5>
 			<table class="grafana-options-table">
 				<tr ng-repeat="playlistItem in ctrl.playlistItems">
@@ -89,13 +89,10 @@
 	<div class="clearfix"></div>
 
 	<div class="pull-left" style="margin-top: 25px;">
-		<!-- <div class="norm-form"> -->
-			<a
-				class="btn btn-success"
-				ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
-				ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
-			<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
-			<!-- </div> -->
+		<a class="btn btn-success"
+			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
+			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
+		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
 	</div>
 
 	<div class="clearfix"></div>

public/app/features/playlist/partials/playlist_search.html

@@ -2,25 +2,25 @@
   <span style="position: relative;">
     <input  type="text" placeholder="Find dashboards by name" tabindex="1"
     ng-keydown="ctrl.keyDown($event)" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.searchDashboards()" />
-  </span>
-  <div class="playlist-search-switches">
-    <i class="fa fa-filter"></i>
-    <a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
-      <i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
-      starred
-    </a> |
-    <a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
-      <i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
-      tags
-    </a>
-    <span ng-if="ctrl.query.tag.length">
-      |
-      <span ng-repeat="tagName in ctrl.query.tag">
-        <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="ctrl.tagName" class="label label-tag">
-          <i class="fa fa-remove"></i>
-          {{tagName}}
-        </a>
-      </span>
-    </span>
-  </div>
+		<div class="playlist-search-switches">
+			<i class="fa fa-filter"></i>
+			<a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
+				<i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
+				starred
+			</a> |
+			<a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
+				<i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
+				tags
+			</a>
+			<span ng-if="ctrl.query.tag.length">
+				|
+				<span ng-repeat="tagName in ctrl.query.tag">
+					<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="ctrl.tagName" class="label label-tag">
+						<i class="fa fa-remove"></i>
+						{{tagName}}
+					</a>
+				</span>
+			</span>
+		</div>
+	</span>
 </div>

public/less/_grafana.scss

@@ -1,69 +1,72 @@
+@import "grid-variables";
 
 // MIXINS
-@import "./mixins/_mixins.scss";
-@import "./mixins/_buttons.scss";
+@import "mixins/mixins";
+@import "mixins/buttons";
+@import "mixins/breakpoints";
+@import "mixins/grid";
+@import "mixins/grid-framework";
 
 // BASE
-@import "./base/_normalize.scss";
-@import "./base/_base.scss";
-@import "./base/_type.scss";
-@import "./base/_forms.scss";
-@import "./base/_fonts.scss";
-@import "./base/_code.scss";
+@import "base/normalize";
+@import "base/base";
+@import "base/type";
+@import "base/forms";
+@import "base/fonts";
+@import "base/grid";
 
 // UTILS
-@import "./utils/_utils.scss";
-@import "./utils/_validation.scss";
-@import "./utils/_angular.scss";
+@import "utils/utils";
+@import "utils/validation";
+@import "utils/angular";
 
 // LAYOUTS
-// @import "./bootstrap/grid.scss";
-@import "./layout/_page.scss";
+@import "layout/page";
 
 // COMPONENTS
-@import "./components/_panel_graph.scss";
-@import "./components/_submenu.scss";
-@import "./components/_panel_dashlist.scss";
-@import "./components/_panel_singlestat.scss";
-@import "./components/_panel_table.scss";
-@import "./components/_tagsinput.scss";
-@import "./components/_tables_lists.scss";
-@import "./components/_search.scss";
-@import "./components/_dashboard.scss";
-@import "./components/_tightform.scss";
-@import "./components/_gf-form.scss";
-@import "./components/_sidemenu.scss";
-@import "./components/_navbar.scss";
-@import "./components/_gfbox.scss";
-@import "./components/_pagination.scss";
-@import "./components/_tabs.scss";
-@import "./components/_timepicker.scss";
-@import "./components/_filter-controls.scss";
-@import "./components/_filter-list.scss";
-@import "./components/_filter-table.scss";
-@import "./components/_scrollbar.scss";
-@import "./components/_old_stuff.scss";
-@import "./components/_navbar.scss";
-@import "./components/_popovers.scss";
-@import "./components/_alerts.scss";
-@import "./components/_typeahead.scss";
-@import "./components/_tags.scss";
-@import "./components/_modals.scss";
-@import "./components/_dropdown.scss";
-@import "./components/_color_picker.scss";
-@import "./components/_tooltip.scss";
-@import "./components/_buttons.scss";
-@import "./components/_footer.scss";
-@import "./components/_infobox.scss";
-@import "./components/_shortcuts.scss";
-@import "./components/_query_editor.scss";
-@import "./components/_navs.scss";
+@import "components/panel_graph.scss";
+@import "components/submenu.scss";
+@import "components/panel_dashlist.scss";
+@import "components/panel_singlestat.scss";
+@import "components/panel_table.scss";
+@import "components/tagsinput.scss";
+@import "components/tables_lists.scss";
+@import "components/search.scss";
+@import "components/dashboard.scss";
+@import "components/tightform.scss";
+@import "components/gf-form.scss";
+@import "components/sidemenu.scss";
+@import "components/navbar.scss";
+@import "components/gfbox.scss";
+@import "components/pagination.scss";
+@import "components/tabs.scss";
+@import "components/timepicker.scss";
+@import "components/filter-controls.scss";
+@import "components/filter-list.scss";
+@import "components/filter-table.scss";
+@import "components/scrollbar.scss";
+@import "components/old_stuff.scss";
+@import "components/navbar.scss";
+@import "components/popovers.scss";
+@import "components/alerts.scss";
+@import "components/typeahead.scss";
+@import "components/tags.scss";
+@import "components/modals.scss";
+@import "components/dropdown.scss";
+@import "components/color_picker.scss";
+@import "components/tooltip.scss";
+@import "components/buttons.scss";
+@import "components/footer.scss";
+@import "components/infobox.scss";
+@import "components/shortcuts.scss";
+@import "components/query_editor.scss";
+@import "components/navs.scss";
 
 // PAGES
-@import "./pages/_login.scss";
-@import "./pages/_playlist.scss";
-@import "./pages/_admin.scss";
-@import "./pages/_alerting.scss";
-@import "./pages/_apps.scss";
-@import "./pages/_signup.scss";
+@import "pages/login.scss";
+@import "pages/playlist.scss";
+@import "pages/admin.scss";
+@import "pages/alerting.scss";
+@import "pages/apps.scss";
+@import "pages/signup.scss";
 

public/less/_grid-variables.scss

@@ -0,0 +1,36 @@
+
+
+// Grid breakpoints
+//
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 544px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
+) !default;
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:      12 !default;
+$grid-gutter-width: 30px !default;
+
+$enable-flex: false;
+

public/less/base/_grid.scss

@@ -0,0 +1,32 @@
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.container {
+  @include make-container();
+  @include make-container-max-widths();
+}
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+  @include make-container();
+}
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+  @include make-row();
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@include make-grid-columns();

public/less/mixins/_grid-framework.scss

@@ -0,0 +1,47 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  $breakpoint-counter: 0;
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-counter: ($breakpoint-counter + 1);
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          position: relative;
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+          min-height: 1px;
+          padding-right: ($grid-gutter-width / 2);
+          padding-left:  ($grid-gutter-width / 2);
+        }
+      }
+
+      @for $i from 1 through $columns {
+        .col-#{$breakpoint}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      @each $modifier in (pull, push) {
+        @for $i from 0 through $columns {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
+            @include make-col-modifier($modifier, $i, $columns)
+          }
+        }
+      }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0
+          .offset-#{$breakpoint}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns)
+          }
+        }
+      }
+    }
+  }
+}

public/less/mixins/_grid.scss

@@ -0,0 +1,75 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container($gutter: $grid-gutter-width) {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+  @if not $enable-flex {
+    @include clearfix();
+  }
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
+  margin-left:  ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  position: relative;
+  min-height: 1px;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
+
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($size / $columns);
+  } @else {
+    float: left;
+    width: percentage($size / $columns);
+  }
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  margin-left: percentage($size / $columns);
+}
+
+@mixin make-col-push($size, $columns: $grid-columns) {
+  left: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-pull($size, $columns: $grid-columns) {
+  right: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-modifier($type, $size, $columns) {
+  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
+  @if $type == push {
+    @include make-col-push($size, $columns);
+  } @else if $type == pull {
+    @include make-col-pull($size, $columns);
+  } @else if $type == offset {
+    @include make-col-offset($size, $columns);
+  }
+}

public/less/utils/_flex.scss

@@ -0,0 +1,32 @@
+@if $enable-flex {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    // Flex column reordering
+    @include media-breakpoint-up($breakpoint) {
+      .flex-#{$breakpoint}-first { order: -1; }
+      .flex-#{$breakpoint}-last { order: 1; }
+    }
+
+    // Alignment for every item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
+      .flex-items-#{$breakpoint}-middle { align-items: center; }
+      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
+    }
+
+    // Alignment per item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-#{$breakpoint}-top   { align-self: flex-start; }
+      .flex-#{$breakpoint}-middle { align-self: center; }
+      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
+    }
+
+    // Horizontal alignment of item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
+      .flex-items-#{$breakpoint}-center { justify-content: center; }
+      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
+      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
+      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+    }
+  }
+}