From c8de1512c8b3550170ca101c2d8112dae33b26a8 Mon Sep 17 00:00:00 2001 From: mxaddict Date: Fri, 19 Aug 2022 11:30:18 +0800 Subject: [PATCH] Enabled dormant dark theme, and made it work with the new skin --- assets/css/colors.scss | 3 +- assets/css/darkMode.scss | 112 +++++++++++--------------- assets/css/footer.scss | 30 ------- assets/css/nav-tabs.scss | 4 +- assets/css/progress.scss | 4 +- assets/js/services/DarkMode.js | 49 +++++------ assets/js/services/ExplorerApi.js | 2 +- config/packages/twig.yaml | 2 +- public/images/xnav-logo-border.svg | 14 ++++ src/Controller/HomeController.php | 19 ++++- templates/base.html.twig | 2 +- templates/components/footer.html.twig | 17 ++-- templates/components/header.html.twig | 3 +- 13 files changed, 119 insertions(+), 142 deletions(-) create mode 100644 public/images/xnav-logo-border.svg diff --git a/assets/css/colors.scss b/assets/css/colors.scss index cb7622f..a8b0450 100644 --- a/assets/css/colors.scss +++ b/assets/css/colors.scss @@ -16,4 +16,5 @@ $yellow: #f0c067; $pink: rgb(200, 57, 178); $darkBg: #242424; -$darkText: rgb(95, 72, 173) !important; +$darkText: #d3d3d3 !important; +$darkBorder: #2e2e2e; diff --git a/assets/css/darkMode.scss b/assets/css/darkMode.scss index 0ba2090..28f189a 100644 --- a/assets/css/darkMode.scss +++ b/assets/css/darkMode.scss @@ -1,46 +1,33 @@ -.dark-mode { +.dark-logo { + display: none; +} + +.light-logo { + display: inline-block; +} + +.dark { background-color: $darkBg !important; color: $darkText; - a { - color: $light-blue; - text-decoration: underline; + .dark-logo { + display: inline-block; } - small { - color: inherit; + .light-logo { + display: none; } header { a { text-decoration: none; } + background-color: $darkBg; - .bg-nav { - background-color: $light-black; + h1 { + color: #ffffff; } - - .navbar-dark .navbar-nav { - .nav-link { - color: $darkText; - } - .nav-link:hover { - color: $light-blue !important; - } - } - } - - footer { - background-color: $black; - color: $darkText; - //.network { - color: $light-blue; - ul li a { - color: $light-blue; - text-decoration: underline; - } - //} } .table th, .table td { @@ -63,16 +50,15 @@ } .card-nav { .card-header { - background-color: inherit !important; - padding: 0 5px; + background-color: #292929 !important; } .card-body { border-top: 2px solid #4a3a6f; - background-color: $light-black !important; - border-bottom: 1px solid $light-black; + background-color: #222222 !important; + border-bottom: 1px solid #222222; } .card-footer { - background-color: $light-black !important; + background-color: #222222 !important; } } @@ -91,12 +77,12 @@ .nav-tabs { margin-bottom: -1px; - border: 1px solid $darkBg; + border: 1px solid $darkBorder; background-color: $light-black; } #block-collapse { - border: 1px solid $light-black; + border: 1px solid $darkBorder; background-color: $light-black !important; } @@ -105,46 +91,46 @@ background-color: $light-black !important; } + .progress { + border-color: #8d8d8d; + } + .nav-tabs { - border-top: 5px solid #4a3a6f; - a.active { - color: $darkText; - text-decoration: none !important; - } - a:hover { - color: $darkText; - text-decoration: underline !important; - } - .nav-link { - padding: 1rem; - border-top: 5px solid $light-black !important; - background-color: $light-black !important; - border-right: 1px solid $light-black; - color: $light-blue; - } + a.active { + border-top: 5px solid $purple !important; + pointer-events: none; + } + .nav-item a.nav-link { + background-color: inherit; + border-color: $darkBorder; + color: $darkText; + } - .nav-link:hover { - border-top: 5px solid $darkText !important; - } - } + .nav-item a.nav-link { + :hover { + border-top-color: inherit; + } + } - .progress { - border: 1px solid $light-black; - background-color: $darkBg; + .nav-link:hover { + border-top: 5px solid $purple !important; + color: $purple; + } } + .list-group-item { border-top: 1px solid #4a3a6f; border-bottom: 1px solid #4a3a6f; } .alert, .badge { - color: $darkBg; + color: #f1f1f1; } .alert-info, .alert-success, .alert-danger { - border-color: $darkBg; + border-color: #f1f1f1; } .block-links { @@ -179,7 +165,7 @@ } @media only screen and (max-width: 855px) { - .dark-mode { + .dark { table-striped { tbody tr:nth-of-type(odd) { background-color: $black; @@ -195,4 +181,4 @@ background-color: $light-black; } } -} \ No newline at end of file +} diff --git a/assets/css/footer.scss b/assets/css/footer.scss index 4ce284f..ea0cef8 100644 --- a/assets/css/footer.scss +++ b/assets/css/footer.scss @@ -15,34 +15,4 @@ footer { .network { float: left; } - - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - display: inline-block; - padding-right: 0.2rem; - - a { - color: #FFF; - text-transform: capitalize; - } - - a:hover { - color: #FFF; - text-decoration: underline; - } - - a.active { - pointer-events: none; - color: $white; - } - } - - li:not(:first-child):before { - content: "| "; - } - } } diff --git a/assets/css/nav-tabs.scss b/assets/css/nav-tabs.scss index 8de5e1f..9b38213 100644 --- a/assets/css/nav-tabs.scss +++ b/assets/css/nav-tabs.scss @@ -19,7 +19,7 @@ border-top-left-radius: 0; border-top-right-radius: 0; border: 0; - border-top: 5px solid $light-grey !important; + border-top: 5px solid $light-grey; border-right: 1px solid $dark-grey; padding: 1rem 2rem; } @@ -79,4 +79,4 @@ border: 1px solid $dark-grey; padding: 1rem; } -} \ No newline at end of file +} diff --git a/assets/css/progress.scss b/assets/css/progress.scss index 797804a..c024f92 100644 --- a/assets/css/progress.scss +++ b/assets/css/progress.scss @@ -8,7 +8,7 @@ } .progress-bar { - color: $white; + color: $black; background-color: $mid-grey; .bg-nav { @@ -21,4 +21,4 @@ .progress { background-color: #fff; } -} \ No newline at end of file +} diff --git a/assets/js/services/DarkMode.js b/assets/js/services/DarkMode.js index 33a2bd0..c04882f 100644 --- a/assets/js/services/DarkMode.js +++ b/assets/js/services/DarkMode.js @@ -1,47 +1,38 @@ const $ = require('jquery'); -import Cookies from "js-cookie"; +import axios from "axios"; class DarkMode { constructor() { - this.getDarkMode(); - this.addListener(); }; - getDarkMode() { - let dm = Cookies.get("dm"); - - if (dm == true) { - let body = $("body"); - body.addClass('dark-mode'); - console.info("We are in dark mode"); - } else { - Cookies.set("dm", false); - console.info("We are in light mode"); - } - }; - addListener() { $(function() { - $('.dark-mode-toggle').click(function (event) { + $('#blackhole').click(function (event) { console.log("dark mode clicked"); event.preventDefault(); - let dm = Cookies.get("dm"); - - if (dm == true) { - let body = $("body"); - body.removeClass('dark-mode'); - Cookies.set("dm", false); - } else { - let body = $("body"); - body.addClass('dark-mode'); - Cookies.set("dm", true); - } + // Call the endpoint + axios.post('/dark.json', {}) + .then(function (res) { + if (!res.data.darkmode) { + $('#blackhole svg.darkmode').removeClass('d-none') + $('#blackhole svg.lightmode').addClass('d-none') + $('body').removeClass('dark') + } else { + $('#blackhole svg.darkmode').addClass('d-none') + $('#blackhole svg.lightmode').removeClass('d-none') + $('body').addClass('dark') + } + }) + .catch(function (error) { + console.log(error); + + }); }); }); } } -new DarkMode(); \ No newline at end of file +new DarkMode(); diff --git a/assets/js/services/ExplorerApi.js b/assets/js/services/ExplorerApi.js index b982e4a..19a20c7 100644 --- a/assets/js/services/ExplorerApi.js +++ b/assets/js/services/ExplorerApi.js @@ -61,4 +61,4 @@ class ExplorerApi { } } -export default new ExplorerApi() \ No newline at end of file +export default new ExplorerApi() diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml index b370206..715dc37 100644 --- a/config/packages/twig.yaml +++ b/config/packages/twig.yaml @@ -8,4 +8,4 @@ twig: api: url: '%explorer.api.url%' - exception_controller: null \ No newline at end of file + exception_controller: null diff --git a/public/images/xnav-logo-border.svg b/public/images/xnav-logo-border.svg new file mode 100644 index 0000000..a1d1ddf --- /dev/null +++ b/public/images/xnav-logo-border.svg @@ -0,0 +1,14 @@ + + + + xN + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php index 494e69c..a5a81f0 100644 --- a/src/Controller/HomeController.php +++ b/src/Controller/HomeController.php @@ -42,6 +42,23 @@ public function index(): array ]; } + /** + * @Route("/dark.json") + */ + public function dark(SerializerInterface $serializer): Response + { + // Get an instance of session + $session = $this->get('session'); + // Load current value + // Flip it like a pancake + $darkmode = $session->get('darkmode') ? false : true; + + // Save it to the session + $session->set('darkmode', $darkmode); + + return new Response($serializer->serialize([ 'darkmode' => $darkmode ], 'json')); + } + /** * @Route("/ticker.json") */ @@ -53,7 +70,7 @@ public function ticker(SerializerInterface $serializer, CoinGeckoApi $coinApi, } catch (DistributionException $e) { $supply = ['public' => 0, 'private' => 0]; } - + if ($this->getParameter('navcoin.network') != "mainnet") { $ticker['market_data']['current_price']['btc'] = 0; $ticker['market_data']['current_price']['usd'] = 0; diff --git a/templates/base.html.twig b/templates/base.html.twig index d2a5874..269a7c1 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -16,7 +16,7 @@ - + {% block header %} {% include "components/header.html.twig" %} {% endblock %} diff --git a/templates/components/footer.html.twig b/templates/components/footer.html.twig index ddbc27e..939f3a9 100644 --- a/templates/components/footer.html.twig +++ b/templates/components/footer.html.twig @@ -3,17 +3,14 @@
- -
-
-
    -{#
  • Dark Mode
    • #} -
  • All times displayed in UTC
    • -
+ + + + + Main Net + Test Net
+
All times displayed in UTC
diff --git a/templates/components/header.html.twig b/templates/components/header.html.twig index ef0f1eb..b940dc4 100644 --- a/templates/components/header.html.twig +++ b/templates/components/header.html.twig @@ -4,7 +4,8 @@

- + + NavExplorer