Added more css

webstillas/src/components/Spinner.css

 
-.border{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-
+.spinner{
+    display: flex;
+    justify-content: center;
 }

webstillas/src/components/Spinner.js

@@ -3,7 +3,7 @@ import React from "react";
 
 export const SpinnerDefault = () =>{
     return(
-        <Spinner animation="border" style={{ width: '5rem', height: '5rem' }} role="status">
+        <Spinner className={"spinner"} animation="border" style={{ width: '5rem', height: '5rem' }} role="status">
             <span className="visually-hidden">Loading...</span>
         </Spinner>
     )

webstillas/src/components/projects/elements/Modal.css

 
+.input-transfer-scaffolding{
+    flood-color: #9f9e9e;
+}
+
 
-.modal-width{
-    width: 70%;
+
+.scaffoldingElement-modal{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 50px;
+    justify-items: center;
 }
 
-.input-transfer-scaffolding{
-    flood-color: #9f9e9e;
+@media (max-width: 1200px) {
+    .scaffoldingElement-modal {
+        grid-template-columns: 1fr;
+    }
 }
 
+.modal-header{
+    margin-top: 50px;
+}
+
+
+.transfer-options{
+    padding-bottom: 20px;
+}
+
+
+.card{
+    width: 400px;
+    margin-bottom: 20px;
+}
 

webstillas/src/components/projects/elements/Modal.js

@@ -3,9 +3,11 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import {Button, Modal} from 'react-bootstrap';
 import img from "../../scaffolding/images/spirstillas_solideq_spir_klasse_5_stillas_135_1.jpg";
 import putModel from "../../../modelData/putData";
-import {PROJECTS_WITH_SCAFFOLDING_URL, TRANSFER_SCAFFOLDING} from "../../../modelData/constantsFile";
+import {TRANSFER_SCAFFOLDING} from "../../../modelData/constantsFile";
 import {useQueryClient} from "react-query";
-import {GetDummyData} from "../../../modelData/addData";
+import "./Modal.css"
+
+
 
 //https://ordinarycoders.com/blog/article/react-bootstrap-modal
 const scaffoldingMove =
@@ -86,20 +88,9 @@ export default function InfoModalFunc(props) {
     };
 
     //todo add a note to the user if the transaction was a success or a fail.
-    //Todo fix error
-    async function AddScaffolding(){
-        const queryClient = useQueryClient()
-        await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move));
-        await queryClient.invalidateQueries(["project", props.id]).then(r => handleClose())
-    }
-
-
     const AddScaffold = async () => {
-
         await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move));
-        await queryClient.resetQueries(["project", props.id])
-
-
+        await queryClient.resetQueries(["project", props.id]).then(() => handleClose())
     }
 
     const move = {
@@ -128,10 +119,13 @@ export default function InfoModalFunc(props) {
                     <Modal.Title>Stillas Overføring</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <div className={"scaffoldingElement"}>
-                        <div>
+                    <div className={"scaffoldingElement-modal"}>
+                        <div className={"transfer-options"}>
                             <span>Overfør til prosjekt:</span>
-                            <select value={ToProject} onChange={(e) => setToProject(e.target.value)}>
+                            <select
+                                className={"form-select"}
+                                value={ToProject}
+                                onChange={(e) => setToProject(e.target.value)}>
                                 <option selected defaultValue="">Choose here</option>
                                 <option value={0}>Storage</option>
                                 {jsonProjects.map(e => {
@@ -143,7 +137,9 @@ export default function InfoModalFunc(props) {
                         </div>
                         <div>
                             <span>Overfør fra prosjekt:</span>
-                            <select value={FromProject}
+                            <select
+                                className={"form-select"}
+                                value={FromProject}
                                     onChange={(e) => setFromProject(e.target.value)}>
                                 <option selected defaultValue="">Choose here</option>
                                 <option value={0}>Storage</option>
@@ -156,16 +152,21 @@ export default function InfoModalFunc(props) {
                         </div>
                         {jsonProject[0].scaffolding.map(e => {
                                 return (
-                                    <article className={"card"}>
+                                    <div className={"card"}>
                                         <section className={"header"}>
                                             <h3>{e.type.toUpperCase()}</h3>
                                         </section>
                                         <section className={"image"}>
                                             <img className={"img"} src={img} alt={""}/>
                                         </section>
-                                        <input type="number" min={0} key={"input" + e.type}
+                                        <input
+                                            className={"form-control"}
+                                            placeholder={"Enter quantity of scaffolding parts to transfer"}
+                                            type="number"
+                                            min={0}
+                                            key={"input" + e.type}
                                                onChange={(j) => handleroom(j, e.type)}/>
-                                    </article>
+                                    </div>
                                 )
                             }
                         )}

webstillas/src/components/projects/elements/preView.css

@@ -2,7 +2,7 @@
 .preView-Project-Main{
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: sticky;
     display:flex;
     flex-direction: column;
 

webstillas/src/components/projects/elements/preView.js

@@ -17,6 +17,7 @@ import {SpinnerDefault} from "../../Spinner";
 
 mapboxgl.accessToken = 'pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ';
 
+//Todo refactor class to function
 class PreViewClass extends React.Component {
     constructor(props) {
         super(props);
@@ -63,32 +64,16 @@ class PreViewClass extends React.Component{
     }
 
 
-
-
     getProjectID() {
         const pathSplit = window.location.href.split("/")
         return pathSplit[pathSplit.length - 1]
     }
 
 
-
-
-
     render() {
         return (
             <div className={"preView-Project-Main"}>
                 <div ref={this.mapContainer} className="map-container-project"/>
-                {/* <div className={"tabs"}>
-                    <Tabs>
-                        <div label="Kontakt">
-                            {this.contactInformation()}
-                        </div>
-                        <div label="Stillas-komponenter">
-                            <InfoModal id={this.getProjectID()}/>
-                            {this.scaffoldingComponents()}
-                        </div>
-                    </Tabs>
-                </div>*/}
             </div>
         )
     }
@@ -101,7 +86,6 @@ function getProjectID(){
 
 
 function scaffoldingComponents(data) {
-
     return (
         <div className={"grid-container-project-scaffolding"}>
             {data.scaffolding.map((e) => {
@@ -119,7 +103,6 @@ function scaffoldingComponents(data){
 }
 
 
-
 function contactInformation(project) {
     return (
         <section className={"contact-highlights-cta"}>
@@ -135,7 +118,8 @@ function contactInformation(project){
                     </li>
                     <li className={"horizontal-list-contact"}>
                         <span className={"left-contact-text"}>Adresse</span>
-                        <span className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span>
+                        <span
+                            className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span>
                     </li>
                     <li className={"horizontal-list-contact"}>
                         <span className={"left-contact-text"}>E-mail</span>
@@ -143,7 +127,8 @@ function contactInformation(project){
                     </li>
                     <li className={"horizontal-list-contact"}>
                         <span className={"left-contact-text"}>Periode</span>
-                        <span className={"right-contact-text"}>{project[0].period.startDate} to {project[0].period.endDate}  </span>
+                        <span
+                            className={"right-contact-text"}>{project[0].period.startDate} to {project[0].period.endDate}  </span>
                     </li>
                 </ul>
             </div>
@@ -152,11 +137,13 @@ function contactInformation(project){
 }
 
 
-
 export const PreView = () => {
     const queryClient = useQueryClient()
 
-    const {isLoading: projectLoad, data: project} = GetDummyData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL)
+    const {
+        isLoading: projectLoad,
+        data: project
+    } = GetDummyData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL)
     let projects
     let allProjectsLoading
     if (queryClient.getQueryData("allProjects") !== undefined) {

webstillas/src/components/projects/projects.css

@@ -51,12 +51,12 @@ input[type=number]::-webkit-outer-spin-button {
 
 .grid-container {
     display: inline-grid;
-    alignment: center;
+    align-self: center;
     column-gap: 80px;
     grid-auto-rows: minmax(100px, auto);
     row-gap: 20px;
     grid-template-rows: 1fr;
-    justify-content: center;
+    justify-self: center;
 }
 
 

webstillas/src/components/scaffolding/elements/scaffoldingCard.css

@@ -3,14 +3,6 @@
     width: 300px;
 }
 
-.scaffoldingElement{
-    padding-bottom: 100px;
-}
-
-.card{
-    width: 400px;
-}
-
 .highlightText{
     text-align: center;
 }

webstillas/src/components/scaffolding/scaffolding.css

@@ -5,8 +5,10 @@
 
 }
 
+
 .input-sorting-text{
     margin-bottom: 0;
+    font-weight: initial;
     font-size: 15px;
 }
 

webstillas/src/components/scaffolding/scaffolding.js

@@ -5,6 +5,7 @@ import {PROJECTS_WITH_SCAFFOLDING_URL, SCAFFOLDING_URL, STORAGE_URL} from "../..
 import {GetDummyData} from "../../modelData/addData";
 import {useQueryClient} from "react-query";
 import {SpinnerDefault} from "../Spinner";
+
 /**
  Class that will create an overview of the scaffolding parts
  */
@@ -91,8 +92,6 @@ class ScaffoldingClass extends React.Component {
         return (
             //todo only scroll the scaffolding not the map
             <div className={"scaffolding"}>
-
-
                 <div className={"all-scaffolding"}>
                     <div className={"sorting"}>
                         <p className = {"input-sorting-text"}>Sorter på:</p>