Milimetric has uploaded a new change for review.
https://gerrit.wikimedia.org/r/312430
Change subject: Upgrade to semantic 2 everywhere
......................................................................
Upgrade to semantic 2 everywhere
* upgrades all metrics-by-project to use semantic 2.0
* fixes the layout by using flexbox
TODO:
- test gulp build
- upgrade compare layout
- run karma tests
Bug: T118846
Change-Id: I3957afc043ab1e6ee5e5da7ffda6ecf72359278b
---
M src/components/annotation-list/annotation-list.html
M src/components/breakdown-toggle/breakdown-toggle.html
M src/components/metric-selector/metric-selector.html
M src/components/metric-selector/metric-selector.js
M src/components/metrics-by-project-layout/metrics-by-project-layout.html
M src/components/project-selector/project-selector.html
M src/components/visualizers/dygraphs-timeseries/bindings.js
M src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
M src/components/visualizers/wikimetrics/wikimetrics.html
A src/css/semantic2.popup.css
D src/layouts/metrics-by-project/01_styles.css
M src/layouts/metrics-by-project/index.html
A src/layouts/metrics-by-project/styles.css
13 files changed, 367 insertions(+), 399 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/analytics/dashiki
refs/changes/30/312430/1
diff --git a/src/components/annotation-list/annotation-list.html
b/src/components/annotation-list/annotation-list.html
index 3962c30..f430471 100644
--- a/src/components/annotation-list/annotation-list.html
+++ b/src/components/annotation-list/annotation-list.html
@@ -1,6 +1,18 @@
+<style>
+.annotation.label {
+ cursor: pointer;
+ margin: 5px 3px 3px 3px;
+}
+.annotation-list-title {
+ margin-left: 10px;
+ vertical-align: -2px;
+ font-size: 14px;
+}
+</style>
+
<!-- ko if: annotations && annotations() && annotations().length -->
- <span class="annotation-list-title">Notes</span>
- <!-- ko foreach: annotations -->
- <div class="ui small label annotation" data-bind="text:
$data.dateRange, popup: $data.htmlNote"></div>
- <!-- /ko -->
+ <span class="annotation-list-title">Notes</span>
+ <!-- ko foreach: annotations -->
+ <div class="ui small label annotation" data-bind="text: $data.dateRange,
popup: $data.htmlNote"></div>
+ <!-- /ko -->
<!-- /ko -->
diff --git a/src/components/breakdown-toggle/breakdown-toggle.html
b/src/components/breakdown-toggle/breakdown-toggle.html
index e0de3f8..d71f36e 100644
--- a/src/components/breakdown-toggle/breakdown-toggle.html
+++ b/src/components/breakdown-toggle/breakdown-toggle.html
@@ -1,7 +1,7 @@
-<div class="ui secondary inverted vertical fluid menu">
- <a class="header item" data-bind="css: {'off': !display()}, click: toggle">
- <span class="default text">
- <i class="block layout icon"></i>
+<div class="ui inverted vertical fluid main menu">
+ <a class="item" data-bind="css: {'active': display()}, click: toggle">
+ <span>
+ <i class="large block layout icon"></i>
Data Breakdowns
</span>
</a>
@@ -13,7 +13,7 @@
<i class="circle icon"></i>
<span data-bind="text: label"></span>
- <input type="checkbox" data-bind="disable: selected() &&
$parents[0].isOnlyOneSelected(),checked: selected ">
+ <input type="checkbox" data-bind="disable: selected() &&
$parents[0].isOnlyOneSelected(), checked: selected">
<svg height="10" width="100%">
<path stroke="white"
data-bind="attr: {'stroke-dasharray': pattern}"
diff --git a/src/components/metric-selector/metric-selector.html
b/src/components/metric-selector/metric-selector.html
index 2fc28ee..1598883 100644
--- a/src/components/metric-selector/metric-selector.html
+++ b/src/components/metric-selector/metric-selector.html
@@ -4,33 +4,11 @@
<i class="dropdown icon vertically" data-bind="css: {flipped: open}"></i>
</div>
-<div class="ui pointing white offset above label categories target"
data-bind="css: {open: open}">
- <div class="ui two column grid">
- <div class="column">
- <div class="ui vertical pointing black menu">
- <!-- ko foreach: categories -->
- <a class="item" data-bind="
- css: {active: name === $parent.selectedCategory().name},
- text: name,
- click: $parent.selectCategory
- "></a>
- <!-- /ko -->
- </div>
- </div>
- <div class="column">
- <div class="ui vertical menu">
- <!-- ko if: selectedCategory -->
- <!-- ko foreach: categories -->
- <!-- ko if: $parent.selectedCategory().name !== 'All metrics'
&&
- (name === 'All metrics' || name <
$parent.selectedCategory().name) -->
- <div class="item"> </div>
- <!-- /ko -->
- <!-- /ko -->
- <!-- ko foreach: selectedCategory().metrics -->
- <a class="item" data-bind="metricName: $data, click:
$parent.addMetric"></a>
- <!-- /ko -->
- <!-- /ko -->
- </div>
+<div class="ui vertical offset pointing menu target" data-bind="css: {open:
open}, foreach: categories">
+ <div class="ui simple dropdown item">
+ <span data-bind="text: name"></span>
+ <div class="menu" data-bind="foreach: metrics">
+ <a class="item" data-bind="metricName: $data, click:
$parents[1].addMetric"></a>
</div>
</div>
</div>
@@ -38,7 +16,7 @@
<!-- ko foreach: addedMetrics -->
<div class="ui large label metric" data-bind="css: {black: $data ===
$parent.selectedMetric()}">
<a data-bind="click: $parent.selectMetric, metricName: $data"></a>
- <i class="separate icon">|</i>
+ |
<i class="delete icon" data-bind="click: $parent.removeMetric"></i>
</div>
<!-- /ko -->
diff --git a/src/components/metric-selector/metric-selector.js
b/src/components/metric-selector/metric-selector.js
index afe6e7e..84cf70d 100644
--- a/src/components/metric-selector/metric-selector.js
+++ b/src/components/metric-selector/metric-selector.js
@@ -32,7 +32,6 @@
this.metricsByCategory = params.metrics;
this.selectedMetric = params.selectedMetric;
- this.selectedCategory = ko.observable();
this.addedMetrics = ko.observableArray([]);
this.defaultSelection = ko.computed(function () {
@@ -73,9 +72,6 @@
return c.metrics.length;
});
- if (categories.length) {
- this.selectedCategory(categories[0]);
- }
return categories;
}, this);
@@ -83,10 +79,6 @@
this.setDefault = function () {
self.addedMetrics(self.defaultSelection() || []);
self.reassignSelected();
- };
-
- this.selectCategory = function (category) {
- self.selectedCategory(category);
};
this.addMetric = function (metric) {
diff --git
a/src/components/metrics-by-project-layout/metrics-by-project-layout.html
b/src/components/metrics-by-project-layout/metrics-by-project-layout.html
index 64c9dbb..6a86f1b 100644
--- a/src/components/metrics-by-project-layout/metrics-by-project-layout.html
+++ b/src/components/metrics-by-project-layout/metrics-by-project-layout.html
@@ -1,40 +1,33 @@
-<section>
- <out-of-service></out-of-service>
+<out-of-service></out-of-service>
+
+<section class="page container">
+ <section class="left">
+ <project-selector params="projectOptions:projectOptions,
+ languageOptions:languageOptions,
+ defaultProjects: defaultProjects,
+ reverseLookup: reverseLookup,
+ selectedProjects: selectedProjects">
+
+ </project-selector>
+ <!-- ko if: selectedMetric() && selectedMetric().breakdown -->
+ <breakdown-toggle params="metric: selectedMetric,
breakdownColumns:breakdownColumns, patterns:patterns"></breakdown-toggle>
+ <!-- /ko -->
+ </section>
+
+ <section class="right columnar flexer flexed">
+ <div class="ui segment metric">
+ <metric-selector params="selectedMetric: selectedMetric,
+ metrics: metrics,
+ defaultSelection: defaultMetrics">
+ </metric-selector>
+ </div>
+ <div class="ui segment columnar flexer flexed visualizer">
+ <wikimetrics params="projects: selectedProjects,
+ metric: selectedMetric,
+ breakdownColumns: breakdownColumns,
+ patterns: patterns"
+ class="columnar flexer flexed">
+ </wikimetrics>
+ </div>
+ </section>
</section>
-
-<section>
-
- <div>
-
-
- <section class="page column projects">
- <project-selector params="projectOptions:projectOptions,
- languageOptions:languageOptions,
- defaultProjects: defaultProjects,
- reverseLookup: reverseLookup,
- selectedProjects: selectedProjects">
-
- </project-selector>
- <!-- ko if: selectedMetric() && selectedMetric().breakdown -->
- <breakdown-toggle params="metric: selectedMetric,
breakdownColumns:breakdownColumns, patterns:patterns"></breakdown-toggle>
- <!-- /ko -->
- </section>
-
-
- <section class="page column main">
- <div class="ui segment metric">
- <metric-selector params="selectedMetric: selectedMetric,
- metrics: metrics,
- defaultSelection: defaultMetrics">
- </metric-selector>
- </div>
- <div class="ui segment">
- <wikimetrics params="projects: selectedProjects,
- metric: selectedMetric,
breakdownColumns: breakdownColumns, patterns:patterns">
- </wikimetrics>
- </div>
- </section>
- </div>
-</section>
-
-
diff --git a/src/components/project-selector/project-selector.html
b/src/components/project-selector/project-selector.html
index a838755..3b9bc8e 100644
--- a/src/components/project-selector/project-selector.html
+++ b/src/components/project-selector/project-selector.html
@@ -12,6 +12,7 @@
}"/>
<i class="search icon"></i>
</div>
+<hr/>
<span class="tt-dropdown-menu"
data-bind="css: {open: displaySuboptions}">
@@ -29,39 +30,37 @@
</div>
</span>
-<hr/>
-
<!-- ko foreach: selectedProjectsByCategory -->
-<div class="ui secondary inverted vertical fluid menu">
- <div class="header item">
- <span class="default text" data-bind="text: name"></span>
- <!-- menu goes here -->
- <div class="ui simple dropdown">
- <i class="dropdown icon"></i>
- <div class="menu ui">
- <div class="item small" data-bind="click:
$parent.removeCategory.bind($parent, false)">
- <i class="trash icon"></i> Remove
- </div>
- <div class="item small" data-bind="click:
$parent.removeCategory.bind($parent, true)">
- <i class="star icon"></i> Show this alone
+<div class="ui inverted secondary vertical menu">
+ <div class="item">
+ <div class="inverted header">
+ <span data-bind="text: name"></span>
+ <div class="ui simple dropdown">
+ <i class="huge dropdown icon"></i>
+ <div class="ui menu">
+ <div class="item small" data-bind="click:
$parent.removeCategory.bind($parent, false)">
+ <i class="trash icon"></i> Remove
+ </div>
+ <div class="item small" data-bind="click:
$parent.removeCategory.bind($parent, true)">
+ <i class="star icon"></i> Show this alone
+ </div>
</div>
</div>
</div>
- <!-- menu goes here -->
- </div>
- <div class="colored menu">
- <!-- ko foreach: languages -->
- <div class="item">
- <span>
- <i class="swatch" data-bind="style: {backgroundColor:
color}"></i>
- <span data-bind="text: name"></span>
- <span class="subtext" data-bind="text: shortName"></span>
- </span>
- <a data-bind="click: $parents[1].removeProject.bind($parents[1])">
- <i class="faded destructive delete icon"></i>
- </a>
+ <div class="colored menu">
+ <!-- ko foreach: languages -->
+ <div class="item">
+ <span>
+ <i class="swatch" data-bind="style: {backgroundColor:
color}"></i>
+ <span data-bind="text: name"></span>
+ <span class="subtext" data-bind="text: shortName"></span>
+ </span>
+ <a data-bind="click:
$parents[1].removeProject.bind($parents[1])">
+ <i class="faded destructive delete icon"></i>
+ </a>
+ </div>
+ <!-- /ko -->
</div>
- <!-- /ko -->
</div>
</div>
<hr/>
diff --git a/src/components/visualizers/dygraphs-timeseries/bindings.js
b/src/components/visualizers/dygraphs-timeseries/bindings.js
index 4058e47..7bc3612 100644
--- a/src/components/visualizers/dygraphs-timeseries/bindings.js
+++ b/src/components/visualizers/dygraphs-timeseries/bindings.js
@@ -17,7 +17,7 @@
$(element).height(val.height);
}
- $(element).append('<div class="resizable container graph"></div>');
+ $(element).append('<div class="flexed graph"></div>');
},
update: function (element, valueAccessor) {
var $element = $(element),
diff --git
a/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
b/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
index 9a1358e..2ede8f3 100644
--- a/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
+++ b/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
@@ -26,7 +26,7 @@
}
</style>
-<div class="parent-of-resizable" data-bind="
+<div class="columnar flexer flexed" data-bind="
if: data && data.header,
dygraphs: {
height: $data.height,
diff --git a/src/components/visualizers/wikimetrics/wikimetrics.html
b/src/components/visualizers/wikimetrics/wikimetrics.html
index 4ead697..8a45643 100644
--- a/src/components/visualizers/wikimetrics/wikimetrics.html
+++ b/src/components/visualizers/wikimetrics/wikimetrics.html
@@ -1,6 +1,4 @@
<!-- ko if: metric && metric() && (mergedData && mergedData() &&
mergedData().header.length) -->
-
-
<a class="header"
data-bind="attr: {href: metric().definition}"
title="view metric definition" target="_blank">
@@ -8,8 +6,7 @@
<i class="external url icon"></i>
</a>
-
-<dygraphs-timeseries params="
+<dygraphs-timeseries class="columnar flexer flexed" params="
data: mergedData,
colors: colorScale,
patterns: patternScale,
@@ -19,10 +16,9 @@
<!-- /ko -->
-
<!-- ko ifnot: mergedData && mergedData() && mergedData().header.length -->
-<p>Please select a metric above <i class="up icon"/><p>
-<p><i class="left icon"/> And projects from the left</p>
+<p><i class="up arrow icon"/> Please select a metric above<p>
+<p><i class="left arrow icon"/> And projects from the left</p>
<!-- /ko -->
diff --git a/src/css/semantic2.popup.css b/src/css/semantic2.popup.css
new file mode 120000
index 0000000..f255e6a
--- /dev/null
+++ b/src/css/semantic2.popup.css
@@ -0,0 +1 @@
+../bower_modules/semantic-2/dist/components/popup.css
\ No newline at end of file
diff --git a/src/layouts/metrics-by-project/01_styles.css
b/src/layouts/metrics-by-project/01_styles.css
deleted file mode 100644
index 74a716b..0000000
--- a/src/layouts/metrics-by-project/01_styles.css
+++ /dev/null
@@ -1,257 +0,0 @@
-/* site-wide styles */
-body {
- padding: 0;
- margin: 0;
- height: 100vh;
- font-family: "Nimbus Sans L","Liberation Sans","Helvetica
Neue","Helvetica","Arial",sans-serif;
- }
-
-.clickable {
- cursor: pointer;
-}
-/* patches to semantic */
-.delete.icon {
- cursor: pointer;
-}
-.ui.label.navy {
- background-color: #347BFE;
- color: white;
-}
-.ui.label {
- text-transform: none;
-}
-.ui.inverted.input input {
- background-color: #7C7C7C;
- color: #232323;
-}
-.ui.dropdown.label {
- height: 30.75px;
-}
-.separate.icon {
- margin: 0 -4px 0 4px;
-}
-.ui.pointing.offset.above.label:before {
- left: 11%!important;
- top: -0.41em;
-}
-.ui.label,
-.ui.input input {
- border-radius: 2px;
-}
-
-/* our styles */
-.ui.segment.metric {
- padding: 0.5em;
-}
-.ui.label.metric {
- margin: 0.25em;
-}
-.subtext {
- color: #929292;
- font-size: x-small;
- text-transform: uppercase;
- margin-left: 8px;
-}
-.icon.faded {
- opacity: 0.1;
-}
-.item:hover .icon.faded {
- opacity: 1;
-}
-.target {
- position: absolute!important;
- z-index: 100!important;
- display: none!important;
-}
-.target.open {
- display: block!important;
-}
-.categories.target.label {
- padding: 1px;
- margin-top: 7px!important;
-}
-.ui.pointing.white.label {
- background-color: white;
- border: 2px solid #E5E5E5;
-}
-.ui.pointing.white.label:before {
- background-color: white;
- border: 2px solid #E5E5E5;
- border-bottom: none;
- border-right: none;
-}
-.target.label .grid {
- margin: 0px;
-}
-.target.label .grid .column {
- padding: 0px;
- margin: 0px;
-}
-input.typeahead {
- color: white!important;
- width: 280px!important;
-}
-a.header {
- color: #112233;
- text-decoration: none;
-}
-a.header:hover {
- border-bottom: 2px solid #112233;
-}
-section.page.column {
- position: absolute;
- padding: 10px;
-}
-section.projects {
- background-color: #6D6D6D;
- width: 280px;
-}
-section.main {
- background-color: #EEEEEE;
- right: 0;
- left: 300px;
-}
-.graph {
- height: 80vh;
-}
-dygraphs-timeseries {
- display: block;
- margin-top: 20px;
-}
-.parent-of-resizable {
- padding: 0;
- min-height: 300px;
- min-width: 800px;
-}
-.colored i.swatch {
- vertical-align: bottom;
- display: inline-block;
- margin: 0 .35em 0 0;
- width: 20px;
- height: 20px;
- opacity: 1;
-}
-.destructive:hover {
- color: #D42E2A;
-}
-project-selector hr {
- margin-right: 20px;
-}
-project-selector .ui.vertical.menu.fluid {
- width: 94%!important;
-}
-
-breakdown-toggle {
- display: block;
- margin-top: 60px;
-}
-breakdown-toggle .ui.vertical.menu.fluid {
- width: 94%!important;
-}
-breakdown-toggle .ui.menu a.header.item {
- opacity: 1!important;
-}
-breakdown-toggle .ui.menu a.header.item,
-breakdown-toggle .ui.menu a.header.item:hover {
- background-color: #4D4D4D;
- color: #BDBDBD;
-}
-breakdown-toggle .ui.menu a.header.item.off,
-breakdown-toggle .ui.menu a.header.item.off:hover {
- background-color: #808080;
- color: #454545;
-}
-
-.annotation.label {
- cursor: pointer;
- margin: 5px 3px 3px 3px;
-}
-.annotation-list-title {
- margin-left: 10px;
- vertical-align: -2px;
- font-size: 14px;
-}
-
-/**
- * Twitter typeahead stuff
- */
-.tt-query,
-.tt-hint {
- width: 390px;
- height: 30px;
- padding: 8px 12px;
- font-size: 24px;
- line-height: 30px;
- border: 2px solid #ccc;
- border-radius: 2px;
- outline: none;
-}
-.tt-query {
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.tt-hint {
- color: #999
-}
-.tt-dropdown-menu {
- width: 300px;
- margin: 1px 0 0 1px;
- padding: 8px 0;
- background-color: #fff;
- border: 1px solid #ccc;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- box-shadow: 0 5px 10px rgba(0,0,0,.2);
- max-height: 24em;
- overflow-y: scroll;
- overflow-x: hidden;
-}
-.tt-suggestion {
- padding: 3px 20px;
- font-size: 16px;
- line-height: 30px;
- border-bottom: #ccc 1px solid;
-}
-.tt-suggestion .footnote {
- float: right;
- font-size:0.8em;
-}
-.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use
.tt-suggestion.tt-cursor */
- color: #fff;
- background-color: #0097cf;
-
-}
-.tt-suggestion:hover {
- font-weight: bold;
- cursor: pointer;
-}
-.tt-suggestion p {
- margin: 0;
-}
-.tt-back:hover{
- font-weight: bold;
-}
-.tt-dropdown-menu {
- display: none;
-}
-.tt-dropdown-menu .header {
- margin: 0 0 0 10px;
- font-size: 1.5em;
- color: #888;
-}
-.tt-dropdown-menu > * {
- margin: 0 0 14px 0;
-}
-.tt-dropdown-menu.open {
- display: block;
- position: absolute;
- z-index: 100;
-}
-/* End Twitter Typeahead stuff */
-
-/* !important because we want to override the inline style */
-.dygraph-roller input {
- position: relative !important;
- left: auto !important;
- top: auto !important;
- display: inline !important;
-}
diff --git a/src/layouts/metrics-by-project/index.html
b/src/layouts/metrics-by-project/index.html
index 6a0d7ce..c8bab5a 100644
--- a/src/layouts/metrics-by-project/index.html
+++ b/src/layouts/metrics-by-project/index.html
@@ -13,34 +13,29 @@
<title>Metrics by Project</title>
<!-- endbuild -->
- <link rel="stylesheet" type="text/css"
href="//fonts.googleapis.com/css?family=Open+Sans:400,600">
<section class="minify">
<!-- build:css -->
<!-- always pick and choose semantic ui components, full build
includes things like chatrooms! -->
<!-- we have symlinked the modules used from bower_modules into style
directory -->
- <!-- note: semantic < 1.0 docs available here for convenience:
- http://legacy.semantic-ui.com/
- (later versions of semantic have breaking changes)
- -->
- <link href="/src/css/000_grid.min.css" rel="stylesheet">
- <link href="/src/css/010_menu.min.css" rel="stylesheet">
- <link href="/src/css/020_dropdown.min.css" rel="stylesheet">
- <link href="/src/css/030_label.min.css" rel="stylesheet">
- <link href="/src/css/040_icon.min.css" rel="stylesheet">
- <link href="/src/css/050_input.min.css" rel="stylesheet">
- <link href="/src/css/060_segment.min.css" rel="stylesheet">
- <link href="/src/css/061_popup.min.css" rel="stylesheet">
- <link href="/src/css/062_header.min.css" rel="stylesheet">
- <link href="/src/css/063_button.min.css" rel="stylesheet">
- <link href="/src/css/064_dropdown.min.css" rel="stylesheet">
- <link href="/src/css/065_divider.min.css" rel="stylesheet">
+
+ <link href="/src/css/semantic2.reset.css" rel="stylesheet">
+ <link href="/src/css/semantic2.site.css" rel="stylesheet">
+
+ <link href="/src/css/semantic2.grid.css" rel="stylesheet">
+ <link href="/src/css/semantic2.menu.css" rel="stylesheet">
+ <link href="/src/css/semantic2.dropdown.css" rel="stylesheet">
+ <link href="/src/css/semantic2.label.css" rel="stylesheet">
+ <link href="/src/css/semantic2.icon.css" rel="stylesheet">
+ <link href="/src/css/semantic2.input.css" rel="stylesheet">
+ <link href="/src/css/semantic2.segment.css" rel="stylesheet">
+ <link href="/src/css/semantic2.popup.css" rel="stylesheet">
+ <link href="/src/css/semantic2.header.css" rel="stylesheet">
+ <link href="/src/css/semantic2.button.css" rel="stylesheet">
+ <link href="/src/css/semantic2.divider.css" rel="stylesheet">
<!-- end semantic ui -->
- <link href="/src/css/068_nvd3.css" rel="stylesheet">
- <link href="/src/css/069_rickshaw.css" rel="stylesheet">
- <link href="01_styles.css" rel="stylesheet">
- <link href="02_responsive.css" rel="stylesheet">
+ <link href="styles.css" rel="stylesheet">
<!-- endbuild -->
</section>
diff --git a/src/layouts/metrics-by-project/styles.css
b/src/layouts/metrics-by-project/styles.css
new file mode 100644
index 0000000..7a19b70
--- /dev/null
+++ b/src/layouts/metrics-by-project/styles.css
@@ -0,0 +1,259 @@
+/* generally useful styles */
+body {
+ font-family: "Nimbus Sans L","Liberation Sans","Helvetica
Neue","Helvetica","Arial",sans-serif;
+}
+.clickable {
+ cursor: pointer;
+}
+.ui.label,
+.ui.input input {
+ border-radius: 2px;
+}
+
+/* page layout */
+.page.container {
+ height: 100%;
+ display: flex;
+ align-items: stretch;
+}
+
+.page.container > .left {
+ background-color: #6D6D6D;
+ width: 280px;
+ padding: 10px;
+}
+
+.page.container > .right {
+ background-color: #EEEEEE;
+ padding: 10px;
+}
+
+.page.container > .right .visualizer {
+ margin-top: 0;
+}
+
+.columnar.flexer {
+ display: flex;
+ flex-direction: column;
+}
+.flexed {
+ flex: 1;
+}
+
+/* our custom styles */
+
+/* visualizer(s) */
+dygraphs-timeseries {
+ display: block;
+ margin-top: 20px;
+}
+dygraphs-timeseries .dygraph-roller input {
+ position: relative !important;
+ left: auto !important;
+ top: auto !important;
+ display: inline !important;
+}
+
+/* metric selector */
+.ui.segment.metric {
+ padding: 0.7em;
+}
+.ui.label.navy {
+ background-color: #347BFE;
+ color: white;
+}
+.ui.segment.metric .ui.label a {
+ opacity: 0.8;
+}
+.ui.segment.metric .ui.label.metric {
+ margin: 0.25em;
+}
+.ui.offset.pointing:before {
+ content: "";
+ transition: background .1s linear;
+ transform: rotate(45deg);
+ position: absolute;
+ width: 1em;
+ height: 1em;
+ background-image: none;
+
+ left: 11%!important;
+ top: -0.55em;
+ background-color: white;
+ border: 2px solid #E5E5E5;
+ border-bottom: none;
+ border-right: none;
+}
+
+/* project selector */
+project-selector .ui.inverted.input {
+ margin-bottom: 6px;
+}
+project-selector .ui.input input.typeahead {
+ font-size: 1.1em;
+ background-color: #7C7C7C;
+ color: white;
+ width: 260px;
+}
+project-selector .colored i.swatch {
+ vertical-align: bottom;
+ display: inline-block;
+ margin: 0 .35em 0 0;
+ width: 20px;
+ height: 20px;
+ opacity: 1;
+}
+project-selector > .menu {
+ width: auto!important;
+ margin: 0!important;
+}
+project-selector > .menu > .item {
+ padding: 0!important;
+}
+project-selector > .menu .inverted.header {
+ font-size: 1.2em!important;
+ background-color: rgba(0,0,0,.3);
+ padding: 0.6em 0.8em;
+}
+project-selector .colored.menu .item {
+ color: white!important;
+ font-size: 1.1em!important;
+}
+project-selector .colored.menu .icon.faded {
+ opacity: 0.1;
+}
+project-selector .colored.menu .item:hover .icon.faded {
+ opacity: 1;
+}
+project-selector .colored.menu .destructive:hover {
+ cursor: pointer;
+ color: #D42E2A;
+}
+project-selector .colored.menu .subtext {
+ color: #b2b2b2;
+ font-size: x-small;
+ text-transform: uppercase;
+ margin-left: 8px;
+}
+
+/* breakdown toggle */
+breakdown-toggle {
+ display: block;
+ margin-top: 30px;
+}
+
+breakdown-toggle .ui.main.menu > a.item {
+ font-size: 1.1em;
+ border-radius: 0!important;
+ padding: 0.6em 0.8em;
+}
+breakdown-toggle .colored.menu > .item {
+ color: white!important;
+}
+breakdown-toggle .colored.menu > .item span {
+ margin-right: 5px;
+ font-size: 1.3em;
+}
+breakdown-toggle .ui.main.menu > a.item.active,
+breakdown-toggle .ui.main.menu > a.item.active:hover {
+ background-color: #4D4D4D;
+ color: #BDBDBD;
+}
+breakdown-toggle .ui.main.menu > a.item,
+breakdown-toggle .ui.main.menu > a.item:hover {
+ background-color: #808080;
+ color: #454545;
+}
+
+/* anything with the target ko binding */
+.target {
+ position: absolute!important;
+ z-index: 100!important;
+ display: none!important;
+}
+.target.open {
+ display: block!important;
+}
+.target.label .grid {
+ margin: 0px;
+}
+.target.label .grid .column {
+ padding: 0px;
+ margin: 0px;
+}
+
+/**
+ * Twitter typeahead stuff
+ */
+.tt-query,
+.tt-hint {
+ width: 390px;
+ height: 30px;
+ padding: 8px 12px;
+ font-size: 24px;
+ line-height: 30px;
+ border: 2px solid #ccc;
+ border-radius: 2px;
+ outline: none;
+}
+.tt-query {
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.tt-hint {
+ color: #999
+}
+.tt-dropdown-menu {
+ width: 300px;
+ margin: 1px 0 0 1px;
+ padding: 8px 0;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
+ box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ max-height: 24em;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+.tt-suggestion {
+ padding: 3px 20px;
+ font-size: 16px;
+ line-height: 30px;
+ border-bottom: #ccc 1px solid;
+}
+.tt-suggestion .footnote {
+ float: right;
+ font-size:0.8em;
+}
+.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use
.tt-suggestion.tt-cursor */
+ color: #fff;
+ background-color: #0097cf;
+
+}
+.tt-suggestion:hover {
+ font-weight: bold;
+ cursor: pointer;
+}
+.tt-suggestion p {
+ margin: 0;
+}
+.tt-back:hover{
+ font-weight: bold;
+}
+.tt-dropdown-menu {
+ display: none;
+}
+.tt-dropdown-menu .header {
+ margin: 0 0 0 10px;
+ font-size: 1.5em;
+ color: #888;
+}
+.tt-dropdown-menu > * {
+ margin: 0 0 14px 0;
+}
+.tt-dropdown-menu.open {
+ display: block;
+ position: absolute;
+ z-index: 100;
+}
+/* End Twitter Typeahead stuff */
--
To view, visit https://gerrit.wikimedia.org/r/312430
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3957afc043ab1e6ee5e5da7ffda6ecf72359278b
Gerrit-PatchSet: 1
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Milimetric <dandree...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
