optimize infobeamer layout
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Florian Sorg 2021-12-23 23:43:55 +01:00
parent a009efe016
commit 48e4a254da
2 changed files with 38 additions and 5 deletions

View File

@ -311,6 +311,9 @@ table {
.box-content {
padding: $gap-vertical $gap-horizontal;
flex-grow: 1;
flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
}
.box-footer {
padding: ($gap-vertical / 2) $gap-horizontal;
@ -338,3 +341,31 @@ table {
.overflow-x-auto {
overflow-x: auto;
}
.infobeamer {
h1 {
margin: $gap-vertical 0;
}
main {
max-width: 1700px;
}
.box-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(10px, 1fr);
max-height: 75vh;
}
}
.progress {
@include aberration(0.1em);
border: 1px solid $color-box-frame;
height: 1em;
.fill {
background: $color-box-frame;
height: 100%;
}
}

View File

@ -41,7 +41,7 @@
return `
<li class="box">
<h2 class="box-header">${sanitize(talk.title)}</h2>
<div class="box-content">
<div class="box-content clamp-height">
<p class="date">
Speakers: ${sanitize(talk.persons.join(", ") || "---")}<br>
Stage: ${sanitize(talk.room)}<br>
@ -49,7 +49,9 @@
Duration: ${sanitize(talk.duration)}<br>
</p>
<p>${sanitize(talk.abstract)}</p>
<progress max="${max}" value="${value}">
</div>
<div class="box-footer">
<div class="progress"><div class="fill" style="width: ${value / max * 100}%"></div></div>
</div>
</li>`;
}
@ -97,13 +99,13 @@
setTimeout(main, (60-new Date().getSeconds())*1000+500);
}
</script>
</script>
</head>
<body>
<body class="infobeamer">
<header>
<nav class="nav nav-main">
<a class="nav-logo" href="/">
<img src="/franconianNet.svg"
<img src="/franconianNet.svg"
alt="Logo of franconian.net">
franconian.net
</a>