Merge pull request #877 from sul-dlss/additive-link-style

Refactor link style to be additive rather than subtractive
sul-dlss · Dec 7, 2023 · 5f7229d · 5f7229d
2 parents 08311e9 + c67e49b
commit 5f7229d
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 47 deletions.
diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
@@ -29,7 +29,3 @@
 .record-metadata {
   margin-bottom: 2em;
 }
-
-.altmetric-embed a {
-  border-bottom: none;
-}
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -10,7 +10,7 @@ body {
   font-family: 'Source Sans Pro', 'Arial Unicode MS', Helvetica, sans-serif;
 }
 
-a, a:hover, a:focus {
+.su-underline {
 	text-decoration: none;
   border-bottom: 1px dotted $sul-link-color-border;
 }

diff --git a/app/assets/stylesheets/bootstrap-variables.scss b/app/assets/stylesheets/bootstrap-variables.scss
@@ -7,6 +7,7 @@ $body-bg: $sul-body-bg;
 $text-color: $sul-text-color;
 $link-color: $sul-link-color;
 $link-hover-color: $sul-text-color;
+$link-decoration: none;
 
 // Colors
 $gray-light: #737373;

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -11,10 +11,6 @@
 	border: none;
 }
 
-.header-logo > a, h3.panel-title a {
-	border-bottom: none;
-}
-
 #topnav, #search-navbar, #main-container, #sul-footer, #masthead-container {
 	margin: 0 auto;
 	text-align: left;
@@ -32,7 +28,6 @@
 
 a#sul-logo {
 	float: left;
-	border-bottom: none;
 }
 
 @media (min-width: 768px) {

diff --git a/app/assets/stylesheets/modules/buttons.scss b/app/assets/stylesheets/modules/buttons.scss
@@ -1,4 +1,3 @@
 .btn-link, .btn-link:hover, .btn-link:focus {
   color: $sul-link-color;
-  text-decoration: none;
-}
+}
diff --git a/app/assets/stylesheets/modules/feedback-form.scss b/app/assets/stylesheets/modules/feedback-form.scss
@@ -1,8 +1,3 @@
-.btn .btn-link {
-  margin-left: 12px;
-  border-bottom: none;
-}
-
 #feedback-form {
   border-bottom: 3px solid $sul-toolbar-border;
 }

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -10,9 +10,9 @@ def show_feedback_form?
   end
 
   def link_to_purl(druid)
-    link_to PurlResource.find(druid).title, purl_url(druid)
+    link_to PurlResource.find(druid).title, purl_url(druid), class: 'su-underline'
   rescue StandardError
-    link_to druid, purl_url(druid)
+    link_to druid, purl_url(druid), class: 'su-underline'
   end
 
   def oembed_url_template

diff --git a/app/views/errors/unavailable.html.erb b/app/views/errors/unavailable.html.erb
@@ -1,2 +1,2 @@
 <h2>The item you requested is not available.</h2>
-<p>This item is in processing or does not exist. If you believe you have reached this page in error, please send <%= link_to 'Feedback', feedback_path, data: { bs_toggle: 'collapse', bs_target: '#feedback-form' } %>.</p>
+<p>This item is in processing or does not exist. If you believe you have reached this page in error, please send <%= link_to 'Feedback', feedback_path, class: 'su-underline', data: { bs_toggle: 'collapse', bs_target: '#feedback-form' } %>.</p>
diff --git a/app/views/preview/index.html.erb b/app/views/preview/index.html.erb
@@ -32,7 +32,7 @@
   <button class='btn btn-primary btn-lg'>Show me the MODS!</button>
 <% end %>
 <div data-controller='reveal'>
-  <a href="#examples" data-action="reveal#toggle">Examples</a><br>
+  <a href="#examples" data-action="reveal#toggle" class="su-underline">Examples</a><br>
   <div id="examples" style="display:none" data-reveal-target="area">
     <ol>
       <li>

diff --git a/app/views/purl/_access.html.erb b/app/views/purl/_access.html.erb
@@ -22,7 +22,7 @@
 
       <% if license %>
         <dt>License</dt>
-        <dd class="<%= document.license.code %>"><%= link_to_unless document.license.link.blank?, document.license.desc, document.license.link, target: '_blank' %></dd>
+        <dd class="<%= document.license.code %>"><%= link_to_unless document.license.link.blank?, document.license.desc, document.license.link, class: 'su-underline', target: '_blank' %></dd>
       <% end %>
     </dl>
   <% end %>

diff --git a/app/views/purl/_collection.html.erb b/app/views/purl/_collection.html.erb
@@ -4,7 +4,7 @@
       <div class="mb-3">
         <p class="mb-0"><%= collection_document.title %></p>
         <% if collection_document.released_to?('Searchworks') %>
