Merge branch 'master' of https://github.com/kchawla-pi/united-states-…

…of-browsers into db-merge-cls-to-fn * 'master' of https://github.com/kchawla-pi/united-states-of-browsers: Tweak web UI - full page; sticky search box; no ext libs (#43)
kchawla-pi · Oct 20, 2019 · 18cb66f · 18cb66f
2 parents 44d3688 + 9201497
commit 18cb66f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/united_states_of_browsers/usb_server/static/style.css b/united_states_of_browsers/usb_server/static/style.css
@@ -1,6 +1,10 @@
+* {
+    font-family: sans-serif;
+}
+
 h1 {
     color: red ;
-    font-family: Roboto, sans-serif;
+    /*font-family: Roboto, sans-serif;*/
     font-size: 12px;
     }
 #app-name {color: inherit;}
@@ -11,18 +15,29 @@ h1 {
     alignment: center;
     }
 
+#search-section {
+    background: white;
+    position: sticky;
+    z-index: 1;
+    top: 0px;
+}
+
 .date {
     margin-left: 7%;
     alignment: center;
     }
 
 .table {
-    max-height: 460px;
+    /*max-height: 460px;*/
     max-width: 96%;
     overflow-x: hidden;
     display: block;
     margin-left: 4%;
     }
+th {
+    position: sticky;
+    top: 5px;
+}
 
 td {
     max-width: 420px;
@@ -41,5 +56,13 @@ td {
     }
 
 
+tr:nth-child(even) {
+    background-color: lightgray;
+}
+
+tr:hover {
+    background-color: yellow;
+}
+
 
 
diff --git a/united_states_of_browsers/usb_server/templates/main.html b/united_states_of_browsers/usb_server/templates/main.html
@@ -6,10 +6,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, inital-scale=1, shrink-to-fit=yes">
 
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
-          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
 
 </head>
@@ -18,6 +14,7 @@
 <div class="container-fluid">
 
     <h1 class="text-right"> <a id="app-name" href="/">United States of Browsers </a> </h1>
+    <div id="search-section">
     <form action="{{ url_for('search') }}" method="GET">
         <input id="search-box" type="text" name="query" placeholder="Enter search query here">
         <button class="btn btn-primary" type="submit">Search Browser History</button>
@@ -31,6 +28,7 @@ <h1 class="text-right"> <a id="app-name" href="/">United States of Browsers </a>
             <input type="date" id="date-to" name="date-to">
         </div>
     </form>
+    </div>
 
     <table class="table htable table-responsive-s table-striped table-hover table-sm">
         <caption>Web history across all local browsers and profiles.</caption>