update and error handling

static/assets/error.css

@@ -0,0 +1,35 @@
+.error-container {
+  width: 100%;
+  margin-top: 4em;
+}
+
+.error {
+  width: 60%;
+  margin: 0 auto;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.error-title {
+  font-family: 'Roboto Slab', serif;
+}
+
+.error-icons {
+  font-size: 5em;
+  margin-bottom: .25em;
+}
+
+.expert {
+  text-align: left;
+  padding: 1em;
+  background-color: black;
+  color: rgba(0, 255, 0);
+  border: 2px solid gray;
+  border-radius: 3px;
+}
+
+@media (max-width: 1350px) {
+  .error {
+    width: 100%;
+  }
+}

static/assets/home.css

@@ -6,6 +6,7 @@
 }
 
 .header-container {
+  position: relative;
   display: flex;
   justify-content: space-between;
 }
@@ -15,6 +16,9 @@
 }
 
 .header-menu {
+  position: absolute;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: flex-end;
 }
@@ -246,6 +250,9 @@
   .card-container {
     width: 100%;
   }
+  .header-left {
+    padding-bottom: 1em;
+  }
 }
 
 @media (max-width: 1000px) {
@@ -261,7 +268,8 @@
   }
   .header-menu {
     justify-content: center;
-    margin-top: 1em;
+    position: relative;
+    margin-top: 0;
   }
   .header-content {
     padding: 0;

static/assets/js/organization.js

@@ -24,21 +24,61 @@ document.querySelectorAll('.schedule-category').forEach(node => {
  * Gallery modal to view media in large
  */
 let mediaModal = document.querySelector('#media-modal')
-let mediaModalImage = document.querySelector('#media-modal-image')
+let mediaModalContent = document.querySelector('#media-modal-content')
+// let mediaModalImage = document.querySelector('#media-modal img')
+// let mediaModalVideo = document.querySelector('#media-modal video')
+// let mediaModalSource = document.querySelector('#media-modal video source')
 
-let openModal = url =>  {
+// function disableScroll() { 
+//     // Get the current page scroll position 
+//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
+//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
+  
+//         // if any scroll is attempted, set this to the previous value 
+//         window.onscroll = function() { 
+//             window.scrollTo(scrollLeft, scrollTop); 
+//         }; 
+// } 
+  
+// function enableScroll() { 
+//     window.onscroll = function() {}; 
+// }
+
+
+let openModal = (url, isVideo) =>  {
   mediaModal.style.visibility = 'visible'
   mediaModal.style.opacity = 1
+  mediaModalContent.innerHTML = ""
+
   let attr = document.createAttribute('src')
   attr.value = url
-  mediaModalImage.attributes.setNamedItem(attr)
-  document.body.style.height = "100vh"
-  document.body.style.overflow = "hidden"
+  let el = null
+  if (isVideo) {
+    el = document.createElement('video')
+    el.setAttribute('controls', '')
+    el.setAttribute('autoplay', '')
+    el.setAttribute('name', 'media')
+    let source = document.createElement('source')
+    source.setAttribute('src', url)
+    source.setAttribute('type', 'video/mp4')
+    el.appendChild(source)
+  } else {
+    el = document.createElement('img')
+    el.attributes.setNamedItem(attr)
+  }
+  mediaModalContent.appendChild(el)
+  //document.body.style.height = '100vh'
+  document.body.style.overflow = 'hidden'
+  document.body.style.touchAction = 'none'
 }
 
 let closeModal = () =>  {
   mediaModal.style.visibility = 'hidden'
   mediaModal.style.opacity = 0
-  document.body.style.overflow = "initial"
-  document.body.style.height = "initial"
+  document.body.style.overflow = 'initial'
+  document.body.style.height = 'initial'
+  let video = document.querySelector('#media-modal video')
+  if (video !== null) {
+    video.pause()
+  }
 }

static/assets/organization.css

@@ -118,7 +118,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 3.5em;
 
   position: absolute;
   left: 0;
@@ -131,12 +130,13 @@
   position: relative;
 }
 
-.media-overlay i {
+.media-overlay svg {
+  width: 3.5em;
   cursor: pointer;
   transition: all 0.2s;
 }
 
-.media-overlay i:hover {
+.media-overlay svg:hover {
   transform: scale(1.2);
 }
 
@@ -194,6 +194,7 @@
 } */
 
 .media {
+  cursor: pointer;
   height: 100%;
   border-radius: 4px;
   background-size: cover;
@@ -204,7 +205,7 @@
 * Media modal
 */
 .media-modal-container {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100vh;
   z-index: 99;
@@ -226,11 +227,15 @@
   width: 50%;
 }
 
-.media-modal img {
+.media-modal .media-modal-content {
   border-radius: 4px;
   width: 100%;
 }
 
+.media-modal img, .media-modal video {
+  width: 100%;
+}
+
 .media-close {
   position: absolute;
   width: 1.5em;
@@ -559,6 +564,9 @@ section {
   .schedule-category-days-container {
     margin-right: 25em;
   }
+  .media-modal {
+    width: 70%;
+  }
 }
 
 
@@ -637,6 +645,10 @@ section {
     grid-column: 1 / span 2;
   }
 
+  .media-modal {
+    width: 80%;
+  }
+
   .schedule-category-header {
     padding-left: 1em;
     padding-right: 1em;
@@ -689,4 +701,7 @@ section {
   .return-title {
     display: none;
   }
+  .media-modal {
+    width: 90%;
+  }
 }