franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/style.scss
View File

@ -311,6 +311,9 @@ table {
.box-content { .box-content {
padding: $gap-vertical $gap-horizontal; padding: $gap-vertical $gap-horizontal;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
} }
.box-footer { .box-footer {
padding: ($gap-vertical / 2) $gap-horizontal; padding: ($gap-vertical / 2) $gap-horizontal;
@ -338,3 +341,31 @@ table {
.overflow-x-auto { .overflow-x-auto {
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%;
}
}

8
static/infobeamer/index.html
View File

@ -41,7 +41,7 @@
return ` return `
<li class="box"> <li class="box">
<h2 class="box-header">${sanitize(talk.title)}</h2> <h2 class="box-header">${sanitize(talk.title)}</h2>
<div class="box-content"> <div class="box-content clamp-height">
<p class="date"> <p class="date">
Speakers: ${sanitize(talk.persons.join(", ") || "---")}<br> Speakers: ${sanitize(talk.persons.join(", ") || "---")}<br>
Stage: ${sanitize(talk.room)}<br> Stage: ${sanitize(talk.room)}<br>
@ -49,7 +49,9 @@
Duration: ${sanitize(talk.duration)}<br> Duration: ${sanitize(talk.duration)}<br>
</p> </p>
<p>${sanitize(talk.abstract)}</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> </div>
</li>`; </li>`;
} }
@ -99,7 +101,7 @@
} }
</script> </script>
</head> </head>
<body> <body class="infobeamer">
<header> <header>
<nav class="nav nav-main"> <nav class="nav nav-main">
<a class="nav-logo" href="/"> <a class="nav-logo" href="/">