diff --git a/_data/messages.yml b/_data/messages.yml new file mode 100644 index 00000000..642a7ac5 --- /dev/null +++ b/_data/messages.yml @@ -0,0 +1 @@ +scam-banner: "**⚠️ Beware of Scams**: since Feb 2024, scammers are using [fake Scala websites to sell courses](https://www.scala-lang.org/blog/2024/03/01/fake-scala-courses.html), please check you are using an official source." diff --git a/_includes/alert-banner.html b/_includes/alert-banner.html new file mode 100644 index 00000000..46430e07 --- /dev/null +++ b/_includes/alert-banner.html @@ -0,0 +1,8 @@ +{% comment %}use the variable 'message' to include markdown text to display in the alert.{% endcomment %} + + diff --git a/_layouts/default.html b/_layouts/default.html index 3304c27a..727975e0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,6 +5,8 @@ + {% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %} +
{% include navbar.html %}
@@ -17,5 +19,3 @@ - - diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index 1d8f1297..472b3cab 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -4,6 +4,7 @@ {% include head.html %} + {% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
diff --git a/resources/css/main.scss b/resources/css/main.scss index e3ed3470..85b39b0d 100644 --- a/resources/css/main.scss +++ b/resources/css/main.scss @@ -34,6 +34,10 @@ $grey-color-light: lighten($grey-color, 40%); $grey-color-medium: lighten($grey-color, 7%); $grey-color-dark: darken($grey-color, 25%); +$warning-bg: #ffa500; +$warning-link: #185eb3; +$warning-text: #000; + // Width of the content area $content-width: 800px; @@ -53,6 +57,53 @@ $fa-font-path: "./../../bower_components/font-awesome/fonts"; // Import partials from `sass_dir` (defaults to `_sass`) @import "base"; +#site-header { + background: $gray-darker; + .alert-warning { + text-align: center; + padding: 8px 0; + /*transition: $base-transition;*/ + position: relative; + font-size: 16px; + /*@include bp(medium) { + padding: 10px 40px; + }*/ + + background: $warning-bg; + color: $warning-text; + + a { + color: $warning-link; + font-weight: bold; + text-decoration: underline; + + &:active, + &:focus, + &:hover { + text-decoration: none; + } + } + + p { + margin: 0; + } + + span { + position: absolute; + right: 20px; + top: 3px; + z-index: 1; + cursor: pointer; + font-size: 22px; + opacity: 0.6; + /*transition: $base-transition;*/ + &:hover { + opacity: 1; + } + } + } +} + .home #main { overflow-x: hidden; } diff --git a/resources/js/main.js b/resources/js/main.js index 36e79f95..ea5ca7f5 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -5,6 +5,20 @@ * Document initialization **************************/ +// Browser Storage Support (https://stackoverflow.com/a/41462752/2538602) +function storageAvailable(type) { + try { + var storage = window[type], + x = '__storage_test__'; + storage.setItem(x, x); + storage.removeItem(x); + return true; + } + catch (e) { + return false; + } +} + $(document).ready(function(){ /* SEARCH FUNCTIONALITY */ var search = $('.search input'); @@ -83,4 +97,54 @@ $(document).ready(function(){ } $('#modal-description').modal('hide'); }); + + // --- Preferences stored in localStorage --- + + const Storage = (namespace) => { + return ({ + getPreference(key, defaultValue) { + const res = localStorage.getItem(`${namespace}.${key}`); + return res === null ? defaultValue : res; + }, + setPreference(key, value, onChange) { + const old = this.getPreference(key, null); + if (old !== value) { // activate effect only if value changed. + localStorage.setItem(`${namespace}.${key}`, value); + onChange(old); + } + } + }); + }; + + function setupAlertCancel(alert, storage) { + const messageId = alert.data('message_id'); + let onHide = () => {}; + if (messageId) { + const key = `alert.${messageId}`; + const isHidden = storage.getPreference(key, 'show') === 'hidden'; + if (isHidden) { + alert.hide(); + } + onHide = () => storage.setPreference(key, 'hidden', _ => {}); + } + + + alert.find('.hide-with-preference').click(function() { + alert.hide(), onHide(); + }); + } + + function setupAllAlertCancels(storage) { + var alertBanners = $(".alert-warning"); + if (alertBanners.length) { + setupAlertCancel(alertBanners, storage); + } + } + + if (storageAvailable('localStorage')) { + console.log("doing something"); + const PreferenceStorage = Storage('ch.epfl.scala.preferences'); + setupAllAlertCancels(PreferenceStorage); + } + });