UI changes and language dropdown

dogecoin · May 3, 2021 · af31658 · af31658
1 parent 6263a47
commit af31658
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,7 @@ site/_site/
 coverage
 .ruby-version
 .sass-cache
+/.idea/.gitignore
+/.idea/dogecoin.com.iml
+/.idea/modules.xml
+/.idea/vcs.xml
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -199,7 +199,21 @@ h1, h2, h3, h4, h5, h6,
   line-height: 3rem;  
   color: #1abc9c; 
   opacity: 1; 
-} 
+}
+.img-holder {
+  margin-top: -100px;
+}
+.portfolio-img{
+  max-width: 150px;
+}
+@media (max-width: 767px) {
+  .porfolio-col {
+    margin-bottom: 100px !important;
+  }
+  .porfolio-col:last-child {
+    margin-bottom: 0px !important;
+  }
+}
 .floating-label-form-group {  
   position: relative; 
   border-bottom: 1px solid #e9ecef; 
@@ -417,6 +431,11 @@ button.bg-primary:focus {
 .footer {
   background-color: #1e4151;
 }
+.select-lang, .select-lang:focus {
+  background-color: #1f4150;
+  border: 1px solid #f8f9fa;
+  color: #ffffff;
+}
 .video-container {
     position: relative;
     padding-bottom: 56.25%;

diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -227,14 +227,16 @@ $(document).ready(function(){
 
   enablei18n(false);
   initParticles();
-
+
+  //set language on languages dropdown
+  $('.select-lang').val($.i18n()['locale']);
 
   $(document).on("click", ".wallet-button", function(){
     $(".wallet-guide-detail").hide();
     $($(this).attr('data-target')).fadeIn();
   });
-  $(document).on('click', '.select-lang', function(){
-    enablei18n($(this).attr('data-lang'));
+  $(document).on('change', '.select-lang', function(){
+    enablei18n($(this).val());
     $(".scroll-to-top a").trigger('click');
   });
 });

diff --git a/guide.html b/guide.html
@@ -66,16 +66,16 @@
         <div class="container d-flex align-items-center flex-column">
             <div class="row">
                 <div class="col-md-12">
-                    <img class="masthead-avatar mb-1" style="margin-top:-3rem;" src="assets/img/doge.png" alt="" />
+                    <img class="masthead-avatar mb-5" style="margin-top:-3rem;" src="assets/img/doge.png" alt="" />
                     <!-- Masthead Subheading-->
                     <p class="masthead-subheading font-weight-light text-secondary mb-0"><span data-i18n="dgc-getting-started-desc">Getting started with Dogecoin</span> <span data-i18n="dgc-getting-started-is-123">is easy as 1, 2, 3</span></p>
-                    <p data-i18n="dgc-getting-started-choose" class="text-secondary">Please choose your operating system to begin</p>
-                    <div class="btn-holder">
-                     <div class="btn btn-md btn-info wallet-button" data-target="#windows"><span class="fab fa-windows"></span> Windows</div>
-                     <div class="btn btn-md btn-success wallet-button" data-target="#linux"><span class="fab fa-linux"></span> Linux</div>
-                     <div class="btn btn-md btn-secondary wallet-button" data-target="#osx"><span class="fab fa-apple"></span> macOS</div>
-                     <div class="btn btn-md btn-danger wallet-button" data-target="#android"><span class="fab fa-android"></span> Android</div>
-                 </div>
+                    <p data-i18n="dgc-getting-started-choose" class="text-secondary mb-5">Please choose your operating system to begin</p>
+                    <div class="btn-holder d-flex">
+                        <div class="btn btn-md btn-info wallet-button w-100 mr-1" data-target="#windows"><span class="fab fa-windows d-block"></span> Windows</div>
+                        <div class="btn btn-md btn-success wallet-button w-100 mr-1" data-target="#linux"><span class="fab fa-linux d-block"></span> Linux</div>
+                        <div class="btn btn-md btn-secondary wallet-button w-100 mr-1" data-target="#osx"><span class="fab fa-apple d-block"></span> macOS</div>
+                        <div class="btn btn-md btn-danger wallet-button w-100" data-target="#android"><span class="fab fa-android d-block"></span> Android</div>
+                    </div>
              </div>
          </div>
      </div>
@@ -387,12 +387,14 @@
                 <a class="btn btn-outline-light btn-social mx-1" target="_blank" href="https://discord.gg/dogecoin"><i class="fab fa-fw fa-discord"></i></a>
             </div>
             <!-- Footer About Text-->
-            <div class="col-lg-4">
-                <p class="lead" data-i18n="dgc-language">Language</p>
-                <a class="text-white select-lang" style="cursor: pointer;" data-lang="en">English</a><br>
-                <a class="text-white select-lang" style="cursor: pointer;" data-lang="de">Deutsch</a><br>
-                <a class="text-white select-lang" style="cursor: pointer;" data-lang="fr">Français</a><br>
-                <a class="text-white select-lang" style="cursor: pointer;" data-lang="es">Español</a><br>
+            <div class="col-lg-4 d-flex">
+                <p class="lead mt-2" data-i18n="dgc-language">Language</p>
+                <select class="form-control form-control-lg ml-2 select-lang">
+                    <option value="en">English</option>
+                    <option value="de">Deutsch</option>
+                    <option value="fr">Français</option>
+                    <option value="es">Español</option>
+                </select>
             </div>
         </div>
     </div>