Skip to content

Commit

Permalink
styling for fave card
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sun-Mountain
Sun-Mountain committed Jul 17, 2023
1 parent 824c8df commit b5b28d5
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 130 deletions.
4 changes: 2 additions & 2 deletions frontend/assets/styles/base/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ $subtext-color: $french;
$time-label-bg: $lightOrange-50;
$time-label-color: $bittersweet;
$conflict-btn-color: $raspberry;
$detail-color: $french;
$system-color: $outer;
$fave-item-color: $outer;
$details-color: $french;
66 changes: 40 additions & 26 deletions frontend/assets/styles/components/schedule.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
padding: 10px 25px;
}

.schedule-list-day {
list-style-type: disc;
}

.schedule-list-time {
.time-title {
background-color: $time-label-bg;
Expand All @@ -20,32 +16,50 @@
}

.fave-list-item {
color: $fave-item-color;
margin: 10px;
}
}
width: 100%;

.conflicts-btn {
border-radius: 5px 5px !important;
color: $conflict-btn-color;
font-size: 16px;
}
.conflicts-btn {
border-radius: 5px 5px !important;
color: $conflict-btn-color;
font-size: 14px;
float: right;
}

.fave-title {
font-weight: 700;
font-size: 18px;
}
.conflicts-list {
display: flex;
flex-direction: column;
}

.fave-detail {
color: $detail-color;
font-size: 14px;
}
.conflicts-text {
font-size: 14px;
color: $french;
text-align: right;
}

.fave-system {
color: $system-color;
font-size: 15px;
}
.fave-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.fave-card-title {
font-weight: 700;
font-size: 17px;
}

.fave-description {
font-size: 15px;
margin-top: 5px;
.fave-details {
color: $details-color;
display: flex;
flex-wrap: wrap;
font-size: 15px;
justify-content: space-between;
}

.fave-system {
color: $details-color;
font-size: 15px;
}
}
}
111 changes: 62 additions & 49 deletions frontend/components/FaveCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { red } from '@mui/material/colors';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ShareIcon from '@mui/icons-material/Share';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import ReportGmailErrorredIcon from '@mui/icons-material/ReportGmailerrorred';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';

import { NewEvent } from '@/assets/interfaces';
import findEvent from '@/helpers/findEvent';
Expand All @@ -28,9 +23,6 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
return <IconButton {...other} />;
})(({ theme, expand }) => ({
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));

export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) {
Expand All @@ -45,7 +37,9 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }
location,
room,
tableNum,
gameSystem
gameSystem,
gameId,
tournament
} = favoriteEvent;

const handleExpandClick = () => {
Expand All @@ -56,22 +50,61 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }

return (
<Card
sx={{ maxWidth: 345 }}
// sx={{ maxWidth: 355 }}
variant='outlined'
className='fave-list-item'
>
<CardContent>
<Typography className='fave-title'>
{title}
<Typography className='fave-header'>
<div>
<div>
{gameId}
</div>
<div className='fave-card-title'>
{title}
</div>
</div>

{conflicts && conflicts.length > 0 ? (
<div className='conflicts-list conflicts-text'>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
className='conflicts-btn'
>
<ReportGmailErrorredIcon /> Conflicts with {conflicts.length} Events {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
</ExpandMore>
<Collapse in={expanded} timeout="auto">
<CardContent className=''>
{conflicts.map((conflict, index) => {
var conflictEvent = findEvent(conflict)
return (
<div key={index}>
{conflictEvent.title} - {conflictEvent.gameId}
</div>
)
})}
</CardContent>
</Collapse>
</div>
) : (
<div className='conflicts-text'>
No conflicting events
</div>
)}
</Typography>
<Typography className='faveStartAndEnd fave-detail'>
{dateSubTitle}
<Typography className='fave-details'>
<span className='fave-date-times'>
{dateSubTitle}
</span>
{location && (
<span className='fave-location'>
{location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''}
</span>
)}
</Typography>
{location && (
<Typography className='fave-location fave-detail'>
{location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''}
</Typography>
)}
{gameSystem && (
<Typography className='fave-system'>
<strong>System</strong>: {gameSystem}
Expand All @@ -80,34 +113,14 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }
<Typography className='fave-description'>
{descriptionShort}
</Typography>
<Typography>
{tournament && (
<>
<EmojiEventsIcon /> Tournament
</>
)}
</Typography>
</CardContent>
{conflicts && conflicts.length > 0 && (
<>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
className='conflicts-btn'
>
Conflicts with {conflicts.length} Events {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
{conflicts.map((conflict, index) => {
var conflictEvent = findEvent(conflict)
return (
<div key={index}>
{conflictEvent.title}
</div>
)
})}
</CardContent>
</Collapse>
</>
)}
</Card>
);
}
102 changes: 49 additions & 53 deletions frontend/pages/export/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import FaveCard from '@/components/FaveCard';

const eventsListByDay = filteredEvents.startDates;
const eventsListByStartTime = filteredEvents.startTimes;
const eventsListByEndDate = filteredEvents.endDates;
const eventsListByEndTime = filteredEvents.endTimes;
const dayLabels = Object.keys(eventsListByDay).sort();
const timeLabels = Object.keys(eventsListByStartTime).sort();

Expand All @@ -23,56 +21,52 @@ const findConflicts = (favesList: number[], favesMasterList: number[]) => {
var faveEvent = findEvent(fave),
conflictingEvents: number[] = [];

// Find events that start at same time;
favesMasterList.filter(val => {
if (eventsListByStartTime[faveEvent.startTime].includes(val)
&& eventsListByDay[faveEvent.startDate].includes(val)
&& val != faveEvent.id
&& !conflictingEvents.includes(val)) {
conflictingEvents.push(val);
}
})

// Find events that end at same time;
favesMasterList.filter(val => {
if (eventsListByEndTime[faveEvent.endTime].includes(val)
&& eventsListByDay[faveEvent.endDate].includes(val)
&& val != faveEvent.id
&& !conflictingEvents.includes(val)) {
conflictingEvents.push(val);
}
})

// Find events that starts during the duration
favesMasterList.filter(val => {
var valueEvent = findEvent(val)
if ((eventsListByDay[faveEvent.startDate].includes(val) || eventsListByDay[faveEvent.endDate].includes(val))
&& (valueEvent.startTime > faveEvent.startTime && valueEvent.startTime < faveEvent.endTime)
&& !conflictingEvents.includes(val)) {
conflictingEvents.push(val);
}
})

// Find events that ends during the duration
favesMasterList.filter(val => {
var valueEvent = findEvent(val)
if ((eventsListByDay[faveEvent.startDate].includes(val)
|| eventsListByDay[faveEvent.endDate].includes(val))
&& (valueEvent.endTime > faveEvent.startTime
&& valueEvent.endTime < faveEvent.endTime)
&& !conflictingEvents.includes(val)) {
conflictingEvents.push(val);
}
})

// Find events that are too long
favesMasterList.filter(val => {
var valueEvent = findEvent(val)
if ((eventsListByDay[faveEvent.startDate].includes(val)
&& eventsListByDay[faveEvent.endDate].includes(val))
&& (valueEvent.startTime < faveEvent.startTime && valueEvent.endTime > faveEvent.endTime)
&& !conflictingEvents.includes(val)) {
conflictingEvents.push(val);
favesMasterList.map(val => {
var valueEvent: NewEvent = findEvent(val);

if (val != faveEvent.id) {
// if val starts or ends at same time as fave
if ((valueEvent.startTime === faveEvent.startTime
&& valueEvent.startDate === faveEvent.startDate) ||
(valueEvent.endTime === faveEvent.endTime
&& valueEvent.endDate === faveEvent.endDate)) {
conflictingEvents.push(val)
}

// if val starts during fave
if (valueEvent.startDate === faveEvent.startDate &&
(valueEvent.startTime >= faveEvent.startTime
&& valueEvent.startTime < faveEvent.endTime) &&
!conflictingEvents.includes(val)) {
conflictingEvents.push(val)
}

// if val ends during fave
if (valueEvent.endDate === faveEvent.endDate &&
(valueEvent.endTime < faveEvent.endTime
&& valueEvent.endTime >= faveEvent.startTime) &&
!conflictingEvents.includes(val)) {
conflictingEvents.push(val)
}

// if value starts before fave and ends after
if (valueEvent.startTime < faveEvent.startTime &&
valueEvent.endTime > faveEvent.endTime &&
valueEvent.startDate < faveEvent.startDate &&
valueEvent.endDate >= faveEvent.endDate &&
!conflictingEvents.includes(val)) {
conflictingEvents.push(val)
}

// if fave ends on next day
if (faveEvent.startDate != faveEvent.endDate) {
// if val ends after fave start but before midnight
if (valueEvent.startDate === faveEvent.startDate &&
valueEvent.endTime >= faveEvent.startTime &&
!conflictingEvents.includes(val)) {
conflictingEvents.push(val)
}
}
}
})

Expand Down Expand Up @@ -105,7 +99,9 @@ export default function ExportPage () {

if (favesPerDay.length) {
return (
<Accordion defaultExpanded={true} key={index}>
<Accordion
className=''
defaultExpanded={true} key={index}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
Expand Down

0 comments on commit b5b28d5

Please sign in to comment.