Merge pull request #205 from identity-research-lab/breadcrumbs

Add breadcrumbs.
identity-research-lab · Dec 10, 2024 · 3548529 · 3548529
2 parents 14e33bc + 1241a05
commit 3548529
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 18 deletions.
diff --git a/app/assets/stylesheets/styles.css b/app/assets/stylesheets/styles.css
@@ -169,13 +169,13 @@ ul,
 
  h2 {
    font-family: var(--font-header);
-   margin: 2rem 0rem;
+   margin: 2rem 0rem 0rem 0rem;
  }
 
  h3 {
    font-family: var(--font-header);
    font-size: 1.25rem;
-   margin-top: 1.25rem;
+   margin: 1rem 0rem 0rem 0rem;
  }
 
  h3 a {
@@ -580,6 +580,34 @@ input[type="email"] {
 	  100% { opacity:0; }
   }
 
+  ul.breadcrumbs {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    list-style: none;
+    margin: -2rem 0 0rem 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  ul.breadcrumbs li {
+    margin-right: .25rem;
+    font-size: 0.75rem;
+  } 
+
+  ul.breadcrumbs li a {
+     color: var(--color-medium-black);
+     padding: 0;
+     text-decoration: none;
+   }
+
+  ul.breadcrumbs li a:focus,
+  ul.breadcrumbs li a:hover {
+     color: var(--color-black);
+     text-decoration: underline;
+     text-decoration-color: var(--color-medium-black);
+   }
+
   .code {
     margin: 2rem;
     min-height: 8rem;

diff --git a/app/views/cases/index.html.erb b/app/views/cases/index.html.erb
@@ -1,8 +1,10 @@
 <%- title "Cases" %>
 
-<h1>
-  Explore <%= pluralize @cases.size, "Case" %>.
-</h1>
+<h1>Explore <%= pluralize @cases.size, "Case" %>.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li>Cases</li>
+</ul>
 
 <% if @cases.any? %>
   <p>Add more cases by <%= link_to "uploading a data file", new_case_path %>.</p>

diff --git a/app/views/cases/new.html.erb b/app/views/cases/new.html.erb
@@ -1,6 +1,11 @@
 <%- title "Upload" %>
 
 <h1>Upload a Data File.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Cases", cases_path %> /</li>
+  <li>Upload</li>
+</ul>
 
 <div class="two-column">
 

diff --git a/app/views/cases/show.html.erb b/app/views/cases/show.html.erb
@@ -1,6 +1,11 @@
 <%- title "Case #{@kase.identifier}" %>
 
 <h1>Case <%= @kase.identifier %>.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Cases", cases_path %> /</li>
+  <li><%= @kase.identifier %></li>
+</ul>
 
 <% if @previous_case %>
   <%= link_to "<", case_path(@previous_case), class: "flip", id: "flip-left" %>

diff --git a/app/views/categories/new.html.erb b/app/views/categories/new.html.erb
@@ -1,6 +1,11 @@
 <%- title "New Categpory" %>
 
 <h1>Add a Category</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Categories", contexts_path %> /</li>
+  <li>New</li>
+</ul>
 
 <div class="two-column">
 

diff --git a/app/views/categories/show.html.erb b/app/views/categories/show.html.erb
@@ -1,6 +1,11 @@
-<%- title "Categories" %>
+<%- title "Categories: #{@category.name}" %>
 
 <h1>Category: "<%= @category.name %>"</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Categories", contexts_path %> /</li>
+  <li><%= @category.name %></li>
+</ul>
 
 <% if @previous_category_id %>
   <%= link_to "<", context_category_path(context_id: @context.id, id: @previous_category_id), class: "flip", id: "flip-left" %>
@@ -11,8 +16,6 @@
 
 <%= render partial: "form", locals: { category: @category, context: @context, success: nil, update_kind: nil } %>
 
-<p>When you're done, you can <%= link_to "explore more #{@context.display_name} categories", context_path(id: @context.id) %>.</p>
-
 <% if @category.id.present? %>
   <h2>Codes</h2>
   <p>Codes associated with this category are are highlighted in black below. Click to add or remove a code from this category. Changes are saved automatically.</p>

diff --git a/app/views/codebooks/index.html.erb b/app/views/codebooks/index.html.erb
@@ -1,6 +1,10 @@
 <%- title "Codebook" %>
 
 <h1>Explore Codebooks.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li>Codebooks</li>
+</ul>
 
 <ul class="list">
   <% @questions.each do |question| %>

diff --git a/app/views/codebooks/show.html.erb b/app/views/codebooks/show.html.erb
@@ -1,6 +1,12 @@
 <%- title "#{@section_name} Codebook" %>
 
 <h1>"<%= @section_name %>" Codebook.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Codebooks", codebooks_path %> /</li>
+  <li><%= @section_name %></li>
+</ul>
+
 <p>You can also <%= link_to "view all responses", question_path(@question.id) %> to this question.</p>
 
 <% if @previous_section %>

diff --git a/app/views/contexts/index.html.erb b/app/views/contexts/index.html.erb
@@ -1,6 +1,10 @@
 <%- title "Categories" %>
 
 <h1>Explore Categories.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li>Categories</li>
+</ul>
 
 <ul class="list">
   <% @contexts.each do |context| %>

diff --git a/app/views/contexts/show.html.erb b/app/views/contexts/show.html.erb
@@ -1,7 +1,5 @@
 <%- title "#{@context.display_name} Categories" %>
 
-<h1>"<%= @context.display_name %>" Categories.</h1>
-
 <% if @previous_context_id %>
   <%= link_to "<", context_path(id: @previous_context_id), class: "flip", id: "flip-left" %>
 <% end %>
@@ -10,8 +8,14 @@
 <% end %>
 
 <% if @isEditMode %>
-  <p>When you're done, you can <%= link_to "go back to categories and codes", context_path(id: @context.id) %> or <%= link_to "move on to themes", themes_path %>.</p>
-
+  <h1>Manage "<%= @context.display_name %>" Categories.</h1>
+  <ul class="breadcrumbs">
+    <li><a href="/">Home</a> /</li>
+    <li><%= link_to "Categories", contexts_path %> /</li>
+    <li><%= link_to @context.display_name, context_path(@context) %> /</li>
+    <li>Manage</li>
+  </ul>
+
   <h2>Select a Category to Edit:</h2>
   <div class="tag-collection">
     <% @categories.each do |category| %>
@@ -24,16 +28,21 @@
     <% end %>
   </div>
 <% else %>
-  <p>You can <%= link_to "explore more categories", contexts_path %> or <%= link_to "move on to themes", themes_path %>.</p>
-
+  <h1>"<%= @context.display_name %>" Categories.</h1>
+  <ul class="breadcrumbs">
+    <li><a href="/">Home</a> /</li>
+    <li><%= link_to "Categories", contexts_path %> /</li>
+    <li><%= @context.display_name %></li>
+  </ul>
+
   <h2>Select Categories to Compare:</h2>
   <div class="tag-collection">
     <div class="tag zoom-link-light category" onclick="filterBy('uncategorized');" id="category-uncategorized" data-category="uncategorized">Uncategorized Codes</div>
     <% @categories.each do |category| %>
       <div class="tag zoom-link-light category" onclick="filterBy('<%= category.id %>');" id="category-<%= category.id %>" data-category="<%= category.id %>"><%= category.name %></div>
     <% end %>
-    <%= link_to context_path(context_id: @context.id, is_edit_mode: "true") do %>
-      <div class="tag-button">Edit Categories</div>
+    <%= link_to context_path(@context, is_edit_mode: "true") do %>
+      <div class="tag-button">Manage Categories</div>
     <% end %>
   </div>
 <% end %>

diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
@@ -1,6 +1,13 @@
 <%- title "Participant Survey Responses to #{@question.label} Question" %>
 
 <h1><%= @responses.count %> Participant Survey Responses to "<%= @question.label %>".</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Cases", cases_path %> /</li>
+  <li>Responses /</li>
+  <li><%= @question.label %></li>
+</ul>
+
 <p>These are the responses provided by participants to the "<%= @question.label %>" question. Blank responses are not listed here. Click on a code to show all survey participant responses related to that code. You may select multiple codes to further filter the responses.</p>
 
 <p>For a complete list of codes for this question, refer to the <%= link_to "codebook.", codebook_path(@question.id), class: "jump-link" %></p>

diff --git a/app/views/static/about.html.erb b/app/views/static/about.html.erb
@@ -1,6 +1,10 @@
 <%- title "About" %>
 
 <h1>About TMI-Web.</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li>About</li>
+</ul>
 
 <h2>Finding connections: tens of thousands of interconnected data points.</h2>
 <p>For detailed statistics related to your data in TMI-Web, including sentiment analysis and word frequencies, see the <%= link_to "statistics page", statistics_path %>.</p>

diff --git a/app/views/statistics/index.html.erb b/app/views/statistics/index.html.erb
@@ -3,6 +3,11 @@
 <h1>
   Statistics.
 </h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "About", about_path %> /</li>
+  <li>Statistics</li>
+</ul>
 
 <h2>Overall identity reflection sentiment:</h2>
 <ul>

diff --git a/app/views/themes/index.html.erb b/app/views/themes/index.html.erb
@@ -1,7 +1,12 @@
 <%- title "Themes" %>
 
 <h1>Explore Themes.</h1>
-<div class="tag-collection">
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li>Themes</li>
+</ul>
+
+<div class="tag-collection" style="margin-top: 1rem;">
   <% @themes.each do |theme| %>
       <%= link_to theme_path(theme.id) do %>
         <div class="tag zoom-link-light"><%= theme.name %></div>

diff --git a/app/views/themes/new.html.erb b/app/views/themes/new.html.erb
@@ -1,6 +1,11 @@
 <%- title "New Theme" %>
 
 <h1>Add a Theme</h1>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Themes", themes_path %> /</li>
+  <li>New</li>
+</ul>
 
 <%= form_with model: @theme do |f| %>
   <fieldset>

diff --git a/app/views/themes/show.html.erb b/app/views/themes/show.html.erb
@@ -1,7 +1,11 @@
 <%- title "Themes" %>
 
 <h1>"<%= @theme.name %>" Theme.</h1>
-<p><%= link_to "More themes.", themes_path %></p>
+<ul class="breadcrumbs">
+  <li><a href="/">Home</a> /</li>
+  <li><%= link_to "Themes", themes_path %> /</li>
+  <li><%= @theme.name %></li>
+</ul>
 
 <% if @previous_theme_id %>
   <%= link_to "<", theme_path(id: @previous_theme_id), class: "flip", id: "flip-left" %>