web: refactor message banners & support mobile
We had an hardcoded mobile banner that was nice looking but couldn't deal with all the content for the various banners we want to display. Also, it was a separate element to the desktop one. Unify them as a single element that adapts (as it should) to desktop or mobile viewports.
This commit is contained in:
Franciszek Stachura
Théo Lebrun
parent
7cdeaafa9c
commit
6a83ae7661
4 changed files with 110 additions and 154 deletions
|
|
@ -323,51 +323,32 @@ function randomChoice(arr) {
|
||||||
return arr[Math.floor(Math.random() * arr.length)];
|
return arr[Math.floor(Math.random() * arr.length)];
|
||||||
}
|
}
|
||||||
|
|
||||||
function addBannerContents(bannerElement, msg) {
|
function updateBannerContents(msg) {
|
||||||
bannerElement.innerHTML = '';
|
const banner = document.querySelector('.message-banner');
|
||||||
|
|
||||||
const containerElement = document.createElement('div');
|
banner.querySelector('.title').innerText = msg.title;
|
||||||
containerElement.classList.add('container');
|
banner.querySelector('.subtitle').innerHTML = msg.body.replace('\n', '<br/>');
|
||||||
|
document.querySelector('.message-link').href = msg.link;
|
||||||
|
|
||||||
const titleElement = document.createElement('p');
|
const actionElement = banner.querySelector('.action');
|
||||||
titleElement.classList.add('title');
|
const actionInner = actionElement.querySelector('.action-inner');
|
||||||
titleElement.innerText = msg.title;
|
if (msg.action) {
|
||||||
containerElement.appendChild(titleElement);
|
actionInner.innerText = msg.action;
|
||||||
|
actionElement.classList.add("action-visible");
|
||||||
for (const line of msg.body.split('\n')) {
|
} else {
|
||||||
const subtitleElement = document.createElement('div');
|
actionElement.classList.remove("action-visible");
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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() {
|
function updateMessageBanner() {
|
||||||
fetch('/static/messages.json')
|
fetch('/static/messages.json')
|
||||||
.then(r => r.json())
|
.then(r => r.json())
|
||||||
.then(messages => {
|
.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');
|
updateBannerContents(msg);
|
||||||
addBannerContents(desktopBanner, msg.desktop);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -385,8 +366,7 @@ function sleep(duration) {
|
||||||
|
|
||||||
async function cycleBannerWithData(data, delay=500) {
|
async function cycleBannerWithData(data, delay=500) {
|
||||||
for (const msg of data) {
|
for (const msg of data) {
|
||||||
const desktopBanner = document.querySelector('.message-banner-desktop');
|
updateBannerContents(msg);
|
||||||
addBannerContents(desktopBanner, msg.desktop);
|
|
||||||
await sleep(delay);
|
await sleep(delay);
|
||||||
}
|
}
|
||||||
console.log("cycle finished");
|
console.log("cycle finished");
|
||||||
|
|
|
||||||
182
static/style.css
182
static/style.css
|
|
@ -1270,98 +1270,58 @@ main {
|
||||||
|
|
||||||
/* === Banner =============================================================== */
|
/* === Banner =============================================================== */
|
||||||
|
|
||||||
.message-banner-desktop {
|
/* Message banner in desktop mode */
|
||||||
padding: 5px;
|
@media screen and (min-width: 748px) {
|
||||||
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
.message-banner {
|
||||||
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
padding: 5px;
|
||||||
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||||
font-size: 14;
|
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||||
font-family: Arial;
|
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||||
font-weight: bold;
|
font-size: 14;
|
||||||
width: 215px;
|
font-family: Arial;
|
||||||
height: 120px;
|
font-weight: bold;
|
||||||
text-align: center;
|
width: 215px;
|
||||||
border-radius: 20px;
|
height: 120px;
|
||||||
background: rgba(255,255,255,1);
|
text-align: center;
|
||||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
border-radius: 20px;
|
||||||
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: rgba(255,255,255,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: -moz-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: -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: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
background: -webkit-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%);
|
background: -o-linear-gradient(top, 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 );
|
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%);
|
||||||
.message-banner-desktop p.title {
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
|
||||||
font-size: 14px;
|
}
|
||||||
margin: 0;
|
.message-banner p.title {
|
||||||
}
|
font-size: 14px;
|
||||||
.message-banner-desktop .subtitle {
|
margin: 0;
|
||||||
width: 210px;
|
}
|
||||||
padding: 0 10px;
|
.message-banner .subtitle {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 29;
|
}
|
||||||
}
|
.message-banner .container {
|
||||||
.message-banner-desktop .container {
|
height: 100%;
|
||||||
height: 100%;
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
display: flex;
|
justify-content: space-evenly;
|
||||||
flex-direction: column;
|
}
|
||||||
justify-content: space-evenly;
|
.message-banner .action {
|
||||||
}
|
font-size: 14px;
|
||||||
.message-banner-desktop .action {
|
justify-content: center;
|
||||||
font-size: 14px;
|
display: none;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
.message-banner .action-inner {
|
||||||
width: 210px;
|
border: 1px solid black;
|
||||||
}
|
border-radius: 5px;
|
||||||
.message-banner-desktop .action-inner {
|
padding: 2px 10px;
|
||||||
border: 1px solid black;
|
}
|
||||||
border-radius: 5px;
|
.message-banner .action-visible {
|
||||||
padding: 2px 10px;
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-banner-mobile {
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
background: #fe003e;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.message-banner-mobile .title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 25px;
|
|
||||||
text-wrap: pretty;
|
|
||||||
}
|
|
||||||
.message-banner-mobile .subtitle {
|
|
||||||
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 {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 99999;
|
|
||||||
}
|
|
||||||
.icon-googleplus:before,
|
.icon-googleplus:before,
|
||||||
.icon-mastodon:before {
|
.icon-mastodon:before {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -1372,20 +1332,34 @@ main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Message banner in mobile mode */
|
||||||
@media screen and (max-width: 748px) {
|
@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;
|
display: none;
|
||||||
}
|
}
|
||||||
.message-banner-mobile {
|
.message-banner .action-visible {
|
||||||
display: block;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
.message-link {
|
||||||
@media screen and (max-width: 400px) {
|
width: 100%;
|
||||||
.message-banner-mobile .title {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
.message-banner-mobile .subtitle {
|
|
||||||
font-size: 9.5px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1538,7 +1512,7 @@ main {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline-block;
|
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 {
|
.social-icons li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -1561,14 +1535,16 @@ main {
|
||||||
}
|
}
|
||||||
.header .social-icons {
|
.header .social-icons {
|
||||||
position: static;
|
position: static;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.social-icons a::before {
|
.social-icons a::before {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: #9da9ea;
|
color: #9da9ea;
|
||||||
}
|
}
|
||||||
.header-main {
|
.header-main {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 40px 1fr 40px;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,18 +17,18 @@
|
||||||
</nav>
|
</nav>
|
||||||
<div class="header-main">
|
<div class="header-main">
|
||||||
<div class="banners">
|
<div class="banners">
|
||||||
<div class="message-banner-mobile">
|
<a class="message-link" target="_blank" href="https://bootlin.com/">
|
||||||
<p class="title">Linux Audio</p>
|
<div class="message-banner">
|
||||||
<p class="subtitle">Check our new training course</p>
|
<div class="container">
|
||||||
<a class="message-link" target="_blank" href="https://bootlin.com/training/audio/"></a>
|
<p class="title"></p>
|
||||||
</div>
|
<div class="subtitle"></div>
|
||||||
<div class="message-banner-desktop">
|
<div class="action">
|
||||||
<p class="title"></p>
|
<div class="action-inner">
|
||||||
<div class="subtitle"></div>
|
</div>
|
||||||
<div class="subtitle"></div>
|
</div>
|
||||||
<div class="subtitle"></div>
|
</div>
|
||||||
<a class="message-link" target="_blank" href="https://bootlin.com/"></a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-logo">
|
<div class="header-logo">
|
||||||
<h1>
|
<h1>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
Elixir Cross Referencer - Explore source code in your browser - Particularly useful for the Linux kernel and other low-level projects in C/C++ (bootloaders, C libraries...)
|
Elixir Cross Referencer - Explore source code in your browser - Particularly useful for the Linux kernel and other low-level projects in C/C++ (bootloaders, C libraries...)
|
||||||
{%- endblock %}">
|
{%- endblock %}">
|
||||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
||||||
<link rel="stylesheet" href="/static/style.css?v=15">
|
<link rel="stylesheet" href="/static/style.css?v=16">
|
||||||
|
|
||||||
<link rel="preload" href="/static/img/2penguins.svg" as="image" />
|
<link rel="preload" href="/static/img/2penguins.svg" as="image" />
|
||||||
<link rel="preload" href="/static/img/arrow-dropdown-16.svg" as="image" />
|
<link rel="preload" href="/static/img/arrow-dropdown-16.svg" as="image" />
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
</span>
|
</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<script src="/static/script.js?v=16"></script>
|
<script src="/static/script.js?v=17"></script>
|
||||||
<script src="/static/dynamic-references.js?v=4"></script>
|
<script src="/static/dynamic-references.js?v=4"></script>
|
||||||
<script src="/static/autocomplete.js" project="{{ current_project }}"></script>
|
<script src="/static/autocomplete.js" project="{{ current_project }}"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue