OliverKeyes has submitted this change and it was merged.
Change subject: Reskins the entire dashboard to a light-on-dark theme
......................................................................
Reskins the entire dashboard to a light-on-dark theme
The previous patch "inverted" the geo graph theme to
make the colors (which were also changed by the patch
to polloi) pop out better. This resulted in the new
geo graph looking really out of place, and it clashed
with the white bar at the top of the dashboard. Thus,
this patch reskins the rest of the dashboard to that
theme, making the geo graph appear in unison with the
rest while also differentiating the Portal dashboard
visually from the other Discovery dashboard, which is
appropriate given the uniqueness of the project/team.
Bug: T123959
Change-Id: Id0ed69719b04f1d0590ed0e22ff459ef253a3638
---
M server.R
M www/inverse.css
M www/stylesheet.css
3 files changed, 55 insertions(+), 7 deletions(-)
Approvals:
OliverKeyes: Verified; Looks good to me, approved
diff --git a/server.R b/server.R
index 9173799..b03e03f 100644
--- a/server.R
+++ b/server.R
@@ -13,9 +13,9 @@
}
output$clickthrough_rate_dygraph <- renderDygraph({
- polloi::make_dygraph(
- data = clickthrough_rate,
- xlab = "Date", ylab = "Clickthrough rate (%)", title = "Wikipedia portal
clickthrough rate") %>%
+ clickthrough_rate %>%
+ polloi::make_dygraph(xlab = "Date", ylab = "Clickthrough rate (%)",
title = "Wikipedia portal clickthrough rate") %>%
+ dyCSS(css = "www/inverse.css") %>%
dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
tooltip = "Sampling change - see below",
@@ -26,6 +26,7 @@
polloi::make_dygraph(
data = action_breakdown,
xlab = "Date", ylab = "Actions (%)", title = "Actions on the Wikipedia
portal") %>%
+ dyCSS(css = "www/inverse.css") %>%
dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
dyLegend(labelsDiv = "action_breakdown_legend", show = "always", width =
400) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
@@ -37,6 +38,7 @@
polloi::make_dygraph(
data = dwelltime_data,
xlab = "Date", ylab = "Dwell Time (Seconds)", title = "Time spent on the
Wikipedia portal") %>%
+ dyCSS(css = "www/inverse.css") %>%
dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
tooltip = "Sampling change - see below",
@@ -46,8 +48,8 @@
output$country_breakdown_dygraph <- renderDygraph({
country_data %>%
polloi::make_dygraph(xlab = "", ylab = "Users (%)", title = "Geographic
breakdown of portal visitors") %>%
+ dyCSS(css = "www/inverse.css") %>%
dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
- dyLegend(labelsDiv = "country_breakdown_legend", show = "always", width
= 400) %>%
- dyCSS(css = "www/inverse.css")
+ dyLegend(labelsDiv = "country_breakdown_legend", show = "always", width
= 400)
})
})
diff --git a/www/inverse.css b/www/inverse.css
index a30f078..b85ba6f 100644
--- a/www/inverse.css
+++ b/www/inverse.css
@@ -1,8 +1,8 @@
-#country_breakdown .dygraph-legend, #country_breakdown .dygraph-label {
+.dygraph-legend, .dygraph-label {
background-color: #222D32 !important;
color: #ECF0F5;
}
-#country_breakdown_dygraph .dygraph-axis-label {
+.dygraph-axis-label {
color: #ECF0F5;
}
diff --git a/www/stylesheet.css b/www/stylesheet.css
index 2451b16..ddae014 100644
--- a/www/stylesheet.css
+++ b/www/stylesheet.css
@@ -1,3 +1,49 @@
.kpi_date {
margin-top: 0px;
}
+
+a {
+ color: DeepSkyBlue;
+}
+
+.sidebar-toggle::before {
+ color: white;
+}
+
+.sidebar-toggle:hover::before {
+ color: black;
+}
+
+.main-sidebar {
+ color: black;
+ background-color: rgb(184, 199, 206) !important;
+}
+
+.sidebar-menu > li > a {
+ color: #1e282c !important;
+}
+
+.sidebar-menu > li > a:hover {
+ background-color: #ECF0F5 !important;
+ border-left-color: black !important;
+}
+
+.sidebar-menu > li.active > a {
+ background-color: #ECF0F5 !important;
+ border-left-color: black !important;
+}
+
+.content, .tab-content {
+ color: #ECF0F5 !important;
+ background-color: #222D32 !important;
+}
+
+.main-header, .navbar, .navbar-static-top, .logo {
+ color: white !important;
+ background-color: black !important;
+ border-color: black !important;
+}
+
+.sidebar-toggle {
+ border-color: black !important;
+}
--
To view, visit https://gerrit.wikimedia.org/r/266403
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id0ed69719b04f1d0590ed0e22ff459ef253a3638
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/discovery/prince
Gerrit-Branch: master
Gerrit-Owner: Bearloga <mpo...@wikimedia.org>
Gerrit-Reviewer: OliverKeyes <oke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
