Skip to content
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

Jump to bottom

Improve design of interestgroup page #4408

Merged
merged 2 commits into from
Jan 24, 2024
Merged

Improve design of interestgroup page #4408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4926772
Improve design of interestgroup page
itsisak Jan 23, 2024
8dbf688
Fix alt image, mobile view and lint
itsisak Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 34 additions & 4 deletions app/routes/interestgroups/components/InterestGroup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
max-height: 100px;
max-width: 100px;
border-radius: 100%;
flex-shrink: 0;
}

.logoSmall {
Expand All @@ -17,16 +18,45 @@
border-radius: 100%;
filter: grayscale(100%);
opacity: 0.7;
flex-shrink: 0;
}

.listItem {
margin: 8px;
padding-left: 4px;
background: var(--color-white);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--lego-font-color);
border-radius: var(--border-radius-lg);
itsisak marked this conversation as resolved.
Show resolved Hide resolved
padding: 15px 20px;
margin: 3px 0 12px;
transition: background-color var(--easing-fast);

&:hover {
background-color: rgba(255, 0, 0, var(--color-red-hover-alpha));
}
}

.inactiveListItem:hover {
background-color: rgba(123, 123, 123, var(--color-red-hover-alpha));
}

.listItemName {
margin: 0 0 10px;
color: var(--lego-font-color);
}

.inactiveListItem .listItemName {
margin: 0;
color: var(--color-gray-4);
}

.listItemContent {
padding: 4px;
opacity: 0.8;
}

.inactiveHeader {
margin: 30px 0;
}

.textEdit {
Expand Down
57 changes: 24 additions & 33 deletions app/routes/interestgroups/components/InterestGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,43 @@
import { Flex } from '@webkom/lego-bricks';
import cx from 'classnames';
import { Link } from 'react-router-dom';
import ABAKUS_ICON from 'app/assets/icon-192x192.png';
import { Image } from 'app/components/Image';
import styles from './InterestGroup.css';
import type { Group } from 'app/models';
// TODO: rather handle this in the backend
const SAMPLE_LOGO = 'https://i.imgur.com/Is9VKjb.jpg';

type Props = {
group: Group;
active: boolean;
};

const InterestGroupComponent = ({ group, active }: Props) => {
return (
<Flex className={styles.listItem}>
<Flex
column
className={styles.listItemContent}
style={{
flex: '1',
}}
>
<Link to={`/interest-groups/${group.id}`} className={styles.link}>
<h2
style={
!active
? {
color: 'grey',
}
: {}
}
>
{group.name}
</h2>
</Link>
<Link
to={`/interest-groups/${group.id}`}
className={cx(styles.listItem, !active && styles.inactiveListItem)}
>
<Flex column>
<h2 className={styles.listItemName}>{group.name}</h2>
{active && (
<>
<div className={styles.listItemContent}>
<div>{group.description}</div>
<div>{group.numberOfUsers} medlemmer</div>
</>
<div style={{ marginTop: '10px' }}>
{group.numberOfUsers} medlemmer
</div>
</div>
)}
</Flex>
<Flex justifyContent="center" column>
<Image
className={active ? styles.logoMedium : styles.logoSmall}
src={group.logo || SAMPLE_LOGO}
/>
</Flex>
</Flex>
<Image
className={active ? styles.logoMedium : styles.logoSmall}
src={group.logo || ABAKUS_ICON}
onError={({ currentTarget }) => {
currentTarget.src = ABAKUS_ICON;
currentTarget.onerror = null;
}}
alt={active ? `${group.name} logo` : 'logo'}
/>
</Link>
);
};

Expand Down
43 changes: 27 additions & 16 deletions app/routes/interestgroups/components/InterestGroupList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button } from '@webkom/lego-bricks';
import { Button, Flex } from '@webkom/lego-bricks';
import { usePreparedEffect } from '@webkom/react-prepare';
import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -38,32 +38,43 @@ const InterestGroupList = () => {
return (
<Content>
<Helmet title="Interessegrupper" />
<div className={styles.section}>
<NavigationTab title="Interessegrupper" />
<p>
<NavigationTab title="Interessegrupper" />
<Flex
wrap
gap={10}
margin={'0 0 30px'}
justifyContent="space-between"
alignItems="center"
>
<p style={{ margin: 0 }}>
<Link to="/pages/generelt/39-praktisk-informasjon">Her</Link> finner
du all praktisk informasjon knyttet til våre interessegrupper.
</p>
{canCreate && (
<Link to="/interest-groups/create" className={styles.link}>
<Link to="/interest-groups/create">
<Button>Lag ny interessegruppe</Button>
</Link>
)}
</div>
<div className="groups">
{activeGroups.map((g) => (
<InterestGroupComponent group={g} key={g.id} active={true} />
))}
</Flex>

{activeGroups.map((group) => (
<InterestGroupComponent group={group} key={group.id} active={true} />
))}

<div className={styles.inactiveHeader}>
<h2>Ikke-aktive interessegrupper</h2>
<p>
Send gjerne e-post til
<a href="mailTo:interessegrupper@abakus.no"> oss </a> hvis du ønsker å
åpne en av disse igjen!
Send gjerne e-post til{' '}
<a href="mailTo:interessegrupper@abakus.no">
interessegrupper@abakus.no
</a>{' '}
hvis du ønsker å åpne en av disse igjen!
</p>
{notActiveGroups.map((g) => (
<InterestGroupComponent group={g} key={g.id} active={false} />
))}
</div>

{notActiveGroups.map((group) => (
<InterestGroupComponent group={group} key={group.id} active={false} />
))}
</Content>
);
};
Expand Down