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
Split 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. 86
      src/Galleria.js
  5. 65
      src/index.js

37
package-lock.json generated
Unescape View File

@ -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",

1
package.json
Unescape View File

@ -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"
},

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

86
src/Galleria.js
Unescape View File

@ -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,7 +106,8 @@ const ContenitoreMessaggio = ({ messaggi }) => {
return (
<Stack sx={{ zIndex: 1 }}>
<div>
{messaggioDaMostrare && (
<Stack>
{messaggioDaMostrare.immagineURL && (
<ImagePlaceholder
messaggioDaMostrare={messaggioDaMostrare}
style={{
@ -117,45 +116,11 @@ const ContenitoreMessaggio = ({ messaggi }) => {
}}
/>
)}
<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]);
if (imageLoaded) {
return (
<Fade in={imageLoaded}>
<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 }) => {

65
src/index.js
Unescape View File

@ -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>
<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>
</ListItem>
{eventi}
</List>
</Stack>
</Container>
);
};

Write Preview
Loading…
Cancel
Save