picture page ready

src/hemsedal24/bilder.module.css

@@ -5,7 +5,6 @@
 }
 .tilbake {
   color: var(--color-standard__black);
-  margin-top: 2rem;
   margin-bottom: 2rem;
   width: 30%;
   z-index: 1;
@@ -56,11 +55,15 @@
   border-radius: 6.25rem;
   background-image: url('./images/Knapp.svg');
   background-size: cover;
+  --tw-ring-color: transparent;
 }
 
 .customButton > *[data-ut-element='button']:hover {
   background-image: url('./images/knapp2.svg');
 }
+.customButton > *[data-ut-element='button']:focus-within {
+  --tw-ring-color: transparent;
+}
 
 /* applied to button when uploading */
 .customButton > *[data-ut-element='button'][data-state='readying'] {
@@ -70,6 +73,7 @@
   background-size: cover;
   color: rgb(0 0 0 / 0.5);
   cursor: not-allowed;
+  --tw-ring-color: transparent;
 }
 
 /* applied to the button when uploading */
@@ -80,11 +84,13 @@
   background-size: cover;
   color: rgb(0 0 0 / 0.5);
   cursor: not-allowed;
+  --tw-ring-color: transparent;
 }
 
 /* applied to the upload indicator when uploading */
 .customButton > *[data-ut-element='button'][data-state='uploading']::after {
   background-color: rgb(245 164 196 / 1);
+  --tw-ring-color: transparent;
 }
 
 .customButton > *[data-ut-element='allowed-content'] {
@@ -162,6 +168,7 @@ html {
   flex-shrink: 0;
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 25rem;
   z-index: 10;
   margin: 0 auto;
@@ -171,11 +178,79 @@ html {
   /* Or another appropriate value */
   height: auto; /* Maintain aspect ratio */
 }
+
+.nopictures {
+  height: 40rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 @media (max-width: 500px) {
+  .embla__slide {
+    max-width: 120%;
+    flex: 0 0 100%;
+  }
+  .embla {
+    width: 100%;
+    margin: 0;
+  }
+  .embla__container {
+    height: auto;
+    width: 100vw;
+  }
   .main {
-    width: 85vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
   }
-  .embla__slide {
-    max-width: 70%;
+  .container {
+    margin-bottom: 4rem;
+  }
+
+  .uploadDropZone {
+    position: fixed;
+    bottom: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 20;
+    width: auto;
+    padding: 0;
+    margin: 0;
+  }
+  .customButton {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .customButton > *[data-ut-element='button'] {
+    width: 19.5rem;
+    height: 3.375rem;
+  }
+
+  .customButton > *[data-ut-element='button'][data-state='readying'],
+  .customButton > *[data-ut-element='button'][data-state='uploading'] {
+    width: 19.5rem;
+  }
+
+  .header {
+    width: 100%;
+  }
+  .header h3 {
+    font-size: 25px;
+    line-height: 2.4375rem;
+    -webkit-font-smoothing: antialiased; /* Improves rendering in WebKit browsers */
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .header > .uploadDropZone {
+    width: 100%;
+  }
+
+  @-moz-document url-prefix() {
+    .uploadDropZone {
+      margin-bottom: 1rem;
+    }
   }
 }

src/hemsedal24/bilder.tsx

@@ -1,4 +1,4 @@
-import { UploadDropzone, UploadButton } from '../../src/utils/uploadthing';
+import { UploadButton } from '../../src/utils/uploadthing';
 import styles from './bilder.module.css';
 import React, { useEffect, useState } from 'react';
 import Files from './components/Files';
@@ -9,9 +9,10 @@ import arrowLeft from './images/arrow-left.svg'
 
 export default function Bilder() {
   const [mobile, setMobile] = useState(false);
-
+  const [width, setWidth] = useState(0)
   useEffect(() => {
     const handleWindowSizeChange = () => {
+      setWidth(window.innerWidth)
       setMobile(window.innerWidth <= 500);
     };
 
@@ -39,7 +40,7 @@ export default function Bilder() {
           <span>Tilbake</span>
         </Link>
       <div id="header" className={styles.header}>
-        <h3>Bildeeeeeeeeeeeeeeeeeeeer 📸</h3>
+        <h3>{mobile ? `Bild${'e'.repeat((width/21.1))}r 📸` : 'Bildeeeeeeeeeeeeeeeeeeeer 📸'}</h3>
 
         <div className={styles.uploadDropZone}>
           <UploadButton
@@ -60,11 +61,12 @@ export default function Bilder() {
           <Files data={filesData} />
         </div>
       )}
+      {mobile ? <></> :
       <a href="#header">
           <div className={styles.bop}>
             <img src={bop} alt="big blobs" />
           </div>
-        </a>
+        </a>}
     </main>
   );
 }

src/hemsedal24/components/Files.tsx

@@ -20,15 +20,16 @@ export default function Files({ data }: any) {
   };
 
     const [emblaRef] = useEmblaCarousel({loop: true, skipSnaps:true, startIndex:startIndex});
-    const numFiles = data.files.length;
     console.log(data)
   return (
     <div className={styles.viewPort}>
+
+      {data.files.length > 0 ?
       <div id="pictureContainer" className={styles.container}>
       {data.files.map((file:any, index:number) =>
       <div key={file.id} className={styles.image} onClick={()=>imageClicked(file.id, index)}>
-        <img src={`https://utfs.io/f/${file.key}`} alt={`image of ${file.name}`}/></div>)}
-      </div>
+        <img src={`https://utfs.io/f/${file.key}`} alt={`image of ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
+
       {isPopoverOpen && (
         <Popover onClose={closePopoever}>
           <div className={styles.embla} ref={emblaRef}>
@@ -44,15 +45,4 @@ export default function Files({ data }: any) {
       )}
       </div>
        );
-
-
-      {/* <div className={styles.embla} ref={emblaRef}>
-        <div className={styles.embla__container}>
-            {data.files.map((file:any) => 
-            <div key = {file.id} className={styles.embla__slide}>
-                <img style={{maxWidth:"100%"}}src={`https://utfs.io/f/${file.key}`} alt={`image of ${file.name}`}/>
-                </div>
-            )}
-      </div>
-            </div> */}
 }

src/hemsedal24/components/Popover.module.css

@@ -30,3 +30,9 @@
   font-size: 1.5rem;
   cursor: pointer;
 }
+
+@media (max-width: 500px) {
+  .backdrop {
+    padding: 3rem 0 0 0;
+  }
+}