pidgin/nest

Use learn theme's notice CSS for notification bar

18 months ago, Elliott Sales de Andrade
a2d18308f054
Parents 50afdb25d25a
Children 0cc9c1a3b272
Use learn theme's notice CSS for notification bar

The CSS from the [learn theme's notice shortcode](https://learn.netlify.app/en/shortcodes/notice/) can be used to style the notification bar instead of doing it ourselves.

I set the current one to be a "Tip", but it could be a "Note", "Info", or "Warning".

Testing Done:
Delete the cookie, and opened a page that showed the notification. Clicked the X and the notification went away as expected, and the cookie was set.

Reviewed at https://reviews.imfreedom.org/r/1934/
2 files changed, 10 insertions(+), 30 deletions(-)
  • +1 -0
    hugo/config.toml
  • +9 -30
    hugo/layouts/partials/custom-footer.html
    • --- a/hugo/config.toml Thu Oct 13 23:23:56 2022 -0500
    +++ b/hugo/config.toml Thu Oct 13 23:24:55 2022 -0500
    @@ -32,6 +32,7 @@
    #notificationCode = "nest-launch"
    notificationMessage = "Looking to reach us via XMPP? Check out the new <a href='/about/pidginchat'>PidginChat</a> service!"
    notificationCode = "pidgin-chat-announcement"
    +notificationType = "tip"
    [outputs]
    home = [ "HTML", "RSS", "JSON"]
    --- a/hugo/layouts/partials/custom-footer.html Thu Oct 13 23:23:56 2022 -0500
    +++ b/hugo/layouts/partials/custom-footer.html Thu Oct 13 23:24:55 2022 -0500
    @@ -3,11 +3,12 @@
    {{ if (and .Site.Params.notificationMessage .Site.Params.notificationCode)}}
    <script src="/js/js.cookie.min.js"></script>
    - <div id="notification-stage">
    - <div class="alert-bar notification-bar">
    - <i class="fas fa-exclamation"></i>
    - <div class="alert-bar-close-button"><i class="fas fa-times"></i></div>
    - <span>{{ .Site.Params.notificationMessage | safeHTML }}</span>
    + <div style="display:none;">
    + <div class="notices {{ .Site.Params.notificationType }} notification-bar">
    + <p>
    + <span class="alert-bar-close-button"><i class="fas fa-times"></i></span>
    + {{ .Site.Params.notificationMessage | safeHTML }}
    + </p>
    </div>
    </div>
    @@ -29,34 +30,12 @@
    </script>
    <style>
    - #notification-stage {
    - display: none;
    - }
    -
    - .alert-bar {
    - font-weight: bold;
    - padding: 20px;
    - background-color: #0c8a0c;
    - color: white;
    - margin-bottom: 15px;
    - }
    -
    - .alert-bar a {
    - color: black;
    - text-decoration: underline;
    - }
    -
    - .alert-bar a:hover {
    - text-decoration: none;
    - }
    -
    .alert-bar-close-button {
    - margin-left: 15px;
    + position: absolute;
    + top: 2px;
    + right: 10px;
    color: white;
    font-weight: bold;
    - float: right;
    - font-size: 22px;
    - line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
    }