Skip to content

Commit 1803752

Browse files
fstachurafstachura
committed
web: Refactor message banners to a single element
1 parent e1a12ba commit 1803752

File tree

3 files changed

+103
-122
lines changed

3 files changed

+103
-122
lines changed

‎static/script.js

Lines changed: 15 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -323,41 +323,26 @@ function randomChoice(arr) {
323323
return arr[Math.floor(Math.random() * arr.length)];
324324
}
325325

326-
function addBannerContents(bannerElement, msg) {
327-
bannerElement.innerHTML = '';
326+
function updateBannerContents(msg) {
327+
const banner = document.querySelector('.message-banner');
328328

329-
const containerElement = document.createElement('div');
330-
containerElement.classList.add('container');
331-
332-
const titleElement = document.createElement('p');
333-
titleElement.classList.add('title');
329+
const titleElement = banner.querySelector('.title');
334330
titleElement.innerText = msg.title;
335-
containerElement.appendChild(titleElement);
336331

337-
for (const line of msg.body.split('\n')) {
338-
const subtitleElement = document.createElement('div');
339-
subtitleElement.classList.add('subtitle');
340-
subtitleElement.innerHTML = line;
341-
containerElement.appendChild(subtitleElement);
342-
}
332+
const subtitleElement = banner.querySelector('.subtitle');
333+
subtitleElement.innerText = msg.body;
343334

344-
if (msg.action !== undefined) {
345-
const actionElement = document.createElement('div');
346-
actionElement.classList.add('action');
347-
const actionInner = document.createElement('div');
348-
actionInner.classList.add('action-inner');
349-
actionInner.innerHTML = msg.action;
350-
actionElement.appendChild(actionInner);
351-
containerElement.appendChild(actionElement);
335+
const actionElement = banner.querySelector('.action');
336+
const actionInner = actionElement.querySelector('.action-inner')
337+
if (msg.action) {
338+
actionInner.innerText = msg.action;
339+
actionElement.classList.add("action-visible");
340+
} else {
341+
actionElement.classList.remove("action-visible");
352342
}
353343

354-
bannerElement.appendChild(containerElement);
355-
356-
const messageLinkElement = document.createElement('a');
357-
messageLinkElement.classList.add('message-link');
344+
const messageLinkElement = banner.querySelector('.message-link');
358345
messageLinkElement.href = msg.link;
359-
messageLinkElement.setAttribute('target', '_blank');
360-
bannerElement.appendChild(messageLinkElement);
361346
}
362347

363348
function updateMessageBanner() {
@@ -368,13 +353,7 @@ function updateMessageBanner() {
368353
const pickedMsg = randomChoice(messages);
369354
const msg = pickedMsg.desktop ? pickedMsg.desktop : pickedMsg;
370355

371-
const desktopBanner = document.querySelector('.message-banner-desktop');
372-
addBannerContents(desktopBanner, msg);
373-
374-
// Remove action button for mobile banner
375-
msg.action = undefined;
376-
const mobileBanner = document.querySelector('.message-banner-mobile');
377-
addBannerContents(mobileBanner, msg);
356+
updateBannerContents(msg);
378357
});
379358
}
380359

@@ -392,8 +371,7 @@ function sleep(duration) {
392371

393372
async function cycleBannerWithData(data, delay=500) {
394373
for (const msg of data) {
395-
const desktopBanner = document.querySelector('.message-banner-desktop');
396-
addBannerContents(desktopBanner, msg.desktop);
374+
updateBannerContents(msg);
397375
await sleep(delay);
398376
}
399377
console.log("cycle finished");

‎static/style.css

Lines changed: 79 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1270,77 +1270,62 @@ main {
12701270

12711271
/* === Banner =============================================================== */
12721272

1273-
.message-banner-desktop {
1274-
padding: 5px;
1275-
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1276-
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1277-
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1278-
font-size: 14;
1279-
font-family: Arial;
1280-
font-weight: bold;
1281-
width: 215px;
1282-
height: 120px;
1283-
text-align: center;
1284-
border-radius: 20px;
1285-
background: rgba(255,255,255,1);
1286-
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1287-
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)));
1288-
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1289-
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1290-
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1291-
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1292-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
1293-
}
1294-
.message-banner-desktop p.title {
1295-
font-size: 14px;
1296-
margin: 0;
1297-
}
1298-
.message-banner-desktop .subtitle {
1299-
width: 210px;
1300-
padding: 0 10px;
1301-
font-size: 12px;
1302-
position: relative;
1303-
z-index: 29;
1304-
}
1305-
.message-banner-desktop .container {
1306-
height: 100%;
1307-
display: flex;
1308-
display: flex;
1309-
flex-direction: column;
1310-
justify-content: space-evenly;
1311-
}
1312-
.message-banner-desktop .action {
1313-
font-size: 14px;
1314-
display: flex;
1315-
justify-content: center;
1316-
width: 210px;
1317-
}
1318-
.message-banner-desktop .action-inner {
1319-
border: 1px solid black;
1320-
border-radius: 5px;
1321-
padding: 2px 10px;
1273+
/* Message banner in desktop mode */
1274+
@media screen and (min-width: 748px) {
1275+
.message-banner {
1276+
padding: 5px;
1277+
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1278+
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1279+
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
1280+
font-size: 14;
1281+
font-family: Arial;
1282+
font-weight: bold;
1283+
width: 215px;
1284+
height: 120px;
1285+
text-align: center;
1286+
border-radius: 20px;
1287+
background: rgba(255,255,255,1);
1288+
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1289+
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)));
1290+
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1291+
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1292+
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1293+
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
1294+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
1295+
}
1296+
.message-banner p.title {
1297+
font-size: 14px;
1298+
margin: 0;
1299+
}
1300+
.message-banner .subtitle {
1301+
width: 210px;
1302+
padding: 0 10px;
1303+
font-size: 12px;
1304+
position: relative;
1305+
z-index: 29;
1306+
}
1307+
.message-banner .container {
1308+
height: 100%;
1309+
display: flex;
1310+
display: flex;
1311+
flex-direction: column;
1312+
justify-content: space-evenly;
1313+
}
1314+
.message-banner .action {
1315+
font-size: 14px;
1316+
justify-content: center;
1317+
display: none;
1318+
}
1319+
.message-banner .action-inner {
1320+
border: 1px solid black;
1321+
border-radius: 5px;
1322+
padding: 2px 10px;
1323+
}
1324+
.message-banner .action-visible {
1325+
display: flex;
1326+
}
13221327
}
13231328

