Improve the alignment of the navigation bar links

[simransia]

The "store" and the "donate" buttons on the navbar are not looking good as they are having unequal widths and are not aligned well on the navbar. Along with that, the "About us" link on the navigation bar is aligned more towards the right which is also not looking good. Secondly, it should be changed from "About us" to "About Us"

So, I want to make the store and donate buttons align to the right and also want to make their widths equal. And I also want to make the margin-left of the "About us" link equal to the margin-left of other navigation links.

BEFORE:

AFTER:

Video for showing responsiveness:

https://user-images.githubusercontent.com/88017902/163152820-f6f36645-8038-475f-b98c-714c0bc623ff.mp4

[simransia]

Hello @TildaDares , should I work on this issue and make a pull request?

Please let me know. Thank You!

[TildaDares]

Hmmm I’m not sure 🤔. I like the way all of the nav links related to the public Lab community and the content related to the user are separate.

[simransia]

Yes @TildaDares, I can understand. But I want you to know that I wish to make very few adjustments in the code. You can view the modifications which I want to make by looking at the code below:

Modification 1:

Location: app/views/layouts/_header.html.erb

@@ -79,7 +79,7 @@
           </div>
         </li>
 
-        <li class="nav-item dropdown" style="min-width:80px;">
+        <li class="nav-item dropdown" style="min-width:80px; margin-left:-25px;">
           <div class="nav-link" data-toggle="dropdown" onclick="location.href='#'">
             <!-- <a > -->
             <%= t('layout._header.about.about_title') %>
              <!-- </a> -->
            </div>
         </li>
+     </ul>
 
-        <li class="nav-item d-sm-none d-lg-inline" style="padding:0 10px;">
+     <ul class="navbar-nav ml-auto">
+        <li class="nav-item d-sm-none d-lg-inline" style="padding:0 10px; width:90px;">
           <a class="nav-link btn btn-outline-secondary" target="_blank" href="//store.publiclab.org"><%= t('layout._header.store') %></
a>
         </li>
-        <li class="nav-item d-sm-none d-lg-inline" style="padding:0 10px;">
+        <li class="nav-item d-sm-none d-lg-inline" style="padding:0 10px; width:90px;">
           <a class="nav-link btn btn-outline-secondary" href="/donate"><%= t('layout._header.donate') %></a>
         </li>
 
         <!-- end navbar feature -->

      </ul>

Modification 2:

Location: config/locales/en.yml

@@ -725,7 +725,7 @@ en:
         spectral_workbench: "Spectral Workbench"
         code_community: "Code Community"
       about:
-        about_title: "About us"
+        about_title: "About Us"
         stories: "Stories"
         blog: "Blog"
         about_public_lab: "About Public Lab"

I think this will not break the code flow and all the features will still work as before.

[TildaDares]

@simransia I’m not worried about code breaking. I just don’t see how Store and Donate relate to Dashboard.

[simransia]

Ok @TildaDares , I got it. Then I will not align the Store and donate buttons to the right, which will keep the public lab's community links and the content related to the user separated. I will only make the width of both the buttons equal and modify the "About us" link's margin-left and spelling.

Then the navigation bar will look like this:

Can I now create a pull request after applying the mentioned changes?

[TildaDares]

Sounds like a great idea @simransia. Thanks!

[cesswairimu]

solved in https://github.com/publiclab/plots2/pull/11053