From 7c30a8a7c50017800a28c947c34a3d51e3c4cee3 Mon Sep 17 00:00:00 2001 From: Maria Katrin Bonde <78419778+MariaBonde@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:36:10 +0200 Subject: [PATCH] moved uploading to new page (#565) --- pages/hemsedal24/lastopp.tsx | 1 + src/hemsedal24/bilder.module.css | 52 ++++++++++++++++++---- src/hemsedal24/bilder.tsx | 22 ++++----- src/hemsedal24/components/Files.tsx | 1 - src/hemsedal24/images/bildeopplastning.svg | 6 +++ src/hemsedal24/upload.tsx | 40 +++++++++++++++++ 6 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 pages/hemsedal24/lastopp.tsx create mode 100644 src/hemsedal24/images/bildeopplastning.svg create mode 100644 src/hemsedal24/upload.tsx diff --git a/pages/hemsedal24/lastopp.tsx b/pages/hemsedal24/lastopp.tsx new file mode 100644 index 000000000..0b33ed295 --- /dev/null +++ b/pages/hemsedal24/lastopp.tsx @@ -0,0 +1 @@ +export {default} from 'src/hemsedal24/upload' \ No newline at end of file diff --git a/src/hemsedal24/bilder.module.css b/src/hemsedal24/bilder.module.css index 202c3150e..bbbb37e29 100644 --- a/src/hemsedal24/bilder.module.css +++ b/src/hemsedal24/bilder.module.css @@ -3,7 +3,8 @@ margin-left: 3rem; margin-right: 3rem; } -.tilbake { +.tilbake, +.lastoppbilder { color: var(--color-standard__black); margin-bottom: 2rem; width: 30%; @@ -11,26 +12,57 @@ display: flex; gap: 5%; flex-direction: row; - justify-content: flex-start; text-decoration: none; } +.tilbake { + justify-content: flex-start; +} +.lastoppbilder { + justify-content: flex-end; +} -.tilbake span { +.tilbake span, +.lastoppbilder span { color: var(--color-standard__black); padding: 0 6px 0 0; font-weight: 400; font-family: 'Graphik Web'; } -.tilbake img { +.tilbake img, +.lastoppbilder img { vertical-align: middle; } -.tilbake a { +.tilbake a, +.lastoppbilder a { margin-left: 6rem; margin-right: 4rem; text-decoration: none; } + +.links { + display: flex; + width: 100%; + justify-content: space-between; + flex-direction: row; +} + +.links a .child:nth-child(2) { + align-items: flex-end; +} + +.uploadSite { + display: flex; + flex-direction: column; + align-items: center; + height: 40rem; + margin: 3rem; +} + +.linksUploadsite { + width: 100%; +} .uploadDropZone { z-index: 1; } @@ -44,7 +76,7 @@ width: 25rem; background-color: none; display: flex; - align-items: flex-end; + align-items: center; } /* applied to button */ @@ -208,7 +240,7 @@ html { grid-template-columns: repeat(3, 1fr); } - .uploadDropZone { + /* .uploadDropZone { position: fixed; bottom: 5%; left: 50%; @@ -220,7 +252,7 @@ html { width: auto; padding: 0; margin: 0; - } + } */ .customButton { align-items: center; justify-content: center; @@ -249,6 +281,10 @@ html { width: 100%; } + .lastoppbilder img { + width: 120%; + } + @-moz-document url-prefix() { .uploadDropZone { margin-bottom: 1rem; diff --git a/src/hemsedal24/bilder.tsx b/src/hemsedal24/bilder.tsx index 4247fb6cb..fd4006dff 100644 --- a/src/hemsedal24/bilder.tsx +++ b/src/hemsedal24/bilder.tsx @@ -1,4 +1,4 @@ -import { UploadButton } from '../../src/utils/uploadthing'; + import styles from './bilder.module.css'; import React, { useEffect, useState } from 'react'; import Files from './components/Files'; @@ -6,6 +6,7 @@ import '@uploadthing/react/styles.css'; import bop from './images/bop.svg'; import Link from 'next/link'; import arrowLeft from './images/arrow-left.svg' +import bildeopplastning from './images/bildeopplastning.svg' export default function Bilder() { const [mobile, setMobile] = useState(false); @@ -35,25 +36,18 @@ console.log((width/21)+(((width / 100) | 0)/4)) }, []); return (
+
pil venste Tilbake + + knapp til bildeopplastning + +
{filesData && (
diff --git a/src/hemsedal24/components/Files.tsx b/src/hemsedal24/components/Files.tsx index 17982d169..0c4af8f91 100644 --- a/src/hemsedal24/components/Files.tsx +++ b/src/hemsedal24/components/Files.tsx @@ -4,7 +4,6 @@ import useEmblaCarousel from "embla-carousel-react"; import styles from '../bilder.module.css' import { useState } from "react"; import Popover from "./Popover" - export default function Files({ data }: any) { const [isPopoverOpen, setIsPopoverOpen] = useState("") const [startIndex, setStartIndex]= useState(1) diff --git a/src/hemsedal24/images/bildeopplastning.svg b/src/hemsedal24/images/bildeopplastning.svg new file mode 100644 index 000000000..02bb862f3 --- /dev/null +++ b/src/hemsedal24/images/bildeopplastning.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/hemsedal24/upload.tsx b/src/hemsedal24/upload.tsx new file mode 100644 index 000000000..be7debd02 --- /dev/null +++ b/src/hemsedal24/upload.tsx @@ -0,0 +1,40 @@ +import { UploadButton } from '../../src/utils/uploadthing'; +import styles from './bilder.module.css'; +import '@uploadthing/react/styles.css'; +import Link from 'next/link'; +import arrowLeft from './images/arrow-left.svg'; + +export default function Upload() { + return ( +
+
+ + pil venste + Til hjemmeside + + + + pil venste + Tilbake til bilder + +
+
+ { + // Do something with the response + console.log('Files: ', res); + }} + onUploadError={(error: Error) => { + alert(`En feil har skjedd. Feilmelding: ${error.message}`); + }} + /> +
+
+ ); +}