delete default css; add stylesheet for minimalist design; add radio b…

…utton to Field component b00tc4mp#430
juditta99 · Apr 2, 2024 · 0f6733e · 0f6733e
1 parent c9bc937
commit 0f6733e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 63 deletions.
diff --git a/staff/judy-grayland/project/app/index.html b/staff/judy-grayland/project/app/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/icon" href="/people.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <link rel="stylesheet" href="https://unpkg.com/mvp.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/staff/judy-grayland/project/app/src/App.css b/staff/judy-grayland/project/app/src/App.css
@@ -1,46 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-.home-div {
-  min-height: 100vh;
-}

diff --git a/staff/judy-grayland/project/app/src/App.jsx b/staff/judy-grayland/project/app/src/App.jsx
@@ -5,7 +5,7 @@ import context from './logic/context'
 // pages
 import Profile from './pages/Profile'
 import Home from './pages/Home'
-import Resource from './pages/Resources'
+import Resources from './pages/Resources'
 import Login from './pages/Login'
 import Topic from './pages/Topic'
 import Register from './pages/Register'
@@ -38,7 +38,7 @@ function App() {
           <Route path="profile" element={<Profile />} />
         </Route>
         <Route path="topic" element={<Topic />} />
-        <Route path="resource" element={<Resource />} />
+        <Route path="resources" element={<Resources />} />
       </Routes>
     </>
   )

diff --git a/staff/judy-grayland/project/app/src/components/Field.jsx b/staff/judy-grayland/project/app/src/components/Field.jsx
@@ -2,14 +2,14 @@ function Field(props) {
   if (props.type === 'radio') {
     return (
       <>
-        <label htmlFor={props.inputId}>{props.children}</label>
         <input
           name={props.name}
           type="radio"
           id={props.inputId}
           checked={props.checked}
           onChange={props.onChange}
         ></input>
+        <label htmlFor={props.inputId}>{props.children}</label>
       </>
     )
   }

diff --git a/staff/judy-grayland/project/app/src/main.jsx b/staff/judy-grayland/project/app/src/main.jsx
@@ -2,7 +2,6 @@ import './utils/console2.js'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './index.css'
 import { BrowserRouter as Router } from 'react-router-dom'
 
 // our main.jsx connects our React code to our HTML (specifically the render function. it accepts our React code as an argument). It then transforms the React code into plain JS. We need this because browsers do not understand React.

diff --git a/staff/judy-grayland/project/app/src/pages/Resources.jsx b/staff/judy-grayland/project/app/src/pages/Resources.jsx
@@ -7,15 +7,15 @@ function handleSubmit(event) {
 }
 
 function Resources() {
-  const [resourceType, setResourceType] = useState('')
+  const [resourceType, setResourceType] = useState('activity')
 
   return (
     <>
       <h2>Recursos</h2>
       <h3>Añade un recurso</h3>
       <Form onSubmit={handleSubmit}>
-        <div>
-          Elige el tipo de recurso:
+        <fieldset>
+          <legend>Elige el tipo de recurso:</legend>
           <Field
             name="resourceType"
             type="radio"
@@ -43,44 +43,64 @@ function Resources() {
           >
             Fecha especial
           </Field>
-        </div>
+        </fieldset>
         {/* show different forms depending on what resource you choose */}
         {resourceType === 'activity' && (
-          <div>
+          <fieldset>
             <Field name="title" inputId="title-input">
               Título
             </Field>
-            <Field name="image" inputId="image-input">
-              Imagen
-            </Field>
             <Field name="description" inputId="description-input">
               Descripción
             </Field>
+            <Field name="image" inputId="image-input">
+              Imagen
+            </Field>
             <Field name="link" inputId="link-input">
               Enlace
             </Field>
-            <Button>Submit</Button>
-          </div>
+            <Button>Añadir</Button>
+          </fieldset>
         )}
         {resourceType === 'book' && (
-          <div>
+          <fieldset>
             <Field name="title" inputId="title-input">
               Título
             </Field>
             <Field name="author" inputId="author-input">
               Autor
             </Field>
+            <Field name="description" inputId="description-input">
+              Descripción
+            </Field>
             <Field name="image" inputId="image-input">
               Imagen
             </Field>
+            <Field name="link" inputId="link-input">
+              Enlace
+            </Field>
+            <Button type="submit">Añadir</Button>
+          </fieldset>
+        )}
+        {resourceType === 'special-date' && (
+          <fieldset>
+            <Field name="title" inputId="title-input">
+              Título
+            </Field>
+            <Field name="date" inputId="date-input">
+              Autor
+            </Field>
             <Field name="description" inputId="description-input">
               Descripción
             </Field>
+            <Field name="image" inputId="image-input">
+              Imagen
+            </Field>
             <Field name="link" inputId="link-input">
               Enlace
             </Field>
-            <Button>Submit</Button>
-          </div>
+            <Button type="submit">Añadir</Button>
+          </fieldset>
         )}
       </Form>
     </>