diff --git a/src/Foundation.hs b/src/Foundation.hs index 0e884c651..92e339f77 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -514,7 +514,6 @@ instance Yesod UniWorX where addStylesheet $ StaticR css_flatpickr_css addStylesheet $ StaticR css_tabber_css addStylesheet $ StaticR css_fonts_css - addStylesheet $ StaticR css_icons_css addStylesheet $ StaticR css_fontawesome_css $(widgetFile "default-layout") $(widgetFile "standalone/modal") @@ -835,19 +834,19 @@ defaultLinks = -- Define the menu items of the header. } , NavbarRight $ MenuItem { menuItemLabel = "Profile" - , menuItemIcon = Just "profile" + , menuItemIcon = Just "cogs" , menuItemRoute = ProfileR , menuItemAccessCallback' = isJust <$> maybeAuthPair } , NavbarSecondary $ MenuItem { menuItemLabel = "Login" - , menuItemIcon = Just "login" + , menuItemIcon = Just "sign-in-alt" , menuItemRoute = AuthR LoginR , menuItemAccessCallback' = isNothing <$> maybeAuthPair } , NavbarSecondary $ MenuItem { menuItemLabel = "Logout" - , menuItemIcon = Just "logout" + , menuItemIcon = Just "sign-out-alt" , menuItemRoute = AuthR LogoutR , menuItemAccessCallback' = isJust <$> maybeAuthPair } diff --git a/src/Handler/Submission.hs b/src/Handler/Submission.hs index 852f4743d..7e8ce5b86 100644 --- a/src/Handler/Submission.hs +++ b/src/Handler/Submission.hs @@ -234,9 +234,6 @@ submissionHelper tid csh shn (SubmissionMode mcid) = do Just cID -> redirect $ CSubmissionR tid csh shn cID SubShowR Nothing -> return () - let pageTitle = MsgSubmissionEditHead tid csh shn - let formTitle = pageTitle - let formText = Nothing :: Maybe UniWorXMessage actionUrl <- Data.Maybe.fromJust <$> getCurrentRoute -- Maybe construct a table to display uploaded archive files let colonnadeFiles :: _ -> Colonnade Sortable _ (DBCell (WidgetT UniWorX IO) ()) @@ -266,19 +263,8 @@ submissionHelper tid csh shn (SubmissionMode mcid) = do mFileTable <- traverse (dbTable def) . fmap smid2ArchiveTable $ (,) <$> msmid <*> mcid defaultLayout $ do - setTitleI pageTitle - $(widgetFile "formPageI18n") - [whamlet| - $maybe cid <- mcid -
-

- Archiv - $forall (name,time) <- lastEdits -
last edited by #{name} at #{formatTimeGerDTlong time} - $maybe fileTable <- mFileTable -

Enthaltene Dateien: - ^{fileTable} - |] + setTitleI $ MsgSubmissionEditHead tid csh shn + $(widgetFile "submission") getSubDownloadR :: TermId -> Text -> Text -> CryptoFileNameSubmission -> SubmissionFileType -> FilePath -> Handler TypedContent diff --git a/static/css/fonts.css b/static/css/fonts.css index 6f409ec57..ae0be87be 100644 --- a/static/css/fonts.css +++ b/static/css/fonts.css @@ -1,13 +1,3 @@ -@font-face { - font-family: 'Glyphicons Halflings'; - src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot'); - src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), - url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'), - url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'), - url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'), - url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); -} - /*! * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) diff --git a/static/css/icons.css b/static/css/icons.css deleted file mode 100644 index b92b25f65..000000000 --- a/static/css/icons.css +++ /dev/null @@ -1,44 +0,0 @@ -.glyphicon { - position: relative; - display: inline-block; - width: 40px; - height: 40px; -} -.glyphicon::before { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: 'Glyphicons Halflings'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.glyphicon--home::before { - content: '\e021'; -} -.glyphicon--book::before { - content: '\e043'; -} -.glyphicon--profile::before { - content: '\e019'; -} -.glyphicon--user::before { - content: '\e008'; -} -.glyphicon--group::before { - /* TODO: get updated glyphicons for group-icon */ - content: '\e284'; -} -.glyphicon--education::before { - content: '\e233'; -} -.glyphicon--login::before { - content: '\e161'; -} -.glyphicon--logout::before { - content: '\e163'; -} -.glyphicon--none::before { - content: ''; -} diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.eot b/static/fonts/glyphicons/glyphicons-halflings-regular.eot deleted file mode 100644 index 4a4ca865d..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.eot and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.svg b/static/fonts/glyphicons/glyphicons-halflings-regular.svg deleted file mode 100644 index e3e2dc739..000000000 --- a/static/fonts/glyphicons/glyphicons-halflings-regular.svg +++ /dev/null @@ -1,229 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.ttf b/static/fonts/glyphicons/glyphicons-halflings-regular.ttf deleted file mode 100644 index 67fa00bf8..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.ttf and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.woff b/static/fonts/glyphicons/glyphicons-halflings-regular.woff deleted file mode 100644 index 8c54182aa..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.woff and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 b/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 deleted file mode 100644 index 64539b54c..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 and /dev/null differ diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 6cd69859b..ad9fe2301 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -17,7 +17,7 @@ /* DIMENSIONS */ --header-height: 100px; - --header-height-collapsed: 50px; + --header-height-collapsed: 60px; } * { @@ -124,7 +124,7 @@ h1, h2, h3, h4, h5 { } h1 { font-size: 32px; - margin: 20px 0 10px; + margin-bottom: 10px; } h2 { font-size: 24px; @@ -170,6 +170,8 @@ h4 { position: relative; background-color: white; overflow: hidden; + padding-left: 24%; + transition: padding-left .2s ease-out; > .container { margin: 20px 0; @@ -180,6 +182,27 @@ h4 { } } +@media (min-width: 1200px) { + + .main__content { + padding-left: 300px; + } +} + +@media (max-width: 768px) { + + .main__content { + padding-left: 50px; + } +} + +@media (max-width: 425px) { + + .main__content { + padding-left: 0; + } +} + .main__content-body { padding: 0 40px 60px; } @@ -187,7 +210,14 @@ h4 { @media (max-width: 768px) { .main__content-body { - padding: 10px 20px 60px; + padding: 0 20px 60px; + } +} + +@media (max-width: 425px) { + + .main__content-body { + padding: 0 10px 60px; } } @@ -289,6 +319,16 @@ a.btn.btn-info:hover, overflow: auto; } +@media (max-width: 425px) { + + .scrolltable { + margin-left: -10px; + padding-left: 10px; + margin-right: -10px; + padding-right: 10px; + } +} + /* TABLE DESIGN */ .table__td, .table__th { padding-top: 14px; diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index 4d080cc8d..43a3a0785 100644 --- a/templates/standalone/alerts.lucius +++ b/templates/standalone/alerts.lucius @@ -28,7 +28,7 @@ z-index: 0; max-height: 200px; transition: all .3s ease-in-out; - padding-left: 30px; + padding-left: 20px; margin-left: 20px; margin-right: 60px; box-shadow: 0 0 7px var(--color-dark); @@ -68,6 +68,7 @@ @media (min-width: 768px) { .alert { + padding-left: 30px; margin-left: 40px; min-width: 400px; } @@ -114,6 +115,14 @@ } } +@media (max-width: 768px) { + + .alert__content { + padding: 4px 7px; + padding-left: 20px; + } +} + .alert__close { cursor: pointer; text-align: right; @@ -155,6 +164,13 @@ } } +@media (max-width: 768px) { + + .alert__close { + width: 40px; + } +} + .alert-success { .alert__content { diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 19c0988a7..ad6771a38 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -140,6 +140,13 @@ option { box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05); } +@media (max-width: 425px) { + + select, option { + width: 100%; + } +} + /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ input[type="checkbox"] { position: relative; diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index 5ae624450..2ccec226b 100644 --- a/templates/standalone/modal.lucius +++ b/templates/standalone/modal.lucius @@ -76,8 +76,8 @@ z-index: 20; &::before { - content: '\e014'; - font-family: 'Glyphicons Halflings'; + content: '\f00d'; + font-family: 'Font Awesome 5 Free'; color: white; } } diff --git a/templates/submission.hamlet b/templates/submission.hamlet index 0529e94aa..1136ddb8f 100644 --- a/templates/submission.hamlet +++ b/templates/submission.hamlet @@ -1,54 +1,13 @@ -
-  #{tshow submissionId}
-  #{tshow submission}
+$maybe cID <- mCID
+  

+    

+      Archiv
+    $forall (name,time) <- lastEdits
+      
last edited by #{name} at #{formatTimeGerDTlong time}
+    $maybe fileTable <- mFileTable
+      
Enthaltene Dateien:
+      ^{fileTable}
 
-
-  $maybe ratingTime' <- ratingTime
-    
-      
-        
-        
-      
Bewertet
-      #{tshow ratingTime'}
-    $maybe points <- ratingPoints
-      
Punkte
-        #{tshow points}
-    $maybe comment <- ratingComment
-      
Kommentar
-        
-          
#{comment}
-  $nothing
-    
Noch nicht bewertet
-
-

-  

-    

-      

-        

-          Abgabe herunterladen
-        

-          $#
-            

-      

-        

-          Abgabe ersetzen
-        

-          ^{uploadWidget}
-
-

-  

-    Abgegebene Dateien
-  

-    $forall (Entity _ file, Entity _ sFile) <- files
-      $if submissionFileIsDeletion sFile
-        
-          #{fileTitle file} 
-          Gelöscht
-      $else
-        
-          #{fileTitle file}
-          $if submissionFileIsUpdate sFile
-             
-            Korrigiert
-      
+

+  
+   ^{formWidget}
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 78809b413..ec1a8ea8b 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -18,5 +18,3 @@ $newline never
                     
  • 
                       #{menuItemLabel}
                   $of _
-
-  
    
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index cc8fb04a8..18b55b952 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -3,82 +3,16 @@
 
   window.utils = window.utils || {};
 
-  // Defines a function to turn an element into an interactive aside-navigation.
-  // If the screen is smaller than 999px the navigation is automatically
-  // collapsed - even when dynamically resized (e.g. switching from portatit
-  // to landscape).
-  // The can user may also manually collapse and expand the navigation by
-  // using the little arrow at the bottom.
   window.utils.aside = function(asideEl) {
-    var collapsed = false;
-    var collClass = 'main__aside--collapsed';
-    // animClass used to enable transitions only when needed so that
-    // (potentially happening) initial collapse of the asidenav
-    // goes unnoticed by the user.
-    var animClass = 'main__aside--transitioning';
-    var hoveringAboveCollapsedNav = false;
 
-    init();
     function init() {
-      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
-      if (document.body.getBoundingClientRect().width < 999 || collLS) {
-        asideEl.classList.add(collClass);
-        collapsed = true;
-      }
-      addListener();
-    }
-
-    function check() {
-      if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
-        asideEl.classList.add(animClass);
-        asideEl.classList.toggle(collClass, collapsed);
-        window.localStorage.setItem('asidenavCollapsed', collapsed);
-      }
-    }
-
-    function hasCollapsedClass() {
-      return asideEl.classList.contains(collClass);
-    }
-
-    function addListener() {
-
-      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
-        collapsed = !collapsed;
-        check();
-      }, false);
-
-      asideEl.addEventListener('transitionend', function(event) {
-        if (event.propertyName === 'opacity') {
-          asideEl.classList.remove(animClass);
-        }
-      }, false);
-
-      window.addEventListener('resize', function() {
-        collapsed = document.body.getBoundingClientRect().width < 999;
-        check();
-      }, false);
-
-      asideEl.addEventListener('mouseover', function(event) {
-        if (!hasCollapsedClass()) {
-          return false;
-        }
-        hoveringAboveCollapsedNav = true;
-        window.setTimeout(function() {
-          if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
-            asideEl.classList.add('pseudo-hover');
-          }
-        }, 200);
-      }, false);
-
-      asideEl.addEventListener('mouseleave', function(event) {
-        hoveringAboveCollapsedNav = false;
-        window.setTimeout(function() {
-          if (!hoveringAboveCollapsedNav) {
-            asideEl.classList.remove('pseudo-hover');
-          }
-        }, 200);
-      }, false);
+      var favoritesBtn = document.querySelector('.navbar__list-item--favorite');
+      favoritesBtn.addEventListener('click', function(event) {
+        asideEl.classList.toggle('main__aside--expanded');
+        event.preventDefault();
+      }, true);
     }
