making use of tabber on course detail page

static/css/tabber.css

@@ -1,12 +1,6 @@
-.tab-group {
-  margin: 0 13px;
-  padding: 0;
-}
-
 .tab-group-openers {
-  display: block;
-  background: #777;
-  color: white;
+  display: flex;
+  justify-content: stretch;
   line-height: 40px;
   font-size: 16px;
   margin: 0;
@@ -14,18 +8,22 @@
 
 .tab-opener {
   display: inline-block;
+  flex: 1;
+  text-align: center;
   padding: 0 13px;
+  background-color: #b3b7c1;
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+  transition: color .2s ease, background .2s ease;
+}
+.tab-opener:not(.tab-visible):hover {
   cursor: pointer;
-  transition: color .3s ease, background .3s ease;
+  background-color: transparent;
+  color: rgb(52, 48, 58);
 }
 
 .tab-opener.tab-visible {
-  color: black;
-  background: white;
-}
-
-.tab {
-  padding: 13px 31px;
-  background: white;
-  color: black;
+  background-color: transparent;
+  color: rgb(52, 48, 58);
 }

static/js/tabber.js

@@ -21,6 +21,9 @@
         var tabFile = tab.data('tab-file') || false;
         var $opener = makeOpener(tabName, i);
         $openers.append($opener);
+        if (tab.find('.tab-title')) {
+          tab.find('.tab-title').remove();
+        }
         tab.hide();
         var loaded = false;
         tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: false});

templates/course.hamlet

@@ -1,39 +1,43 @@
 <div .container>
   <h2>#{courseName course}
-  $maybe school <- schoolMB
-    <h4>#{schoolName school}
-  $maybe descr <- courseDescription course
-    <h3 #description>Beschreibung
-    <p> #{descr}
-  $maybe link <- courseLinkExternal course
-    <h3 #linl>Homepage
-    <a href=#{link}>#{link}
-
-<div .container>
-  <h3>Übersicht
   <table>
+    $maybe school <- schoolMB
+      <tr>
+        <th #school>Fakultät/Institut
+        <td>
+          #{schoolName school}
+    $maybe descr <- courseDescription course
+      <tr>
+        <th #description>Beschreibung
+        <td>
+          <p>#{descr}
+    $maybe link <- courseLinkExternal course
+      <tr>
+        <th #website>Website
+        <td>
+          <a href=#{link}>#{link}
     <tr>
-      <th>Teilnehmer
+      <th #participants>Teilnehmer
       <td>
         #{participants}
         $maybe capacity <- courseCapacity course
           \ von #{capacity}
     <tr>
-      <th>Anmeldezeitraum
+      <th #registration>Anmeldezeitraum
       <td>
         $maybe regFrom <- courseRegisterFrom course
           #{formatTimeGerWD regFrom}
         $maybe regTo   <- courseRegisterTo   course
           \ bis #{formatTimeGerWD regTo}
+        <a>Anmelden
+
+  $# <form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
+  $#   ^{regWidget}
 
-  <form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
-    ^{regWidget}
-    
 <div .container>
-  <div class="tab-group">
-    <div class="tab" data-tab-name="Übungsgruppen">
-    <div class="tab" data-tab-name="Übungsblätter">
-      <h3>Übungsblätter
+  <div .tab-group>
+    <div .tab data-tab-name="Übungsblätter">
+      <h3 .tab-title>Übungsblätter (hardcoded table below)
       <table class="table table-striped table-hover">
         <thead>
           <tr>
@@ -44,9 +48,13 @@
         <tbody>
           <tr>
             <td>
-              <a class="btn btn-link" href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
+              <a href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
             <td>Do 11.04.18
             <td>Do 11.04.18
             <td>NotGraded
-    <div class="tab" data-tab-name="Klausuren">
-    <div class="tab" data-tab-name="Korrekturen">
+    <div .tab data-tab-name="Übungsgruppen">
+      <h3 .tab-title>Übungsgruppen
+      <div>...
+    <div .tab data-tab-name="Klausuren">
+      <h3 .tab-title>Klausuren
+      <div>...