started working on course-pages

templates/course.hamlet

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

templates/course.lucius

@@ -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;
+}

templates/default-layout.lucius

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

templates/widgets/form.julius

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

templates/widgets/form.lucius

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