Skip to content

N
nexpie-grafana-theme
Commit bc4c71a7 by Torkel Ödegaard
Options

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

parent 18079aac
Showing with 290 additions and 68 deletions
public/app/features/playlist/partials/playlist.html
...@@ -18,16 +18,19 @@ ...@@ -18,16 +18,19 @@
</div> </div>
</div> </div>
<div class="row" style="max-width: 400px"> <div class="row">
<div class="col-xl-6">
<h5>Add dashboards</h5> <h5>Add dashboards</h5>
<div style=""> <div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search> <playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div> </div>
</div> </div>
</div>
<div class="row"> <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> <h5>Search results ({{ctrl.filteredDashboards.length}})</h5>
<div ng-if="ctrl.filteredDashboards.length > 0">
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards"> <tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td style="white-space: nowrap;"> <td style="white-space: nowrap;">
...@@ -41,12 +44,8 @@ ...@@ -41,12 +44,8 @@
</td> </td>
</tr> </tr>
</table> </table>
</div>
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0"> <div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
<div class="row">
<div class="span6 offset1">
<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;" <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)"> ng-click="ctrl.addTagPlaylistItem(tag, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term"> <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
...@@ -56,7 +55,8 @@ ...@@ -56,7 +55,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="span5 pull-left">
<div class="col-lg-5">
<h5>Added dashboards</h5> <h5>Added dashboards</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="playlistItem in ctrl.playlistItems"> <tr ng-repeat="playlistItem in ctrl.playlistItems">
...@@ -89,13 +89,10 @@ ...@@ -89,13 +89,10 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="pull-left" style="margin-top: 25px;"> <div class="pull-left" style="margin-top: 25px;">
<!-- <div class="norm-form"> --> <a class="btn btn-success"
<a
class="btn btn-success"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a> ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a> <a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
<!-- </div> -->
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/features/playlist/partials/playlist_search.html
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<span style="position: relative;"> <span style="position: relative;">
<input type="text" placeholder="Find dashboards by name" tabindex="1" <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()" /> 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"> <div class="playlist-search-switches">
<i class="fa fa-filter"></i> <i class="fa fa-filter"></i>
<a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2"> <a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
...@@ -23,4 +22,5 @@ ...@@ -23,4 +22,5 @@
</span> </span>
</span> </span>
</div> </div>
</span>
</div> </div>
public/less/_grafana.scss
@import "grid-variables";
// MIXINS // MIXINS
@import "./mixins/_mixins.scss"; @import "mixins/mixins";
@import "./mixins/_buttons.scss"; @import "mixins/buttons";
@import "mixins/breakpoints";
@import "mixins/grid";
@import "mixins/grid-framework";
// BASE // BASE
@import "./base/_normalize.scss"; @import "base/normalize";
@import "./base/_base.scss"; @import "base/base";
@import "./base/_type.scss"; @import "base/type";
@import "./base/_forms.scss"; @import "base/forms";
@import "./base/_fonts.scss"; @import "base/fonts";
@import "./base/_code.scss"; @import "base/grid";
// UTILS // UTILS
@import "./utils/_utils.scss"; @import "utils/utils";
@import "./utils/_validation.scss"; @import "utils/validation";
@import "./utils/_angular.scss"; @import "utils/angular";
// LAYOUTS // LAYOUTS
// @import "./bootstrap/grid.scss"; @import "layout/page";
@import "./layout/_page.scss";
// COMPONENTS // COMPONENTS
@import "./components/_panel_graph.scss"; @import "components/panel_graph.scss";
@import "./components/_submenu.scss"; @import "components/submenu.scss";
@import "./components/_panel_dashlist.scss"; @import "components/panel_dashlist.scss";
@import "./components/_panel_singlestat.scss"; @import "components/panel_singlestat.scss";
@import "./components/_panel_table.scss"; @import "components/panel_table.scss";
@import "./components/_tagsinput.scss"; @import "components/tagsinput.scss";
@import "./components/_tables_lists.scss"; @import "components/tables_lists.scss";
@import "./components/_search.scss"; @import "components/search.scss";
@import "./components/_dashboard.scss"; @import "components/dashboard.scss";
@import "./components/_tightform.scss"; @import "components/tightform.scss";
@import "./components/_gf-form.scss"; @import "components/gf-form.scss";
@import "./components/_sidemenu.scss"; @import "components/sidemenu.scss";
@import "./components/_navbar.scss"; @import "components/navbar.scss";
@import "./components/_gfbox.scss"; @import "components/gfbox.scss";
@import "./components/_pagination.scss"; @import "components/pagination.scss";
@import "./components/_tabs.scss"; @import "components/tabs.scss";
@import "./components/_timepicker.scss"; @import "components/timepicker.scss";
@import "./components/_filter-controls.scss"; @import "components/filter-controls.scss";
@import "./components/_filter-list.scss"; @import "components/filter-list.scss";
@import "./components/_filter-table.scss"; @import "components/filter-table.scss";
@import "./components/_scrollbar.scss"; @import "components/scrollbar.scss";
@import "./components/_old_stuff.scss"; @import "components/old_stuff.scss";
@import "./components/_navbar.scss"; @import "components/navbar.scss";
@import "./components/_popovers.scss"; @import "components/popovers.scss";
@import "./components/_alerts.scss"; @import "components/alerts.scss";
@import "./components/_typeahead.scss"; @import "components/typeahead.scss";
@import "./components/_tags.scss"; @import "components/tags.scss";
@import "./components/_modals.scss"; @import "components/modals.scss";
@import "./components/_dropdown.scss"; @import "components/dropdown.scss";
@import "./components/_color_picker.scss"; @import "components/color_picker.scss";
@import "./components/_tooltip.scss"; @import "components/tooltip.scss";
@import "./components/_buttons.scss"; @import "components/buttons.scss";
@import "./components/_footer.scss"; @import "components/footer.scss";
@import "./components/_infobox.scss"; @import "components/infobox.scss";
@import "./components/_shortcuts.scss"; @import "components/shortcuts.scss";
@import "./components/_query_editor.scss"; @import "components/query_editor.scss";
@import "./components/_navs.scss"; @import "components/navs.scss";
// PAGES // PAGES
@import "./pages/_login.scss"; @import "pages/login.scss";
@import "./pages/_playlist.scss"; @import "pages/playlist.scss";
@import "./pages/_admin.scss"; @import "pages/admin.scss";
@import "./pages/_alerting.scss"; @import "pages/alerting.scss";
@import "./pages/_apps.scss"; @import "pages/apps.scss";
@import "./pages/_signup.scss"; @import "pages/signup.scss";
public/less/_grid-variables.scss 0 → 100644
// 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 → 100644
// 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 → 100644
// 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 → 100644
/// 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 → 100644
@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; }
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment