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 330 additions and 108 deletions
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
@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 → 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