Merge branch 'feat/modalicons' into 'master'

Make modal triggers not look like buttons anymore

See merge request !80

src/Handler/Course.hs

@@ -58,7 +58,7 @@ colCShortDescr = sortable (Just "cshort") (i18nCell MsgCourseShort)
                 (Just descr) -> cell
                   [whamlet|
                     $newline never
-                    <span style="float:right">
+                    <div>
                       ^{modal "Beschreibung" (Right $ toWidget descr)}
                   |]
             )

src/Handler/Utils/Table/Cells.hs

@@ -81,7 +81,7 @@ courseCell Course{..} = anchorCell link name `mappend` desc
             Nothing      -> mempty
             (Just descr) -> cell [whamlet|
               $newline never
-              <span style="float:right">
+              <div>
                 ^{modal "Beschreibung" (Right $ toWidget descr)}
               |]
 

src/Handler/Utils/Templates.hs

@@ -4,9 +4,6 @@ import Data.Either (isLeft)
 
 import Import.NoFoundation
 
-lipsum :: WidgetT site IO ()
-lipsum = $(widgetFile "widgets/lipsum")
-
 modal :: WidgetT site IO () -> Either (SomeRoute site) (WidgetT site IO ()) -> WidgetT site IO ()
 modal modalTrigger modalContent = do
   let modalDynamic = isLeft modalContent
@@ -16,5 +13,14 @@ modal modalTrigger modalContent = do
   case modalContent of
     Left  route -> do
       route' <- toTextUrl route
-      [whamlet|<a .btn ##{triggerId} href=#{route'}>^{modalTrigger}|]
+      [whamlet|
-    Right _     -> [whamlet|<div .btn ##{triggerId}>^{modalTrigger}|]
+        $newline never
+        <a .modal__trigger href=#{route'} ##{triggerId}>
+          <span .modal__trigger-label>^{modalTrigger}
+      |]
+    Right _     -> do
+      [whamlet|
+        $newline never
+        <div .modal__trigger ##{triggerId}>
+          <span .modal__trigger-label>^{modalTrigger}
+      |]

templates/standalone/modal.julius

@@ -13,7 +13,7 @@
       if (!modal.classList.contains('js-modal-initialized')) {
         return;
       }
-        
+
       // disable modals for narrow screens
       if (event) {
         event.preventDefault();
@@ -52,7 +52,7 @@
 
       // every modal can be openend via document-wide event, see openOnEvent
       document.addEventListener('modal-open', openOnEvent, false);
-      
+
       if ('dynamic' in modal.dataset) {
         function fetchModal(url, init) {
           function responseHtml(body) {
@@ -83,7 +83,7 @@
                     scriptClone.setAttribute(attrs[i].name, attrs[i].value);
                   }
                 }
-                  
+
                 document.body.insertBefore(scriptClone, null);
                 scriptTags.push(scriptClone);
               });
@@ -92,7 +92,7 @@
                 if (Array.from(document.head.querySelectorAll('style')).some(function(haystack) {
                   return haystack.innerText === styleTag.innerText;
                 })) { return }
-                  
+
                 document.head.insertBefore(styleTag, null);
               });
 
@@ -103,8 +103,8 @@
                 if (Array.from(document.head.querySelectorAll('link')).some(function(haystack) {
                   return haystack.getAttribute('href') === linkTag.getAttribute('href');
                 })) { return }
-                  
+
-                  
+
                 document.head.insertBefore(linkTag, null);
               });
 
@@ -112,7 +112,7 @@
               var alertsEl = document.body.querySelector('#alerts');
               if (alertsEl && modalAlertsEl) {
                 var modalAlerts = Array.from(modalAlertsEl.childNodes);
-                  
+
                 modalAlerts.forEach(function(alertEl) {
                   alertsEl.insertBefore(alertEl, alertsEl.querySelector('.alerts__toggler'));
                 });
@@ -122,30 +122,30 @@
 
                 contentBody.removeChild(modalAlertsEl);
               }
-                
+
               modalContent = contentBody;
             }
             modalContent.classList.add('modal__content');
-              
+
             var nudgeAttr = function(attr, x) {
               var oldVal = x.getAttribute(attr);
               var newVal = modal.getAttribute('id') + '__' + oldVal;
 
               // console.log(oldVal, newVal);
-              x.setAttribute(attr, newVal); 
+              x.setAttribute(attr, newVal);
             };
 
             var idAttrs = ['id', 'for', 'data-conditional-id'];
             idAttrs.map(function(attr) {
               modalContent.querySelectorAll('[' + attr + ']').forEach(function(x) { nudgeAttr(attr, x); });
             });
-              
+
             modal.querySelectorAll('.modal__content').forEach(function(prev) { modal.removeChild(prev); });
             modal.insertBefore(modalContent, null);
 
             var triggerContentLoad = function() {
               console.log('contentReady', modal);
-                
+
               document.dispatchEvent(new CustomEvent('setup', {
                 detail: { scope: modal },
                 bubbles: true,
@@ -163,7 +163,7 @@
             var alertsEl = document.querySelector('#alerts');
             if (!alertsEl)
               return null;
-              
+
             for (var i = 0; i < data.length; i++) {
               var alert = document.createElement('div');
               alert.classList.add('alert', 'alert-' + data[i].class);
@@ -180,7 +180,7 @@
             return 'json';
           }
 
-            
+
           return fetch(url, init).then(function(response) {
             var contentType = response.headers.get('Content-Type')
             if (contentType && contentType.includes('text/html')) {
@@ -203,7 +203,7 @@
               #{String (toPathPiece HeaderIsModal)}: 'True'
             }
           };
-          
+
           if (dynamicContentURL.length > 0) {
             fetchModal(dynamicContentURL, fetchInit).then((event.detail && event.detail.then) || (function(){}));
           }
@@ -224,7 +224,7 @@
         trigger.addEventListener('click', open, false);
       }
 
-        
+
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');
 
@@ -237,7 +237,7 @@
   window.utils.ajaxSubmit = function(modal, form) {
     function doSubmit(event) {
       event.preventDefault();
-              
+
       var modalContent = modal.querySelector('.modal__content');
       modalContent.style.pointerEvents = 'none';
       modalContent.style.opacity = 0.5;
@@ -265,7 +265,7 @@
           })
         },
         bubbles: true,
-        cancelable: true 
+        cancelable: true
       }));
     };
 

templates/standalone/modal.lucius

@@ -68,6 +68,11 @@
   cursor: pointer;
 }
 
+.modal__trigger-label {
+  font-style: italic;
+  text-decoration: underline;
+}
+
 .modal__closer {
   position: absolute;
   top: 20px;