-          <%= link_to('View other items in this collection in SearchWorks', collection_document.collection_items_link) %>
+          <%= link_to('View other items in this collection in SearchWorks', collection_document.collection_items_link, class: 'su-underline') %>
         <% end %>
       </div>
     <% end %>

diff --git a/app/views/purl/_collection_items.html.erb b/app/views/purl/_collection_items.html.erb
@@ -1,5 +1,5 @@
 <% if document.collection? && document.released_to?('Searchworks') %>
   <%= render SectionComponent.new(label: 'Items in collection') do %>
-    <%= link_to 'View items in this collection in SearchWorks', document.collection_items_link %>
+    <%= link_to 'View items in this collection in SearchWorks', document.collection_items_link, class: 'su-underline' %>
   <% end %>
 <% end %>
diff --git a/app/views/purl/_embed.html.erb b/app/views/purl/_embed.html.erb
@@ -3,10 +3,10 @@
     <title>Placeholder</title>
     <rect width="100%" height="100%" fill="#868e96"></rect>
   </svg>
-  <a class="purl-embed-viewer embed" href="<%= embeddable_url(@purl.druid) %>" data-oembed-provider="<%= oembed_provider_url %>">Show Content</a>
+  <a class="purl-embed-viewer embed" href="<%= embeddable_url(@purl.druid) %>" class="su-underline" data-oembed-provider="<%= oembed_provider_url %>">Show Content</a>
 <% end %>
 <noscript>
   <iframe class="embed-iframe" seamless src="<%= iframe_url(@purl.druid) %>">
-    <a href="<%= iframe_url(@purl.druid) %>">Show Content</a>
+    <a href="<%= iframe_url(@purl.druid) %>" class="su-underline">Show Content</a>
   </iframe>
 </noscript>
diff --git a/app/views/purl/_find_it.html.erb b/app/views/purl/_find_it.html.erb
@@ -4,17 +4,17 @@
   <% next if dest[:key] == "Searchworks" && document.catalog_key %>
 
   <% if document.released_to? dest[:key] %>
-    <% releases << link_to(dest[:label], dest[:url] % document.attributes) %>
+    <% releases << link_to(dest[:label], dest[:url] % document.attributes, class: 'su-underline') %>
   <% end %>
   <% if dest[:key] == 'EarthWorks' && document.type == 'geo' %>
-    <% releases << link_to(dest[:label], dest[:url] % document.attributes) %>
+    <% releases << link_to(dest[:label], dest[:url] % document.attributes, class: 'su-underline') %>
   <% end %>
 <% end %>
 
 <% if document.catalog_key || releases.present? %>
   <%= render SectionComponent.new(label: 'Also listed in') do %>
     <% if document.catalog_key %>
-      <%= link_to 'View in SearchWorks', "#{Settings.searchworks.url}/view/#{document.catalog_key}" %>
+      <%= link_to 'View in SearchWorks', "#{Settings.searchworks.url}/view/#{document.catalog_key}", class: 'su-underline' %>
     <% end %>
 
     <%= releases.to_sentence.html_safe %>

diff --git a/app/views/purl/_metrics.html.erb b/app/views/purl/_metrics.html.erb
@@ -13,11 +13,11 @@
     <% end %>
     <p>
       Data collected since 11/20/23.
-      <a href="https://sdr.library.stanford.edu/sdr-metrics">How are these metrics generated?</a>
+      <a href="https://sdr.library.stanford.edu/sdr-metrics" class="su-underline">How are these metrics generated?</a>
     </p>
     <% if document.doi.present? %> 
       <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>    
-      <p><a href="https://help.altmetric.com/support/solutions/articles/6000232837-what-is-altmetric-and-what-does-it-provide-" target='_blank' rel='noopener'>Altmetric</a> tracks online attention to this work. A badge is shown only when online mentions are found.</p>
+      <p><a href="https://help.altmetric.com/support/solutions/articles/6000232837-what-is-altmetric-and-what-does-it-provide-" class="su-underline" target='_blank' rel='noopener'>Altmetric</a> tracks online attention to this work. A badge is shown only when online mentions are found.</p>
       <div class='altmetric-embed' data-badge-type='donut' data-doi="<%= document.doi_id %>" data-badge-popover='right' data-hide-no-mentions='true'></div>
     <% end %>
   <% end %>

diff --git a/app/views/purl/_mods_contributors.html.erb b/app/views/purl/_mods_contributors.html.erb
@@ -12,7 +12,7 @@
                 <% if name.orcid.present? %>                
                   <span class="orcid">
                     <% orcid_url = "https://orcid.org/#{name.orcid}" %>
