added mobile nav and disabled broken lightbox

webviewer/src/components/AimeImageGrid.tsx

@@ -19,7 +19,7 @@ const AnimeImageGrid: React.FC = () => {
               key={node.name}
               onClick={() => {
                 setPhotoIndex(index);
-                setIsOpen(true);
+                //setIsOpen(true);
               }}
             />
           ))}

webviewer/src/components/Layout.tsx

@@ -6,7 +6,6 @@ import { AllImages } from '../types';
 // styles
 const pageStyles = {
   color: '#232129',
-  padding: 96,
   fontFamily: '-apple-system, Roboto, sans-serif, serif',
 };
 
@@ -32,38 +31,107 @@ const Layout: React.FC = ({ children }) => {
   }, [allImages, selectedDir]);
 
   const handleDirSelect = useCallback((relativePath: string) => {
+    setIsMobileNavOpen(false);
     setSelectedDir(relativePath);
   }, []);
 
+  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+
   return (
     <ImagesContext.Provider value={images}>
-      <div className="flex">
+      <div className="flex flex-col md:flex-row h-screen overflow-hidden">
-        <nav className="flex flex-col w-2/12 h-screen overflow-y-scroll space-y-2 px-6">
+        <header className="w-full h-12 py-2 px-8 sticky md:hidden flex flex-row z-20 items-center">
-          {directories.allDirectory.edges.map(({ node }: any) => (
+          <span className="flex-grow align-middle">
-            <span
+            {selectedDir
-              className={`
+              ? selectedDir
-                p-2
+              : directories.allDirectory.edges[0].node.name}
-                hover:bg-indigo-500
+          </span>
-                hover:text-white
+          <div
-                transition-colors
+            className="h-8 w-8"
-                duration-300
+            onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
-                rounded-md
+          >
-                cursor-pointer
+            <svg className={`hamburger ${isMobileNavOpen ? 'is-opened' : ''}`}>
-                ${
+              <line
-                  node.relativePath === selectedDir
+                x1="0"
-                    ? 'bg-indigo-500 text-white'
+                y1="50%"
-                    : ''
+                x2="100%"
-                }
+                y2="50%"
-              `}
+                className="hamburger__bar hamburger__bar--top"
-              onClick={_event => {
+              />
-                handleDirSelect(node.relativePath);
+              <line
-              }}
+                x1="0"
-            >
+                y1="50%"
-              {node.name}
+                x2="100%"
-            </span>
+                y2="50%"
-          ))}
+                className="hamburger__bar hamburger__bar--mid"
+              />
+              <line
+                x1="0"
+                y1="50%"
+                x2="100%"
+                y2="50%"
+                className="hamburger__bar hamburger__bar--bot"
+              />
+            </svg>
+          </div>
+        </header>
+        <nav
+          className={`
+            flex
+            flex-col
+            w-full 
+            ${isMobileNavOpen ? 'h-screen' : 'h-0'}
+            md:w-2/12
+            z-10
+            md:z-auto
+            absolute
+            md:h-screen
+            md:static
+            overflow-y-scroll
+            space-y-2
+            translate-y-12
+            md:translate-y-0
+            py-6
+            md:py-0
+            px-6
+            bg-white
+            transition-all
+          `}
+        >
+          <div
+            className={`flex-col w-full ${
+              isMobileNavOpen ? 'flex' : 'hidden'
+            } md:flex md:w-full md:h-full`}
+          >
+            {directories.allDirectory.edges.map(({ node }: any) => (
+              <span
+                className={`
+                  p-2
+                  hover:bg-indigo-500
+                  hover:text-white
+                  transition-colors
+                  duration-300
+                  rounded-md
+                  cursor-pointer
+                  ${
+                    node.relativePath === selectedDir
+                      ? 'bg-indigo-500 text-white'
+                      : ''
+                  }
+                `}
+                onClick={_event => {
+                  handleDirSelect(node.relativePath);
+                }}
+              >
+                {node.name}
+              </span>
+            ))}
+          </div>
         </nav>
-        <main style={pageStyles} className="w-10/12 h-screen overflow-y-scroll">
+        <main
+          style={pageStyles}
+          className="w-full z-0 md:w-10/12 h-screen overflow-y-scroll p-8 md:p-24"
+        >
           {children}
         </main>
       </div>

webviewer/src/styles/global.css

@@ -2,347 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
-@keyframes closeWindow {
+.hamburger {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.ril__outer {
-  background-color: rgba(0, 0, 0, 0.85);
-  outline: none;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
   width: 100%;
   height: 100%;
-  -ms-content-zooming: none;
-  -ms-user-select: none;
-  -ms-touch-select: none;
-  touch-action: none;
 }
 
-.ril__outerClosing {
+.hamburger__bar {
-  opacity: 0;
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transform-origin: center;
+  stroke: black;
+  stroke-width: 10%;
 }
 
-.ril__inner {
+.hamburger__bar--top {
-  position: absolute;
+  transform: translateY(-40%);
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
 }
 
-.ril__image,
+.hamburger__bar--bot {
-.ril__imagePrev,
+  transform: translateY(40%);
-.ril__imageNext {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  max-width: none;
-  -ms-content-zooming: none;
-  -ms-user-select: none;
-  -ms-touch-select: none;
-  touch-action: none;
 }
 
-.ril__imageDiscourager {
+.is-opened .hamburger__bar--top {
-  background-repeat: no-repeat;
+  transform: rotate(45deg);
-  background-position: center;
-  background-size: contain;
 }
 
-.ril__navButtons {
+.is-opened .hamburger__bar--mid {
-  border: none;
+  transform: scaleX(0.1);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  height: 34px;
-  padding: 40px 30px;
-  margin: auto;
-  cursor: pointer;
-  opacity: 0.7;
-}
-.ril__navButtons:hover {
-  opacity: 1;
-}
-.ril__navButtons:active {
-  opacity: 0.7;
 }
 
-.ril__navButtonPrev {
+.is-opened .hamburger__bar--bot {
-  left: 0;
+  transform: rotate(-45deg);
-  background: rgba(0, 0, 0, 0.2)
-    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')
-    no-repeat center;
-}
-
-.ril__navButtonNext {
-  right: 0;
-  background: rgba(0, 0, 0, 0.2)
-    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+')
-    no-repeat center;
-}
-
-.ril__downloadBlocker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
-  background-size: cover;
-}
-
-.ril__caption,
-.ril__toolbar {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-}
-
-.ril__caption {
-  bottom: 0;
-  max-height: 150px;
-  overflow: auto;
-}
-
-.ril__captionContent {
-  padding: 10px 20px;
-  color: #fff;
-}
-
-.ril__toolbar {
-  top: 0;
-  height: 50px;
-}
-
-.ril__toolbarSide {
-  height: 50px;
-  margin: 0;
-}
-
-.ril__toolbarLeftSide {
-  padding-left: 20px;
-  padding-right: 0;
-  flex: 0 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ril__toolbarRightSide {
-  padding-left: 0;
-  padding-right: 20px;
-  flex: 0 0 auto;
-}
-
-.ril__toolbarItem {
-  display: inline-block;
-  line-height: 50px;
-  padding: 0;
-  color: #fff;
-  font-size: 120%;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ril__toolbarItemChild {
-  vertical-align: middle;
-}
-
-.ril__builtinButton {
-  width: 40px;
-  height: 35px;
-  cursor: pointer;
-  border: none;
-  opacity: 0.7;
-}
-.ril__builtinButton:hover {
-  opacity: 1;
-}
-.ril__builtinButton:active {
-  outline: none;
-}
-
-.ril__builtinButtonDisabled {
-  cursor: default;
-  opacity: 0.5;
-}
-.ril__builtinButtonDisabled:hover {
-  opacity: 0.5;
-}
-
-.ril__closeButton {
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=')
-    no-repeat center;
-}
-
-.ril__zoomInButton {
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
-    no-repeat center;
-}
-
-.ril__zoomOutButton {
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
-    no-repeat center;
-}
-
-.ril__outerAnimating {
-  animation-name: closeWindow;
-}
-
-@keyframes pointFade {
-  0%,
-  19.999%,
-  100% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-  }
-}
-
-.ril__loadingCircle {
-  width: 60px;
-  height: 60px;
-  position: relative;
-}
-
-.ril__loadingCirclePoint {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.ril__loadingCirclePoint::before {
-  content: '';
-  display: block;
-  margin: 0 auto;
-  width: 11%;
-  height: 30%;
-  background-color: #fff;
-  border-radius: 30%;
-  animation: pointFade 800ms infinite ease-in-out both;
-}
-.ril__loadingCirclePoint:nth-of-type(1) {
-  transform: rotate(0deg);
-}
-.ril__loadingCirclePoint:nth-of-type(7) {
-  transform: rotate(180deg);
-}
-.ril__loadingCirclePoint:nth-of-type(1)::before,
-.ril__loadingCirclePoint:nth-of-type(7)::before {
-  animation-delay: -800ms;
-}
-.ril__loadingCirclePoint:nth-of-type(2) {
-  transform: rotate(30deg);
-}
-.ril__loadingCirclePoint:nth-of-type(8) {
-  transform: rotate(210deg);
-}
-.ril__loadingCirclePoint:nth-of-type(2)::before,
-.ril__loadingCirclePoint:nth-of-type(8)::before {
-  animation-delay: -666ms;
-}
-.ril__loadingCirclePoint:nth-of-type(3) {
-  transform: rotate(60deg);
-}
-.ril__loadingCirclePoint:nth-of-type(9) {
-  transform: rotate(240deg);
-}
-.ril__loadingCirclePoint:nth-of-type(3)::before,
-.ril__loadingCirclePoint:nth-of-type(9)::before {
-  animation-delay: -533ms;
-}
-.ril__loadingCirclePoint:nth-of-type(4) {
-  transform: rotate(90deg);
-}
-.ril__loadingCirclePoint:nth-of-type(10) {
-  transform: rotate(270deg);
-}
-.ril__loadingCirclePoint:nth-of-type(4)::before,
-.ril__loadingCirclePoint:nth-of-type(10)::before {
-  animation-delay: -400ms;
-}
-.ril__loadingCirclePoint:nth-of-type(5) {
-  transform: rotate(120deg);
-}
-.ril__loadingCirclePoint:nth-of-type(11) {
-  transform: rotate(300deg);
-}
-.ril__loadingCirclePoint:nth-of-type(5)::before,
-.ril__loadingCirclePoint:nth-of-type(11)::before {
-  animation-delay: -266ms;
-}
-.ril__loadingCirclePoint:nth-of-type(6) {
-  transform: rotate(150deg);
-}
-.ril__loadingCirclePoint:nth-of-type(12) {
-  transform: rotate(330deg);
-}
-.ril__loadingCirclePoint:nth-of-type(6)::before,
-.ril__loadingCirclePoint:nth-of-type(12)::before {
-  animation-delay: -133ms;
-}
-.ril__loadingCirclePoint:nth-of-type(7) {
-  transform: rotate(180deg);
-}
-.ril__loadingCirclePoint:nth-of-type(13) {
-  transform: rotate(360deg);
-}
-.ril__loadingCirclePoint:nth-of-type(7)::before,
-.ril__loadingCirclePoint:nth-of-type(13)::before {
-  animation-delay: 0ms;
-}
-
-.ril__loadingContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.ril__imagePrev .ril__loadingContainer,
-.ril__imageNext .ril__loadingContainer {
-  display: none;
-}
-
-.ril__errorContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-}
-.ril__imagePrev .ril__errorContainer,
-.ril__imageNext .ril__errorContainer {
-  display: none;
-}
-
-.ril__loadingContainer__icon {
-  color: #fff;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
 }

webviewer/src/types.ts

@@ -7,7 +7,7 @@ export interface Directory {
 
 export interface Directories {
   allDirectory: {
-    edges: Directory[];
+    edges: { node: Directory }[];
   };
 }