started working on course-pages

This commit is contained in:
Felix Hamann 2018-03-12 15:07:23 +01:00
parent 73500274ec
commit f2948c075d
5 changed files with 61 additions and 46 deletions

View File

@ -1,38 +1,34 @@
<div .masthead> <div .course-header>
<div .container> <div .course-header__info>
<div .row> <table>
<h1 .header> <tr>
#{courseName course} <th>Teilnehmer
$maybe school <- schoolMB <td>
<h4> #{participants}
#{schoolName school} $maybe capacity <- courseCapacity course
<div .container> \ von #{capacity}
<div .bs-docs-section> <tr>
<div .row> <th>Anmeldezeitraum
<div .col-lg-12> <td>
<div .page-header> $maybe regFrom <- courseRegisterFrom course
#{formatTimeGerWD regFrom}
$maybe regTo <- courseRegisterTo course
\ bis #{formatTimeGerWD regTo}
$maybe descr <- courseDescription course <div>
<h2 #description>Beschreibung <form method=post action=@{CourseShowR tid csh} enctype=#{regEnctype}>
<p> #{descr} ^{regWidget}
$maybe link <- courseLinkExternal course
<h4 #linl>Homepage <div .course-header__title>
<a href=#{link}>#{link} <h1>#{courseName course}
<div .row> $maybe school <- schoolMB
<div .col-lg-12> <h4>#{schoolName school}
<h4>Teilnehmer
#{participants}
$maybe capacity <- courseCapacity course
\ von #{capacity}
<br>
$maybe regFrom <- courseRegisterFrom course
Anmeldezeitraum: #{formatTimeGerWD regFrom}
$maybe regTo <- courseRegisterTo course
\ bis #{formatTimeGerWD regTo}
<form method=post action=@{CourseShowR tid csh} enctype=#{regEnctype}>
^{regWidget}
<div>
<hr> $maybe descr <- courseDescription course
<h2 #description>Beschreibung
<p> #{descr}
$maybe link <- courseLinkExternal course
<h4 #linl>Homepage
<a href=#{link}>#{link}

19
templates/course.lucius Normal file
View File

@ -0,0 +1,19 @@
.course-header {
/*display: flex;
flex-direction: row;
justify-content: space-between;*/
}
.course-header__title {
align-self: baseline;
}
.course-header__info {
border: 1px solid var(--greybase);
padding: 13px;
align-self: center;
float: right;
}
.course-header__info table {
margin: 0;
}

View File

@ -142,6 +142,7 @@ th {
.main__content { .main__content {
background-color: white; background-color: white;
padding: 20px 40px; padding: 20px 40px;
padding-right: 0;
flex: 1; flex: 1;
z-index: 0; z-index: 0;

View File

@ -57,11 +57,9 @@
this.addTo = function(parentElement) { this.addTo = function(parentElement) {
parentElement.appendChild(this.container); parentElement.appendChild(this.container);
parentElement.appendChild(this.remover);
} }
this.remove = function() { this.remove = function() {
this.container.remove(); this.container.remove();
this.remover.remove();
} }
this.isValid = function() { this.isValid = function() {
return this.container.classList.contains('file-input__container--valid'); return this.container.classList.contains('file-input__container--valid');
@ -140,6 +138,7 @@
nextInput.setAttribute('type', 'file'); nextInput.setAttribute('type', 'file');
cont.appendChild(nextInput); cont.appendChild(nextInput);
cont.appendChild(desc); cont.appendChild(desc);
cont.appendChild(remover);
return new FileInput(cont, nextInput, desc, remover); return new FileInput(cont, nextInput, desc, remover);
} }
// initial setup // initial setup
@ -179,6 +178,7 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// setup reactive labels
Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) { Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
var input = document.querySelector('#' + label.getAttribute('for')); var input = document.querySelector('#' + label.getAttribute('for'));
var parent = label.parentElement; var parent = label.parentElement;

View File

@ -52,7 +52,8 @@ textarea:focus {
.form-group { .form-group {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(150px, max-content)); grid-template-columns: repeat(2, minmax(150px, max-content));
grid-auto-columns: minmax(150px, max-content);
grid-gap: 5px; grid-gap: 5px;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
@ -200,7 +201,7 @@ input[type="checkbox"]:checked::after {
} }
@media (max-width: 999px) { @media (max-width: 999px) {
.form-group { .form-group {
grid-template-rows: 30px auto; grid-template-rows: 30px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: baseline; align-items: baseline;
margin-top: 17px; margin-top: 17px;
@ -230,6 +231,8 @@ input[type="file"] {
} }
.file-input__container { .file-input__container {
grid-column-start: 2; grid-column-start: 2;
display: flex;
justify-content: space-between;
} }
.file-input__label, .file-input__label,
.file-input__remover { .file-input__remover {
@ -272,8 +275,8 @@ input[type="file"] {
height: 30px; height: 30px;
text-align: center; text-align: center;
background-color: var(--warningbase); background-color: var(--warningbase);
grid-column-start: 3;
position: relative; position: relative;
margin-left: 10px;
} }
.file-input__remover::before { .file-input__remover::before {
position: absolute; position: absolute;
@ -291,15 +294,11 @@ input[type="file"] {
.file-input__container--valid > .file-input__label::after { .file-input__container--valid > .file-input__label::after {
content: none; content: none;
} }
.file-input__container--valid + .file-input__remover { .file-input__container--valid > .file-input__remover {
display: block; display: block;
} }
@media (max-width: 999px) { @media (max-width: 999px) {
.file-input__container, .file-input__container {
.file-input__remover {
grid-column-start: 1; grid-column-start: 1;
} }
.file-input__remover {
justify-self: end;
}
} }