Merge pull request #198 from MITLibraries/gdt-246-ios-ol-bug

Fix iOS text wrap bug
MITLibraries · Jun 13, 2024 · f5a2e3c · f5a2e3c
2 parents 03f29ec + 59ff003
commit f5a2e3c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 69 deletions.
diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss
@@ -44,46 +44,50 @@
   padding: 2rem;
   border-top: 1px solid $brand-primary;
   font-size: $fs-small;
+  line-height: 0; /* line height needs to be reset so iOS doesn't act weird */
 
   &::marker {
     font-size: 2.5rem;
-    line-height: 1.1;
     font-weight: $fw-bold;
   }
 
-  .record-title {
-    font-size: 2.5rem;
-    line-height: 1.1;
-  }
-
   &:hover,
   &:focus {
     background-color: $gray-l4;
   }
 
-  a:visited {
-    color: $brand-secondary;
-  }
+  .result-content {
+    line-height: 1.2;
 
-  .pub-info {
-    font-size: $fs-base;
-    color:  $gray-d1;
-    span:first-child:after {
-      content: " | ";
+    .record-title {
+      font-size: 2.5rem;
+      line-height: 1.1;
     }
-    margin: 1em 0;
-  }
 
-  .result-summary {
-    margin-bottom: 2.4em;
-  }
+    a:visited {
+      color: $brand-secondary;
+    }
+
+    .pub-info {
+      font-size: $fs-base;
+      color:  $gray-d1;
+      span:first-child:after {
+        content: " | ";
+      }
+      margin: 1em 0;
+    }
+
+    .result-summary {
+      margin-bottom: 2.4em;
+    }
 
-  .result-highlights {
-    margin-top: 1.4em;
-    ul {
-      list-style: none;
-      li {
-        margin-left: 2rem;
+    .result-highlights {
+      margin-top: 1.4em;
+      ul {
+        list-style: none;
+        li {
+          margin-left: 2rem;
+        }
       }
     }
   }

diff --git a/app/views/search/_result.html.erb b/app/views/search/_result.html.erb
@@ -1,27 +1,29 @@
 <li class="result">
-  <h3 class="record-title">
-    <span class="sr">Title: </span><%= link_to(result['title'], record_path(result['timdexRecordId'])) %>
-  </h3>
+  <div class="result-content">
+    <h3 class="record-title">
+      <span class="sr">Title: </span><%= link_to(result['title'], record_path(result['timdexRecordId'])) %>
+    </h3>
 
-  <p class="pub-info">
-    <span><%= result['contentType']&.each { |type| type['value'] }&.join(' ; ') %></span>
-    <span>
-      <% result['dates']&.each do |date| %>
-        <%= date['value'] if date['kind'] == 'Publication date' %>
-      <% end %>
-    </span>
-  </p>
+    <p class="pub-info">
+      <span><%= result['contentType']&.each { |type| type['value'] }&.join(' ; ') %></span>
+      <span>
+        <% result['dates']&.each do |date| %>
+          <%= date['value'] if date['kind'] == 'Publication date' %>
+        <% end %>
+      </span>
+    </p>
 
-  <span class="sr">Contributors: </span>
-  <ul class="list-inline truncate-list contributors">
-    <%= render partial: 'shared/contributors', locals: { contributors: result['contributors'] } %>
-  </ul>
+    <span class="sr">Contributors: </span>
+    <ul class="list-inline truncate-list contributors">
+      <%= render partial: 'shared/contributors', locals: { contributors: result['contributors'] } %>
+    </ul>
 
-  <div class="result-highlights">
-    <%= render partial: 'search/highlights', locals: { result: result } %>
-  </div>
+    <div class="result-highlights">
+      <%= render partial: 'search/highlights', locals: { result: result } %>
+    </div>
 
-  <div class="result-get">
-    <%= view_online(result) %>
+    <div class="result-get">
+      <%= view_online(result) %>
+    </div>
   </div>
 </li>
diff --git a/app/views/search/_result_geo.html.erb b/app/views/search/_result_geo.html.erb
@@ -1,32 +1,34 @@
 <li class="result">
-  <h3 class="record-title">
-    <span class="sr">Title: </span><%= link_to(result_geo['title'], record_path(result_geo['timdexRecordId'])) %>
-  </h3>
+  <div class="result-content">
+    <h3 class="record-title">
+      <span class="sr">Title: </span><%= link_to(result_geo['title'], record_path(result_geo['timdexRecordId'])) %>
+    </h3>
 
-  <div class="data-info">
-    <%= render partial: 'shared/geo_data_info', locals: { metadata: result_geo } %>
-  </div>
+    <div class="data-info">
+      <%= render partial: 'shared/geo_data_info', locals: { metadata: result_geo } %>
+    </div>
 
-  <% if result_geo['contributors'] %> 
-    <span class="sr">Contributors: </span>
-    <ul class="list-inline truncate-list contributors">
-      <%= render partial: 'shared/contributors', locals: { contributors: result_geo['contributors'] } %>
-    </ul>
-  <% end %>
+    <% if result_geo['contributors'] %> 
+      <span class="sr">Contributors: </span>
+      <ul class="list-inline truncate-list contributors">
+        <%= render partial: 'shared/contributors', locals: { contributors: result_geo['contributors'] } %>
+      </ul>
+    <% end %>
 
-  <% if result_geo['summary'] %>
-    <p class="result-summary truncate-list">
-      <span class="sr">Summary: </span><%= result_geo['summary'].join(' ') %>
-    </p>
-  <% end %>
+    <% if result_geo['summary'] %>
+      <p class="result-summary truncate-list">
+        <span class="sr">Summary: </span><%= result_geo['summary'].join(' ') %>
+      </p>
+    <% end %>
 
-  <% if result_geo['highlight'] %>
-    <div class="result-highlights">
-      <%= render partial: 'search/highlights', locals: { result: result_geo } %>
-    </div>
-  <% end %>
+    <% if result_geo['highlight'] %>
+      <div class="result-highlights">
+        <%= render partial: 'search/highlights', locals: { result: result_geo } %>
+      </div>
+    <% end %>
 
-  <div class="result-record">
-    <%= view_record(result_geo['timdexRecordId']) %>
+    <div class="result-record">
+      <%= view_record(result_geo['timdexRecordId']) %>
+    </div>
   </div>
 </li>