From c4c0301f3f11d44d0924f878a8664a8574600e25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 4 Jan 2019 19:19:44 +0100 Subject: [PATCH] Simplify stats images styles This way we don't need to manually define the width we think the image we insert in the `::before` pseudoclass is going to take. --- app/assets/images/stats_users.png | Bin 0 -> 3725 bytes app/assets/stylesheets/stats.scss | 19 +++++++++---------- app/helpers/stats_helper.rb | 4 +++- 3 files changed, 12 insertions(+), 11 deletions(-) create mode 100644 app/assets/images/stats_users.png diff --git a/app/assets/images/stats_users.png b/app/assets/images/stats_users.png new file mode 100644 index 0000000000000000000000000000000000000000..76bb80606f80bd5764f676f0a0b87f89e12203a1 GIT binary patch literal 3725 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 literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss index 27fb84873..6c2cc73c5 100644 --- a/app/assets/stylesheets/stats.scss +++ b/app/assets/stylesheets/stats.scss @@ -22,20 +22,14 @@ .number-with-info { display: inline-block; - margin-right: $line-height * 2; - &.participants { - padding-left: $line-height * 2.5; - position: relative; - - &::before { - left: 0; - position: absolute; - } + &::before { + display: inline-block; + margin-right: $line-height / 2; } &.total-participants::before { - content: image-url('stats_man.png'); + content: image-url('stats_users.png'); } &.male::before { @@ -46,6 +40,11 @@ content: image-url('stats_woman.png'); } + .content { + display: inline-block; + margin-right: $line-height * 2; + } + .number { display: block; font-size: rem-calc(60); diff --git a/app/helpers/stats_helper.rb b/app/helpers/stats_helper.rb index eef463a99..d321bce0b 100644 --- a/app/helpers/stats_helper.rb +++ b/app/helpers/stats_helper.rb @@ -37,7 +37,9 @@ module StatsHelper def number_with_info_tags(number, text, html_class: "") content_tag :p, class: "number-with-info #{html_class}".strip do - content_tag(:span, number, class: "number") + content_tag(:span, text, class: "info") + content_tag :span, class: "content" do + content_tag(:span, number, class: "number") + content_tag(:span, text, class: "info") + end end end end