Changed UI to fit the-eye.eu

search/search.py

@@ -147,8 +147,9 @@ class ElasticSearchEngine(SearchEngine):
             "sort": sort_by,
             "highlight": {
                 "fields": {
-                    "name": {"pre_tags": ["<span class='hl'>"], "post_tags": ["</span>"]},
-                    "path": {"pre_tags": ["<span class='hl'>"], "post_tags": ["</span>"]}
+                    "name": {"pre_tags": ["<mark>"], "post_tags": ["</mark>"]},
+                    "name.nGram": {"pre_tags": ["<mark>"], "post_tags": ["</mark>"]},
+                    "path": {"pre_tags": ["<mark>"], "post_tags": ["</mark>"]}
                 }
             },
             "size": per_page, "from": page * per_page}, index=self.index_name)

static/css/main.css

@@ -10,6 +10,9 @@
 .list-group-item {
     padding-bottom: 0.3rem;
 }
+.badge {
+    padding-bottom: 0;
+}
 .table td {
     padding: 2px 0;
 }
@@ -78,6 +81,100 @@
     100% {
         background-color: rgba(255, 255, 255, 0.6); } }
 
-.hl {
-    background: #fff217;
+mark {
+    background-color: rgba(255, 255, 0, 0.4);
+    border-radius: 2px;
+    padding: 1px;
+}
+body {
+    color: #BBBBBB;
+    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
+    background-image: url(/static/img/bg.png);
+}
+
+.card {
+    background-color: #36393e;
+    border: 3px double #262626;
+}
+
+.navbar {
+    background: #36393e;
+    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
+}
+
+.navbar-brand {
+    border: none;
+}
+
+.nav-link {
+    color: #616161;
+    border-bottom: 2px solid #6c6c6c;
+}
+
+.active {
+    border-color: #b3b3b3;
+    color: #E6E6E6;
+}
+
+.nav-link:hover {
+    color: #c7c7c7;
+}
+
+.jumbotron {
+    background: #36393e;
+}
+
+a {
+    color: #fff;
+    border-bottom: 1px dotted #e0e0e0;
+}
+
+a:hover {
+    color:#ddd;
+    text-decoration: none;
+}
+
+.table a {
+    border: none;
+}
+
+.table th, .table td {
+    border-top: 1px solid #666a6e;
+}
+
+.table thead th {
+    border-bottom: 2px solid #999da1;
+}
+.form-control {
+    background-color: #2f3136;
+    color: inherit;
+    border: 1px solid #282b30;
+}
+
+.form-control:focus {
+    background-color: #2f3136;
+    border-color: #80bdff;
+    color: inherit;
+}
+
+.nav-tabs .nav-link {
+    border-color: transparent;
+}
+
+.nav-tabs .nav-link.active {
+    border-color: #8e9296 #8e9296;
+    background-color: transparent;
+    color: #E6E6E6;
+}
+
+.nav-tabs .nav-link:hover {
+    border-color: #e9ecef #e9ecef transparent #e9ecef;
+}
+
+.card-header-tabs {
+    border-bottom: 1px solid #a1a5a9;
+}
+
+* {
+    outline: none;
 }

static/js/report.js

@@ -1,5 +1,3 @@
-
-
 function drawChart(rData) {
 
     var dataSetSize = [];
@@ -10,7 +8,7 @@ function drawChart(rData) {
     var otherSize = 0;
     var otherCount = 0;
 
-    for(var ext in rData["ext_stats"]) {
+    for (var ext in rData["ext_stats"]) {
         //Ignore file sizes below 0.5%
         if (!isRelevant(rData, ext)) {
 
@@ -25,7 +23,7 @@ function drawChart(rData) {
         }
     }
 
-    if(otherCount !== 0) {
+    if (otherCount !== 0) {
         colors.push(getRandomColor());
         labels.push("other x" + otherCount + " (" + humanFileSize(otherSize) + ")");
         dataSetSize.push(otherSize);
@@ -34,21 +32,31 @@ function drawChart(rData) {
 
     var ctx = document.getElementById('typesChart').getContext('2d');
 
-    var fileTypePieChart = new Chart(ctx,{
+    var fileTypePieChart = new Chart(ctx, {
         type: 'pie',
         data: {
             datasets: [{
                 data: rData["total_size"] < 100000 ? dataSetCount : dataSetSize,
-                backgroundColor: colors
+                backgroundColor: colors,
+                borderWidth: 1
             }],
-
             labels: labels
 
         },
         options: {
             title: {
                 display: true,
-                text: "File types for " + rData["base_url"] + " - " + humanFileSize(rData["total_size"])
+                text: "File types for " + rData["base_url"] + " - " + humanFileSize(rData["total_size"]),
+                fontColor: "#c6c6c6",
+                fontSize: 16,
+                fontFamily: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif"
+            },
+            legend: {
+                labels: {
+                    fontColor: "#bbbbbb",
+                    fontFamily: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif",
+                    boxWidth: 20,
+                }
             }
         }
     });
@@ -64,7 +72,7 @@ function fillWebsiteTable(rData) {
 }
 
 function fillDatabaseTable(rData) {
-    document.getElementById("esIndexSize") .innerHTML = humanFileSize(rData["es_index_size"]);
+    document.getElementById("esIndexSize").innerHTML = humanFileSize(rData["es_index_size"]);
     document.getElementById("esSearchCount").innerHTML = rData["es_search_count"];
     document.getElementById("esSearchTime").innerHTML = rData["es_search_time"] + "ms";
     document.getElementById("esSearchTimeAvg").innerHTML = rData["es_search_time_avg"].toFixed(2) + "ms";
@@ -84,7 +92,7 @@ function isRelevant(rData, ext) {
     //     return false;
     // }
 
-    if(rData["total_size"] < 100000) {
+    if (rData["total_size"] < 100000) {
         return rData["ext_stats"][ext][1] > 0.03 * rData["total_count"]
     } else {
         return rData["ext_stats"][ext][0] > 0.005 * rData["total_size"]
@@ -110,20 +118,20 @@ function getRandomColor() {
  */
 function humanFileSize(bytes) {
 
-    if(bytes === 0) {
+    if (bytes === 0) {
         return "? B"
     }
 
     var thresh = 1000;
-    if(Math.abs(bytes) < thresh) {
+    if (Math.abs(bytes) < thresh) {
         return bytes + ' B';
     }
-    var units = ['kB','MB','GB','TB','PB','EB','ZB','YB'];
+    var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     var u = -1;
     do {
         bytes /= thresh;
         ++u;
-    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
+    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
 
     return bytes.toFixed(1) + ' ' + units[u];
 }

task.py

@@ -151,7 +151,9 @@ class TaskDispatcher:
         stats = dict()
 
         for server in self.crawl_servers:
-            stats[server.name] = server.fetch_stats()
+            server_stats = server.fetch_stats()
+            if server_stats:
+                stats[server.name] = server_stats
 
         return stats
 

templates/layout.html

@@ -14,13 +14,13 @@
     <script src="/static/js/Chart.min.js" type="text/javascript"></script>
 
     <link href="/static/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
-    <link href="/static/css/bootstrap4-vibrant-sea.min.css" rel="stylesheet" type="text/css">
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="/static/css/main.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 
 
-<nav class="navbar navbar-expand-lg navbar-light" style="background: #F7F7F7; border-bottom: solid 1px #dfdfdf;">
+<nav class="navbar navbar-expand-lg">
     <a class="navbar-brand" href="/"><i class="fas fa-database"></i> OD-Database</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

templates/search.html

@@ -12,10 +12,10 @@
                 <form action="/search">
 
                     <div class="form-row">
-                        <div class="form-group col-md-8">
+                        <div class="form-group col-md-7">
                             <input class="form-control" name="q" id="q" placeholder="Full-text Query" value="{{ q }}">
                         </div>
-                        <div class="form-group col-md-2">
+                        <div class="form-group col-md-3">
                             <select class="form-control" name="sort_order" title="Sort order">
                                 <option disabled>Select sort order</option>
                                 <option value="score" {{ "selected" if sort_order == "score" else "" }}>Relevance </option>