Merge branch 'fix/tables' into 'master'

fixes for table styles and other smaller design issues

See merge request !35

templates/default-layout.lucius

@@ -254,3 +254,101 @@ a.btn.btn-info:hover,
 .btn.btn-info:hover {
   background-color: var(--color-grey)
 }
+
+/* GENERAL TABLE STYLES */
+.table {
+  margin: 21px 0;
+  width: 100%;
+}
+
+.table--striped {
+
+  .table__row:not(.no-stripe):nth-child(even) {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+}
+
+.table--hover {
+
+  .table__row:not(.no-hover):not(.table__row--head):hover {
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+}
+
+/* SCROLLTABLE */
+.scrolltable {
+  overflow: auto;
+}
+
+/* TABLE DESIGN */
+.table__row {
+
+  /* TODO: move outside of table__row as soon as tds and ths get their own class */
+  /* .table__td, .table__th { */
+  td, th {
+    padding-top: 14px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    max-width: 300px;
+  }
+
+  /* .table__td { */
+  td {
+    font-size: 16px;
+    color: #808080;
+    line-height: 1.4;
+    vertical-align: top;
+  }
+
+  /* .table__th { */
+  th {
+    background-color: var(--color-dark);
+    position: relative;
+    font-size: 16px;
+    color: #fff;
+    line-height: 1.4;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-weight: bold;
+    text-align: left;
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .table th {
+    padding: 4px 6px;
+  }
+}
+
+.table__td-content {
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.table__th-link {
+  color: white;
+  font-weight: bold;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.table--vertical {
+
+  th {
+    background-color: transparent;
+    color: var(--color-font);
+    width: 170px;
+    text-align: right;
+    padding-right: 15px;
+    font-weight: 400;
+  }
+
+  td {
+    font-weight: 600;
+    color: var(--color-font);
+  }
+}

templates/dsgvDisclaimer.hamlet

@@ -1,5 +1,5 @@
-<div .alert .alert-danger>
+<div .notification .notification-danger>
-  <div .alert__content>
+  <div .notification__content>
     <h1>
       Hinweis zum Datenschutz
     <p>

templates/dsgvDisclaimer.lucius

@@ -0,0 +1,50 @@
+.notification {
+  position: relative;
+  border-radius: 3px;
+  padding: 10px 20px 20px;
+  margin: 40px 0;
+  color: var(--color-lighter);
+  box-shadow: 0 0 4px 2px inset currentColor;
+  padding-left: 20%;
+  color: #318dc5 ;
+
+  &::before {
+    content: 'i';
+    position: absolute;
+    display: flex;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 20%;
+    font-size: 100px;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .notification {
+
+    padding-left: 40px;
+
+    &::before {
+      height: auto;
+      width: 45px;
+      font-size: 40px;
+      top: 15px;
+    }
+  }
+}
+
+.notification-danger {
+  color: #c51919 ;
+
+  &::before {
+    content: '!';
+  }
+}
+
+.notification__content {
+  color: var(--color-font);
+}

templates/multiFileField.hamlet

@@ -17,4 +17,4 @@ $# new files
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
   <div class="js-tooltip">
     <div class="tooltip__handle">?
-    <div class="tooltip__content hidden">Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.
+    <div class="tooltip__content hidden">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.

templates/profile.hamlet

@@ -1,40 +1,38 @@
-<div .ui.container>
+<div .profile>
 
-    <h1>
+  <div .scrolltable>
-      _{MsgProfileHeading} #{userDisplayName}
+    <table .table.table--striped.table--hover.table--vertical>
-
+      <tr.table__row>
-    <table .table .table-striped >
-      <tr>
         <th> _{MsgName}
         <td> #{display userDisplayName}
-      <tr>
+      <tr.table__row>
         <th> _{MsgMatrikelNr}
         <td> #{display userMatrikelnummer}
-      <tr>
+      <tr.table__row>
         <th> _{MsgEMail}
         <td> #{display userEmail}
-      <tr>
+      <tr.table__row>
         <th> _{MsgIdent}
         <td> #{display userIdent}
-      <tr>
+      <tr.table__row>
         <th> _{MsgPlugin}
         <td> #{display userPlugin}
       $if not $ null admin_rights
-        <tr>
+        <tr.table__row>
           <th> Administrator
           <td>
             <ul>
               $forall institute <- admin_rights
                 <li>#{display institute}
       $if not $ null lecturer_rights
-        <tr>
+        <tr.table__row>
           <th> Lehrberechtigt
           <td>
             <ul>
               $forall institute <- lecturer_rights
                 <li>#{display institute}
       $if not $ null lecture_owner
-        <tr>
+        <tr.table__row>
           <th> Eigene Kurse
           <td>
             <ul>
@@ -42,7 +40,7 @@
                 <li>
                   <a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
       $if not $ null lecture_corrector
-        <tr>
+        <tr.table__row>
           <th> Korrektor
           <td>
             <ul>
@@ -50,24 +48,24 @@
                 <li>
                   <a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
       $if not $ null studies
-        <tr>
+        <tr.table__row>
           <th> Studiengänge
           <td>
-              <table .table .table-striped .table-hover>
+            <table .table .table-striped .table-hover>
-                <tr>
+              <tr.table__row>
-                  <th> Abschluss
+                <th> Abschluss
-                  <th> Studiengang
+                <th> Studiengang
-                  <th> Studienart
+                <th> Studienart
-                  <th> Semester
+                <th> Semester
 
-                $forall (degree,field,fieldtype,semester) <- studies
+              $forall (degree,field,fieldtype,semester) <- studies
-                  <tr>
+                <tr.table__row>
-                    <td> #{display degree}
+                  <td> #{display degree}
-                    <td> #{display field}
+                  <td> #{display field}
-                    <td> #{display fieldtype}
+                  <td> #{display fieldtype}
-                    <td> #{display semester}
+                  <td> #{display semester}
       $if not $ null participant
-        <tr>
+        <tr.table__row>
           <th> Teilnehmer
           <td>
             <ul>

templates/standalone/inputs.lucius

@@ -244,7 +244,7 @@ input[type="checkbox"]:checked::after {
 .file-input__label {
   cursor: pointer;
   display: inline-block;
-  background-color: var(--color-light);
+  background-color: var(--color-primary);
   color: white;
   padding: 10px 17px;
   border-radius: 3px;

templates/table/colonnade.hamlet

@@ -3,7 +3,7 @@ $newline never
   $maybe sortableP <- pSortable
     $with toSortable <- toSortable sortableP
       <thead>
-        <tr .table__row.table__row--head>
+        <tr .table__row>
           $forall OneColonnade{..} <- getColonnade dbtColonnade
             <!-- TODO: give ths a class 'table__th' -->
             <!-- TODO: wrap content of th in 'div.table__th-content' -->

templates/table/colonnade.lucius

@@ -1,83 +1,4 @@
-
+/* SORTABLE TABLE */
-.table {
-  margin: 21px 0;
-  width: 100%;
-}
-
-.table--striped {
-
-  .table__row:not(.no-stripe):nth-child(even) {
-    background-color: rgba(0, 0, 0, 0.03);
-  }
-}
-
-.table--hover {
-
-  .table__row:not(.no-hover):not(.table__row--head):hover {
-    background-color: rgba(0, 0, 0, 0.07);
-  }
-}
-
-/* TABLE DESIGN */
-.table__row {
-
-  /* TODO: move outside of table__row as soon as tds and ths get their own class */
-  /* .table__td, .table__th { */
-  td, th {
-    padding-top: 14px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    max-width: 300px;
-  }
-
-  /* .table__td { */
-  td {
-    font-size: 16px;
-    color: #808080;
-    line-height: 1.4;
-    vertical-align: top;
-  }
-
-  &.table__row--head {
-    background-color: var(--color-dark);
-  }
-
-  /* .table__th { */
-  th {
-    position: relative;
-    font-size: 16px;
-    color: #fff;
-    line-height: 1.4;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    font-weight: bold;
-    text-align: left;
-  }
-}
-
-@media (max-width: 1200px) {
-
-  .table th {
-    padding: 4px 6px;
-  }
-}
-
-.table__td-content {
-  max-height: 100px;
-  overflow-y: auto;
-}
-
-.table__th-link {
-  color: white;
-  font-weight: bold;
-
-  &:hover {
-    color: inherit;
-  }
-}
-
-/* SORTABLE */
 .table {
 
   /* TODO: move outside of table as soon as tds and ths get their own class */

templates/table/layout.lucius

@@ -37,8 +37,3 @@
     }
   }
 }
-
-/* SCROLLTABLE */
-.scrolltable {
-  overflow: auto;
-}