apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux(sass): restored old responsive rules

Browse Source
pull/4072/head
Torkel Ödegaard 9 years ago
parent 594ab0e2b5
commit 6fc2b69697
3 changed files with 128 additions and 170 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 87
      public/sass/_grafana.scss
  2. 84
      public/sass/_old_responsive.scss
  3. 127
      public/sass/grafana-responsive.scss

87
public/sass/_grafana.scss
Unescape View File

@ -24,49 +24,50 @@
@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";
@import "components/submenu";
@import "components/panel_dashlist";
@import "components/panel_singlestat";
@import "components/panel_table";
@import "components/tagsinput";
@import "components/tables_lists";
@import "components/search";
@import "components/dashboard";
@import "components/tightform";
@import "components/gf-form";
@import "components/sidemenu";
@import "components/navbar";
@import "components/gfbox";
@import "components/pagination";
@import "components/tabs";
@import "components/timepicker";
@import "components/filter-controls";
@import "components/filter-list";
@import "components/filter-table";
@import "components/scrollbar";
@import "components/old_stuff";
@import "components/navbar";
@import "components/popovers";
@import "components/alerts";
@import "components/typeahead";
@import "components/tags";
@import "components/modals";
@import "components/dropdown";
@import "components/color_picker";
@import "components/tooltip";
@import "components/buttons";
@import "components/footer";
@import "components/infobox";
@import "components/shortcuts";
@import "components/query_editor";
@import "components/navs";
// 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";
@import "pages/playlist";
@import "pages/admin";
@import "pages/alerting";
@import "pages/apps";
@import "pages/signup";
@import "old_responsive";

84
public/sass/_old_responsive.scss
Unescape View File

@ -0,0 +1,84 @@
.dashnav-back-to-dashboard {
display: none;
}
// Media queries
// ---------------------
@include media-breakpoint-down(sm) {
div.panel {
width: 100% !important;
padding: 0px !important;
}
.panel-margin {
margin-right: 0;
margin-left: 0;
}
body {
padding: 0;
}
.dashnav-dashboards-btn a {
max-width: 200px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-zoom-out,
.dashnav-action-icons {
display: none;
}
.page-container {
padding: 10px 20px;
}
}
// form styles
@include media-breakpoint-up(md) {
.gf-size-m { width: 120px; }
.gf-size-l { width: 150px; }
.gf-size-xl { width: 200px; }
.gf-size-xxl { width: 300px; }
.gf-size-xxxl { width: 400px; }
.dashnav-dashboards-btn a {
max-width: 180px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.panel-in-fullscreen {
.dashnav-action-icons {
display: none;
}
.dashnav-back-to-dashboard {
display: block;
}
}
}
@include media-breakpoint-up(lg) {
.dashnav-dashboards-btn a {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 240px;
}
.dashnav-zoom-out {
display: block;
}
}
@include media-breakpoint-up(xl) {
.panel-in-fullscreen {
.dashnav-action-icons {
display: block;
}
}
.dashnav-dashboards-btn a {
max-width: none;
}
.gf-timepicker-nav-btn {
max-width: none;
}
}

127
public/sass/grafana-responsive.scss
Unescape View File

@ -1,127 +0,0 @@
@import "variables.dark.scss";
@import "bootstrap/responsive.scss";
$gridColumnWidth: 70px;
$gridGutterWidth: 10px;
$gridColumnWidth768: 52px;
$gridGutterWidth768: 10px;
$gridColumnWidth1200: 90px;
$gridGutterWidth1200: 10px;
// Fluid grid
// -------------------------
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
// 1200px min
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
// 768px-979px
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
$screen-xs: 320px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xs-max: ($screen-sm - 1);
$screen-sm-max: ($screen-md - 1);
$screen-md-max: ($screen-lg - 1);
$breakpoint-xs-up: "only screen and (min-width: #{$screen-xs})";
$breakpoint-xs: "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})";
$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})";
$breakpoint-sm: "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})";
$breakpoint-md-up: "only screen and (min-width: #{$screen-md})";
$breakpoint-md: "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})";
$breakpoint-lg: "only screen and (min-width: #{$screen-lg})";
.dashnav-back-to-dashboard {
display: none;
}
// Media queries
// ---------------------
@media $breakpoint-xs {
div.panel {
width: 100% !important;
padding: 0px !important;
}
.panel-margin {
margin-right: 0;
margin-left: 0;
}
body {
padding: 0;
}
.dashnav-dashboards-btn a {
max-width: 200px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-zoom-out,
.dashnav-action-icons {
display: none;
}
.page-container {
padding: 10px 20px;
}
}
// form styles
@media $breakpoint-sm-up {
.gf-size-m { width: 120px; }
.gf-size-l { width: 150px; }
.gf-size-xl { width: 200px; }
.gf-size-xxl { width: 300px; }
.gf-size-xxxl { width: 400px; }
}
@media $breakpoint-sm-up {
.dashnav-dashboards-btn a {
max-width: 200px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.panel-in-fullscreen {
.dashnav-action-icons {
display: none;
}
.dashnav-back-to-dashboard {
display: block;
}
}
}
@media $breakpoint-md-up {
.dashnav-dashboards-btn a {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 250px;
}
.dashnav-zoom-out {
display: block;
}
}
@media $breakpoint-lg {
.panel-in-fullscreen {
.dashnav-action-icons {
display: block;
}
}
.dashnav-dashboards-btn a {
max-width: none;
}
.gf-timepicker-nav-btn {
max-width: none;
}
}
Write Preview
Loading…
Cancel
Save