bootstrap 4 adjustments for bootstrap 3 code.

5 files changed, 68 insertions, 49 deletions

diff --git a/.gitignore b/.gitignore
index 8af5a7cc..762061b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,5 @@ pt/
 
 __pycache__
 *.pyc
+
+node_modules
diff --git a/common/footer.j2.inc b/common/footer.j2.inc
index b35cf373..67a40658 100644
--- a/common/footer.j2.inc
+++ b/common/footer.j2.inc
@@ -1,22 +1,22 @@
-<footer>
+<footer id="footer">
   <div class="container-fluid cushion-below">
     <div class="container">
       <div class="row">
-        <div class="col-xs-12 col-sm-4">
+        <div class="col-12 col-sm-4">
           <ul class="footer-list">
             <li><p><a href="about.html">{{ _("About") }}</a></p></li>
             <li><p><a href="contact.html">{{ _("Contact") }}</a></p></li>
             <li><p><a href="investors.html">{{ _("For Investors") }}</a></p></li>
           </ul>
         </div>
-        <div class="col-xs-12 col-sm-4">
+        <div class="col-12 col-sm-4">
           <ul class="footer-list">
             <li><p><a href="citizens.html">{{ _("Citizens")}} </a></p></li>
             <li><p><a href="merchants.html">{{ _("Merchants") }}</a></p></li>
             <li><p><a href="governments.html">{{ _("Governments") }} </a></p></li>
           </ul>
         </div>
-        <div class="col-xs-12 col-sm-4">
+        <div class="col-12 col-sm-4">
           <ul class="footer-list">
             <li><p><a href="developers.html">{{ _("Developer Resources") }}</a></p></li>
             <li><p><a href="faq.html">{{ _("FAQ") }}</a></p></li>
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index 26a16740..26f4bd9b 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -1,51 +1,54 @@
-<nav class="navbar navbar-inverse">
+<nav class="navbar navbar-toggleable navbar-toggleable-md navbar-expand-md navbar-inverse navbar-dark" style="background-color: black; border-radius: 0px;"> <!-- bg-dark -->
   <div class="container-fluid">
-    <ul class="nav navbar-nav">
-      <li class="{{ 'active' if filename == 'index.html' else '' }}"><a class="taler_home" href="index.html">Taler</a></li>
-      <li class="{{ 'active' if filename == 'citizens.html' else '' }}"><a href="citizens.html">{{ _("Citizens") }} </a></li>
-      <li class="{{ 'active' if filename == 'merchants.html' else '' }}"><a href="merchants.html">{{ _("Merchants") }} </a></li>
-      <li class="{{ 'active' if filename == 'governments.html' else '' }}"><a href="governments.html">{{ _("Governments") }}</a></li>
-      <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ _("Resources") }} <span class="caret"></span></a>
+    <button class="navbar-toggler navbar-toggler-right"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarMain"
+            aria-controls="navbarMain"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarMain">
+    <ul class="navbar-nav mr-auto">
+      <li class="{{ 'active' if filename == 'index.html' else '' }}"><a class="navbar-brand taler_home" href="index.html">Taler</a></li>
+      <li class="nav-item {{ 'active' if filename == 'citizens.html' else '' }}"><a class="nav-link" href="citizens.html">{{ _("Citizens") }} </a></li>
+      <li class="nav-item {{ 'active' if filename == 'merchants.html' else '' }}"><a class="nav-link" href="merchants.html">{{ _("Merchants") }} </a></li>
+      <li class="nav-item {{ 'active' if filename == 'governments.html' else '' }}"><a class="nav-link" href="governments.html">{{ _("Governments") }}</a></li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ _("Resources") }}</a>
         <ul class="dropdown-menu">
-          <li><a href="architecture.html">{{ _("System Architecture") }}</a></li>
-          <li><a href="faq.html">{{ _("FAQ") }}</a></li>
-          <li><a href="glossary.html">{{ _("Glossary") }}</a></li>
-          <li><a href="developers.html">{{ _("Developer Introduction") }} </a></li>
-          <li><a href="copyright.html">{{ _("Copyright for Contributors") }} </a></li>
-          <li><a href="bibliography.html">{{ _("Bibliography") }}</a></li>
-          <li><a href="gsoc-codeless.html">{{ _("Gsoc 2018: Codeless Payments") }}</a></li>
+          <li><a class="dropdown-item" href="architecture.html">{{ _("System Architecture") }}</a></li>
+          <li><a class="dropdown-item" href="faq.html">{{ _("FAQ") }}</a></li>
+          <li><a class="dropdown-item" href="glossary.html">{{ _("Glossary") }}</a></li>
+          <li><a class="dropdown-item" href="developers.html">{{ _("Developer Introduction") }} </a></li>
+          <li><a class="dropdown-item" href="copyright.html">{{ _("Copyright for Contributors") }} </a></li>
+          <li><a class="dropdown-item" href="bibliography.html">{{ _("Bibliography") }}</a></li>
+          <li><a class="dropdown-item" href="gsoc-codeless.html">{{ _("Gsoc 2018: Codeless Payments") }}</a></li>
         </ul>
       </li>
     </ul>
-    <ul class="nav navbar-right">
-      <li>
-        <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <img  src="{{ url('images/languageicon.svg') }}" height="35" alt="[{{lang}}]" /> {{ lang_full }} [{{ lang }}]
-          <span class="caret"></span>
+    <ul class="navbar-nav navbar-right">
+      <li class="nav-item dropdown">
+        <button class="btn btn-dark dropdown-toggle"
+                type="button"
+                id="dropdownMenu1"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="true">
+                <img src="{{ url('images/languageicon.svg') }}"
+                     height="35"
+                     alt="[{{lang}}]" />
+                     {{ lang_full }} [{{ lang }}]
         </button>
-        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-          <li>
-           <a href="{{ self_localized('en') }}">English [en]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('de') }}">Deutsch [de]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('fr') }}">Français [fr]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('it') }}">Italiano [it]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('es') }}">Español [es]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('pt') }}">Português [pt]</a>
-          </li>
-          <li>
-           <a href="{{ self_localized('ru') }}">Ру́сский язы́к [ru]</a>
-          </li>
+        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
+          <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
+          <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
         </ul>
       </li>
     </ul>
diff --git a/merchants.html.j2 b/merchants.html.j2
index 687e5164..fff24bf3 100644
--- a/merchants.html.j2
+++ b/merchants.html.j2
@@ -175,8 +175,12 @@
       </ul>
     </p>
  </div>
-  <div class="col-lg-6">
-    <img src="{{ svg_localized('images/backend') }}" alt="{{ _("customer perspective")}}" style="float: right; margin: 5px 5px 5px 5px;" width="100%">
-  </div>
+ <!-- 
+   FIXME: When we wrap this img in a div of class col,
+   FIXME: the image ends up overlaping the footer.
+ -->
+ <img src="{{ svg_localized('images/backend') }}"
+      alt="{{ _("customer perspective")}}"
+      class="img-fluid">
 </div> <!-- /container -->
 {% endblock body_content %}
diff --git a/styles.css b/styles.css
index 4f2a806b..7664838f 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,16 @@ html {
 	overflow-y: scroll;
 }
 
+ul nav {
+    background-color: rgb(8,8,8);
+    border-radius: 0px;
+}
+
+a nav active {
+    background-color: black;
+    color: white;
+}
+
 .c_acronym {
   background-color: #A5C663;
 }