Milimetric has submitted this change and it was merged.

Change subject: Make Dashiki responsive
......................................................................


Make Dashiki responsive

Makes Dashiki responsive and more friendly on mobile devices and smaller
viewports. The project selector is hidden with CSS media queries and
the graph is resized to the viewport.

For screenshots, see the Phabricator task.

Bug: T75030
Change-Id: I22a89f0dd76e4fb1dbcf602f0109126a47efd750
---
A src/css/responsive.css
M src/index.html
2 files changed, 35 insertions(+), 0 deletions(-)

Approvals:
  Milimetric: Verified; Looks good to me, approved



diff --git a/src/css/responsive.css b/src/css/responsive.css
new file mode 100644
index 0000000..e79d0dc
--- /dev/null
+++ b/src/css/responsive.css
@@ -0,0 +1,33 @@
+/* responsive media queries */
+@media only screen and (max-width:640px) {
+
+    section.projects {
+        /* hide the projects menu */
+        display: none;
+    }
+
+    section.main {
+        /* override space left for section.projects which is hidden */
+        left: 0;
+               overflow: auto;
+    }
+
+    .ui.vertical.menu {
+        /* override minimum menu width - we don't have the luxury of 
whitespace */
+        width: auto;
+    }
+
+       .graph {
+               width: 100%;
+               overflow-x: hidden;
+       }
+
+    .graph .parent-of-resizable {
+        height: 75vh;
+               margin-left: -5%; /* effectively reduces margins */
+               width: 120%;
+               min-height: 0;
+               min-width: 0;
+    }
+
+}
diff --git a/src/index.html b/src/index.html
index 3161fbd..48547bb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
         <title>Dashiki</title>
         <!-- build:css -->
             <!-- always pick and choose semantic ui components, full build 
includes things like chatrooms! -->
@@ -19,6 +20,7 @@
             <!-- end semantic ui -->
 
             <link href="css/styles.css" rel="stylesheet">
+            <link href="css/responsive.css" rel="stylesheet">
         <!-- endbuild -->
         <!-- build:js -->
             <script src="app/require.config.js"></script>

-- 
To view, visit https://gerrit.wikimedia.org/r/177487
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I22a89f0dd76e4fb1dbcf602f0109126a47efd750
Gerrit-PatchSet: 4
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Unicodesnowman <[email protected]>
Gerrit-Reviewer: Milimetric <[email protected]>
Gerrit-Reviewer: Nuria <[email protected]>
Gerrit-Reviewer: Unicodesnowman <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to