From f970ddcb86b139756ad02b91973f1389024b79bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 13 Jan 2022 19:51:28 +0100 Subject: [PATCH] Fix agree/disagree alignment in medium screens Using the `flex-with-gap` mixin we avoid the left margin in the second element when the screen space isn't wide enough to show both buttons. Setting the margins with CSS also allows as to simplify the view and makes it easier to customize styles. --- app/assets/stylesheets/in_favor_against.scss | 13 +++++-------- .../shared/in_favor_against_component.html.erb | 2 -- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index a91841f85..71b80bc5f 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -1,4 +1,9 @@ .in-favor-against { + @include flex-with-gap($line-height / 4); + + @include breakpoint(medium) { + @include flex-with-gap($line-height * 3 / 4); + } &, .in-favor, @@ -84,12 +89,4 @@ .no-voted { opacity: 0.3; } - - .against { - margin-left: $line-height / 4; - } - - .divider { - margin: 0 rem-calc(6); - } } diff --git a/app/components/shared/in_favor_against_component.html.erb b/app/components/shared/in_favor_against_component.html.erb index df44bac62..3b52938bc 100644 --- a/app/components/shared/in_favor_against_component.html.erb +++ b/app/components/shared/in_favor_against_component.html.erb @@ -12,8 +12,6 @@ <%= votes_percentage("likes", votable) %> - -
<%= button_to polymorphic_path(votable, action: :vote, value: "no"), class: "unlike #{voted_classes[:against]}",