Update to Bootstrap/Bootswatch 4.5 - PR #336 from uaktags/Bootstrap-4.x

Bootstrap 4.5 update

CHANGELOG

@@ -1,3 +1,10 @@
+1.7.4
+* Updated themes to Bootstrap 4.5 by using latest Bootswatch themes
+* Deleted unmaintained themes that were never ported to Bootstrap4
+* New setting to optionally show a logo in the navbar header: headerlogo
+* New settings to switch between default, dark and light boostswatch navbars: display.navbar_dark and display.navbar_light
+* Added flag icons to network view.
+
 1.7.3
 * Fixes for Historical Address Balance - seems to be fastest method that works along-side parallel indexing
 * New settings to optionally show market cap in header: show_market_cap and show_market_cap_over_price

README.md

@@ -1,4 +1,4 @@
-Iquidus Explorer - 1.7.3
+Iquidus Explorer - 1.7.4
 ================
 
 An open source block explorer written in node.js.

UPGRADE

@@ -1,4 +1,11 @@
 Note: All updates require the explorer to be restarted
+1.7.3 -> 1.7.4
+* Ensure that you are not using theme "Paper" or "Readable" as these were not ported by Bootswatch
+* Add new settings to settings.json (see settings.json.template)
+  * headerlogo
+  * display.navbar_dark
+  * display.navbar_light
+* Run peers script twice after initial upgrade to ensure country codes are added to mongo.
 
 1.7.2 -> 1.7.3
 * Reindex explorerdb (node --stack-size=15000 scripts/sync.js index reindex) required for Historical Address Balance

app.js

@@ -263,6 +263,7 @@ app.set('nethash', settings.nethash);
 app.set('nethash_units', settings.nethash_units);
 app.set('show_sent_received', settings.show_sent_received);
 app.set('logo', settings.logo);
+app.set('headerlogo', settings.headerlogo);
 app.set('theme', settings.theme);
 app.set('labels', settings.labels);
 

lib/markets/altmarkets.js

@@ -15,7 +15,7 @@ function get_summary(coin, exchange, cb) {
         summary['bid'] = parseFloat(body['ticker']['buy']).toFixed(8);
         summary['ask'] = parseFloat(body['ticker']['sell']).toFixed(8);
         summary['volume'] = parseFloat(body['ticker']['vol']).toFixed(8);
-        summary['volume_btc'] = parseFloat(body['ticker']['quotevol']).toFixed(8);
+        summary['volume_btc'] = parseFloat(body['ticker']['quote_volume']).toFixed(8);
         summary['high'] = parseFloat(body['ticker']['high']).toFixed(8);
         summary['low'] = parseFloat(body['ticker']['low']).toFixed(8);
         summary['last'] = parseFloat(body['ticker']['last']).toFixed(8);
@@ -93,16 +93,43 @@ function get_orders(coin, exchange, cb) {
   });
 }
 
