From f285dfcbac2e8f33fd337b35ddcdcac33bc86739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 25 Sep 2023 21:47:14 +0200
Subject: [PATCH] Simplify HTML in proposal/debates recommendations

This way it's going to be easier to style the link on focus, since
styles like `box-shadow` weren't working properly when we had an inline
link with block elements inside, and adding the `display: inline-block`
element to the link didn't play well with the layout we were using for
the recommendations.

We're also fixing the focus outline on recommendations, which didn't
look properly because of the border added with:

```
.recommended-index {
  // (...)
  @include full-width-border(top, 1px solid #fafafa);
}
```

The border was on top of the outline, breaking it. Increasing the
`z-index` of the element containing the outline solves the issue.

In a similar way, we're making sure the button to hide recommendations
stays visible so it's easier to click it.
---
 .../budgets/groups_and_headings.scss          | 24 +----------------
 app/assets/stylesheets/layout.scss            |  3 +++
 app/assets/stylesheets/mixins/links.scss      | 27 +++++++++++++++++++
 app/views/shared/_recommended_index.html.erb  |  8 +++---
 4 files changed, 34 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/stylesheets/mixins/links.scss

diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 6372debb0..dafc3317c 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -9,13 +9,13 @@
 
   .heading {
     @include brand-color;
+    @include card;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
-    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -26,31 +26,9 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    &:focus-within {
-      outline: $outline-focus;
-
-      a:focus {
-        outline: none;
-      }
-    }
-
     a {
       font-weight: bold;
 
-      &::after,
-      &::before {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
       &:hover::before {
         background: $light;
         z-index: -1;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fcda6b480..b2f589353 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1986,11 +1986,13 @@ table {
   }
 
   .recommendation {
+    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
     padding: $line-height / 2;
+    z-index: 1;
 
     &:hover {
       box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
@@ -2003,6 +2005,7 @@ table {
   position: absolute;
   right: 12px;
   top: -18px;
+  z-index: 2;
 }
 
 // 20. Documents
diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss
new file mode 100644
index 000000000..e4fe18102
--- /dev/null
+++ b/app/assets/stylesheets/mixins/links.scss
@@ -0,0 +1,27 @@
+@mixin card {
+  position: relative;
+
+  &:focus-within {
+    outline: $outline-focus;
+
+    a:focus {
+      outline: none;
+    }
+  }
+
+  a {
+    &::after,
+    &::before {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/app/views/shared/_recommended_index.html.erb b/app/views/shared/_recommended_index.html.erb
index e7c7d3835..4447a9ae4 100644
--- a/app/views/shared/_recommended_index.html.erb
+++ b/app/views/shared/_recommended_index.html.erb
@@ -18,11 +18,9 @@
 
       <% recommended.each_with_index do |recommended, index| %>
         <div class="small-12 medium-6 large-4 column end">
-          <%= link_to recommended_path(recommended) do %>
-            <div class="recommendation" data-equalizer-watch>
-              <h3><%= recommended.title %></h3>
-            </div>
-          <% end %>
+          <div class="recommendation" data-equalizer-watch>
+            <h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
+          </div>
         </div>
       <% end %>