1324-
.message-banner-mobile {
1325-
padding: 3px;
1326-
display: none;
1327-
text-align: center;
1328-
background: #757575;
1329-
color: #fff;
1330-
font-family: Arial;
1331-
width: min-content;
1332-
width: 100%;
1333-
}
1334-
.message-banner-mobile .title {
1335-
margin: 0;
1336-
font-weight: 900;
1337-
text-wrap: pretty;
1338-
}
1339-
.message-banner-mobile .subtitle {
1340-
padding-top: 2px;
1341-
margin: 0;
1342-
word-break: break-word;
1343-
}
13441329
.message-link {
13451330
position: absolute;
13461331
width: 100%;
@@ -1359,12 +1344,33 @@ main {
13591344
width: 100%;
13601345
}
13611346

1347+
/* Message banner in mobile mode */
13621348
@media screen and (max-width: 748px) {
1363-
.message-banner-desktop {
1349+
.message-banner {
1350+
width: 100%;
1351+
padding: 3px;
1352+
text-align: center;
1353+
background: #757575;
1354+
color: #fff;
1355+
font-family: Arial;
1356+
}
1357+
.message-banner .title {
1358+
margin: 0;
1359+
font-weight: 900;
1360+
text-wrap: pretty;
1361+
}
1362+
.message-banner .subtitle {
1363+
width: 100%;
1364+
1365+
padding-top: 2px;
1366+
margin: 0;
1367+
word-break: break-word;
1368+
}
1369+
.message-banner .action {
13641370
display: none;
13651371
}
1366-
.message-banner-mobile {
1367-
display: block;
1372+
.message-banner .action-visible {
1373+
display: none;
13681374
}
13691375
}
13701376

@@ -1549,7 +1555,7 @@ main {
15491555
}
15501556
.header-main {
15511557
display: flex;
1552-
flex-direction: column-reverse;
1558+
flex-direction: column;
15531559
}
15541560
}
15551561

‎templates/header.html

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,18 @@
1414
<li><a target="_blank" class="icon-linkedin" href="https://www.linkedin.com/company/bootlin/">linkedin</a></li>
1515
<li><a target="_blank" class="icon-github" href="https://github.com/bootlin">github</a></li>
1616
</ul>
17-
<div class="banners">
18-
<div class="message-banner-mobile">
19-
<p class="title"></p>
20-
<p class="subtitle"></p>
21-
<a class="message-link" target="_blank" href="https://bootlin.com/"></a>
22-
</div>
23-
</div>
2417
</nav>
2518
<div class="header-main">
2619
<div class="banners">
27-
<div class="message-banner-desktop">
28-
<p class="title"></p>
29-
<div class="subtitle"></div>
30-
<div class="subtitle"></div>
31-
<div class="subtitle"></div>
20+
<div class="message-banner">
21+
<div class="container">
22+
<p class="title"></p>
23+
<div class="subtitle"></div>
24+
<div class="action">
25+
<div class="action-inner">
26+
</div>
27+
</div>
28+
</div>
3229
<a class="message-link" target="_blank" href="https://bootlin.com/"></a>
3330
</div>
3431
</div>

0 commit comments

Comments
 (0)