tabber and table styles and more dummy data

static/css/tabber.css

@@ -1,9 +1,14 @@
+.tab-group {
+  box-shadow: 0 0 0 18px white, 0 0 0 20px #b3b7c1;
+  margin-top: 40px;
+}
+
 .tab-group-openers {
   display: flex;
   justify-content: stretch;
   line-height: 40px;
-  font-size: 16px;
+  font-size: 14px;
-  margin: 0;
+  margin-bottom: 40px;
 }
 
 .tab-opener {
@@ -11,19 +16,27 @@
   flex: 1;
   text-align: center;
   padding: 0 13px;
+  margin: 0 2px;
   background-color: #b3b7c1;
   color: white;
-  font-size: 20px;
+  font-size: 16px;
+  text-transform: uppercase;
   font-weight: 600;
-  transition: color .2s ease, background .2s ease;
+  transition: all .2s ease;
+  box-shadow: inset 0 -4px 4px rgba(0, 0, 0, 0.1);
+  border-top: 5px solid transparent;
 }
 .tab-opener:not(.tab-visible):hover {
   cursor: pointer;
   background-color: transparent;
   color: rgb(52, 48, 58);
+  box-shadow: none;
+  border-top-color: grey;
 }
 
 .tab-opener.tab-visible {
   background-color: transparent;
   color: rgb(52, 48, 58);
+  border-top-color: #5F98C2;
+  box-shadow: none;
 }

templates/course.hamlet

@@ -29,7 +29,10 @@
           #{formatTimeGerWD regFrom}
         $maybe regTo   <- courseRegisterTo   course
           \ bis #{formatTimeGerWD regTo}
-        <a>Anmelden
+
+        $# if allowed to register
+        <div .course__registration>
+          <a href="#">Anmelden
 
   $# <form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
   $#   ^{regWidget}
@@ -37,8 +40,9 @@
 <div .container>
   <div .tab-group>
     <div .tab data-tab-name="Übungsblätter">
-      <h3 .tab-title>Übungsblätter (hardcoded table below)
+      ^{modal "#modal-toggler__new-sheet" Nothing}
-      <table class="table table-striped table-hover">
+      <h3 .tab-title>Übungsblätter
+      <table .table.table-striped.table-hover>
         <thead>
           <tr>
             <th>Blatt
@@ -49,12 +53,50 @@
           <tr>
             <td>
               <a href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
-            <td>Do 11.04.18
+            <td>Do 08.04.18
             <td>Do 11.04.18
             <td>NotGraded
+          <tr>
+            <td>
+              <a href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 2
+            <td>Do 15.04.18
+            <td>Do 18.04.18
+            <td>NotGraded
+          <tr .no-hover.no-stripe>
+            <td>&nbsp;
+            <td>&nbsp;
+            <td>&nbsp;
+            <td>&nbsp;
+            <td>
+              <a href="/course/S2018/ffp/ex/new" #modal-toggler__new-sheet>Neues Übungsblatt anlegen
     <div .tab data-tab-name="Übungsgruppen">
       <h3 .tab-title>Übungsgruppen
-      <div>...
+      <table .table.table-striped.table-hover>
+        <thead>
+          <tr>
+            <th>Name
+            <th>Termin
+            <th>Raum
+            <th>Studenten
+            <th>Tutor
+            <th>Anmeldung bis
+        <tbody>
+          <tr>
+            <td>
+              <a href="#">Gruppe 1
+            <td>Montag 10:00 - 12:00
+            <td>N/A
+            <td>2/10
+            <td>Tutor1 Tutoren
+            <td>Do 21.02.2019, 19:00
+          <tr>
+            <td>
+              <a href="#">Gruppe 2
+            <td>Montag 12:00 - 14:00
+            <td>N/A
+            <td>0/10
+            <td>Assistant1 Assistant
+            <td>Di 21.02.2017, 19:00
     <div .tab data-tab-name="Klausuren">
       <h3 .tab-title>Klausuren
       <div>...

templates/default-layout.lucius

@@ -105,6 +105,24 @@ table {
   overflow: auto;
 }
 
+.table-striped {
+
+  tbody {
+    tr:not(.no-stripe):nth-child(even) {
+      background-color: #e8e8e8;
+    }
+  }
+}
+
+.table-hover {
+
+  tbody {
+    tr:not(.no-hover):hover {
+      background-color: #d8d8d8;
+    }
+  }
+}
+
 th, td {
   text-align: left;
   padding: 0 13px 0 7px;