-                    <a href="<%= orcid_url %>" aria-label="view ORCID page for <%= name.name %>">
+                    <a href="<%= orcid_url %>" class="su-underline" aria-label="view ORCID page for <%= name.name %>">
                       <img alt="ORCiD icon" src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png" width="16" height="16" />
                       <%= orcid_url %>
                     </a> (unverified)

diff --git a/app/views/purl/index.html.erb b/app/views/purl/index.html.erb
@@ -15,8 +15,8 @@
       <div class="card-body">
         <h2 class="h4 card-title">More Information</h2>
         <ul class="list-unstyled">
-          <li><%= link_to "Digital Collections in SearchWorks", "https://searchworks.stanford.edu/catalog?f%5Bcollection_type%5D%5B%5D=Digital+Collection" %></li>
-          <li><%= link_to "SDR Services website", "https://library.stanford.edu/sdr/" %></li>
+          <li><%= link_to "Digital Collections in SearchWorks", "https://searchworks.stanford.edu/catalog?f%5Bcollection_type%5D%5B%5D=Digital+Collection", class: 'su-underline' %></li>
+          <li><%= link_to "SDR Services website", "https://library.stanford.edu/sdr/", class: 'su-underline' %></li>
         </ul>
       </div>
     </div>

diff --git a/app/views/shared/_skip_to_nav.html.erb b/app/views/shared/_skip_to_nav.html.erb
@@ -1,35 +1,35 @@
 <%# For home & search results page %>
 <% if params['controller'] == 'catalog' and params['action'] == 'index' %>
   <div id="skip-link">
-    <a href="#search_field" class="element-invisible element-focusable">Skip to search</a>
-    <a href="#main-container" class="element-invisible element-focusable">Skip to main content</a>
+    <a href="#search_field" class="su-underline element-invisible element-focusable">Skip to search</a>
+    <a href="#main-container" class="su-underline element-invisible element-focusable">Skip to main content</a>
 
     <% if !params['f'].blank? or !params['q'].blank? %>
-      <a href="#documents" class="element-invisible element-focusable">Skip to first result</a>
+      <a href="#documents" class="su-underline element-invisible element-focusable">Skip to first result</a>
     <% end %>
   </div>
 <% end %>
 
 <%# For selections page %>
 <% if params['controller'] == 'bookmarks' and params['action'] == 'index' %>
   <div id="skip-link">
-    <a href="#search_field" class="element-invisible element-focusable">Skip to search</a>
-    <a href="#main-container" class="element-invisible element-focusable">Skip to main content</a>
-    <a href="#documents" class="element-invisible element-focusable">Skip to first result</a>
+    <a href="#search_field" class="su-underline element-invisible element-focusable">Skip to search</a>
+    <a href="#main-container" class="su-underline element-invisible element-focusable">Skip to main content</a>
+    <a href="#documents" class="su-underline element-invisible element-focusable">Skip to first result</a>
   </div>
 <% end %>
 
 <%# For record view page %>
 <% if params['controller'] == 'catalog' and params['action'] == 'show' %>
   <div id="skip-link">
-    <a href="#search_field" class="element-invisible element-focusable">Skip to search</a>
-    <a href="#document" class="element-invisible element-focusable">Skip to main content</a>
+    <a href="#search_field" class="su-underline element-invisible element-focusable">Skip to search</a>
+    <a href="#document" class="su-underline element-invisible element-focusable">Skip to main content</a>
   </div>
 <% end %>
 
 <%# For advanced search page %>
 <% if params['controller'] == 'advanced' and params['action'] == 'index' %>
   <div id="skip-link">
-    <a href="#advanced-search-form" class="element-invisible element-focusable">Skip to advanced search form</a>
+    <a href="#advanced-search-form" class="su-underline element-invisible element-focusable">Skip to advanced search form</a>
   </div>
 <% end %>
diff --git a/app/views/shared/_su_footer.html.erb b/app/views/shared/_su_footer.html.erb
@@ -8,10 +8,10 @@
       </div>
       <div id="sul-footer-links" class="span2">
         <ul>
-          <li><a href="https://library-hours.stanford.edu/libraries">Hours &amp; locations</a></li>
-          <li><a href="https://library.stanford.edu/myaccount">My Account</a></li>
-          <li><a href="https://library.stanford.edu/ask">Ask us</a></li>
-          <li><a href="https://library-status.stanford.edu/">System status</a></li>
+          <li><a href="https://library-hours.stanford.edu/libraries" class="su-underline">Hours &amp; locations</a></li>
+          <li><a href="https://library.stanford.edu/myaccount" class="su-underline">My Account</a></li>
+          <li><a href="https://library.stanford.edu/ask" class="su-underline">Ask us</a></li>
+          <li><a href="https://library-status.stanford.edu/" class="su-underline">System status</a></li>
         </ul>
       </div>
     </div>