style: improve usability of genericFileField

frontend/src/app.sass

@@ -332,6 +332,10 @@ input[type="button"].btn-info:not(.btn-link):hover,
   margin: 21px 0
   width: 100%
 
+.table--narrow
+  width: unset
+    
+
 .table:first-child
   margin-top: 0
 

frontend/src/utils/inputs/checkbox.sass

@@ -99,3 +99,9 @@
 th .checkbox
   margin-right: 7px
   vertical-align: bottom
+
+th .checkbox:only-child
+  margin: 0
+
+.checkbox-only
+  width: 36px

frontend/src/utils/inputs/inputs.sass

@@ -229,6 +229,14 @@ option
   margin-left: 40px
   margin-top: 10px
   font-weight: 600
+  max-width: 25vw
+
+  tr:last-child td
+    padding-bottom: 0
+
+  .file-input__list-item
+    font-family: monospace
+    font-size: 15px
 
 // PREVIOUSLY UPLOADED FILES
 

frontend/src/utils/tooltips/tooltips.sass

@@ -138,3 +138,12 @@
     box-shadow: unset
     padding: 2px 15px 2px 2px
     background-color: rgba(0,0,0,0.05)
+
+td.tooltip-only, th.tooltip-only
+  .table--condensed &
+    width: 22px
+    padding: 4px
+
+  .tooltip__handle
+    margin: 0
+

messages/uniworx/de-de-formal.msg

@@ -586,9 +586,9 @@ SettingsUpdate: Einstellungen erfolgreich gespeichert
 NotificationSettingsUpdate: Benachrichtigungs-Einstellungen erfolgreich gespeichert
 Never: Nie
 
-PreviouslyUploadedInfo: Bereits hochgeladene Dateien:
-PreviouslyUploadedDeletionInfo: (Nicht ausgewählte Dateien werden gelöscht)
-MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)
+PreviouslyUploadedInfo: Bereits hochgeladene Dateien
+PreviouslyUploadedDeletionInfo: Nur ausgewählte und unten hinzugefügte Dateien werden erneut hochgeladen
+MultiFileUploadInfo: Mehrere Dateien mit Shift oder Strg auswählen
 AddMoreFiles: Weitere Dateien hinzufügen:
 
 NrColumn: Nr
@@ -838,7 +838,7 @@ UploadModeExtensionRestrictionMultipleTip: Einschränkung von Dateiendungen erfo
 
 GenericFileFieldFileTooLarge file@FilePath: „#{file}“ ist zu groß
 GenericFileFieldInvalidExtension file@FilePath: „#{file}” hat keine zulässige Dateiendung
-FileUploadOnlySessionTip: Sie haben diese Datei in der aktuellen Session bereits hochgeladen, sie ist allerdings noch nicht gespeichert. Sie müssen zunächst noch das Formular „Senden“, damit die Datei ordnungsgemäß gespeichert wird.
+FileUploadOnlySessionTip: Sie haben diese Datei in der aktuellen Session bereits hochgeladen, sie ist allerdings womöglich noch nicht gespeichert, z.B. wenn beim Auswerten des Formulars ein Fehler auftrat. Stellen Sie sicher, dass alle Dateien, die Sie hochladen wollten auch ordnungsgemäß im System hinterlegt sind!
 FileUploadMaxSize maxSize@Text: Datei darf maximal #{maxSize} groß sein
 FileUploadMaxSizeMultiple maxSize@Text: Dateien dürfen jeweils maximal #{maxSize} groß sein
 

messages/uniworx/en-eu.msg

@@ -584,9 +584,9 @@ SettingsUpdate: Successfully updated settings
 NotificationSettingsUpdate: Successfully updated notification settings
 Never: Never
 
-PreviouslyUploadedInfo: Files already uploaded:
-PreviouslyUploadedDeletionInfo: (Files not checked will be deleted)
-MultiFileUploadInfo: (Choose multiple files using Shift or Ctrl)
+PreviouslyUploadedInfo: Previously uploaded files
+PreviouslyUploadedDeletionInfo: Only checked files and files added below will be uploaded again
+MultiFileUploadInfo: Choose multiple files using Shift or Ctrl
 AddMoreFiles: Additional files:
 
 NrColumn: #
@@ -835,7 +835,7 @@ UploadModeExtensionRestrictionMultipleTip: Checks for valid file extension are p
 
 GenericFileFieldFileTooLarge file: “#{file}” is too large
 GenericFileFieldInvalidExtension file: “#{file}” does not have an acceptable file extension
-FileUploadOnlySessionTip: You have uploaded this file during your current session. It has not yet been saved permanently. The file will be saved permanently if you “Send” as part of this Form.
+FileUploadOnlySessionTip: You have already uploaded this file during your current session. It may not yet have been saved permanently, e.g. when an error occurred during processing of the form. Please ensure that all files you intended to upload are properly stored within Uni2work!
 FileUploadMaxSize maxSize: File may be up to #{maxSize} in size
 FileUploadMaxSizeMultiple maxSize: Files may each be up to #{maxSize} in size
 

src/Handler/Utils/Form.hs

@@ -875,8 +875,7 @@ genericFileField mkOpts = Field{..}
           $logDebugS "genericFileField.getIdent" pos
           return $ hash (cRoute, pos)
             & toStrict . Binary.encode
-            & decodeUtf8 . Base64.encode
-            & Text.dropWhileEnd (== '=')
+            & decodeUtf8 . Base64.encodeUnpadded
       $logDebugS "genericFileField.getIdent" $ tshow ident
       return ident
 

templates/widgets/genericFileField.hamlet

@@ -4,16 +4,27 @@ $maybe ident <- identSecret
   <input type=hidden name=#{fieldName} id=#{fieldId}--ident value=#{ident}>
   
 $if not (null fileInfos)
-  <div .file-uploads-label>_{MsgPreviouslyUploadedInfo}
-  <ul .list--iconless .file-input__list>
+  <table .file-input__list .table .table--narrow .table--striped .table--hover .table--condensed>
+    <colgroup>
+      <col .checkbox-only>
+      <col .tooltip-only>
+      <col>
+    <thead>
+      <tr>
+        <th .table__th>
+        <th .table__th colspan=2>
+          _{MsgPreviouslyUploadedInfo}
     $forall FileUploadInfo{..} <- fileInfos
-      <li>
-        <div .file-container>
-          <input type=checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{review _FileTitle fuiTitle} :fuiForced:readonly>
-          $if fuiSession
-            ^{messageTooltip uploadOnlySessionMessage}
-          <label for=#{fuiHtmlId}>
-            #{fuiTitle}
+      <tbody>
+        <tr>
+          <td .table__td>
+            <input type=checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{review _FileTitle fuiTitle} :fuiForced:readonly>
+          <td .table__td .tooltip-only>
+            $if fuiSession
+              ^{messageTooltip uploadOnlySessionMessage}
+          <td .table__td>
+            <label for=#{fuiHtmlId} .file-input__list-item>
+              #{fuiTitle}
 
   <div .file-input__info>
     _{MsgPreviouslyUploadedDeletionInfo}