+function get_chartdata(coin, exchange, cb) { 
+  var end = Date.now();
+  end = end / 1000;
+  start = end - 86400;
+  var req_url = base_url + 'k/?market=' + coin.toLowerCase() + "" + exchange.toLowerCase() + '&time_from=' + start + '&time_to=' + end + '&period=1';
+  request({uri: req_url, json: true}, function (error, response, chartdata) {
+    if (error) {
+      return cb(error, []);
+    } else {
+      if (chartdata.error == null) {
+        var processed = [];
+        for (var i = 0; i < chartdata.length; i++) {
+          processed.push([chartdata[i][0] * 1000, parseFloat(chartdata[i][1]), parseFloat(chartdata[i][2]), parseFloat(chartdata[i][3]), parseFloat(chartdata[i][4])]);
+          if (i == chartdata.length - 1) {
+            return cb(null, processed);
+          }
+        }
+      } else {
+        return cb(chartdata.error, []);
+      }
+    }
+  });
+}
+
 module.exports = {
   get_data: function(coin, exchange, cb) {
     var error = null;
-    get_orders(coin, exchange, function(err, buys, sells) {
-      if (err) { error = err; }
-      get_trades(coin, exchange, function(err, trades) {
+    get_chartdata(coin, exchange, function (err, chartdata){
+      if (err) { chartdata = []; error = err; }
+      get_orders(coin, exchange, function(err, buys, sells) {
         if (err) { error = err; }
-        get_summary(coin, exchange, function(err, stats) {
+        get_trades(coin, exchange, function(err, trades) {
           if (err) { error = err; }
-          return cb(error, {buys: buys, sells: sells, chartdata: [], trades: trades, stats: stats});
+          get_summary(coin, exchange, function(err, stats) {
+            if (err) { error = err; }
+            return cb(error, {buys: buys, sells: sells, chartdata: chartdata, trades: trades, stats: stats});
+          });
         });
       });
     });

lib/settings.js

@@ -15,6 +15,7 @@ exports.address = "explorer.example.com";
 
 // logo
 exports.logo = "/images/logo.png";
+exports.headerlogo = false;
 
 
 //The app favicon fully specified url, visible e.g. in the browser window
@@ -68,7 +69,9 @@ exports.display = {
   "search": true,
   "richlist": true,
   "movement": true,
-  "network": true
+  "network": true,
+  "navbar_dark": false,
+  "navbar_light": false
 };
 
 

models/peers.js

@@ -7,7 +7,8 @@ var PeersSchema = new Schema({
   port: { type: String, default: "" },
   protocol: { type: String, default: "" },
   version: { type: String, default: "" },
-  country: { type: String, default: "" }
+  country: { type: String, default: "" },
+  country_code: { type: String, default: "" }
 });
 
 module.exports = mongoose.model('Peers', PeersSchema);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "explorer",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "private": true,
   "scripts": {
     "start": "node --stack-size=10000 ./bin/cluster",

public/stylesheets/style.css

@@ -4,6 +4,44 @@ body {
  /* background-image: url('/images/background2.png');*/
 }
 
+.navbar {
+	padding: 0.2rem 0.4rem;
+}
+
+.footer p {
+    margin-top: 0.1rem;
+    margin-bottom: 0.1rem;
+}
+
+.footer .nav-link {
+    padding: 0.1rem 0.1rem;
+}
+
+.footer label {
+    margin-bottom: 0.1rem;
+}
+
+.footer .poweredby {
+    margin-right: 0.2rem;
+    font-size: 80%;
+}
+
+.footer .social-link {
+    margin-right: 0.2rem;
+    font-size: 100%;
+}
+
+.footer .social-link img{
+	width: 40px;
+	margin: 5px 5px;
+}
+
+.footer-logo {
+	height: 40px;
+	position: absolute;
+	bottom: 0px;
+}
+
 #index-search {
 	width: 80%;
 }
@@ -46,6 +84,16 @@ body {
  margin-bottom: 5px;
 }
 
+p {
+    margin-top: 0.4rem;
+    margin-bottom: 0.4rem;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+	margin-bottom: 0.2rem;
+	margin-top: 0.5rem;
+}
+
 /* datatable tweaks */
 table {
 	width: 100% !important;
@@ -96,9 +144,6 @@ tr {
 	margin-left:5px;
 }
 
-#twitter-icon {
-	font-size: 20px;
-}
 .connections {
 	position: absolute;
 	bottom: 15px;
@@ -109,11 +154,6 @@ tr {
 	margin-right: 10px;
 }
 
-#twitter-icon img{
-	width: 40px;
-	margin: 5px 5px;
-}
-
 #market_menu {
 	margin-bottom: 5px;
 }
@@ -165,12 +205,6 @@ tr {
 	right: 15px;*/
 }
 
-.footer-logo {
-	height: 40px;
-	position: absolute;
-	bottom: 0px;
-}
-
 
 .decimal {
 	font-size: 0.7em;

public/themes/Cerulean/_bootswatch.scss

@@ -0,0 +1,103 @@
+// Cerulean 4.5.0
+// Bootswatch
+
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
+}
+
+$text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !default;
+
+// Navbar ======================================================================
+
+.bg-primary {
+  @include btn-shadow($primary);
+}
+
+.bg-dark {
+  @include btn-shadow($blue);
+}
+
+.bg-light {
+  @include gradient-y-three-colors(lighten($gray-200, 8%), $gray-200, 60%, darken($gray-200, 2%));
+}
+
+.navbar-brand,
+.nav-link {
+  text-shadow: $text-shadow
+}
+
+// Buttons =====================================================================
+
+.btn {
+  text-shadow: $text-shadow
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+  color: $gray-700;
+}
+
+.btn-success {
+  @include btn-shadow($success);
+}
+
+.btn-info {
+  @include btn-shadow($info);
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+}
+
+.btn-light {
+  @include btn-shadow($light);
+}
+
+.btn-dark {
+  @include btn-shadow($dark);
+}
+
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-dark {
+  h1, h2, h3, h4, h5, h6 {
+    color: $white;
+  }
+}
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  .dropdown-header {
+    color: $gray-600;
+  }
+}
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

public/themes/Cerulean/_variables.scss

@@ -0,0 +1,57 @@
+// Cerulean 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #033C73 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #C71C22 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #DD5600 !default;
+$green:   #73A839 !default;
+$teal:    #20c997 !default;
+$cyan:    #2FA4E7 !default;
+
+$primary:       $cyan !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $blue !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+$headings-color:         $cyan !default;
+
+// Dropdowns
+
+$dropdown-link-color:            $body-color !default;
+$dropdown-link-hover-color:      $white !default;
+$dropdown-link-hover-bg:         $primary !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.8) !default;
+$navbar-dark-hover-color:           $white !default;