Join popup

config/settings/base.py

@@ -75,6 +75,7 @@ def read_file(filename):
     'tests_ubyssey',
     'publishing_analytics',
     'content_tracker',
+    'popups',
 
     'newsletter.apps.NewsletterConfig',
     'magazine.apps.MagazineConfig',

popups/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

popups/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class PopupsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'popups'

popups/models.py

@@ -0,0 +1,32 @@
+from django.db import models
+from wagtail.fields import RichTextField
+from wagtail.admin.panels import (
+    FieldPanel,
+    MultiFieldPanel,
+)
+from wagtail.contrib.settings.models import (
+    BaseGenericSetting,
+    register_setting,
+)
+
+@register_setting
+class PopupSettings(BaseGenericSetting):
+    preview_text = RichTextField()
+
+    popup_title = models.CharField(max_length=255)
+    popup_text = RichTextField()
+
+    active = models.BooleanField(default=True)
+    show_on_first_view = models.BooleanField(default=True)
+    days_between_appearing = models.IntegerField(default=7)
+    seconds_delay_before_appearing = models.IntegerField(default=90)
+
+    panels = [
+        FieldPanel('preview_text'),
+        FieldPanel('popup_title'),
+        FieldPanel('popup_text'),
+        FieldPanel('active'),
+        FieldPanel('show_on_first_view'),
+        FieldPanel('days_between_appearing'),
+        FieldPanel('seconds_delay_before_appearing'),
+    ]

popups/templates/popups/joinpopup.html

@@ -0,0 +1,89 @@
+{% load wagtailsettings_tags %}
+{% get_settings as settings %}
+
+{% if settings.popups.PopupSettings.active %}
+<div id="join-popup" class="c-join-popup hidden" 
+    showonfirstview="{{settings.popups.PopupSettings.show_on_first_view}}"
+    daysbetweenappearing="{{settings.popups.PopupSettings.days_between_appearing}}"
+    secondsdelaybeforeappearing="{{settings.popups.PopupSettings.seconds_delay_before_appearing}}"
+    >
+    <div class="c-join-popup--lip">
+        <div class="c-join-popup--lip-container">
+            {{ settings.popups.PopupSettings.preview_text|safe }}
+            <button id="join-popup--toggle" class="c-join-popup--toggle">
+                <div class="c-join-popup--toggle-icon-container minimal-only">
+                    <ion-icon name="chevron-up"></ion-icon>
+                </div>
+                <div class="c-join-popup--toggle-icon-container active-only">
+                    <ion-icon name="close-outline"></ion-icon>
+                </div>
+            </button>
+        </div>
+    </div>
+    <div class="c-join-popup--inner">
+        <div class="c-join-popup--inner-text">
+            <h1><a href="https://join.ubyssey.ca/">{{ settings.popups.PopupSettings.popup_title }}</a></h1>
+            {{ settings.popups.PopupSettings.popup_text|safe }}
+        </div>
+    </div>
+</div>
+
+<script>
+    const joinPopup = document.getElementById("join-popup");
+
+    const showOnFirstView = joinPopup.getAttribute("showonfirstview") == "True";
+    const daysBetweenAppearing = parseInt(joinPopup.getAttribute("daysbetweenappearing"));
+    const lastJoinPopupOpened = localStorage.getItem("lastJoinPopupOpened");
+    const SecondsDelayBeforeAppearing = parseInt(joinPopup.getAttribute("secondsdelaybeforeappearing"));
+
+    let setActive = false;
+
+
+    // We need to check this to make sure the join popup does not appear at the same time as the cookie popup
+    const cookie_accepted = document.cookie.includes("ubyssey_cookie_disclaimer=accepted");
+
+    if (cookie_accepted) {
+        if (lastJoinPopupOpened == null) {
+            if (showOnFirstView) {
+                // Show on first visit 
+                setActive = true;
+            } else {
+                // Set 'lastJoinPopupOpened' so that after daysBetweenAppearing days, we can show popup for the first time
+                localStorage.setItem("lastJoinPopupOpened", String(new Date()));
+            }
+        } else if (new Date().getTime() - new Date(lastJoinPopupOpened).getTime() > 60*60*24*daysBetweenAppearing) {
+            // Show 
+            setActive = true;
+        }
+
+        if (setActive) {
+            console.log("set active");
+            setTimeout(() => {
+                joinPopup.classList.remove("hidden");
+                joinPopup.classList.add("minimal");
+            }, 1000 * SecondsDelayBeforeAppearing);
+        }
+    }
+
+    function openJoinPopup() {
+        localStorage.setItem("lastJoinPopupOpened", String(new Date()));
+        joinPopup.classList.remove("minimal");
+        joinPopup.classList.add("active");       
+    }
+
+    joinPopup.addEventListener("click", () => {
+        if (joinPopup.classList.contains("minimal")) {
+            openJoinPopup();
+        }
+    });
+
+    document.getElementById("join-popup--toggle").addEventListener("click", () => {
+        if (joinPopup.classList.contains("minimal")) {
+            openJoinPopup();          
+        } else {
+            joinPopup.classList.remove("active");
+            joinPopup.classList.add("hidden");
+        }
+    })
+</script>
+{% endif %}

