link colors

2023-04-03 15:26:03 +02:00
parent 1e3650bf92
commit 6ca12bc3cc
5 changed files with 168 additions and 98 deletions
@@ -23,6 +23,7 @@
        "react-hook-form": "^7.41.0",
        "react-router-dom": "^6.6.1",
        "react-scripts": "5.0.1",
+        "sass": "^1.60.0",
        "sort-by": "^1.2.0",
        "web-vitals": "^2.1.4"
      }
@@ -10000,6 +10001,11 @@
        "url": "https://opencollective.com/immer"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -16044,6 +16050,22 @@
      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
    },
+    "node_modules/sass": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
+      "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/sass-loader": {
      "version": "12.6.0",
      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -25566,6 +25588,11 @@
      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
      "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
    },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
    "import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -29737,6 +29764,16 @@
      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
    },
+    "sass": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
+      "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "sass-loader": {
      "version": "12.6.0",
      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -19,6 +19,7 @@
    "react-hook-form": "^7.41.0",
    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
+    "sass": "^1.60.0",
    "sort-by": "^1.2.0",
    "web-vitals": "^2.1.4"
  },
@@ -0,0 +1,43 @@
+import React from "react";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import IconButton from "@mui/material/IconButton";
+import { Stack } from "@mui/system";
+
+export function Buttons(indiceCorrente, cambiaindiceCorrente, messaggi) {
+  return (
+    <Stack
+      style={{
+        display: "flex",
+        width: "100vw",
+        position: "absolute",
+        bottom: 20,
+        left: 0,
+        padding: 10,
+        boxSizing: "border-box",
+      }}
+      direction="row"
+    >
+      <Stack
+        style={{
+          display: "flex",
+          width: "70vw",
+          margin: "0 auto",
+          justifyContent: "space-between",
+        }}
+        direction="row"
+      >
+        {indiceCorrente > 0 && (
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente - 1)}>
+            <ArrowBackIcon style={{ fontSize: "3rem", color: "#ddd" }} />
+          </IconButton>
+        )}
+        {indiceCorrente < messaggi.length - 1 && (
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}>
+            <ArrowForwardIcon style={{ fontSize: "3rem", color: "#ddd" }} />
+          </IconButton>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
@@ -3,13 +3,11 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import firebase from "firebase/compat/app";

-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import IconButton from "@mui/material/IconButton";
 import { Stack } from "@mui/system";
 import logoSrc from "./logo_chat.svg";
-import { Fade, LinearProgress } from "@mui/material";
+import { Box, CircularProgress, Fade, LinearProgress } from "@mui/material";
 import { VideoComponent } from "./Proiezione";
+import { Buttons } from "./Buttons";

 export const Galleria = () => {
  const { evento } = useParams();
@@ -31,13 +29,13 @@ export const Galleria = () => {

      setMessages(messaggi);

-      setImages(
-        messaggi
-          .filter((d) => d.immagineURL != null)
-          .map((d) => {
-            return d.immagineURL;
-          })
-      );
+      // setImages(
+      //   messaggi
+      //     .filter((d) => d.immagineURL != null)
+      //     .map((d) => {
+      //       return d.immagineURL;
+      //     })
+      // );
    });
  }, [evento]);

@@ -84,7 +82,7 @@ export const Galleria = () => {
        }}
      >
        <VideoComponent />
-        <ContenitoreMessaggio messaggi={messages} />
+        {messages.length && <ContenitoreMessaggio messaggi={messages} />}

        <img
          src={logoSrc}
@@ -108,54 +106,21 @@ const ContenitoreMessaggio = ({ messaggi }) => {
  return (
    <Stack sx={{ zIndex: 1 }}>
      <div>
-        {messaggioDaMostrare && (
-          <ImagePlaceholder
-            messaggioDaMostrare={messaggioDaMostrare}
-            style={{
-              maxWidth: "100%",
-              maxHeight: "80vh",
-            }}
-          />
-        )}
+        <Stack>
+          {messaggioDaMostrare.immagineURL && (
+            <ImagePlaceholder
+              messaggioDaMostrare={messaggioDaMostrare}
+              style={{
+                maxWidth: "100%",
+                maxHeight: "80vh",
+              }}
+            />
+          )}
+          <Messaggio messaggioDaMostrare={messaggioDaMostrare} />
+        </Stack>
      </div>

-      <Stack
-        style={{
-          display: "flex",
-          width: "100vw",
-          position: "absolute",
-          bottom: 20,
-          left: 0,
-          padding: 10,
-          boxSizing: "border-box",
-        }}
-        direction="row"
-      >
-        <Stack
-          style={{
-            display: "flex",
-            width: "70vw",
-            margin: "0 auto",
-            justifyContent: "space-between",
-          }}
-          direction="row"
-        >
-          {indiceCorrente > 0 && (
-            <IconButton
-              onClick={() => cambiaindiceCorrente(indiceCorrente - 1)}
-            >
-              <ArrowBackIcon style={{ fontSize: "3rem", color: "#ddd" }} />
-            </IconButton>
-          )}
-          {indiceCorrente < messaggi.length - 1 && (
-            <IconButton
-              onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-            >
-              <ArrowForwardIcon style={{ fontSize: "3rem", color: "#ddd" }} />
-            </IconButton>
-          )}
-        </Stack>
-      </Stack>
+      {Buttons(indiceCorrente, cambiaindiceCorrente, messaggi)}
    </Stack>
  );
 };
