cheshire137 / competiwatch

Web app to track and visualize your competitive match history in Overwatch.
MIT License
17 stars 4 forks source link

Improve main navigation links #93

Open cheshire137 opened 6 years ago

cheshire137 commented 6 years ago

Matches/Trends/Profile alternate which account they're linking to. On most pages, it links to your default account. If you're viewing one of your other linked accounts, it links to that one. If you're viewing someone else's shared matches, it links to them.

The Community link always links to the same page, it doesn't change based on the active account.

connorshea commented 6 years ago

I tried messing around with this and ended up with this diff which moves the Community button up to the main header:

diff --git a/app/views/layouts/_main_nav.html.erb b/app/views/layouts/_main_nav.html.erb
index 323359f..2343aec 100644
--- a/app/views/layouts/_main_nav.html.erb
+++ b/app/views/layouts/_main_nav.html.erb
@@ -16,12 +16,6 @@
         <% if current_battletag_param %>
           <a class="UnderlineNav-item <%= 'selected' if is_profile_page? %>" role="tab" href="<%= profile_path(current_battletag_param) %>">Profile</a>
         <% end %>
-
-        <% if signed_in? %>
-          <a href="<%= community_path %>" role="tab" class="UnderlineNav-item <%= 'selected' if is_page?('community', 'index') %>">
-            Community
-          </a>
-        <% end %>
       <% elsif show_back_link? %>
         <a href="<%= matches_path(current_season_number, current_account) %>" class="UnderlineNav-item" role="tab">&larr; Back to your matches</a>
       <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 83a373c..ee2bdcc 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -26,6 +26,13 @@
               </span>
             <% end %>
           </h1>
+
+          <% if signed_in? %>
+            <a href="<%= community_path %>" class="main-nav-link <%= 'selected' if is_page?('community', 'index') %>">
+              Community
+            </a>
+          <% end %>
+
           <% if !signed_in? && !is_page?('login', 'index') %>
             <a class="main-nav-link" href="<%= user_bnet_omniauth_authorize_path %>">Log in with Battle.net</a>
           <% end %>

The problem with this is that there's no easy way to make it obvious that the user is on the Community page when they're on it (we could make it bold but I don't think that's particularly obvious?). I tried adding the bottom border but in order to get that to work I had to refactor the header completely, which I gave up on half-way through. It also remains hidden when the user isn't logged in.

Also, it doesn't really take mobile into consideration.

Screenshots:

screen shot 2018-03-31 at 1 50 29 pm screen shot 2018-03-31 at 1 50 34 pm
cheshire137 commented 6 years ago

Thanks for the experimentation! I'm less concerned about where the links are (in the white area versus up in the blue) and what they are. They need rethinking so it's clear whatever you click on if you're going to visit your matches + trends + profile versus someone else's because you happened to have clicked someone's name on the Community page, or gone to a link your friend shared to view their season, etc.