elements
3 | // --------------------------------------------------------
4 |
5 | // Inline and block code styles
6 | code,
7 | pre {
8 | padding: 0 3px 2px;
9 | #font > #family > .monospace;
10 | font-size: @baseFontSize - 1;
11 | color: @grayDark;
12 | .border-radius(3px);
13 | }
14 |
15 | // Inline code
16 | code {
17 | padding: 2px 4px;
18 | color: #d14;
19 | background-color: #f7f7f9;
20 | border: 1px solid #e1e1e8;
21 | }
22 |
23 | // Blocks of code
24 | pre {
25 | display: block;
26 | padding: (@baseLineHeight - 1) / 2;
27 | margin: 0 0 @baseLineHeight / 2;
28 | font-size: @baseFontSize * .925; // 13px to 12px
29 | line-height: @baseLineHeight;
30 | word-break: break-all;
31 | word-wrap: break-word;
32 | white-space: pre;
33 | white-space: pre-wrap;
34 | background-color: #f5f5f5;
35 | border: 1px solid #ccc; // fallback for IE7-8
36 | border: 1px solid rgba(0,0,0,.15);
37 | .border-radius(4px);
38 |
39 | // Make prettyprint styles more spaced out for readability
40 | &.prettyprint {
41 | margin-bottom: @baseLineHeight;
42 | }
43 |
44 | // Account for some code outputs that place code tags in pre tags
45 | code {
46 | padding: 0;
47 | color: inherit;
48 | background-color: transparent;
49 | border: 0;
50 | }
51 | }
52 |
53 | // Enable scrollable blocks of code
54 | .pre-scrollable {
55 | max-height: 340px;
56 | overflow-y: scroll;
57 | }
--------------------------------------------------------------------------------
/views/bootstrap/component-animations.less:
--------------------------------------------------------------------------------
1 | // COMPONENT ANIMATIONS
2 | // --------------------
3 |
4 | .fade {
5 | opacity: 0;
6 | .transition(opacity .15s linear);
7 | &.in {
8 | opacity: 1;
9 | }
10 | }
11 |
12 | .collapse {
13 | position: relative;
14 | height: 0;
15 | overflow: hidden;
16 | .transition(height .35s ease);
17 | &.in {
18 | height: auto;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/views/bootstrap/dropdowns.less:
--------------------------------------------------------------------------------
1 | // DROPDOWN MENUS
2 | // --------------
3 |
4 | // Use the .menu class on any
57 |
58 |
59 |
78 |
79 |
80 |
89 |
90 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/views/bootstrap/thumbnails.less:
--------------------------------------------------------------------------------
1 | // THUMBNAILS
2 | // ----------
3 | // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
4 |
5 | // Make wrapper ul behave like the grid
6 | .thumbnails {
7 | margin-left: -@gridGutterWidth;
8 | list-style: none;
9 | .clearfix();
10 | }
11 | // Fluid rows have no left margin
12 | .row-fluid .thumbnails {
13 | margin-left: 0;
14 | }
15 |
16 | // Float li to make thumbnails appear in a row
17 | .thumbnails > li {
18 | float: left; // Explicity set the float since we don't require .span* classes
19 | margin-bottom: @baseLineHeight;
20 | margin-left: @gridGutterWidth;
21 | }
22 |
23 | // The actual thumbnail (can be `a` or `div`)
24 | .thumbnail {
25 | display: block;
26 | padding: 4px;
27 | line-height: 1;
28 | border: 1px solid #ddd;
29 | .border-radius(4px);
30 | .box-shadow(0 1px 1px rgba(0,0,0,.075));
31 | }
32 | // Add a hover state for linked versions only
33 | a.thumbnail:hover {
34 | border-color: @linkColor;
35 | .box-shadow(0 1px 4px rgba(0,105,214,.25));
36 | }
37 |
38 | // Images and captions
39 | .thumbnail > img {
40 | display: block;
41 | max-width: 100%;
42 | margin-left: auto;
43 | margin-right: auto;
44 | }
45 | .thumbnail .caption {
46 | padding: 9px;
47 | }
48 |
--------------------------------------------------------------------------------
/views/bootstrap/tooltip.less:
--------------------------------------------------------------------------------
1 | // TOOLTIP
2 | // ------=
3 |
4 | .tooltip {
5 | position: absolute;
6 | z-index: @zindexTooltip;
7 | display: block;
8 | visibility: visible;
9 | padding: 5px;
10 | font-size: 11px;
11 | .opacity(0);
12 | &.in { .opacity(80); }
13 | &.top { margin-top: -2px; }
14 | &.right { margin-left: 2px; }
15 | &.bottom { margin-top: 2px; }
16 | &.left { margin-left: -2px; }
17 | &.top .tooltip-arrow { #popoverArrow > .top(); }
18 | &.left .tooltip-arrow { #popoverArrow > .left(); }
19 | &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
20 | &.right .tooltip-arrow { #popoverArrow > .right(); }
21 | }
22 | .tooltip-inner {
23 | max-width: 200px;
24 | padding: 3px 8px;
25 | color: @white;
26 | text-align: center;
27 | text-decoration: none;
28 | background-color: @black;
29 | .border-radius(4px);
30 | }
31 | .tooltip-arrow {
32 | position: absolute;
33 | width: 0;
34 | height: 0;
35 | }
36 |
--------------------------------------------------------------------------------
/views/bootstrap/type.less:
--------------------------------------------------------------------------------
1 | // Typography.less
2 | // Headings, body text, lists, code, and more for a versatile and durable typography system
3 | // ----------------------------------------------------------------------------------------
4 |
5 |
6 | // BODY TEXT
7 | // ---------
8 |
9 | p {
10 | margin: 0 0 @baseLineHeight / 2;
11 | small {
12 | font-size: @baseFontSize - 2;
13 | color: @grayLight;
14 | }
15 | }
16 | .lead {
17 | margin-bottom: @baseLineHeight;
18 | font-size: 20px;
19 | font-weight: 200;
20 | line-height: @baseLineHeight * 1.5;
21 | }
22 |
23 | // HEADINGS
24 | // --------
25 |
26 | h1, h2, h3, h4, h5, h6 {
27 | margin: 0;
28 | font-family: @headingsFontFamily;
29 | font-weight: @headingsFontWeight;
30 | color: @headingsColor;
31 | text-rendering: optimizelegibility; // Fix the character spacing for headings
32 | small {
33 | font-weight: normal;
34 | color: @grayLight;
35 | }
36 | }
37 | h1 {
38 | font-size: 30px;
39 | line-height: @baseLineHeight * 2;
40 | small {
41 | font-size: 18px;
42 | }
43 | }
44 | h2 {
45 | font-size: 24px;
46 | line-height: @baseLineHeight * 2;
47 | small {
48 | font-size: 18px;
49 | }
50 | }
51 | h3 {
52 | font-size: 18px;
53 | line-height: @baseLineHeight * 1.5;
54 | small {
55 | font-size: 14px;
56 | }
57 | }
58 | h4, h5, h6 {
59 | line-height: @baseLineHeight;
60 | }
61 | h4 {
62 | font-size: 14px;
63 | small {
64 | font-size: 12px;
65 | }
66 | }
67 | h5 {
68 | font-size: 12px;
69 | }
70 | h6 {
71 | font-size: 11px;
72 | color: @grayLight;
73 | text-transform: uppercase;
74 | }
75 |
76 | // Page header
77 | .page-header {
78 | padding-bottom: @baseLineHeight - 1;
79 | margin: @baseLineHeight 0;
80 | border-bottom: 1px solid @grayLighter;
81 | }
82 | .page-header h1 {
83 | line-height: 1;
84 | }
85 |
86 |
87 |
88 | // LISTS
89 | // -----
90 |
91 | // Unordered and Ordered lists
92 | ul, ol {
93 | padding: 0;
94 | margin: 0 0 @baseLineHeight / 2 25px;
95 | }
96 | ul ul,
97 | ul ol,
98 | ol ol,
99 | ol ul {
100 | margin-bottom: 0;
101 | }
102 | ul {
103 | list-style: disc;
104 | }
105 | ol {
106 | list-style: decimal;
107 | }
108 | li {
109 | line-height: @baseLineHeight;
110 | }
111 | ul.unstyled,
112 | ol.unstyled {
113 | margin-left: 0;
114 | list-style: none;
115 | }
116 |
117 | // Description Lists
118 | dl {
119 | margin-bottom: @baseLineHeight;
120 | }
121 | dt,
122 | dd {
123 | line-height: @baseLineHeight;
124 | }
125 | dt {
126 | font-weight: bold;
127 | line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
128 | }
129 | dd {
130 | margin-left: @baseLineHeight / 2;
131 | }
132 | // Horizontal layout (like forms)
133 | .dl-horizontal {
134 | dt {
135 | float: left;
136 | width: 120px;
137 | clear: left;
138 | text-align: right;
139 | .text-overflow();
140 | }
141 | dd {
142 | margin-left: 130px;
143 | }
144 | }
145 |
146 | // MISC
147 | // ----
148 |
149 | // Horizontal rules
150 | hr {
151 | margin: @baseLineHeight 0;
152 | border: 0;
153 | border-top: 1px solid @hrBorder;
154 | border-bottom: 1px solid @white;
155 | }
156 |
157 | // Emphasis
158 | strong {
159 | font-weight: bold;
160 | }
161 | em {
162 | font-style: italic;
163 | }
164 | .muted {
165 | color: @grayLight;
166 | }
167 |
168 | // Abbreviations and acronyms
169 | abbr[title] {
170 | cursor: help;
171 | border-bottom: 1px dotted @grayLight;
172 | }
173 | abbr.initialism {
174 | font-size: 90%;
175 | text-transform: uppercase;
176 | }
177 |
178 | // Blockquotes
179 | blockquote {
180 | padding: 0 0 0 15px;
181 | margin: 0 0 @baseLineHeight;
182 | border-left: 5px solid @grayLighter;
183 | p {
184 | margin-bottom: 0;
185 | #font > .shorthand(16px,300,@baseLineHeight * 1.25);
186 | }
187 | small {
188 | display: block;
189 | line-height: @baseLineHeight;
190 | color: @grayLight;
191 | &:before {
192 | content: '\2014 \00A0';
193 | }
194 | }
195 |
196 | // Float right with text-align: right
197 | &.pull-right {
198 | float: right;
199 | padding-right: 15px;
200 | padding-left: 0;
201 | border-right: 5px solid @grayLighter;
202 | border-left: 0;
203 | p,
204 | small {
205 | text-align: right;
206 | }
207 | }
208 | }
209 |
210 | // Quotes
211 | q:before,
212 | q:after,
213 | blockquote:before,
214 | blockquote:after {
215 | content: "";
216 | }
217 |
218 | // Addresses
219 | address {
220 | display: block;
221 | margin-bottom: @baseLineHeight;
222 | font-style: normal;
223 | line-height: @baseLineHeight;
224 | }
225 |
226 | // Misc
227 | small {
228 | font-size: 100%;
229 | }
230 | cite {
231 | font-style: normal;
232 | }
233 |
--------------------------------------------------------------------------------
/views/bootstrap/utilities.less:
--------------------------------------------------------------------------------
1 | // UTILITY CLASSES
2 | // ---------------
3 |
4 | // Quick floats
5 | .pull-right {
6 | float: right;
7 | }
8 | .pull-left {
9 | float: left;
10 | }
11 |
12 | // Toggling content
13 | .hide {
14 | display: none;
15 | }
16 | .show {
17 | display: block;
18 | }
19 |
20 | // Visibility
21 | .invisible {
22 | visibility: hidden;
23 | }
24 |
--------------------------------------------------------------------------------
/views/bootstrap/variables.less:
--------------------------------------------------------------------------------
1 | // Variables.less
2 | // Variables to customize the look and feel of Bootstrap
3 | // -----------------------------------------------------
4 |
5 |
6 |
7 | // GLOBAL VALUES
8 | // --------------------------------------------------
9 |
10 |
11 | // Grays
12 | // -------------------------
13 | @black: #000;
14 | @grayDarker: #222;
15 | @grayDark: #333;
16 | @gray: #555;
17 | @grayLight: #999;
18 | @grayLighter: #eee;
19 | @white: #fff;
20 |
21 |
22 | // Accent colors
23 | // -------------------------
24 | @blue: #049cdb;
25 | @blueDark: #0064cd;
26 | @green: #46a546;
27 | @red: #9d261d;
28 | @yellow: #ffc40d;
29 | @orange: #f89406;
30 | @pink: #c3325f;
31 | @purple: #7a43b6;
32 |
33 |
34 | // Scaffolding
35 | // -------------------------
36 | @bodyBackground: @white;
37 | @textColor: @grayDark;
38 |
39 |
40 | // Links
41 | // -------------------------
42 | @linkColor: #08c;
43 | @linkColorHover: darken(@linkColor, 15%);
44 |
45 |
46 | // Typography
47 | // -------------------------
48 | @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
49 | @serifFontFamily: Georgia, "Times New Roman", Times, serif;
50 | @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
51 |
52 | @baseFontSize: 13px;
53 | @baseFontFamily: @sansFontFamily;
54 | @baseLineHeight: 18px;
55 | @altFontFamily: @serifFontFamily;
56 |
57 | @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
58 | @headingsFontWeight: bold; // instead of browser default, bold
59 | @headingsColor: inherit; // empty to use BS default, @textColor
60 |
61 |
62 | // Tables
63 | // -------------------------
64 | @tableBackground: transparent; // overall background-color
65 | @tableBackgroundAccent: #f9f9f9; // for striping
66 | @tableBackgroundHover: #f5f5f5; // for hover
67 | @tableBorder: #ddd; // table and cell border
68 |
69 |
70 | // Buttons
71 | // -------------------------
72 | @btnBackground: @white;
73 | @btnBackgroundHighlight: darken(@white, 10%);
74 | @btnBorder: #ccc;
75 |
76 | @btnPrimaryBackground: @linkColor;
77 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
78 |
79 | @btnInfoBackground: #5bc0de;
80 | @btnInfoBackgroundHighlight: #2f96b4;
81 |
82 | @btnSuccessBackground: #62c462;
83 | @btnSuccessBackgroundHighlight: #51a351;
84 |
85 | @btnWarningBackground: lighten(@orange, 15%);
86 | @btnWarningBackgroundHighlight: @orange;
87 |
88 | @btnDangerBackground: #ee5f5b;
89 | @btnDangerBackgroundHighlight: #bd362f;
90 |
91 | @btnInverseBackground: @gray;
92 | @btnInverseBackgroundHighlight: @grayDarker;
93 |
94 |
95 | // Forms
96 | // -------------------------
97 | @inputBackground: @white;
98 | @inputBorder: #ccc;
99 | @inputBorderRadius: 3px;
100 | @inputDisabledBackground: @grayLighter;
101 | @formActionsBackground: #f5f5f5;
102 |
103 | // Dropdowns
104 | // -------------------------
105 | @dropdownBackground: @white;
106 | @dropdownBorder: rgba(0,0,0,.2);
107 | @dropdownLinkColor: @grayDark;
108 | @dropdownLinkColorHover: @white;
109 | @dropdownLinkBackgroundHover: @linkColor;
110 | @dropdownDividerTop: #e5e5e5;
111 | @dropdownDividerBottom: @white;
112 |
113 |
114 |
115 | // COMPONENT VARIABLES
116 | // --------------------------------------------------
117 |
118 | // Z-index master list
119 | // -------------------------
120 | // Used for a bird's eye view of components dependent on the z-axis
121 | // Try to avoid customizing these :)
122 | @zindexDropdown: 1000;
123 | @zindexPopover: 1010;
124 | @zindexTooltip: 1020;
125 | @zindexFixedNavbar: 1030;
126 | @zindexModalBackdrop: 1040;
127 | @zindexModal: 1050;
128 |
129 |
130 | // Sprite icons path
131 | // -------------------------
132 | @iconSpritePath: "../img/glyphicons-halflings.png";
133 | @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
134 |
135 |
136 | // Input placeholder text color
137 | // -------------------------
138 | @placeholderText: @grayLight;
139 |
140 |
141 | // Hr border color
142 | // -------------------------
143 | @hrBorder: @grayLighter;
144 |
145 |
146 | // Navbar
147 | // -------------------------
148 | @navbarHeight: 40px;
149 | @navbarBackground: @grayDarker;
150 | @navbarBackgroundHighlight: @grayDark;
151 |
152 | @navbarText: @grayLight;
153 | @navbarLinkColor: @grayLight;
154 | @navbarLinkColorHover: @white;
155 | @navbarLinkColorActive: @navbarLinkColorHover;
156 | @navbarLinkBackgroundHover: transparent;
157 | @navbarLinkBackgroundActive: @navbarBackground;
158 |
159 | @navbarSearchBackground: lighten(@navbarBackground, 25%);
160 | @navbarSearchBackgroundFocus: @white;
161 | @navbarSearchBorder: darken(@navbarSearchBackground, 30%);
162 | @navbarSearchPlaceholderColor: #ccc;
163 | @navbarBrandColor: @navbarLinkColor;
164 |
165 |
166 | // Hero unit
167 | // -------------------------
168 | @heroUnitBackground: @grayLighter;
169 | @heroUnitHeadingColor: inherit;
170 | @heroUnitLeadColor: inherit;
171 |
172 |
173 | // Form states and alerts
174 | // -------------------------
175 | @warningText: #c09853;
176 | @warningBackground: #fcf8e3;
177 | @warningBorder: darken(spin(@warningBackground, -10), 3%);
178 |
179 | @errorText: #b94a48;
180 | @errorBackground: #f2dede;
181 | @errorBorder: darken(spin(@errorBackground, -10), 3%);
182 |
183 | @successText: #468847;
184 | @successBackground: #dff0d8;
185 | @successBorder: darken(spin(@successBackground, -10), 5%);
186 |
187 | @infoText: #3a87ad;
188 | @infoBackground: #d9edf7;
189 | @infoBorder: darken(spin(@infoBackground, -10), 7%);
190 |
191 |
192 |
193 | // GRID
194 | // --------------------------------------------------
195 |
196 | // Default 940px grid
197 | // -------------------------
198 | @gridColumns: 12;
199 | @gridColumnWidth: 60px;
200 | @gridGutterWidth: 20px;
201 | @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
202 |
203 | // Fluid grid
204 | // -------------------------
205 | @fluidGridColumnWidth: 6.382978723%;
206 | @fluidGridGutterWidth: 2.127659574%;
207 |
--------------------------------------------------------------------------------
/views/bootstrap/wells.less:
--------------------------------------------------------------------------------
1 | // WELLS
2 | // -----
3 |
4 | .well {
5 | min-height: 20px;
6 | padding: 19px;
7 | margin-bottom: 20px;
8 | background-color: #f5f5f5;
9 | border: 1px solid #eee;
10 | border: 1px solid rgba(0,0,0,.05);
11 | .border-radius(4px);
12 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
13 | blockquote {
14 | border-color: #ddd;
15 | border-color: rgba(0,0,0,.15);
16 | }
17 | }
18 |
19 | // Sizes
20 | .well-large {
21 | padding: 24px;
22 | .border-radius(6px);
23 | }
24 | .well-small {
25 | padding: 9px;
26 | .border-radius(3px);
27 | }
28 |
--------------------------------------------------------------------------------
/views/dashboard.erb:
--------------------------------------------------------------------------------
1 | <% unless @error %>
2 |
3 |
81 |
87 |
88 | Navbar example
82 |This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
83 |84 | View navbar docs » 85 |
86 |
4 |
13 |
5 |
6 |
7 |
9 | <%= @dashboard.name %> <%= @dashboard.description %>
8 |
10 | Source: "><%=@dashboard.graphite_render.sub("/render","")%>
11 |
12 |
14 |
22 |
15 |
16 |
17 | <%= erb :_interval_filter, :layout => false unless @interval_filters.empty? %>
18 |
19 |
20 |
21 | | 32 | <%= erb(:graph, :locals => { :graph => graph }) %> 33 | | 34 | <% end %> 35 | <% end %> 36 |
3 |
9 |
10 | <% span=12/@graph_columns %>
11 |
4 |
5 |
6 |
8 | <%= @dashboard.name %> <%= @dashboard.description %>
7 || 20 | <%= erb(:graph, :locals => { :graph => graph, :omit_link => true }) %> 21 | | 22 | <% end %> 23 | <% end %> 24 |
<%= @error %>
8 | <% else %> 9 | 10 |
11 | <% span=12/@graph_columns %>
12 |
13 |
27 |
39 |
40 | <% end %>
41 |
42 |
--------------------------------------------------------------------------------
/views/graph.erb:
--------------------------------------------------------------------------------
1 | <% omit_link ||= false %>
2 | <% unless omit_link %>
3 | <%qp="?#{request.env['rack.request.query_string']}" %>
4 | '>
5 | <% end %>
6 | ![](<%= [@dashboard.graphite_render, graph[:graphite][:url]].join "?" %> "<%= graph[:graphite][:title] %>")
7 | <% unless omit_link %>
8 |
9 | <% end %>
10 |
--------------------------------------------------------------------------------
/views/index.erb:
--------------------------------------------------------------------------------
1 | <% unless @error %>
2 | <% @dashboard_to_display.keys.sort.each do |key| %>
3 |
5 |
6 |
17 | <% end %>
18 | <% end %>
19 |
--------------------------------------------------------------------------------
/views/layout.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | <%= @dash_title %>
21 |
22 |
23 |
65 |
66 |
67 | | 21 | <%= erb(:graph, :locals => { :graph => graph, :omit_link => true }) %> 22 | | 23 | <% end %> 24 | <% end %> 25 |
<%= key.capitalize %>
4 || Name | 7 |Description | 8 | 9 | 10 | <% @dashboard_to_display[key].sort_by{|b| b[:name].to_s}.each do |board| %> 11 |
|---|---|
| <%= board[:name] %> | <%= board[:description] %> | 13 |
68 | <% if @error %>
69 |
77 |
70 |
71 |
74 | <% end %>
75 | <%= yield %>
76 | Error!
72 | <%= @error %> 73 |
78 |
79 |
80 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/views/print_dashboard.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 | <% if @error %>
15 | <%= @error %>
16 | <% else %> 17 | 18 |<%= @dashboard.name %> <%= @dashboard.description %>
19 | <% span=12/@graph_columns %> 20 || 29 | <%= erb(:graph, :locals => { :graph => graph}) %> 30 | | 31 | <% end %> 32 | <% end %> 33 |
<%= @error %>
17 | <% else %> 18 |<%= @dashboard.name %> <%= @dashboard.description %>
19 | <% span=12/@graph_columns %> 20 || 29 | <%= erb(:graph, :locals => { :graph => graph, :omit_link => true }) %> 30 | | 31 | <% end %> 32 | <% end %> 33 |