jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/331910 )
Change subject: Graph: cleanup styles a bit
......................................................................
Graph: cleanup styles a bit
- properly divide into agnostic vs client-js vs client-nojs
- remove duplicate display:block; on mw-graph-layover
- hide all layover content (play button, title, loader) when we don't
have JS.
Change-Id: I1c2b6b0308f77d977b7dc5fcef05833bb600f5ec
Bug: T156443
---
M styles/common.less
1 file changed, 65 insertions(+), 59 deletions(-)
Approvals:
JGirault: Looks good to me, approved
jenkins-bot: Verified
diff --git a/styles/common.less b/styles/common.less
index 94c232e..e4c7677 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -8,42 +8,45 @@
/* TODO: This file has a lot of descending specificity and needs a cleanup */
/* stylelint-disable no-descending-specificity */
-.client-js {
+.mw-graph {
+ display: inline-block;
+ border: 1px solid transparent;
+ position: relative;
- .mw-graph {
+ .mw-graph-img,
+ canvas {
display: inline-block;
- border: 1px solid transparent;
- position: relative;
+ vertical-align: middle;
+ }
+}
- .mw-graph-img,
- canvas {
- display: inline-block;
- vertical-align: middle;
- }
+.client-nojs {
+ .mw-graph-layover {
+ display: none;
+ }
+}
- &.mw-graph-interactable {
- &:hover {
- cursor: pointer;
+.client-js {
+ .mw-graph-interactable {
+ &:hover {
+ cursor: pointer;
- .mw-graph-hover-title {
- display: block;
+ .mw-graph-hover-title {
+ display: block;
+ }
+
+ .mw-graph-layover {
+ background-color: @colorWhiteOpac;
+ }
+
+ .mw-graph-switch {
+ &.mw-graph-loading {
+ background-color: @colorWhite;
}
- .mw-graph-layover {
- display: block;
- background-color: @colorWhiteOpac;
+ &:hover {
+ background-color: @colorWhite;
}
-
- .mw-graph-switch {
- &.mw-graph-loading {
- background-color: @colorWhite;
- }
-
- &:hover {
- background-color: @colorWhite;
- }
- }
-
}
}
}
@@ -58,59 +61,62 @@
bottom: 0;
z-index: 1;
.transition( ~'background-color 250ms ease-out' );
+ }
- /* center the container vertically */
- & > div {
- position: absolute;
- left: 10px;
- top: 10px;
- }
-
- .mw-graph-hover-title {
- display: none;
- position: absolute;
- top: ~'calc( 50% - 17px )';
- left: 1em;
- right: 1em;
- text-align: center;
- font-size: 150%;
- background-color: @colorWhite;
- }
+ .mw-graph-hover-title {
+ display: none;
+ position: absolute;
+ top: ~'calc( 50% - 17px )';
+ left: 1em;
+ right: 1em;
+ text-align: center;
+ font-size: 150%;
+ background-color: @colorWhite;
}
/* common button style */
.mw-graph-switch {
- font: inherit;
+ .transition( ~'background-color 100ms, color 100ms,
border-color 100ms, box-shadow 100ms' );
+
+ background-color: @colorWhiteOpac;
+
+ display: inline-block;
+
+ position: absolute;
+ left: 1em;
+ top: 1em;
+
min-height: 1.2em;
min-width: 1em;
- .transition( ~'background-color 100ms, color 100ms,
border-color 100ms, box-shadow 100ms' );
- font-weight: bold;
- text-decoration: none;
- display: inline-block;
- vertical-align: top;
- text-align: center;
- cursor: pointer;
- white-space: nowrap;
- line-height: 1em;
- padding: 0.5em;
width: 60px;
+ padding: 0.5em;
border-width: 2px;
border-style: solid;
border-color: @colorGray5;
border-radius: @borderRadius;
- background-color: @colorWhiteOpac;
+
color: @colorGray2;
+
+ font: inherit;
+ font-weight: bold;
+ line-height: 1em;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: top;
+ white-space: nowrap;
+
+ cursor: pointer;
&:hover {
background-color: @colorWhite;
- color: @colorProgressive;
border-color: #859dcc;
+ color: @colorProgressive;
}
&:active {
background-color: @colorWhite;
- color: @colorProgressive;
border-color: @colorProgressiveActive;
.box-shadow( none );
+ color: @colorProgressive;
}
&:focus {
border-color: @colorProgressive;
--
To view, visit https://gerrit.wikimedia.org/r/331910
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1c2b6b0308f77d977b7dc5fcef05833bb600f5ec
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
Gerrit-Reviewer: JGirault <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: Yurik <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
