Skip to content

change legion card styling #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 29, 2025
Merged

change legion card styling #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
508336c
change legion card styling
dgomie Apr 29, 2025
853bcf4
Update src/components/dashboardCard/DashboardCard.js
dgomie Apr 29, 2025
c43b0c7
Update src/components/dashboardCard/DashboardCard.js
dgomie Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/img/group.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/img/swords.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/app/legions/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const Legions = ({ currentUser }) => {
players={legion.players}
maxNumPlayers={legion.maxNumPlayers}
numRounds={legion.numRounds}
currentRound={legion.currentRound}
onClick={() => {
handleCardClick(legion.id);
}}
Expand Down
106 changes: 54 additions & 52 deletions src/components/dashboardCard/DashboardCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,72 @@
import React, { useEffect, useState } from 'react';
import styles from './DashboardCard.module.css';
import Image from 'next/image';

const DashboardCard = ({
legionName,
legionDescription,
players,
maxNumPlayers,
numRounds,
currentRound,
onClick,
backgroundColor,
}) => {
const [background, setBackground] = useState('');
const [shapeStyles, setShapeStyles] = useState({});


useEffect(() => {
const predefinedColors = [
'#FF5733',
'#33FF57',
'#3357FF',
'#FF33A1',
'#A133FF',
const getRandomColor = () => {
const colors = [
'#f9b234',
'#3ecd5e',
'#4bb9f0',
'#b070f0',
'#cd3e94',
'#ea9449',
];

const getRandomColor = () => {
return predefinedColors[
Math.floor(Math.random() * predefinedColors.length)
];
};

const getRandomPosition = () => {
const top = Math.floor(Math.random() * 100) - 50; // Random value between -50 and 50
const left = Math.floor(Math.random() * 100) - 50; // Random value between -50 and 50
return { top: `${top}%`, left: `${left}%` };
};

const color1 = getRandomColor();
const color2 = getRandomColor();
const color3 = getRandomColor();

setBackground(`linear-gradient(135deg, ${color1}, ${color2}, ${color3})`);

setShapeStyles({
before: getRandomPosition(),
after: getRandomPosition(),
});
}, []);
return colors[Math.floor(Math.random() * colors.length)];
};

return (
<div onClick={onClick} className={styles.mainContainer} style={{ background }}>
<div
className={styles.shape}
style={{
...shapeStyles.before,
background: 'rgba(255, 255, 255, 0.2)',
}}
/>
<div
className={styles.shape}
style={{ ...shapeStyles.after, background: 'rgba(255, 255, 255, 0.1)' }}
/>
<div className={styles.title}>{legionName}</div>
<div className={styles.description}>{legionDescription}</div>
<div className={styles.info}>
{players.length} / {maxNumPlayers} Players
<div className={styles['ag-format-container']} onClick={onClick}>
<div className={styles['ag-courses_item']}>
<div className={styles['ag-courses-item_link']}>
<div
className={styles['ag-courses-item_bg']}
style={{ backgroundColor: getRandomColor() }}
></div>

<div className={styles['ag-courses-item_title']}>{legionName}</div>
<div className={styles['ag-courses-item_description']}>
{legionDescription}
</div>
<div className={styles.roundInfo}>
<>
<Image
src={'/img/group.svg'}
width={25}
height={25}
alt="Group"
/>
<div className={styles['ag-courses-item_description']}>
{players.length} / {maxNumPlayers} Players
</div>
</>
<>
<Image
src={'/img/swords.svg'}
width={25}
height={25}
alt="Swords"
/>
<div className={styles['ag-courses-item_description']}>
{currentRound} / {numRounds} Rounds
</div>
</>
</div>
{/* <div className={styles['ag-courses-item_date-box']}>
Start:
<span className={styles['ag-courses-item_date']}>04.11.2022</span>
</div> */}
</div>
</div>
<div className={styles.info}>{numRounds} Rounds</div>
</div>
);
};
Expand Down
144 changes: 108 additions & 36 deletions src/components/dashboardCard/DashboardCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,123 @@
.mainContainer {
position: relative;
display: grid;
border-radius: 15px;
padding: 1rem;
width: 100%;
.roundInfo {
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
z-index: 2;
position: relative;
}

.ag-format-container {
width: 70%;
margin: 0.5rem 0 0.5rem 0;
}

.ag-courses_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

padding: 0.5rem;
}
.ag-courses_item {
-ms-flex-preferred-size: calc(33.33333% - 30px);
flex-basis: calc(33.33333% - 30px);

overflow: hidden;
box-shadow: 1.8px 3.7px 3.7px hsl(0deg 0% 0% / 0.44);
color: white;
overflow: hidden;

border-radius: 28px;
}
.ag-courses-item_link {
display: block;
padding: 30px 20px;
background-color: #fff;
overflow: hidden;
position: relative;
cursor: pointer;
margin: 0 1rem 1rem;
}

.mainContainer::before,
.mainContainer::after {
content: '';
position: absolute;
border-radius: 50%;
opacity: 0.8;
.ag-courses-item_link:hover .ag-courses-item_bg {
-webkit-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}
.ag-courses-item_title {
/* min-height: 87px; */
/* margin: 0 0 25px; */

overflow: hidden;

font-weight: bold;
font-size: 30px;
color: #000;

.mainContainer::before {
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.2);
top: -50px;
left: -50px;
z-index: 2;
position: relative;
}

.mainContainer::after {
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
bottom: -100px;
right: -100px;
.ag-courses-item_description {
font-size: 1rem;
color: #000;
z-index: 2;
position: relative;
}

.title {
font-size: 2rem;
font-weight: bold;
.ag-courses-item_bg {
height: 128px;
width: 128px;
background-color: #f9b234;

z-index: 1;
position: absolute;
top: -75px;
right: -75px;

border-radius: 50%;

-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
background-color: #4c49ea;
}

@media only screen and (max-width: 979px) {
.ag-courses_item {
-ms-flex-preferred-size: calc(50% - 30px);
flex-basis: calc(50% - 30px);
}
.ag-courses-item_title {
font-size: 24px;
}

.description {
font-size: 1.2rem;
margin-top: 0.5rem;
.ag-courses-item_description {
font-size: 1rem;
color: #000;
}
}

.info {
font-size: 1rem;
margin-top: 0.5rem;
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
2 changes: 2 additions & 0 deletions src/components/dashboardFeed/DashboardFeed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const DashboardFeed = ({ currentUserId }) => {
players={legion.players}
maxNumPlayers={legion.maxNumPlayers}
numRounds={legion.numRounds}
currentRound={legion.currentRound}
onClick={() => handleCardClick(legion.id)}
/>
))}
Expand Down Expand Up @@ -104,6 +105,7 @@ const DashboardFeed = ({ currentUserId }) => {
players={legion.players}
maxNumPlayers={legion.maxNumPlayers}
numRounds={legion.numRounds}
currentRound={legion.currentRound}
onClick={() => handleCardClick(legion.id)}
/>
))}
Expand Down