@@ -164,6 +129,9 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
  const [imageLoaded, setImageLoaded] = useState(false);

  useEffect(() => {
+    console.log("go");
+    setImageLoaded(false);
+
    if (messaggioDaMostrare.immagineURL) {
      const image = new Image();
      image.onload = () => {
@@ -175,8 +143,8 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
    }
  }, [messaggioDaMostrare.immagineURL]);

-  return (
-    <Fade in={imageLoaded}>
+  if (imageLoaded) {
+    return (
      <div>
        {messaggioDaMostrare.immagineURL && (
          <img
@@ -188,10 +156,22 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
            }}
          />
        )}
-        <Messaggio messaggioDaMostrare={messaggioDaMostrare} />
      </div>
-    </Fade>
-  );
+    );
+  } else {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-around",
+          width: "100%",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
 }

 const Messaggio = ({ messaggioDaMostrare }) => {
@@ -9,14 +9,8 @@ import { Proiezione } from "./Proiezione";
 import { MyForm } from "./MyForm";
 import { Admin } from "./Admin";
 import { Galleria } from "./Galleria";
-import { Stack } from "@mui/system";
-import { Container, Typography } from "@mui/material";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import Avatar from "@mui/material/Avatar";
-import BeachAccessIcon from "@mui/icons-material/BeachAccess";
+import { Container, Stack, Typography } from "@mui/material";
+import logoSrc from "./logo_chat.svg";

 const firebaseConfig = {
  apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
@@ -41,22 +35,23 @@ const ListaEventi = () => {

    messagesRef.once("value", function (snapshot) {
      const eventiObject = snapshot.val();
-      const e = Object.keys(eventiObject).map((d) => {
-        console.log(eventiObject[d]);
+      const e = Object.keys(eventiObject).map((d, i) => {
+        const color = `hsl(${i * 10}, 75%, 70%`;
        return (
-          <ListItem>
-            {/* <ListItemAvatar>
-              <Avatar>
-                <BeachAccessIcon />
-              </Avatar>
-            </ListItemAvatar> */}
-            <Link key={d} to={`/eventi/${d}`}>
-              <ListItemText
-                primary={eventiObject[d]}
-                // secondary="July 20, 2014"
-              />
-            </Link>
-          </ListItem>
+          <div key={d}>
+            <a
+              style={{
+                textDecoration: "none",
+                display: "inline-block",
+                color,
+                fontFamily: "Lineatura",
+                borderBottom: `1px solid ${color}`,
+              }}
+              href={`/eventi/${d}`}
+            >
+              {eventiObject[d]}
+            </a>
+          </div>
        );
      });
      cambiaEventi(e);
@@ -65,20 +60,34 @@ const ListaEventi = () => {

  if (!eventi) return <div></div>;
  return (
-    <Container>
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-        <ListItem>
-          <Typography
-            style={{
-              fontFamily: "Lineatura",
-            }}
-          >
-            I nostri eventi
-          </Typography>
-        </ListItem>
+    <Container maxWidth="md">
+      <img
+        alt="logo"
+        src={logoSrc}
+        style={{
+          width: 120,
+          position: "absolute",
+          top: 20,
+          right: 20,
+        }}
+      />
+      <Stack
+        spacing={2}
+        sx={{
+          paddingTop: 20,
+        }}
+      >
+        <Typography
+          variant="h4"
+          style={{
+            fontFamily: "Lineatura",
+          }}
+        >
+          I nostri eventi
+        </Typography>

        {eventi}
-      </List>
+      </Stack>
    </Container>
  );
 };