+    init();
   };
 })();
 
@@ -95,7 +29,6 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-  // TODO: make it swipeable on mobile and narrower
-  // utils.aside(asidenavEl);
+  window.utils.aside(asidenavEl);
 
 });
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 8dce6117c..33ba5f653 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -7,20 +7,34 @@
   min-height: calc(100% - var(--header-height));
   transition: all .2s ease-out;
   width: 24%;
-
-  ~ .main__content {
-    padding-left: 24%;
-    transition: padding-left .2s ease-out;
-  }
 }
 
 /* maximum width of 300px for wide screens */
 @media (min-width: 1200px) {
   .main__aside {
     width: 300px;
+  }
+}
 
-    ~ .main__content {
-      padding-left: 300px;
+@media (max-width: 425px) {
+
+  .main__aside {
+    position: fixed;
+    top: var(--header-height-collapsed);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100% !important;
+    width: 100%;
+    z-index: 5;
+    box-shadow: 0 0 13px var(--color-dark);
+    white-space: nowrap;
+    overflow: hidden;
+    transform: translateX(0);
+    transition: transform .2s ease-out;
+
+    &:not(.main__aside--expanded) {
+      transform: translateX(-110%);
     }
   }
 }
@@ -38,6 +52,9 @@
   margin-top: 30px;
   background-color: transparent;
   transition: all .2s ease;
+  padding: 30px 13px 10px;
+  margin: 0;
+  background-color: var(--color-darker);
 }
 
 .asidenav__list-item {
@@ -107,14 +124,6 @@
   color: var(--color-lightwhite);
   width: 100%;
   z-index: 1;
-
-  .glyphicon {
-    width: 50px;
-  }
-
-  .glyphicon + .asidenav__link-label {
-    padding-left: 0;
-  }
 }
 
 .asidenav__link-shorthand {
@@ -139,6 +148,13 @@
   z-index: -1;
 }
 
