From f49b602a4f65fc608b918c7ebc6ee77d5376301a Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 11 Aug 2014 17:26:55 -0400 Subject: [PATCH] Complete statistics variables --- server/documents/collections/form.html.eco | 8 +- server/documents/views/statistic.html.eco | 84 ++++++++++- server/files/stylesheets/semantic.css | 13 +- src/definitions/views/statistic.less | 130 ++++++++++++++++-- .../default/views/statistic.variables | 27 +++- 5 files changed, 222 insertions(+), 40 deletions(-) diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index ce925e822..79e87f722 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -126,7 +126,7 @@ themes : ['default', 'GitHub'] ;
-
+
Gender
@@ -239,7 +239,7 @@ themes : ['default', 'GitHub']
-
+
Select
@@ -287,7 +287,7 @@ themes : ['default', 'GitHub']
-
+
Select Gender
@@ -374,7 +374,7 @@ themes : ['default', 'GitHub']
-
+
Select
diff --git a/server/documents/views/statistic.html.eco b/server/documents/views/statistic.html.eco index dff20969d..892d01e47 100644 --- a/server/documents/views/statistic.html.eco +++ b/server/documents/views/statistic.html.eco @@ -84,23 +84,23 @@ themes : ['Default'] 22
- Breeds of Dog + Cities Named After Dogs
- Two Hundred + Two Million
- Dogs I've Owned + Homeless Dogs in USA
- + 5
- Current Mood + Flights Piloted By Dogs
@@ -109,7 +109,7 @@ themes : ['Default'] 11
- Puppies + Puppies Made This Page
@@ -172,6 +172,78 @@ themes : ['Default']
+
+

Colored

+

A statistic can be formatted to be different colors

+
+
+
+ 27 +
+
+ Yellow Labradors +
+
+
+
+ 8 +
+
+ Green Poodles +
+
+
+
+ 28 +
+
+ Blue Shiba-Inus +
+
+
+
+ 14 +
+
+ Orange Chihuahuas +
+
+
+
+ 82 +
+
+ Purple Labradoodles +
+
+
+
+ 1 +
+
+ Pink Labradors +
+
+
+
+ 22 +
+
+ Red Mastifs +
+
+
+
+ 15 +
+
+ Teal Cockerspaniels +
+
+
+
+ +

Inverted

A statistic can be formatted to fit on a dark background

diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 70d513061..45c05acf1 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -574,7 +574,7 @@ body.guide .main.container > * { #example .peek { position: absolute; top: 0px; - left: -230px; + left: -280px; width: 180px; /* -webkit-transition: padding 0.3s ease; @@ -1458,7 +1458,7 @@ body.progress .ui.progress .bar { @media only screen and (min-width : 1725px) { #example .container { - width: 1100px; + width: 1000px; } #example .sticky-wrapper.stuck .peek { margin-left: -780px; @@ -1468,15 +1468,6 @@ body.progress .ui.progress .bar { } } -@media only screen and (min-width : 2300px) { - #example .container { - width: 1320px; - } - #example .sticky-wrapper.stuck .peek { - margin-left: -890px; - } -} - @media only screen and (max-width : 998px) { diff --git a/src/definitions/views/statistic.less b/src/definitions/views/statistic.less index 587190693..554357b9f 100755 --- a/src/definitions/views/statistic.less +++ b/src/definitions/views/statistic.less @@ -22,11 +22,22 @@ Statistic *******************************/ +/* Standalone */ .ui.statistic { display: @display; margin: @margin; + max-width: @maxWidth; } +/* Grouped */ +.ui.statistics > .statistic { + display: @elementDisplay; + float: @elementFloat; + margin: @elementMargin; + max-width: @elementMaxWidth; +} + + /******************************* Group *******************************/ @@ -53,13 +64,6 @@ margin-bottom: 0em; } -/* Each */ -.ui.statistics > .statistic { - display: @elementDisplay; - float: @elementFloat; - margin: @elementMargin; -} - /******************************* Content @@ -116,14 +120,13 @@ .ui.statistics .statistic > .text.value, .ui.statistic > .text.value { - font-size: 2em; - line-height: 1em; - min-height: 4rem; - text-align: left; + line-height: @textLabelLineHeight; + min-height: @textLabelMinHeight; + text-align: center; } .ui.statistics .statistic > .text.value + .label, .ui.statistic > .text.value + .label { - text-align: left; + text-align: center; } /*-------------- @@ -132,8 +135,8 @@ .ui.statistics .statistic > .value img, .ui.statistic > .value img { - max-height: 4rem; - vertical-align: top; + max-height: @imageHeight; + vertical-align: @imageVerticalAlign; } @@ -150,17 +153,23 @@ .ui.horizontal.statistic { display: block; margin: 0em; + max-width: 9999px; } .ui.horizontal.statistics .statistic { float: none; margin: @horizontalGroupElementMargin; + max-width: 9999px; +} + +.ui.horizontal.statistic > .text.value, +.ui.horizontal.statistics > .statistic > .text.value { + min-height: 0em !important; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value { display: inline-block; vertical-align: middle; - font-size: @horizontalValueSize; } .ui.horizontal.statistics .statistic > .label, .ui.horizontal.statistic > .label { @@ -169,7 +178,50 @@ margin: 0em 0em 0em @horizontalLabelDistance; } +/*-------------- + Colors +---------------*/ +.ui.blue.statistics .statistic > .value, +.ui.statistics .blue.statistic > .value, +.ui.blue.statistic > .value { + color: @blueTextColor; +} +.ui.green.statistics .statistic > .value, +.ui.statistics .green.statistic > .value, +.ui.green.statistic > .value { + color: @greenTextColor; +} +.ui.orange.statistics .statistic > .value, +.ui.statistics .orange.statistic > .value, +.ui.orange.statistic > .value { + color: @orangeTextColor; +} +.ui.pink.statistics .statistic > .value, +.ui.statistics .pink.statistic > .value, +.ui.pink.statistic > .value { + color: @pinkTextColor; +} +.ui.purple.statistics .statistic > .value, +.ui.statistics .purple.statistic > .value, +.ui.purple.statistic > .value { + color: @purpleTextColor; +} +.ui.red.statistics .statistic > .value, +.ui.statistics .red.statistic > .value, +.ui.red.statistic > .value { + color: @redTextColor; +} +.ui.teal.statistics .statistic > .value, +.ui.statistics .teal.statistic > .value, +.ui.teal.statistic > .value { + color: @tealTextColor; +} +.ui.yellow.statistics .statistic > .value, +.ui.statistics .yellow.statistic > .value, +.ui.yellow.statistic > .value { + color: @yellowTextColor; +} /*-------------- Floated @@ -193,4 +245,52 @@ color: @invertedLabelColor; } + +/*-------------- + Sizes +---------------*/ + +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-size: @valueSize; +} +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + font-size: @horizontalValueSize; +} +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + font-size: @textLabelSize; +} + +/* Small */ +.ui.small.statistics .statistic > .value, +.ui.small.statistic > .value { + font-size: @smallValueSize; +} +.ui.small.horizontal.statistics .statistic > .value, +.ui.small.horizontal.statistic > .value { + font-size: @smallHorizontalValueSize; +} +.ui.small.statistics .statistic > .text.value, +.ui.small.statistic > .text.value { + font-size: @smallTextLabelSize; +} + +/* Large */ +.ui.large.statistics .statistic > .value, +.ui.large.statistic > .value { + font-size: @largeValueSize; +} +.ui.large.horizontal.statistics .statistic > .value, +.ui.large.horizontal.statistic > .value { + font-size: @largeHorizontalValueSize; +} +.ui.large.statistics .statistic > .text.value, +.ui.large.statistic > .text.value { + font-size: @largeTextLabelSize; +} + + + .loadUIOverrides(); diff --git a/src/themes/packages/default/views/statistic.variables b/src/themes/packages/default/views/statistic.variables index 454f14021..0521a23f9 100644 --- a/src/themes/packages/default/views/statistic.variables +++ b/src/themes/packages/default/views/statistic.variables @@ -9,6 +9,7 @@ @display: inline-block; @margin: 1em 0em; @textAlign: center; +@maxWidth: 175px; /* Group */ @groupDisplay: block; @@ -18,34 +19,41 @@ @elementFloat: left; @elementDisplay: block; @elementMargin: 0em @horizontalSpacing @rowSpacing; +@elementMaxWidth: 175px; /*------------------- - Elements + Content --------------------*/ /* Value */ @valueFont: @pageFont; @valueFontWeight: normal; @valueLineHeight: 1em; -@valueSize: 4em; @valueColor: @black; @valueTextTransform: uppercase; /* Label */ +@labelSize: 1rem; @labelDistance: 0.25em; @labelFont: @headerFont; @labelFontWeight: normal; -@labelSize: 1em; @labelColor: @unselectedTextColor; @labelLineHeight: 1.33em; @labelTextTransform: none; +/* Text */ +@textLabelLineHeight: 1em; +@textLabelMinHeight: 2em; + +/* Label Image */ +@imageHeight: 3rem; +@imageVerticalAlign: baseline; + /*------------------- Types --------------------*/ @horizontalGroupElementMargin: 1em 0em; -@horizontalValueSize: 3em; @horizontalLabelDistance: 0.75em; /*------------------- @@ -59,3 +67,14 @@ @invertedLabelColor: @invertedLightTextColor; /* Size */ +@smallValueSize: 3rem; +@smallTextLabelSize: 1.5rem; +@smallHorizontalValueSize: 2rem; + +@valueSize: 4rem; +@textLabelSize: 2rem; +@horizontalValueSize: 3rem; + +@largeValueSize: 5rem; +@largeTextLabelSize: 2.5rem; +@largeHorizontalValueSize: 4rem; \ No newline at end of file