popups/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

popups/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

ubyssey/static_src/src/js/article.jsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 //import Search from './components/Search.jsx';
 //import { AdblockSplash, CookieDisclaimer } from './components/Cookies'
 import NavSearch from './components/NavSearch.jsx';
-import { CookieDisclaimer } from './components/Cookies'
+import { CookieDisclaimer } from './components/Cookies';
 //import { Galleries } from './components/Gallery'
 
 

ubyssey/static_src/src/styles/article.scss

@@ -34,6 +34,7 @@
 
 @use 'components/adblock-splash';
 @use 'components/cookie-disclaimer';
+@use 'components/join-popup';
 @use 'components/replacement';
 
 @use 'modules/widgets/facebook_video_big';

ubyssey/static_src/src/styles/components/_join-popup.scss

@@ -0,0 +1,127 @@
+@use "../modules/variables";
+
+.c-join-popup {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+
+    background: linear-gradient(rgba(255, 255, 255, 0.75), white), url('https://storage.googleapis.com/ubyssey/media/renditions/ubyssey-newsprint-collage-2.original.png');
+    background-size: contain;
+    background-size: 400px auto;
+
+    transition-duration: 1s;
+    .c-join-popup--lip {
+        margin: 0;
+        height: 0;
+
+        background: transparent;
+        --text_color: var(--ubyssey-grey-1);
+        transition: height 1s;
+
+        .c-join-popup--lip-container {
+            margin: auto;
+            padding: 0.5em;
+            max-width: 1275px;
+            width: 100%;
+
+            display: flex;
+            justify-content: space-between;
+
+            box-sizing: border-box;
+
+            .c-join-popup--toggle {
+                background: none;
+                border: none;
+                color: var(--ubyssey-grey-3);
+            }
+            p {
+                margin: 0;
+                opacity: 0;
+                transition-duration: 0.5s;
+
+                font-size: 0.95em;
+            }
+        }
+    }
+    .c-join-popup--inner {
+        display: flex;
+
+        width: 100%;
+        height: 0;
+        transition-duration: 1s;
+
+        --header_color: var(--ubyssey-black-1);
+        --text_color: var(--ubyssey-black-2);
+
+        .c-join-popup--inner-text {
+            margin: auto;
+            padding-inline: 1em;
+
+            text-align: center;
+            font-family: "librefranklin","noto-sans","Helvetica Neue","Helvetica","Arial",sans-serif;
+
+            opacity: 0;
+            transition-duration: 0.75s;
+
+            h1 {
+                margin: 0;
+                font-size: 4em;
+                font-variation-settings: "wght" 800;
+            }
+            p {
+                margin: 0.5em;
+                font-size: 1.5em;
+                font-variation-settings: "wght" 600;
+            }
+            @media(variables.$bp-smaller-than-phablet){
+                h1 {
+                    font-size: 3em;
+                }
+                p {
+                    font-size: 1em;
+                }
+            }
+        }
+    }
+
+    .c-join-popup--toggle-icon-container {
+        display: none;
+    }
+
+    &.minimal {
+        .c-join-popup--lip {
+            height: auto;
+            background: var(--ubyssey-white-4);
+        }
+
+        .c-join-popup--lip .c-join-popup--lip-container p {
+            opacity: 1;
+        }
+        .c-join-popup--toggle-icon-container.minimal-only {
+            display: contents;
+        }
+    }
+    &.active {
+
+        filter: drop-shadow(0 0 1em black);
+
+
+        .c-join-popup--lip .c-join-popup--lip-container .c-join-popup--toggle {
+            font-size: 1.5em;
+            color: var(--ubyssey-black-1);
+        }
+
+        .c-join-popup--inner {
+            height: 400px;
+            .c-join-popup--inner-text {
+                opacity: 1;
+            }
+        }
+
+        .c-join-popup--toggle-icon-container.active-only {
+            display: contents;
+        }
+    }
+}

