From e1a12ba23b3d8a9017e1254476628465f743d563 Mon Sep 17 00:00:00 2001 From: Franciszek Stachura Date: Sun, 29 Dec 2024 16:13:49 +0100 Subject: [PATCH 1/3] web, banner: Add dynamic messages for mobile version --- static/messages.json | 279 +++++++++++++----------------------------- static/script.js | 11 +- static/style.css | 41 ++----- templates/header.html | 12 +- 4 files changed, 112 insertions(+), 231 deletions(-) diff --git a/static/messages.json b/static/messages.json index d2209fdf..7e30e8be 100644 --- a/static/messages.json +++ b/static/messages.json @@ -1,196 +1,87 @@ [ - { - "desktop": { - "title": "In-person Linux kernel drivers training", - "body": "Jun 16-20, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/126" - }, - "mobile": { - "title": "In-person Linux kernel drivers training", - "body": "June 16-20, 2025", - "link": "https://shop.bootlin.com/en/event/126" - } - }, - { - "desktop": { - "title": "Embedded Linux training", - "body": "Mar 31-Apr 8, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/122" - }, - "mobile": { - "title": "Embedded Linux training", - "body": "Mar 31-Apr 8, 2025", - "link": "https://shop.bootlin.com/en/event/122" - } - }, - { - "desktop": { - "title": "Embedded Linux training", - "body": "Mar 10-20, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/114" - }, - "mobile": { - "title": "Embedded Linux training", - "body": "Mar 10-20, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/114" - } - }, - { - "desktop": { - "title": "Linux kernel drivers training", - "body": "May 6-19, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/123" - }, - "mobile": { - "title": "Linux kernel drivers training", - "body": "May 6-19, 2025", - "link": "https://shop.bootlin.com/en/event/123" - } - }, - { - "desktop": { - "title": "Linux kernel drivers training", - "body": "Mar 31-Apr 9, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/118" - }, - "mobile": { - "title": "Linux kernel drivers training", - "body": "Mar 31-Apr 9, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/118" - } - }, - { - "desktop": { - "title": "Yocto / OpenEmbedded training", - "body": "Feb 10-13, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/125" - }, - "mobile": { - "title": "Yocto / OpenEmbedded training", - "body": "Feb 10-13, 2025", - "link": "https://shop.bootlin.com/en/event/125" - } - }, - { - "desktop": { - "title": "Yocto / OpenEmbedded training", - "body": "Mar 24-27, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/116" - }, - "mobile": { - "title": "Yocto / OpenEmbedded training", - "body": "Mar 24-27, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/116" - } - }, - { - "desktop": { - "title": "Real-Time Linux with PREEMPT_RT training", - "body": "Feb 18-20, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/104" - }, - "mobile": { - "title": "Real-Time Linux with PREEMPT_RT training", - "body": "Feb 18-20, 2025", - "link": "https://shop.bootlin.com/en/event/104" - } - }, - { - "desktop": { - "title": "Linux debugging, profiling, tracing and performance analysis training", - "body": "Apr 14-17, 2025", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/124" - }, - "mobile": { - "title": "Linux debugging, profiling, tracing and performance analysis training", - "body": "Apr 14-17, 2025", - "link": "https://shop.bootlin.com/en/event/124" - } - }, - { - "desktop": { - "title": "Linux debugging, profiling, tracing and performance analysis training", - "body": "Mar 24-27, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/117" - }, - "mobile": { - "title": "Linux debugging, profiling, tracing and performance analysis training", - "body": "Mar 24-27, 2025, special US time zones", - "action": "Register", - "link": "https://shop.bootlin.com/en/event/117" - } - }, - { - "desktop": { - "title": "Linux BSP development engineering services", - "body": "Need help to port Linux and bootloaders to your hardware?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - }, - "mobile": { - "title": "Linux BSP development engineering services", - "body": "Need help to port Linux and bootloaders to your hardware?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - } - }, - { - "desktop": { - "title": "Open-source upstreaming", - "body": "Need help get the support for your hardware in upstream Linux?", - "link": "https://bootlin.com/engineering/upstreaming/" - }, - "mobile": { - "title": "Open-source upstreaming", - "body": "Need help get the support for your hardware in upstream Linux?", - "link": "https://bootlin.com/engineering/upstreaming/" - } - }, - { - "desktop": { - "title": "Linux BSP upgrade and security maintenance", - "body": "Need help to get security updates for your Linux BSP?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - }, - "mobile": { - "title": "Linux BSP upgrade and security maintenance", - "body": "Need help to get security updates for your Linux BSP?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - } - }, - { - "desktop": { - "title": "Yocto distribution development and maintenance", - "body": "Need a Yocto distribution for your embedded project?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - }, - "mobile": { - "title": "Yocto distribution development and maintenance", - "body": "Need a Yocto distribution for your embedded project?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - } - }, - { - "desktop": { - "title": "Buildroot integration, development and maintenance", - "body": "Need a Buildroot system for your embedded project?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - }, - "mobile": { - "title": "Buildroot integration, development and maintenance", - "body": "Need a Buildroot system for your embedded project?", - "link": "https://bootlin.com/engineering/linux-board-support-package/" - } - } + { + "title": "In-person Linux kernel drivers training", + "body": "Jun 16-20, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/126" + }, + { + "title": "Embedded Linux training", + "body": "Mar 31-Apr 8, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/122" + }, + { + "title": "Embedded Linux training", + "body": "Mar 10-20, 2025, special US time zones", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/114" + }, + { + "title": "Linux kernel drivers training", + "body": "May 6-19, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/123" + }, + { + "title": "Linux kernel drivers training", + "body": "Mar 31-Apr 9, 2025, special US time zones", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/118" + }, + { + "title": "Yocto / OpenEmbedded training", + "body": "Feb 10-13, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/125" + }, + { + "title": "Yocto / OpenEmbedded training", + "body": "Mar 24-27, 2025, special US time zones", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/116" + }, + { + "title": "Real-Time Linux with PREEMPT_RT training", + "body": "Feb 18-20, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/104" + }, + { + "title": "Linux debugging, profiling, tracing and performance analysis training", + "body": "Apr 14-17, 2025", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/124" + }, + { + "title": "Linux debugging, profiling, tracing and performance analysis training", + "body": "Mar 24-27, 2025, special US time zones", + "action": "Register", + "link": "https://shop.bootlin.com/en/event/117" + }, + { + "title": "Linux BSP development engineering services", + "body": "Need help to port Linux and bootloaders to your hardware?", + "link": "https://bootlin.com/engineering/linux-board-support-package/" + }, + { + "title": "Open-source upstreaming", + "body": "Need help get the support for your hardware in upstream Linux?", + "link": "https://bootlin.com/engineering/upstreaming/" + }, + { + "title": "Linux BSP upgrade and security maintenance", + "body": "Need help to get security updates for your Linux BSP?", + "link": "https://bootlin.com/engineering/linux-board-support-package/" + }, + { + "title": "Yocto distribution development and maintenance", + "body": "Need a Yocto distribution for your embedded project?", + "link": "https://bootlin.com/engineering/linux-board-support-package/" + }, + { + "title": "Buildroot integration, development and maintenance", + "body": "Need a Buildroot system for your embedded project?", + "link": "https://bootlin.com/engineering/linux-board-support-package/" + } ] diff --git a/static/script.js b/static/script.js index 62a54fc0..28752ad3 100644 --- a/static/script.js +++ b/static/script.js @@ -364,10 +364,17 @@ function updateMessageBanner() { fetch('/static/messages.json') .then(r => r.json()) .then(messages => { - const msg = randomChoice(messages); + // TODO compatibility with old messages format, remove after ~march 2025 + const pickedMsg = randomChoice(messages); + const msg = pickedMsg.desktop ? pickedMsg.desktop : pickedMsg; const desktopBanner = document.querySelector('.message-banner-desktop'); - addBannerContents(desktopBanner, msg.desktop); + addBannerContents(desktopBanner, msg); + + // Remove action button for mobile banner + msg.action = undefined; + const mobileBanner = document.querySelector('.message-banner-mobile'); + addBannerContents(mobileBanner, msg); }); } diff --git a/static/style.css b/static/style.css index 77d7703c..f8087c47 100644 --- a/static/style.css +++ b/static/style.css @@ -1322,39 +1322,26 @@ main { } .message-banner-mobile { + padding: 3px; display: none; text-align: center; - background: #fe003e; + background: #757575; color: #fff; font-family: Arial; - -webkit-transform:rotate(-180deg); - -moz-transform:rotate(-180deg); - -o-transform: rotate(-180deg); - -ms-transform:rotate(-180deg); - transform: rotate(-180deg); - left: -58px; - bottom: 58px; - padding: 5px; width: min-content; - writing-mode: vertical-rl; - margin-bottom: 40px; - min-height: 150px; + width: 100%; } .message-banner-mobile .title { margin: 0; - font-size: 25px; + font-weight: 900; text-wrap: pretty; } .message-banner-mobile .subtitle { + padding-top: 2px; margin: 0; - font-size: 11px; word-break: break-word; } -.message-banner-mobile:hover { - background: #f37b30; -} -.message-banner-mobile .message-link, -.message-banner-desktop .message-link { +.message-link { position: absolute; width: 100%; height: 100%; @@ -1380,14 +1367,6 @@ main { display: block; } } -@media screen and (max-width: 400px) { - .message-banner-mobile .title { - font-size: 20px; - } - .message-banner-mobile .subtitle { - font-size: 9.5px; - } -} /* === Fonts ================================================================ */ @@ -1538,7 +1517,7 @@ main { padding: 0; margin: 0; display: inline-block; - line-height: 2.5rem; /* little hack for firefox vertical align */ + line-height: 1.5rem; /* little hack for firefox vertical align */ } .social-icons li { display: inline-block; @@ -1561,14 +1540,16 @@ main { } .header .social-icons { position: static; + background-color: rgba(0,0,0,.5); + width: 100%; } .social-icons a::before { font-size: 1.5rem; color: #9da9ea; } .header-main { - display: grid; - grid-template-columns: 40px 1fr 40px; + display: flex; + flex-direction: column-reverse; } } diff --git a/templates/header.html b/templates/header.html index 4ca72bba..a326a0a0 100644 --- a/templates/header.html +++ b/templates/header.html @@ -14,14 +14,16 @@
  • linkedin
  • github
    • - -
    -

    Linux Audio

    -

    Check our new training course

    - +

    +

    +
    +
    + +
    +

    From 5a5a358b8c2dae86f89711a840196b09c11bae4f Mon Sep 17 00:00:00 2001 From: Franciszek Stachura Date: Tue, 18 Feb 2025 13:25:42 +0100 Subject: [PATCH 2/3] web: Refactor message banners to a single element --- static/script.js | 59 +++++----------- static/style.css | 158 ++++++++++++++++++++---------------------- templates/header.html | 26 ++++--- 3 files changed, 105 insertions(+), 138 deletions(-) diff --git a/static/script.js b/static/script.js index 28752ad3..c9e0582f 100644 --- a/static/script.js +++ b/static/script.js @@ -323,41 +323,21 @@ function randomChoice(arr) { return arr[Math.floor(Math.random() * arr.length)]; } -function addBannerContents(bannerElement, msg) { - bannerElement.innerHTML = ''; - - const containerElement = document.createElement('div'); - containerElement.classList.add('container'); - - const titleElement = document.createElement('p'); - titleElement.classList.add('title'); - titleElement.innerText = msg.title; - containerElement.appendChild(titleElement); - - for (const line of msg.body.split('\n')) { - const subtitleElement = document.createElement('div'); - subtitleElement.classList.add('subtitle'); - subtitleElement.innerHTML = line; - containerElement.appendChild(subtitleElement); - } - - if (msg.action !== undefined) { - const actionElement = document.createElement('div'); - actionElement.classList.add('action'); - const actionInner = document.createElement('div'); - actionInner.classList.add('action-inner'); - actionInner.innerHTML = msg.action; - actionElement.appendChild(actionInner); - containerElement.appendChild(actionElement); +function updateBannerContents(msg) { + const banner = document.querySelector('.message-banner'); + + banner.querySelector('.title').innerText = msg.title; + banner.querySelector('.subtitle').innerHTML = msg.body.replace('\n', '
    '); + document.querySelector('.message-link').href = msg.link; + + const actionElement = banner.querySelector('.action'); + const actionInner = actionElement.querySelector('.action-inner'); + if (msg.action) { + actionInner.innerText = msg.action; + actionElement.classList.add("action-visible"); + } else { + actionElement.classList.remove("action-visible"); } - - bannerElement.appendChild(containerElement); - - const messageLinkElement = document.createElement('a'); - messageLinkElement.classList.add('message-link'); - messageLinkElement.href = msg.link; - messageLinkElement.setAttribute('target', '_blank'); - bannerElement.appendChild(messageLinkElement); } function updateMessageBanner() { @@ -368,13 +348,7 @@ function updateMessageBanner() { const pickedMsg = randomChoice(messages); const msg = pickedMsg.desktop ? pickedMsg.desktop : pickedMsg; - const desktopBanner = document.querySelector('.message-banner-desktop'); - addBannerContents(desktopBanner, msg); - - // Remove action button for mobile banner - msg.action = undefined; - const mobileBanner = document.querySelector('.message-banner-mobile'); - addBannerContents(mobileBanner, msg); + updateBannerContents(msg); }); } @@ -392,8 +366,7 @@ function sleep(duration) { async function cycleBannerWithData(data, delay=500) { for (const msg of data) { - const desktopBanner = document.querySelector('.message-banner-desktop'); - addBannerContents(desktopBanner, msg.desktop); + updateBannerContents(msg); await sleep(delay); } console.log("cycle finished"); diff --git a/static/style.css b/static/style.css index f8087c47..b4122317 100644 --- a/static/style.css +++ b/static/style.css @@ -1270,85 +1270,59 @@ main { /* === Banner =============================================================== */ -.message-banner-desktop { - padding: 5px; - -webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); - -moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); - box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); - font-size: 14; - font-family: Arial; - font-weight: bold; - width: 215px; - height: 120px; - text-align: center; - border-radius: 20px; - background: rgba(255,255,255,1); - background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); - background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); - background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); - background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); - background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); - background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 ); -} -.message-banner-desktop p.title { - font-size: 14px; - margin: 0; -} -.message-banner-desktop .subtitle { - width: 210px; - padding: 0 10px; - font-size: 12px; - position: relative; - z-index: 29; -} -.message-banner-desktop .container { - height: 100%; - display: flex; - display: flex; - flex-direction: column; - justify-content: space-evenly; -} -.message-banner-desktop .action { - font-size: 14px; - display: flex; - justify-content: center; - width: 210px; -} -.message-banner-desktop .action-inner { - border: 1px solid black; - border-radius: 5px; - padding: 2px 10px; +/* Message banner in desktop mode */ +@media screen and (min-width: 748px) { + .message-banner { + padding: 5px; + -webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); + -moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); + box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69); + font-size: 14; + font-family: Arial; + font-weight: bold; + width: 215px; + height: 120px; + text-align: center; + border-radius: 20px; + background: rgba(255,255,255,1); + background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); + background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); + background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); + background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); + background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 ); + } + .message-banner p.title { + font-size: 14px; + margin: 0; + } + .message-banner .subtitle { + font-size: 12px; + position: relative; + } + .message-banner .container { + height: 100%; + display: flex; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + .message-banner .action { + font-size: 14px; + justify-content: center; + display: none; + } + .message-banner .action-inner { + border: 1px solid black; + border-radius: 5px; + padding: 2px 10px; + } + .message-banner .action-visible { + display: flex; + } } -.message-banner-mobile { - padding: 3px; - display: none; - text-align: center; - background: #757575; - color: #fff; - font-family: Arial; - width: min-content; - width: 100%; -} -.message-banner-mobile .title { - margin: 0; - font-weight: 900; - text-wrap: pretty; -} -.message-banner-mobile .subtitle { - padding-top: 2px; - margin: 0; - word-break: break-word; -} -.message-link { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 99999; -} .icon-googleplus:before, .icon-mastodon:before { position: relative; @@ -1359,12 +1333,34 @@ main { width: 100%; } +/* Message banner in mobile mode */ @media screen and (max-width: 748px) { - .message-banner-desktop { + .message-banner { + width: 100%; + padding: 3px; + text-align: center; + background: #757575; + color: #fff; + font-family: Arial; + } + .message-banner .title { + margin: 0; + font-weight: 900; + text-wrap: pretty; + } + .message-banner .subtitle { + padding-top: 2px; + margin: 0; + word-break: break-word; + } + .message-banner .action { display: none; } - .message-banner-mobile { - display: block; + .message-banner .action-visible { + display: none; + } + .message-link { + width: 100%; } } @@ -1549,7 +1545,7 @@ main { } .header-main { display: flex; - flex-direction: column-reverse; + flex-direction: column; } } diff --git a/templates/header.html b/templates/header.html index a326a0a0..92c78dca 100644 --- a/templates/header.html +++ b/templates/header.html @@ -14,23 +14,21 @@
  • linkedin
  • github
    • -
    -
    -

    -

    - -
    -
    -
    -

    -
    -
    -
    - -
    + +
    +
    +

    +
    +
    +
    +
    +
    +
    +
    +
    - +