mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(sass): added bootstrap 4 grid and breakpoint system
This commit is contained in:
Torkel Ödegaard
parent
18079aaced
commit
bc4c71a7c6
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
36
public/less/_grid-variables.scss
Normal file
36
public/less/_grid-variables.scss
Normal file
@ -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;
|
||||
|
||||
32
public/less/base/_grid.scss
Normal file
32
public/less/base/_grid.scss
Normal file
@ -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();
|
||||
47
public/less/mixins/_grid-framework.scss
Normal file
47
public/less/mixins/_grid-framework.scss
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
75
public/less/mixins/_grid.scss
Normal file
75
public/less/mixins/_grid.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
32
public/less/utils/_flex.scss
Normal file
32
public/less/utils/_flex.scss
Normal file
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user