examples: real-time dashboard example update

Author: keydunov

examples/real-time-dashboard/README.md

@@ -0,0 +1,4 @@
+## Real-Time Dashboard
+
+A real-time demo dashboard with MongoDB and React. You can follow [this guide](https://real-time-dashboard.cube.dev/) to
+learn more about building a real-time dashboard with Cube.js

examples/real-time-dashboard/dashboard-app/src/App.css

@@ -48,12 +48,14 @@ body {
   color: #43436B;
   font-size: 16px;
   height: 32px;
-  line-height: 1.5;
+  line-height: 1;
   padding: 0 15px;
   border: 0.5px solid rgba(67,67,107,0.4);
   box-sizing: border-box;
   border-radius: 4px;
   transition: border-color .25s ease-in-out;
+  display: flex;
+  align-items: center;
 }
 
 .top-menu a i {
@@ -68,10 +70,6 @@ body {
   margin-left: 10px;
 }
 
-.top-menu a span {
-  vertical-align: sub;
-}
-
 .top-menu a:hover i {
   opacity: 0.6;
 }
@@ -84,3 +82,24 @@ body {
 .top-menu a i {
   margin-right: 5px;
 }
+
+@media only screen and (max-width: 600px) {
+  .ant-layout-header {
+    height: 100%;
+  }
+
+  .top-menu {
+    display: block;
+  }
+
+  .top-menu a {
+    padding: 0;
+    border: 0;
+    font-size: 20px;
+    display: inline;
+  }
+
+  .top-menu a span  {
+    display: none;
+  }
+}

examples/real-time-dashboard/dashboard-app/src/components/Header.js

@@ -44,16 +44,12 @@ const Header = ({ location }) => {
         </Button>
         <Divider type="vertical" />
         <a href="https://github.com/cube-js/cube.js/tree/master/examples/real-time-dashboard">
-          <span>
-            <Icon type="github" />
-            Github
-          </span>
+          <Icon type="github" />
+          <span>Github</span>
         </a>
         <a href="https://slack.cube.dev">
-          <span>
-            <Icon type="slack" />
-            Slack
-          </span>
+          <Icon type="slack" />
+          <span>Slack</span>
         </a>
       </div>
     </Layout.Header>

examples/real-time-dashboard/dashboard-app/src/pages/DashboardPage.js

@@ -81,7 +81,7 @@ const DashboardItems = [
         order: {
           "Events.minutesAgo": "desc"
         },
-        limit: 10
+        limit: 11
       },
       chartType: "bar"
     },