fixed pills nav on mobile

adriennn · Aug 7, 2017 · 66d0b3d · 66d0b3d
1 parent 0dc6013
commit 66d0b3d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/views/index.pug b/views/index.pug
@@ -9,14 +9,13 @@ block content
     .jumbotron
       .card
         .card-header
-          ul.nav.nav-tabs.card-header-tabs(role='tablist')
+          nav.nav.nav-pills.flex-column.flex-sm-row
             each menuitem in [{id: 'listen',title:'Listen to stream',url:'/lora/form/listen'},{id: 'send',title:'Send data',url:'/lora/form/send'},{id: 'test',title:'Test calls',url:'/lora/form/test'},{id: 'records',title:'Records',url:'/lora/form/records'}]
               if (id == menuitem.id)
-                li.nav-item
-                  a.nav-link.active(role='tab', data-toggle='tab', href=menuitem.url) #{menuitem.title}
+                a(class='flex-sm-fill text-sm-center nav-link active' href=menuitem.url) #{menuitem.title}
               else
-                li.nav-item
-                  a.nav-link(role='tab', data-toggle='tab', href=menuitem.url) #{menuitem.title}  
+                a(class='flex-sm-fill text-sm-center nav-link' href=menuitem.url) #{menuitem.title}
+
         .card-block
           block tabcontent
             p Use this tool to send or fetch data to and from a known device or to register a new device on the network.

diff --git a/views/records.pug b/views/records.pug
@@ -5,8 +5,10 @@ block scriptsandstyles
   script(src='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js')
   script(src='https://rawgit.com/hansmaad/chartist-plugin-zoom/master/dist/chartist-plugin-zoom.min.js')
   script(src='https://rawgit.com/gionkunz/chartist-plugin-threshold/master/dist/chartist-plugin-threshold.min.js')
+  //- script(src='https://rawgit.com/tmmdata/chartist-plugin-tooltip/master/dist/chartist-plugin-tooltip.min.js')
 
-  link(href='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css', rel='stylesheet')    
+  link(href='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css', rel='stylesheet')
+  //- link(href='', rel='stylesheet')  
     
   style(type='text/css').
 
@@ -29,12 +31,51 @@ block scriptsandstyles
     }
 
     .ct-point {
-      stroke-width: 4px;
+      stroke-width: 8px;
     }
 
     .ct-line.ct-threshold-above, .ct-point.ct-threshold-above {
       stroke: rgba(255, 103, 48, 0.5);
     }
+
+    .chartist-tooltip {
+      position: absolute;
+      display: inline-block;
+      opacity: 0;
+      min-width: 5em;
+      padding: .5em;
+      background: #F4C63D;
+      color: #453D3F;
+      font-family: Oxygen,Helvetica,Arial,sans-serif;
+      font-weight: 700;
+      text-align: center;
+      pointer-events: none;
+      z-index: 1;
+      -webkit-transition: opacity .2s linear;
+      -moz-transition: opacity .2s linear;
+      -o-transition: opacity .2s linear;
+      transition: opacity .2s linear; 
+    }
+
+    .chartist-tooltip:before {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      margin-left: -15px;
+      border: 15px solid transparent;
+      border-top-color: #F4C63D; 
+    }
+
+    .chartist-tooltip.tooltip-show {
+      opacity: 1; 
+    }
+
+    .ct-area, .ct-line {
+      pointer-events: none;
+    }
 
 block tabcontent
   #graph.ct-chart
@@ -74,7 +115,8 @@ block tabcontent
         }),
         Chartist.plugins.ctThreshold({
           threshold: 24
-        })
+        }),
+        //- Chartist.plugins.tooltip()
       ]
     };