danilo
/
letsswingchat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

link colors

master
Danilo Di Cuia 3 years ago
parent
1e3650bf92
commit
6ca12bc3cc
5 changed files with 168 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      package-lock.json
  2. 1
      package.json
  3. 43
      src/Buttons.js
  4. 106
      src/Galleria.js
  5. 79
      src/index.js

37
package-lock.json generated
Unescape View File

@ -23,6 +23,7 @@
"react-hook-form": "^7.41.0", "react-hook-form": "^7.41.0",
"react-router-dom": "^6.6.1", "react-router-dom": "^6.6.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"sass": "^1.60.0",
"sort-by": "^1.2.0", "sort-by": "^1.2.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
@ -10000,6 +10001,11 @@
"url": "https://opencollective.com/immer" "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": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "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", "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" "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": { "node_modules/sass-loader": {
"version": "12.6.0", "version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", "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", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
"integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==" "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": { "import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "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", "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" "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": { "sass-loader": {
"version": "12.6.0", "version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

1
package.json
Unescape View File

@ -19,6 +19,7 @@
"react-hook-form": "^7.41.0", "react-hook-form": "^7.41.0",
"react-router-dom": "^6.6.1", "react-router-dom": "^6.6.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"sass": "^1.60.0",
"sort-by": "^1.2.0", "sort-by": "^1.2.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

43
src/Buttons.js
Unescape View File

@ -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>
);
}

106
src/Galleria.js
Unescape View File

@ -3,13 +3,11 @@ import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import firebase from "firebase/compat/app"; 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 { Stack } from "@mui/system";
import logoSrc from "./logo_chat.svg"; 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 { VideoComponent } from "./Proiezione";
import { Buttons } from "./Buttons";
export const Galleria = () => { export const Galleria = () => {
const { evento } = useParams(); const { evento } = useParams();
@ -31,13 +29,13 @@ export const Galleria = () => {
setMessages(messaggi); setMessages(messaggi);
setImages( // setImages(
messaggi // messaggi
.filter((d) => d.immagineURL != null) // .filter((d) => d.immagineURL != null)
.map((d) => { // .map((d) => {
return d.immagineURL; // return d.immagineURL;
}) // })
); // );
}); });
}, [evento]); }, [evento]);
@ -84,7 +82,7 @@ export const Galleria = () => {
}} }}
> >
<VideoComponent /> <VideoComponent />
<ContenitoreMessaggio messaggi={messages} /> {messages.length && <ContenitoreMessaggio messaggi={messages} />}
<img <img
src={logoSrc} src={logoSrc}
@ -108,54 +106,21 @@ const ContenitoreMessaggio = ({ messaggi }) => {
return ( return (
<Stack sx={{ zIndex: 1 }}> <Stack sx={{ zIndex: 1 }}>
<div> <div>
{messaggioDaMostrare && ( <Stack>
<ImagePlaceholder {messaggioDaMostrare.immagineURL && (
messaggioDaMostrare={messaggioDaMostrare} <ImagePlaceholder
style={{ messaggioDaMostrare={messaggioDaMostrare}
maxWidth: "100%", style={{
maxHeight: "80vh", maxWidth: "100%",
}} maxHeight: "80vh",
/> }}
)} />
</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>
)} )}
<Messaggio messaggioDaMostrare={messaggioDaMostrare} />
</Stack> </Stack>
</Stack> </div>
{Buttons(indiceCorrente, cambiaindiceCorrente, messaggi)}
</Stack> </Stack>
); );
}; };
@ -164,6 +129,9 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
const [imageLoaded, setImageLoaded] = useState(false); const [imageLoaded, setImageLoaded] = useState(false);
useEffect(() => { useEffect(() => {
console.log("go");
setImageLoaded(false);
if (messaggioDaMostrare.immagineURL) { if (messaggioDaMostrare.immagineURL) {
const image = new Image(); const image = new Image();
image.onload = () => { image.onload = () => {
@ -175,8 +143,8 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
} }
}, [messaggioDaMostrare.immagineURL]); }, [messaggioDaMostrare.immagineURL]);
return ( if (imageLoaded) {
<Fade in={imageLoaded}> return (
<div> <div>
{messaggioDaMostrare.immagineURL && ( {messaggioDaMostrare.immagineURL && (
<img <img
@ -188,10 +156,22 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
}} }}
/> />
)} )}
<Messaggio messaggioDaMostrare={messaggioDaMostrare} />
</div> </div>
</Fade> );
); } else {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-around",
width: "100%",
}}
>
<CircularProgress />
</Box>
);
}
} }
const Messaggio = ({ messaggioDaMostrare }) => { const Messaggio = ({ messaggioDaMostrare }) => {

79
src/index.js
Unescape View File

@ -9,14 +9,8 @@ import { Proiezione } from "./Proiezione";
import { MyForm } from "./MyForm"; import { MyForm } from "./MyForm";
import { Admin } from "./Admin"; import { Admin } from "./Admin";
import { Galleria } from "./Galleria"; import { Galleria } from "./Galleria";
import { Stack } from "@mui/system"; import { Container, Stack, Typography } from "@mui/material";
import { Container, Typography } from "@mui/material"; import logoSrc from "./logo_chat.svg";
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";
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw", apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
@ -41,22 +35,23 @@ const ListaEventi = () => {
messagesRef.once("value", function (snapshot) { messagesRef.once("value", function (snapshot) {
const eventiObject = snapshot.val(); const eventiObject = snapshot.val();
const e = Object.keys(eventiObject).map((d) => { const e = Object.keys(eventiObject).map((d, i) => {
console.log(eventiObject[d]); const color = `hsl(${i * 10}, 75%, 70%`;
return ( return (
<ListItem> <div key={d}>
{/* <ListItemAvatar> <a
<Avatar> style={{
<BeachAccessIcon /> textDecoration: "none",
</Avatar> display: "inline-block",
</ListItemAvatar> */} color,
<Link key={d} to={`/eventi/${d}`}> fontFamily: "Lineatura",
<ListItemText borderBottom: `1px solid ${color}`,
primary={eventiObject[d]} }}
// secondary="July 20, 2014" href={`/eventi/${d}`}
/> >
</Link> {eventiObject[d]}
</ListItem> </a>
</div>
); );
}); });
cambiaEventi(e); cambiaEventi(e);
@ -65,20 +60,34 @@ const ListaEventi = () => {
if (!eventi) return <div></div>; if (!eventi) return <div></div>;
return ( return (
<Container> <Container maxWidth="md">
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}> <img
<ListItem> alt="logo"
<Typography src={logoSrc}
style={{ style={{
fontFamily: "Lineatura", width: 120,
}} position: "absolute",
> top: 20,
I nostri eventi right: 20,
</Typography> }}
</ListItem> />
<Stack
spacing={2}
sx={{
paddingTop: 20,
}}
>
<Typography
variant="h4"
style={{
fontFamily: "Lineatura",
}}
>
I nostri eventi
</Typography>
{eventi} {eventi}
</List> </Stack>
</Container> </Container>
); );
}; };

Write Preview
Loading…
Cancel
Save