gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-07 21:48:16 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use bootstrap to style dashboard

Browse source
This commit is contained in:
Alex Basson 2021-09-23 10:57:18 -04:00
parent b28f37d8b7
commit dc9c10b58f
6 changed files with 19 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/_sizes.scss
View file

@ -1,8 +0,0 @@
$unit: 8px;
$xsmall: $unit / 4; // 2px
$small: $unit / 2; // 4px
$medium: $unit; // 8px
$large: $unit * 2; // 16px
$xlarge: $unit * 3; // 24px
$xxlarge: $unit * 4; // 32px

2
app/assets/stylesheets/_variables.scss
View file

@ -5,4 +5,4 @@ $lightgreen: #C8E6C9; // lightgreen
$lightred: #FFCDD2; // lightred
$lightyellow: #fcf5e2; // lightyellow
$orange: #ffab40; // orange
$link: #007bff
$link: #007bff;

12
app/assets/stylesheets/application.scss
View file

@ -1,5 +1,15 @@
$spacer: 8px;
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3),
6: ($spacer * 5)
);
@import "bootstrap";
@import "spacing";
@import "fonts";
@import "colors";
@import "borders";

4
app/assets/stylesheets/borders.scss
View file

@ -1,5 +1,3 @@
@import "sizes";
.border-radius-8 {
border-radius: $unit;
border-radius: 8px;
}

55
app/assets/stylesheets/spacing.scss
View file

@ -1,55 +0,0 @@
@import 'sizes';
.pv80 {
padding-top: 80px;
padding-bottom: 80px;
}
.ph120 {
padding-left: 120px;
padding-right: 120px;
}
$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
@function expand_whitespace_key($key) {
@each $pair in $whitespace-keys {
$short: nth($pair, 1);
$long: nth($pair, 2);
// v and h need to pass in 2 parameters
@if (length($pair) == 3) {
$long: (nth($pair, 2) nth($pair, 3));
}
@if $short == $key {
@return $long;
}
}
@warn "Couldn't export #{$key}";
@return $key;
}
$types: (p, m);
$locations: (a, v, h, t, r, b, l);
$t-shirt-sizes: (n, xs, s, m, l, xl, xxl);
@mixin whitespace($units: ()) {
$units: join(0, $units);
@for $i from 1 through length($units) {
$t-shirt-size: nth($t-shirt-sizes, $i);
$size: nth($units, $i);
@each $location in $locations {
@each $type in $types {
.#{$type}#{$location}#{$t-shirt-size} {
@each $whitespace-location in expand_whitespace_key($location) {
#{expand_whitespace_key($type)}#{$whitespace-location}: $size !important;
}
}
}
}
}
}
@include whitespace(($xsmall, $small, $medium, $large, $xlarge, $xxlarge));

12
app/views/dashboard/index.html.erb
View file

@ -1,24 +1,24 @@
<h1><%= @school.name %></h1>
<div class="beige-bg ph120 pv80">
<div class="beige-bg px-6 py-4">
<div class="fdr fjb fac">
<h2 class="h1">Areas Of Interest</h2>
<div>
<select name="academic-year">
<div class="fdr">
<select class="ml-3 custom-select-lg" name="academic-year">
<option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
</select>
<select name="district">
<select class="ml-3 custom-select-lg" name="district">
<option value="<%= @district.slug %>" selected><%= @district.name %></option>
</select>
<select name="school">
<select class="ml-3 custom-select-lg" name="school">
<option value="<%= @school.slug %>" selected><%= @school.name %></option>
</select>
</div>
</div>
<div class="mtl">
<div class="mt-4">
<h2 class="h1 red">Distance from benchmark</h2>
<p class="p">This graph shows how much a score is above or below the benchmark of any given scale.</p>
</div>