ubyssey/static_src/src/styles/home.scss

@@ -33,6 +33,7 @@
 
 @use 'components/adblock-splash';
 @use 'components/cookie-disclaimer';
+@use 'components/join-popup';
 @use 'components/replacement';
 @use 'components/infinitefeed';
 

ubyssey/static_src/src/styles/main.scss

@@ -38,6 +38,7 @@
 @use 'components/author-page';
 @use 'components/button';
 @use 'components/cookie-disclaimer';
+@use 'components/join-popup';
 @use 'components/elections-sidebar';
 @use 'components/replacement';
 @use 'components/section-page';

ubyssey/static_src/src/styles/modules/_core.scss

@@ -239,25 +239,46 @@ a {
 html {
   transition: background 0.5s ease, color 0.5s ease;
   --ubyssey_blue-classic: #{variables.$color-ubyssey-blue-classic};
+
+  --ubyssey-black-1: black;
+  --ubyssey-black-2: #1b1b1b;
+  --ubyssey-black-3: #222;
+  --ubyssey-black-4: #333;
+
+  --ubyssey-grey-1: #444;
+  --ubyssey-grey-2: #666;
+  --ubyssey-grey-3: #888;
+  --ubyssey-grey-4: #999;
+
+  --ubyssey-white-1: white;
+  --ubyssey-white-2: #e4e4e4;
+  --ubyssey-white-3: #eee;
+  --ubyssey-white-4: #d9d9d9;
 }
 
 html[color-css-theme="light"] {
   --background-nav: rgba(255, 255, 255, 0.99);
-  --background: white;
-  --text_color: #1b1b1b;
-  --text_color_supporting: #666;
-  --text_color_supporting-lighter: #999;
-  --text_color_contrast: #333;
-  --header_color: #222;
-  --header_color_supporting: #333;
+  --background: var(--ubyssey-white-1);
+
+  --text_color: var(--ubyssey-black-2);
+  --text_color_supporting: var(--ubyssey-grey-2);;
+  --text_color_supporting-lighter: var(--ubyssey-black-4);
+  --text_color_contrast: var(--ubyssey-black-4);
+
+  --header_color: var(--ubyssey-black-3);
+  --header_color_supporting: var(--ubyssey-black-4);
+
   --article-publish: #1871C4;
+
   --light-border: #{variables.$color-ubyssey-blue};
-  --light-border-grey: #eee;
-  --light-grey: #d9d9d9;
+  --light-border-grey: var(--ubyssey-white-3);
+  --light-grey: var(--ubyssey-white-4);
+
   --contrast-color: #{variables.$color-ubyssey-blue-dark};
-  --shadow-color: #888;
-  --marked-read: #444;
-  --article-header-border: #e4e4e4;
+  --shadow-color: var(--ubyssey-grey-3);
+  --marked-read: var(--ubyssey-grey-1);
+
+  --article-header-border: var(--ubyssey-white-2);
 
     // colours that should be removed or renamed
   --nav-mobile-background-barely-transparent: rgba(249, 249, 249, 0.99); 

ubyssey/static_src/src/styles/section.scss

@@ -37,6 +37,7 @@
 @use 'components/button';
 @use 'components/adblock-splash';
 @use 'components/cookie-disclaimer';
+@use 'components/join-popup';
 @use 'components/replacement';
 @use 'components/section-page';
 @use 'components/suggested-articles';

ubyssey/templates/ubyssey/base.html

@@ -135,10 +135,9 @@
 	</script>
 
 	<div id="page-wrapper" class="{% block page_wrapper %}{% endblock %}">
-		<div id="cookie-disclaimer">
-		</div>
-		<div id="adblock-splash">
-		</div>
+		<div id="cookie-disclaimer"></div>
+		<div id="adblock-splash"></div>
+		{% include 'popups/joinpopup.html' %}
 
 		{% block header %}
 		{% endblock %}