+@media (max-width: 425px) {
+
+  .asidenav__nested-list {
+    display: none;
+  }
+}
+
 .asidenav__nested-list-item {
   position: relative;
   color: var(--color-lightwhite);
@@ -158,7 +174,7 @@
 }
 
 /* STATE COLLAPSED */
-@media (max-width: 768px) {
+@media (max-width: 768px) and (min-width: 425px) {
 
   .main__aside {
     width: 50px;
@@ -166,16 +182,11 @@
     overflow: hidden;
     min-height: calc(100% - var(--header-height-collapsed));
 
-    ~ .main__content {
-      padding-left: 50px;
-    }
-
     .asidenav__box-title {
       width: 50px;
-      padding: 1px;
       font-size: 18px;
       text-align: center;
-      margin-bottom: 0;
+      padding: 10px 1px;
     }
 
     .asidenav__link-shorthand {
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index 7f727d302..e89634895 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -3,6 +3,7 @@
   color: var(--color-font);
   margin-left: 40px;
   margin-top: 25px;
+  margin-bottom: 10px;
 }
 
 @media (max-width: 768px) {
@@ -12,6 +13,13 @@
   }
 }
 
+@media (max-width: 425px) {
+
+  .breadcrumbs__container {
+    margin-left: 10px;
+  }
+}
+
 .breadcrumbs__link {
 
   &:hover {
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index 9a67a13fe..359bd1b17 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -5,14 +5,20 @@ $newline never