Add work in progress element and perhaps more things?

components/EventCreate.tsx

@@ -4,8 +4,10 @@ import { useRouter } from "next/router"
 import { useState } from "react"
 import { useAxiosRequest } from "../hooks/useAxiosRequest"
 import { Loading } from "./Loading"
-import { useEffect } from "react"
 import { ErrorBlock } from "./errors/ErrorBlock"
+import { FestaIcon } from "./extensions/FestaIcon"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { FormMonorow } from "./form/FormMonorow"
 
 export function EventCreate() {
     const { t } = useTranslation()
@@ -27,8 +29,7 @@ export function EventCreate() {
     if (createEvent.data) return <Loading text={t("eventListCreateRedirecting")} />
 
     return <>
-        <form
-            className="form-monorow"
+        <FormMonorow
             onSubmit={e => { e.preventDefault(); createEvent.run() }}
             noValidate
         >
@@ -39,15 +40,15 @@ export function EventCreate() {
                 onChange={e => setName(e.target.value)}
                 required
             />
-            <input
-                type="submit"
+            <button
                 aria-label={t("eventListCreateSubmitLabel")}
-                className="positive square-40"
-                value="→"
+                className="positive"
                 onClick={e => createEvent.run()}
                 disabled={!name}
-            />
-        </form>
+            >
+                <FestaIcon icon={faPlus}/>
+            </button>
+        </FormMonorow>
         {createEvent.error ? <ErrorBlock error={createEvent.error} text={t("eventListCreateError")} /> : null}
     </>
 }

components/WorkInProgress.tsx

@@ -0,0 +1,14 @@
+import { faBrush } from "@fortawesome/free-solid-svg-icons"
+import { useTranslation } from "next-i18next"
+import { FestaIcon } from "./extensions/FestaIcon"
+
+
+export function WorkInProgress() {
+    const {t} = useTranslation()
+
+    return (
+        <div className="work-in-progress">
+            <FestaIcon icon={faBrush}/> {t("workInProgress")}
+        </div>
+    )
+}

components/editable/EditableDateRange.tsx

@@ -3,7 +3,7 @@ import { HTMLProps } from "react"
 import { EditingContext } from "../../contexts/editing"
 import { useDefinedContext } from "../../utils/definedContext"
 import { FestaIcon } from "../extensions/FestaIcon"
-import { FormDateRange } from "../FormDateRange"
+import { FormDateRange } from "../form/FormDateRange"
 
 
 type EditableDateRangeProps = {

components/form/FormMonorow.tsx

@@ -0,0 +1,14 @@
+import classNames from "classnames"
+import { HTMLProps, ReactNode } from "react"
+
+type FormMonorowProps = {
+    children: ReactNode
+}
+
+export function FormMonorow(props: FormMonorowProps & HTMLProps<HTMLFormElement>) {
+    return (
+        <form {...props} className={classNames("form-monorow", props.className)}>
+            {props.children}
+        </form>
+    )
+}

components/view/ViewEvent.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { FormDateRange } from "../FormDateRange"
+import { FormDateRange } from "../form/FormDateRange"
 
 type ViewEventProps = {
     title: ReactNode,

pages/events/[slug].tsx

@@ -3,21 +3,18 @@ import { NextPageContext } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
-import { ChangeEvent, FormEventHandler, useCallback, useState } from "react";
+import { ChangeEvent, useCallback, useState } from "react";
 import { ToolBar } from "../../components/tools/ToolBar";
 import { EditableMarkdown } from "../../components/editable/EditableMarkdown";
 import { EditableText } from "../../components/editable/EditableText";
 import { ToolToggleEditing } from "../../components/tools/ToolToggleEditing";
 import { EditingContext } from "../../contexts/editing";
 import { database } from "../../utils/prismaClient";
-import { Postcard } from "../../components/postcard/Postcard";
-import { ViewContent } from "../../components/view/ViewContent";
 import { EditablePostcard } from "../../components/editable/EditablePostcard";
 import { ViewEvent } from "../../components/view/ViewEvent";
-import { EditableDateTime } from "../../components/editable/EditableDateTime";
-import { FormDateRange } from "../../components/FormDateRange";
 import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
 import { EditableDateRange } from "../../components/editable/EditableDateRange";
+import { WorkInProgress } from "../../components/WorkInProgress";
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -76,6 +73,7 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
         <Head>
             <title key="title">{event.name} - {t("siteTitle")}</title>
         </Head>
+        <WorkInProgress/>
         <EditingContext.Provider value={editState}>
             <ToolBar vertical="vadapt" horizontal="right">
                 <ToolToggleEditing/>
@@ -96,14 +94,14 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
                         placeholder={t("eventDetailsPostcardPlaceholder")}
                     />
                 }
-                description={
+                description={<>
                     <EditableMarkdown 
                         value={description} 
                         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
                         rows={3}
                         placeholder={t("eventDetailsDescriptionPlaceholder")}
                     />
-                }
+                </>}
                 daterange={
                     <EditableDateRange
                         startProps={{

public/locales/it-IT/common.json

@@ -30,5 +30,6 @@
     "eventDetailsToggleEditingView": "Visualizza anteprima",
     "eventDetailsTitlePlaceholder": "Titolo",
     "eventDetailsDescriptionPlaceholder": "Descrizione evento",
-    "eventDetailsPostcardPlaceholder": "Cartolina"
+    "eventDetailsPostcardPlaceholder": "Cartolina",
+    "workInProgress": "Questa pagina è ancora in sviluppo e potrebbe contenere errori o testo inaspettato."
 }

styles/color-schemes.css

@@ -12,6 +12,7 @@
         
         --positive: #88ff88;
         --negative: #ff8888;
+        --warning: #ffff88;
     }
 
     .postcard {
@@ -33,6 +34,7 @@
 
         --positive: #008800;
         --negative: #880000;
+        --warning: #666600;
     }
 
     .postcard {

styles/components/form-monorow.css

@@ -8,13 +8,15 @@
     flex-direction: row;
     gap: 4px;
     justify-content: center;
-    align-items: center;
+    align-items: stretch;
 }
 
-.form-monorow *:first-child {
+.form-monorow > input {
     flex-grow: 1;
 }
 
-.form-monorow *:last-child {
+.form-monorow > button, .form-monorow > input[type="submit"] {
     flex-grow: 0;
+    width: 40px;
+    height: 40px;
 }

styles/components/toolbar.css

@@ -4,7 +4,7 @@
     justify-content: flex-start;
     align-content: flex-start;
 
-    position: absolute;
+    position: fixed;
 
     z-index: 2;
 

styles/components/work-in-progress.css

@@ -0,0 +1,11 @@
+.work-in-progress {
+    color: var(--warning);
+
+    /* TODO: Make this based on --warning. */
+    background-color: rgba(255, 255, 0, 0.1);
+
+    border-bottom-width: 1px;
+    box-shadow: 1px 1px 2px var(--warning);
+
+    padding: 4px 8px;
+}

styles/elements.css

@@ -13,8 +13,6 @@ body {
 
 main {
     padding: 8px;
-
-    min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {

styles/globals.css

@@ -16,6 +16,7 @@
 @import "components/form-monorow.css";
 @import "components/error.css";
 @import "components/form-daterange.css";
+@import "components/work-in-progress.css";
 
 
 * {