Remove some tag table custom css

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 40392cdae5362963ce5f8fb96e1e84b7f09ade6e..3ab3b65118ec3444f806bdbc19d760f5d366f37b 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -736,45 +736,16 @@ tr.turn:hover {
   }
 
   .browse-tag-list {
-    background-color: $offwhite;
     table-layout: fixed;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-    margin-bottom: $spacer;
-
-    th, td {
-      border-bottom: 1px solid $grey;
-    }
+    white-space: pre-wrap;
 
     tr:last-child th, tr:last-child td {
       border-bottom: 0;
     }
 
-    .browse-tag-k,
-    .browse-tag-v {
-      width: 50%;
-      padding: 6px 10px;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-
-    .browse-tag-k {
-      font-weight: 500;
-      background-color: $offwhite;
-    }
-
-    .browse-tag-v {
-      border-left: 1px solid $grey;
-      background-color: #fff;
-    }
-
     .colour-preview-box {
-      float: right;
       width: 14px;
       height: 14px;
-      margin: 4px 0px;
-      border: 1px solid rgba(0, 0, 0, .1);
       // add color via inline css on element: background-color: <tag value>;
     }
   }

diff --git a/app/helpers/browse_tags_helper.rb b/app/helpers/browse_tags_helper.rb
index 2bd547fded118993929b0edc29dc38c177165b9e..014b8262d050b947de09416b15a8020191f0bb26 100644 (file)
--- a/app/helpers/browse_tags_helper.rb
+++ b/app/helpers/browse_tags_helper.rb
@@ -34,7 +34,7 @@ module BrowseTagsHelper
       end
       safe_join(phones, "; ")
     elsif colour_value = colour_preview(key, value)
-      tag.span("", :class => "colour-preview-box", :"data-colour" => colour_value, :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value
+      tag.span("", :class => "colour-preview-box float-end m-1 border border-dark border-opacity-10", :"data-colour" => colour_value, :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value
     else
       safe_join(value.split(";").map { |x| linkify(h(x)) }, ";")
     end

diff --git a/app/views/browse/_tag.html.erb b/app/views/browse/_tag.html.erb
index 2081ba28d427b0d3018b072e4b270f776ce3d2ca..dceb57e7d019cd33c3c6a0d912ddb07530541f3c 100644 (file)
--- a/app/views/browse/_tag.html.erb
+++ b/app/views/browse/_tag.html.erb
@@ -1,4 +1,4 @@
 <tr>
-  <th class='browse-tag-k'><%= format_key(tag[0]) %></th>
-  <td class='browse-tag-v'><%= format_value(tag[0], tag[1]) %></td>
+  <th class='py-1 border-grey table-light fw-normal'><%= format_key(tag[0]) %></th>
+  <td class='py-1 border-grey border-start'><%= format_value(tag[0], tag[1]) %></td>
 </tr>

diff --git a/app/views/browse/_tag_details.html.erb b/app/views/browse/_tag_details.html.erb
index 0868bb8e59e279e1af10193bfb1a9d77365df271..9129ddaf5d23df457700f7adb63615340a1ca70f 100644 (file)
--- a/app/views/browse/_tag_details.html.erb
+++ b/app/views/browse/_tag_details.html.erb
@@ -1,6 +1,8 @@
 <% unless tag_details.empty? %>
   <h4><%= t ".tags" %></h4>
-  <table class='browse-tag-list border border-grey rounded'>
-    <%= render :partial => "tag", :collection => tag_details.sort %>
-  </table>
+  <div class='mb-3 border border-grey rounded overflow-hidden'>
+    <table class='mb-0 browse-tag-list table align-middle text-break'>
+      <%= render :partial => "tag", :collection => tag_details.sort %>
+    </table>
+  </div>
 <% end %>

diff --git a/test/helpers/browse_tags_helper_test.rb b/test/helpers/browse_tags_helper_test.rb
index a0f7169745db9f93c1cd6c88cd2d1ce1553b78e8..0af0d931018ee7c25928f80ad4ac6f025cb0cb1a 100644 (file)
--- a/test/helpers/browse_tags_helper_test.rb
+++ b/test/helpers/browse_tags_helper_test.rb
@@ -48,7 +48,7 @@ class BrowseTagsHelperTest < ActionView::TestCase
     assert_dom_equal "<a title=\"The File:Test.jpg item on Wikimedia Commons\" href=\"//commons.wikimedia.org/wiki/File:Test.jpg?uselang=en\">File:Test.jpg</a>", html
 
     html = format_value("colour", "#f00")
-    assert_dom_equal %(<span class="colour-preview-box" data-colour="#f00" title="Colour #f00 preview"></span>#f00), html
+    assert_dom_equal %(<span class="colour-preview-box float-end m-1 border border-dark border-opacity-10" data-colour="#f00" title="Colour #f00 preview"></span>#f00), html
 
     html = format_value("email", "foo@example.com")
     assert_dom_equal "<a title=\"Email foo@example.com\" href=\"mailto:foo@example.com\">foo@example.com</a>", html