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)];
|
||||
}
|
||||
|
||||
function addBannerContents(bannerElement, msg) {
|
||||
bannerElement.innerHTML = '';
|
||||
function updateBannerContents(msg) {
|
||||
const banner = document.querySelector('.message-banner');
|
||||
|
||||
const containerElement = document.createElement('div');
|
||||
containerElement.classList.add('container');
|
||||
banner.querySelector('.title').innerText = msg.title;
|
||||
banner.querySelector('.subtitle').innerHTML = msg.body.replace('\n', '<br/>');
|
||||
document.querySelector('.message-link').href = msg.link;
|
||||
|
||||
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);
|
||||
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");
|
||||
}
|
||||
|
||||
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() {
|
||||
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);
|
||||
updateBannerContents(msg);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -385,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");
|
||||
|
|
|
|||
118
static/style.css
118
static/style.css
|
|
@ -1270,7 +1270,9 @@ main {
|
|||
|
||||
/* === Banner =============================================================== */
|
||||
|
||||
.message-banner-desktop {
|
||||
/* 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);
|
||||
|
|
@ -1290,78 +1292,36 @@ main {
|
|||
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 {
|
||||
}
|
||||
.message-banner p.title {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.message-banner-desktop .subtitle {
|
||||
width: 210px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.message-banner .subtitle {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
z-index: 29;
|
||||
}
|
||||
.message-banner-desktop .container {
|
||||
}
|
||||
.message-banner .container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.message-banner-desktop .action {
|
||||
}
|
||||
.message-banner .action {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 210px;
|
||||
}
|
||||
.message-banner-desktop .action-inner {
|
||||
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 {
|
||||
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-mastodon:before {
|
||||
position: relative;
|
||||
|
|
@ -1372,20 +1332,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;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.message-banner-mobile .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.message-banner-mobile .subtitle {
|
||||
font-size: 9.5px;
|
||||
.message-link {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1538,7 +1512,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 +1535,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@
|
|||
</nav>
|
||||
<div class="header-main">
|
||||
<div class="banners">
|
||||
<div class="message-banner-mobile">
|
||||
<p class="title">Linux Audio</p>
|
||||
<p class="subtitle">Check our new training course</p>
|
||||
<a class="message-link" target="_blank" href="https://bootlin.com/training/audio/"></a>
|
||||
</div>
|
||||
<div class="message-banner-desktop">
|
||||
<a class="message-link" target="_blank" href="https://bootlin.com/">
|
||||
<div class="message-banner">
|
||||
<div class="container">
|
||||
<p class="title"></p>
|
||||
<div class="subtitle"></div>
|
||||
<div class="subtitle"></div>
|
||||
<div class="subtitle"></div>
|
||||
<a class="message-link" target="_blank" href="https://bootlin.com/"></a>
|
||||
<div class="action">
|
||||
<div class="action-inner">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-logo">
|
||||
<h1>
|
||||
<img src="/static/img/bootlin-logo-white.svg" alt="Bootlin logo"/>
|
||||
|
|
|
|||
|
|
@ -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...)
|
||||
{%- endblock %}">
|
||||
<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/arrow-dropdown-16.svg" as="image" />
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
</span>
|
||||
</footer>
|
||||
</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/autocomplete.js" project="{{ current_project }}"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue