From 4874cf742b71efdbcca2bed0bb6659d69a422af7 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 26 Mar 2019 16:34:27 +0100 Subject: [PATCH] FIX: better styling with popover (#7259) --- .../stylesheets/common/base/d-popover.scss | 2 +- .../discourse-local-dates.js.no-module.es6 | 5 +++- .../common/discourse-local-dates.scss | 26 ++++++++----------- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss index c6e90d1b3d1..670ab197514 100644 --- a/app/assets/stylesheets/common/base/d-popover.scss +++ b/app/assets/stylesheets/common/base/d-popover.scss @@ -63,7 +63,7 @@ $d-popover-border: $primary-medium; } .d-popover-content { - padding: 1em; + padding: 0.5em; font-size: $font-down-1; overflow-wrap: break-word; -webkit-animation: popoverFadeIn 0.5s; diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6 b/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6 index 4c96ae006fb..daacf30dd30 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6 +++ b/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6 @@ -70,7 +70,10 @@ $element .html(DATE_TEMPLATE) .attr("aria-label", textPreview) - .attr("data-html-tooltip", `
${htmlPreview}
`) + .attr( + "data-html-tooltip", + `
${htmlPreview}
` + ) .addClass("cooked-date") .find(".relative-time") .text(formatedDateTime); diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss index 1b210bcf02a..708f8d7438a 100644 --- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss +++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss @@ -14,24 +14,20 @@ } } -.discourse-local-date + #discourse-tooltip { - .tooltip-content { +#d-popover { + .locale-dates-previews { max-width: 360px; - padding: 0.5em; + .preview { + display: flex; + flex-direction: column; + padding: 5px; - .previews { - .preview { - display: flex; - flex-direction: column; - padding: 5px; + .timezone { + font-weight: 700; + } - .timezone { - font-weight: 700; - } - - &.current { - background: $tertiary-low; - } + &.current { + background: $tertiary-low; } } }