modal adjustments

src/Handler/Profile.hs

@@ -176,14 +176,15 @@ getProfileDataR = do
   -- TODO: move this into a Message and/or Widget-File
   let delWdgt = [whamlet|
         <form .form-inline method=post action=@{ProfileDataR} enctype=#{btnEnctype}>
-          <div>Sind Sie sich absolut sicher, alle gespeicherten Daten zu löschen?
+          <h2>Sind Sie sich absolut sicher, alle gespeicherten Daten zu löschen?
+          <div .container>
               Abgegebene Hausaufgaben werden dadurch rückwirkend gelöscht,
               wodurch eventuell ein Klausurbonus nicht mehr anerkannt wird.
-          <div>
+          <div .container>
             <em>Gilt nicht in der Testphase von Uni2work:
             Klausurnoten können Sie hiermit nicht löschen.
             Da diese 5 Jahre bis nach Ihrer Exmatrikulation aufbewahrt werden müssen.
-          <div>^{btnWdgt}
+          <div .container>^{btnWdgt}
       |]
   defaultLayout $ do
     $(widgetFile "profileData")

src/Handler/Utils/Templates.hs

@@ -9,32 +9,19 @@ lipsum = $(widgetFile "widgets/lipsum")
 
 modalStatic :: Html -> WidgetT site IO ()
 modalStatic modalContent = do
-  uniqueId <- newIdent
+  modalId <- newIdent
-  let modalTrigger = cons '#' uniqueId -- SJ: I am confused why this is needed here?
+  triggerId <- newIdent
-      modalId :: Int32
-      modalId = 13
   $(widgetFile "widgets/modalStatic")
-  [whamlet|<div .tooltip__handle ##{uniqueId}>?|] -- SJ: confused why ## is needed here either?
+  [whamlet|<div ##{triggerId}>MODALTRIGGER|] -- TODO: Content of Modal Trigger
 
 modalWidget :: Html -> WidgetT site IO () -> WidgetT site IO ()
 modalWidget modalTrigger modalContent = do
-  uniqueId <- newIdent
+  modalId <- newIdent
-  let modalTriggerId = cons '#' uniqueId -- SJ: I am confused why this is needed here?
+  triggerId <- newIdent
-      modalId :: Int32
-      modalId = 13
   $(widgetFile "widgets/modalWidget")
-  [whamlet|<div .btn ##{uniqueId}>#{modalTrigger}|] -- SJ: confused why ## is needed here either?
+  [whamlet|<div .btn ##{triggerId}>#{modalTrigger}|]
 
 modal :: Text -> Maybe [Char] -> WidgetT site IO ()
-modal modalTrigger (Just modalContent) = do -- WARNING: ModalContent should not have length 11. SJ: This is possibly bad. See Template!
+modal triggerId (Just modalContent) = do
-  let
+  modalId <- newIdent
-    modalId :: Int32
-    modalId = 13
-  $(widgetFile "widgets/modal")
-modal modalTrigger Nothing = do
-  let
-    modalId :: Int32
-    modalId = 13
-    modalContent :: [Char]
-    modalContent = "placeholder"
   $(widgetFile "widgets/modal")

templates/standalone/modal.julius

@@ -6,12 +6,11 @@
   window.utils.modal = function(modal) {
     var overlay = document.createElement('div');
     var closer = document.createElement('div');
-    var trigger = document.querySelector(modal.dataset.trigger);
+    var trigger = document.querySelector('#' + modal.dataset.trigger);
     var origParent = modal.parentNode;
 
     function open(event) {
       // disable modals for narrow screens
-      if (window.innerWidth < 768) return true;
       if (event) {
         event.preventDefault();
       }
@@ -20,7 +19,6 @@
       document.body.insertBefore(modal, null);
       document.body.insertBefore(overlay, modal);
       overlay.classList.add('modal__overlay--open');
-      toggleScroll(false);
 
       if (modal.dataset.closeable === 'true') {
         closer.classList.add('modal__closer');
@@ -31,7 +29,7 @@
     }
 
     // open this modal with an event:
-    // document.dispatchEvent(new CustomEvent('modal-open', { dateils: {for: 'modal-13'}}))
+    // document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-13' }}))
     function openOnEvent(event) {
       if (event.detail.for === modal.getAttribute('id')) {
         open();
@@ -43,7 +41,6 @@
         overlay.remove();
         origParent.insertBefore(modal, null);
         modal.classList.remove('modal--open');
-        toggleScroll(true);
         closer.removeEventListener('click', close, false);
       }
     };
@@ -56,43 +53,11 @@
         trigger.classList.add('modal__trigger');
         trigger.addEventListener('click', open, false);
       }
-      // if there is no content specified for the modal we assume that
-      // the content is supposed to be the page the trigger links to.
-      // so we check if the trigger has a href-attribute, fetch that page
-      // and replace the modal content with the response
-      var replaceMe = modal.querySelector('.replace-me');
-      var replaceWith = trigger ? trigger.getAttribute('href') : '';
-      if (replaceMe) {
-        replaceMe.classList.remove('replace-me');
-        replaceMe.innerText = '...loading';
-        if (replaceWith.length > 0) {
-          fetch(replaceWith, {
-            credentials: 'same-origin'
-          }).then(function(response) {
-            return response.text();
-          }).then(function(body) {
-            var modalContent = document.createElement('div');
-            modalContent.innerHTML = body;
-            var main = modalContent.querySelector('.main__content');
-            if (main) {
-              replaceMe.innerText = '';
-              replaceMe.insertBefore(main, null);
-            } else {
-              replaceMe.innerHTML = body;
-            }
-          });
-        }
-      }
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');
     }
     setup();
   };
-
-  // make sure document doesn't scroll when modal is active
-  function toggleScroll(scrollable) {
-    document.body.classList.toggle('no-scroll', !scrollable);
-  }
 })();
 
 document.addEventListener('DOMContentLoaded', function() {

templates/standalone/modal.lucius

@@ -8,10 +8,11 @@
   min-width: 60vw;
   min-height: 100px;
   max-height: calc(100vh - 30px);
-  border-radius: 7px;
+  border-radius: 2px;
   z-index: -1;
   color: var(--color-font);
   padding: 20px;
+  padding-right: 65px;
   overflow: auto;
   opacity: 0;
   transition: all .15s ease;
@@ -81,7 +82,3 @@
     color: white;
   }
 }
-
-.no-scroll {
-  overflow: hidden;
-}

templates/widgets/modal.hamlet

@@ -1,8 +1,2 @@
-<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+<div .modal.js-modal #{modalId} data-trigger=#{triggerId} data-closeable=true>
-  $# primitive way of checking if this is supposed to be add a placeholder for async data.
+  #{modalContent}
-  $# modalContent is 'placeholder' if there should be a placeholder only.
-  $# 'placeholder' has length 11.
-  $if 11 == length modalContent
-    <div .replace-me>
-  $else
-    #{modalContent}

templates/widgets/modalStatic.hamlet

@@ -1,2 +1,2 @@
-<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable=true>
   #{modalContent}

templates/widgets/modalWidget.hamlet

@@ -1,2 +1,2 @@
-<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTriggerId} data-closeable=true>
+<div .modal.js-modal ##{modalId} data-trigger=#{triggerId} data-closeable=true>
   ^{modalContent}