style(allocation): improve structure of allocation-page

messages/uniworx/de.msg

@@ -1523,6 +1523,7 @@ AllocationActive: Aktiv
 AllocationName: Name
 AllocationAvailableCourses: Kurse
 AllocationAppliedCourses: Bewerbungen
+AllocationNumCoursesAvailableApplied available@Int applied@Int: Sie haben sich bisher für #{applied}/#{available} #{pluralDE applied "Kurs" "Kursen"} beworben
 AllocationTitle termText@Text ssh'@SchoolShorthand allocation@AllocationName: #{termText} - #{ssh'}: #{allocation}
 AllocationShortTitle termText@Text ssh'@SchoolShorthand ash@AllocationShorthand: #{termText} - #{ssh'} - #{ash}
 AllocationDescription: Beschreibung

src/Handler/Allocation/Show.hs

@@ -96,4 +96,6 @@ getAShowR tid ssh ash = do
                      |]
     let daysToRegistrationStart = assertM (>0) $ (`diffUTCTime` now) <$> allocationRegisterFrom
         allocationInfoModal     = modal [whamlet|_{MsgMenuAllocationInfo}|] $ Left $ SomeRoute InfoAllocationR
+        numCourses = length courses
+        numAppliedCourses = lengthOf (folded . _2 . _Just) courses
     $(widgetFile "allocation/show")

templates/allocation/show.hamlet

@@ -78,6 +78,9 @@ $if not (null courseWidgets)
       <p>_{MsgAllocationPriorityTip}
       <p>_{MsgAllocationPriorityRelative}
       <p>_{MsgApplicationEditTip}
+      $if is _Just muid
+        <p .allocation__state>
+          _{MsgAllocationNumCoursesAvailableApplied numCourses numAppliedCourses}
     <div .allocation__courses>
       $forall courseWgt <- courseWidgets
         ^{courseWgt}

templates/allocation/show.lucius

@@ -3,8 +3,14 @@
   font-style: italic;
 }
 
+.allocation__state {
+  color: var(--color-font);
+  font-weight: 600;
+  font-style: normal;
+}
+
 .allocation__courses {
-  margin-top: 20px;
+  margin: 20px 0 0 40px;
 }
 
 .allocation-course {
@@ -19,15 +25,19 @@
   grid-gap: 5px 7px;
   padding: 12px 10px;
 
-  &:last-child {
-    padding: 12px 10px 0 10px;
-  }
+  /* &:last-child {
+   *   padding: 12px 10px 0 10px;
+   * }
+   *
+   * & + .allocation-course {
+   *   border-top: 1px solid var(--color-grey);
+   * }
+   */
 
-  & + .allocation-course {
-    border-top: 1px solid var(--color-grey);
+  &:nth-child(2n) {
+    background-color: rgba(0, 0, 0, 0.03);
   }
 
-
   .allocation-course__priority {
     grid-area: prio;
   }