Skip to content

Commit bcc6e6b

Browse files
SoeckaSoecka
authored
[polish] mobile layout (#71)
1 parent e407a45 commit bcc6e6b

File tree

11 files changed

+86
-42
lines changed

11 files changed

+86
-42
lines changed

‎components/Git/Card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export const GitCard: FC<GitCardProps> = observer(
1717
<li
1818
className={`${className} grid grid-cols-1 grid-rows-10 gap-2 rounded-2xl border p-4 elevation-1 hover:elevation-8 dark:border-0`}
1919
>
20-
<h3 className="row-span-2 text-lg">
20+
<h2 className="row-span-2 text-lg">
2121
<a target="_blank" href={html_url} rel="noreferrer">
2222
{full_name}
2323
</a>
24-
</h3>
24+
</h2>
2525

2626
<nav className="row-span-3 flex flex-row flex-wrap gap-2">
2727
{topics.map(topic => (
@@ -47,5 +47,5 @@ export const GitCard: FC<GitCardProps> = observer(
4747
{i18n.t('home_page')}
4848
</Button>
4949
</li>
50-
)
50+
),
5151
);

‎components/Layout/MainNavigator.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Component } from 'react';
1717
import { i18n, LanguageName, t } from '../../models/Translation';
1818
import { SymbolIcon } from '../Icon';
1919
import { ColorModeIconDropdown } from './ColorModeDropdown';
20-
import { GithubIcon } from './Svg';
20+
import { BrandLogo, GithubIcon } from './Svg';
2121

2222
export const mainNavLinks = () => [
2323
{ title: t('latest_projects'), href: '/project' },
@@ -48,16 +48,14 @@ export class MainNavigator extends Component {
4848

4949
return (
5050
<>
51-
<Button
51+
<IconButton
5252
color="inherit"
53-
aria-controls="i18n-menu"
54-
size="small"
53+
aria-label="language selector"
5554
id="i18n-selector"
56-
startIcon={<SymbolIcon name="translate" />}
5755
onClick={event => (this.menuAnchor = event.currentTarget)}
5856
>
59-
{LanguageName[currentLanguage]}
60-
</Button>
57+
<SymbolIcon name="language" />
58+
</IconButton>
6159
<Menu
6260
anchorEl={menuAnchor}
6361
id="i18n-menu"
@@ -104,7 +102,7 @@ export class MainNavigator extends Component {
104102
open={this.menuExpand}
105103
onClose={() => (this.menuExpand = false)}
106104
>
107-
<Toolbar className="bg-transparent bg-none shadow-none" disableGutters />
105+
<Toolbar disableGutters />
108106
<div className="bg-background-paper py-3 elevation-16">
109107
<nav className="flex flex-col items-center gap-4">{this.renderLinks()}</nav>
110108
</div>
@@ -120,16 +118,21 @@ export class MainNavigator extends Component {
120118
<div className="flex flex-row items-center gap-3">
121119
{this.renderDrawer()}
122120

123-
<Image src="/idea2app.svg" alt="brand logo" width={32} height={40} />
124-
<Link translate="no" className="font-bold uppercase" href="/">
121+
<BrandLogo />
122+
<Link translate="no" className="font-bold uppercase" href="/" rel="home">
125123
idea2app
126124
</Link>
127125
</div>
128126

129127
<nav className="item-center hidden flex-row gap-4 sm:flex">{this.renderLinks()}</nav>
130128

131129
<div className="flex flex-row items-center gap-3 sm:gap-6">
132-
<Link href="https://github.com/idea2app" target="_blank" rel="noopener noreferrer">
130+
<Link
131+
href="https://github.com/idea2app"
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
aria-label="idea2app's GitHub account"
135+
>
133136
<GithubIcon />
134137
</Link>
135138
<ColorModeIconDropdown />

‎components/Layout/Svg.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,35 @@ export const GithubIcon: FC<SvgIconProps> = props => (
66
<path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z" />
77
</SvgIcon>
88
);
9+
10+
export const BrandLogo: FC<SvgIconProps> = props => (
11+
<SvgIcon {...props}>
12+
<svg
13+
width="234"
14+
height="219"
15+
viewBox="0 0 234 219"
16+
fill="none"
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<path
20+
d="M73 73L136.22 109.5V182.5L73 219L9.78014 182.5V109.5L73 73Z"
21+
fill="#21A9A8"
22+
fillOpacity="0.7"
23+
/>
24+
<path
25+
d="M136.2 36.5L199.42 73V146L136.2 182.5L72.9802 146V73L136.2 36.5Z"
26+
fill="#2391A9"
27+
fillOpacity="0.7"
28+
/>
29+
<path
30+
d="M73 0L136.22 36.5V109.5L73 146L9.78014 109.5V36.5L73 0Z"
31+
fill="#21A971"
32+
fillOpacity="0.7"
33+
/>
34+
<path
35+
d="M30.204 102C29.748 102 29.412 101.904 29.196 101.712C29.004 101.496 28.908 101.16 28.908 100.704V96.42C28.908 95.964 29.004 95.64 29.196 95.448C29.412 95.232 29.748 95.124 30.204 95.124H33.768V83.028H30.204C29.748 83.028 29.412 82.932 29.196 82.74C29.004 82.524 28.908 82.188 28.908 81.732V77.376C28.908 76.92 29.004 76.596 29.196 76.404C29.412 76.188 29.748 76.08 30.204 76.08H45.54C45.996 76.08 46.32 76.188 46.512 76.404C46.728 76.596 46.836 76.92 46.836 77.376V81.732C46.836 82.188 46.728 82.524 46.512 82.74C46.32 82.932 45.996 83.028 45.54 83.028H42.048V95.124H45.54C45.996 95.124 46.32 95.232 46.512 95.448C46.728 95.64 46.836 95.964 46.836 96.42V100.704C46.836 101.16 46.728 101.496 46.512 101.712C46.32 101.904 45.996 102 45.54 102H30.204ZM64.7089 102H52.5769C52.1209 102 51.7849 101.904 51.5689 101.712C51.3769 101.496 51.2809 101.16 51.2809 100.704V77.376C51.2809 76.92 51.3769 76.596 51.5689 76.404C51.7849 76.188 52.1209 76.08 52.5769 76.08H64.7089C67.7089 76.08 69.9289 76.68 71.3689 77.88C72.8329 79.08 73.5649 80.928 73.5649 83.424V94.656C73.5649 97.152 72.8329 99 71.3689 100.2C69.9289 101.4 67.7089 102 64.7089 102ZM59.4529 82.956V95.196H63.7369C64.3129 95.196 64.7329 95.052 64.9969 94.764C65.2849 94.476 65.4289 94.032 65.4289 93.432V84.684C65.4289 84.084 65.2849 83.652 64.9969 83.388C64.7329 83.1 64.3129 82.956 63.7369 82.956H59.4529ZM96.1403 102H79.4363C78.9803 102 78.6443 101.904 78.4283 101.712C78.2363 101.496 78.1403 101.16 78.1403 100.704V77.376C78.1403 76.92 78.2363 76.596 78.4283 76.404C78.6443 76.188 78.9803 76.08 79.4363 76.08H96.1403C96.5963 76.08 96.9203 76.188 97.1123 76.404C97.3283 76.596 97.4363 76.92 97.4363 77.376V81.588C97.4363 82.044 97.3283 82.38 97.1123 82.596C96.9203 82.788 96.5963 82.884 96.1403 82.884H86.2043V85.656H93.2243C93.6803 85.656 94.0043 85.764 94.1963 85.98C94.4123 86.172 94.5203 86.496 94.5203 86.952V90.804C94.5203 91.26 94.4123 91.596 94.1963 91.812C94.0043 92.004 93.6803 92.1 93.2243 92.1H86.2043V95.196H96.1403C96.5963 95.196 96.9203 95.304 97.1123 95.52C97.3283 95.712 97.4363 96.036 97.4363 96.492V100.704C97.4363 101.16 97.3283 101.496 97.1123 101.712C96.9203 101.904 96.5963 102 96.1403 102ZM111.091 83.64L109.399 89.112H115.051L113.359 83.64C113.263 83.424 113.155 83.268 113.035 83.172C112.939 83.076 112.819 83.028 112.675 83.028H111.775C111.631 83.028 111.499 83.076 111.379 83.172C111.283 83.268 111.187 83.424 111.091 83.64ZM109.039 100.704C109.039 101.16 108.931 101.496 108.715 101.712C108.523 101.904 108.199 102 107.743 102H102.451C101.995 102 101.659 101.904 101.443 101.712C101.251 101.496 101.155 101.16 101.155 100.704V91.2C101.155 90.48 101.263 89.652 101.479 88.716C101.719 87.78 102.079 86.688 102.559 85.44L105.691 77.268C105.835 76.86 106.051 76.56 106.339 76.368C106.651 76.176 107.047 76.08 107.527 76.08H117.211C117.667 76.08 118.039 76.176 118.327 76.368C118.639 76.56 118.867 76.86 119.011 77.268L122.143 85.44C122.623 86.688 122.971 87.78 123.187 88.716C123.427 89.652 123.547 90.48 123.547 91.2V100.704C123.547 101.16 123.439 101.496 123.223 101.712C123.031 101.904 122.707 102 122.251 102H116.815C116.335 102 115.975 101.904 115.735 101.712C115.519 101.496 115.411 101.16 115.411 100.704V95.664H109.039V100.704ZM145.38 102H128.244C127.788 102 127.452 101.904 127.236 101.712C127.044 101.496 126.948 101.16 126.948 100.704V94.512C126.948 93.12 127.08 91.98 127.344 91.092C127.632 90.18 128.028 89.436 128.532 88.86C129.036 88.284 129.636 87.828 130.332 87.492C131.028 87.156 131.784 86.868 132.6 86.628L137.424 85.116C137.808 85.02 138.06 84.876 138.18 84.684C138.324 84.492 138.396 84.204 138.396 83.82C138.396 83.46 138.324 83.22 138.18 83.1C138.036 82.956 137.784 82.884 137.424 82.884H129.612C129.156 82.884 128.82 82.788 128.604 82.596C128.412 82.38 128.316 82.044 128.316 81.588V77.376C128.316 76.92 128.412 76.596 128.604 76.404C128.82 76.188 129.156 76.08 129.612 76.08H140.232C142.272 76.08 143.832 76.596 144.912 77.628C146.016 78.636 146.568 80.112 146.568 82.056V85.44C146.568 87.24 146.064 88.62 145.056 89.58C144.048 90.54 142.68 91.284 140.952 91.812L136.056 93.36C135.696 93.456 135.444 93.564 135.3 93.684C135.18 93.804 135.12 94.056 135.12 94.44V95.196H145.38C145.836 95.196 146.16 95.304 146.352 95.52C146.568 95.712 146.676 96.036 146.676 96.492V100.704C146.676 101.16 146.568 101.496 146.352 101.712C146.16 101.904 145.836 102 145.38 102ZM160.38 83.64L158.688 89.112H164.34L162.648 83.64C162.552 83.424 162.444 83.268 162.324 83.172C162.228 83.076 162.108 83.028 161.964 83.028H161.064C160.92 83.028 160.788 83.076 160.668 83.172C160.572 83.268 160.476 83.424 160.38 83.64ZM158.328 100.704C158.328 101.16 158.22 101.496 158.004 101.712C157.812 101.904 157.488 102 157.032 102H151.74C151.284 102 150.948 101.904 150.732 101.712C150.54 101.496 150.444 101.16 150.444 100.704V91.2C150.444 90.48 150.552 89.652 150.768 88.716C151.008 87.78 151.368 86.688 151.848 85.44L154.98 77.268C155.124 76.86 155.34 76.56 155.628 76.368C155.94 76.176 156.336 76.08 156.816 76.08H166.5C166.956 76.08 167.328 76.176 167.616 76.368C167.928 76.56 168.156 76.86 168.3 77.268L171.432 85.44C171.912 86.688 172.26 87.78 172.476 88.716C172.716 89.652 172.836 90.48 172.836 91.2V100.704C172.836 101.16 172.728 101.496 172.512 101.712C172.32 101.904 171.996 102 171.54 102H166.104C165.624 102 165.264 101.904 165.024 101.712C164.808 101.496 164.7 101.16 164.7 100.704V95.664H158.328V100.704ZM184.157 102H178.577C178.121 102 177.785 101.904 177.569 101.712C177.377 101.496 177.281 101.16 177.281 100.704V77.376C177.281 76.92 177.377 76.596 177.569 76.404C177.785 76.188 178.121 76.08 178.577 76.08H189.593C192.857 76.08 195.089 76.728 196.289 78.024C197.489 79.32 198.089 81.012 198.089 83.1V87.708C198.089 89.796 197.489 91.488 196.289 92.784C195.089 94.08 192.857 94.728 189.593 94.728H185.453V100.704C185.453 101.16 185.345 101.496 185.129 101.712C184.937 101.904 184.613 102 184.157 102ZM185.381 82.812V88.248H188.621C189.317 88.248 189.773 88.068 189.989 87.708C190.205 87.348 190.313 86.94 190.313 86.484V84.576C190.313 84.12 190.205 83.712 189.989 83.352C189.773 82.992 189.317 82.812 188.621 82.812H185.381ZM208.696 102H203.116C202.66 102 202.324 101.904 202.108 101.712C201.916 101.496 201.82 101.16 201.82 100.704V77.376C201.82 76.92 201.916 76.596 202.108 76.404C202.324 76.188 202.66 76.08 203.116 76.08H214.132C217.396 76.08 219.628 76.728 220.828 78.024C222.028 79.32 222.628 81.012 222.628 83.1V87.708C222.628 89.796 222.028 91.488 220.828 92.784C219.628 94.08 217.396 94.728 214.132 94.728H209.992V100.704C209.992 101.16 209.884 101.496 209.668 101.712C209.476 101.904 209.152 102 208.696 102ZM209.92 82.812V88.248H213.16C213.856 88.248 214.312 88.068 214.528 87.708C214.744 87.348 214.852 86.94 214.852 86.484V84.576C214.852 84.12 214.744 83.712 214.528 83.352C214.312 82.992 213.856 82.812 213.16 82.812H209.92Z"
36+
fill="black"
37+
/>
38+
</svg>
39+
</SvgIcon>
40+
);

‎components/Member/Card.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const MemberCard: FC<MemberCardProps> = observer(
2121
href={`https://github.com/${String(github)}`}
2222
target="_blank"
2323
rel="noreferrer"
24+
aria-label={`${String(nickname)}'s GitHub account`}
2425
>
2526
<GithubIcon />
2627
</a>
@@ -37,8 +38,8 @@ export const MemberCard: FC<MemberCardProps> = observer(
3738
/>
3839
)}
3940

40-
<Link href={`/member/${String(nickname)}`}>
41-
<h3 className="text-base">{String(nickname)}</h3>
41+
<Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
42+
<h2 className="text-base">{String(nickname)}</h2>
4243
<p className="text-sm">{String(position ?? '')}</p>
4344
</Link>
4445
</div>
@@ -51,5 +52,5 @@ export const MemberCard: FC<MemberCardProps> = observer(
5152

5253
<Markdown markdown={String(summary)} />
5354
</li>
54-
)
55+
),
5556
);

‎components/Project/Card.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Chip } from '@mui/material';
2-
import { FC } from 'react';
1+
import { Box, Chip } from '@mui/material';
2+
import { ElementType, FC } from 'react';
33
import { formatDate } from 'web-utility';
44

55
import { Project } from '../../models/Project';
66

77
export interface ProjectCardProps extends Project {
88
className?: string;
9+
component?: ElementType;
910
}
1011

1112
export const ProjectCard: FC<ProjectCardProps> = ({
@@ -15,17 +16,19 @@ export const ProjectCard: FC<ProjectCardProps> = ({
1516
type,
1617
workForm,
1718
price,
18-
settlementDate
19+
settlementDate,
20+
component = 'li',
1921
}) => (
20-
<div
22+
<Box
23+
component={component}
2124
className={`${className} flex flex-col justify-between gap-4 rounded-2xl border p-4 elevation-1 hover:elevation-8 dark:border-0`}
2225
>
23-
<h3 className="flex items-center justify-between">
26+
<h2 className="flex items-center justify-between">
2427
<a className="text-lg" title={String(name)} href={`/project/${id}`}>
2528
{String(name)}
2629
</a>
2730
<Chip label={String(workForm)} />
28-
</h3>
31+
</h2>
2932
<ul className="flex flex-row flex-wrap gap-3">
3033
{(type as string[])?.map(value => (
3134
<Chip key={value} component="li" size="small" label={value} />
@@ -38,5 +41,5 @@ export const ProjectCard: FC<ProjectCardProps> = ({
3841

3942
<time>🏁 {formatDate(+settlementDate!, 'YYYY-MM-DD')}</time>
4043
</div>
41-
</div>
44+
</Box>
4245
);

‎components/Project/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface ProjectListLayoutProps {
99
}
1010

1111
export const ProjectListLayout: FC<ProjectListLayoutProps> = ({ className = '', defaultData }) => (
12-
<ul className={`${className} grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4`}>
12+
<ul className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3`}>
1313
{defaultData.map(item => (
1414
<ProjectCard key={String(item.id)} className="h-full" {...item} />
1515
))}

‎pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function Document() {
4040
* */}
4141
<link
4242
rel="stylesheet"
43-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=code,dark_mode,diversity_3,keyboard_arrow_down,light_mode,menu,translate,trending_up&display=swap"
43+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=code,dark_mode,diversity_3,keyboard_arrow_down,language,light_mode,menu,translate,trending_up&display=swap"
4444
/>
4545
<script type="application/ld+json">{JSON.stringify(siteNameJsonLd)}</script>
4646
</Head>

‎pages/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Masonry from '@mui/lab/Masonry';
22
import { GitRepository } from 'mobx-github';
33
import { observer } from 'mobx-react';
4-
import Image from 'next/image';
54
import { compose, errorLogger, translator } from 'next-ssr-middleware';
65
import { FC } from 'react';
76

87
import { PartnerOverview } from '../components/Client/Partner';
98
import { GitListLayout } from '../components/Git';
109
import { SymbolIcon } from '../components/Icon';
1110
import { Section } from '../components/Layout/Section';
11+
import { BrandLogo } from '../components/Layout/Svg';
1212
import { MemberCard } from '../components/Member/Card';
1313
import { PageHead } from '../components/PageHead';
1414
import { Member, MEMBER_VIEW, MemberModel } from '../models/Member';
@@ -45,13 +45,13 @@ const HomePage: FC<HomePageProps> = observer(({ repositories, members }) => (
4545
<div className="px-4 py-6 pt-16">
4646
<section className="container mx-auto flex max-w-screen-lg flex-col gap-4">
4747
<div className="flex flex-row items-center justify-around py-12">
48-
<Image src="/idea2app.svg" width={234} height={220} alt="idea2app logo" />
48+
<BrandLogo className="h-48 w-48" />
4949

5050
<header className="border-s-2 border-s-black p-4 dark:border-s-white">
5151
<p>{t('idea2app_summary')}</p>
5252
<p>{t('idea2app_slogan')}</p>
5353

54-
<p className="my-4 text-gray-500">{t('idea2app_slogan_2')}?</p>
54+
<p className="my-4 text-neutral-500">{t('idea2app_slogan_2')}?</p>
5555

5656
<a
5757
className="border-b-2 border-b-black py-1 dark:border-b-white"
@@ -104,8 +104,9 @@ const HomePage: FC<HomePageProps> = observer(({ repositories, members }) => (
104104
<Section title={t('member')} link="/member">
105105
<div className="relative max-h-[45rem] overflow-hidden">
106106
<Masonry
107+
component="ul"
107108
className="overflow-hidden"
108-
columns={{ xs: 2, md: 3 }}
109+
columns={{ xs: 1, sm: 2, md: 3 }}
109110
spacing={2}
110111
defaultHeight={720}
111112
defaultColumns={4}

‎pages/member/[nickname].tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,16 @@ export default class MemberDetailPage extends Component<MemberDetailPageProps> {
6262

6363
<div className="flex w-full flex-col items-center rounded-2xl border-2 md:w-2/3">
6464
<TabContext value={this.eventKey}>
65-
<TabList aria-label="project tab" onChange={this.handleChange}>
65+
<TabList
66+
component="ul"
67+
aria-label="project tab"
68+
variant="fullWidth"
69+
onChange={this.handleChange}
70+
>
6671
{entries.map(([label, list], index) => (
6772
<Tab
6873
key={label}
74+
component="li"
6975
label={
7076
<Badge
7177
className="px-2"

‎pages/project/[id].tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const ProjectDetailPage: FC<ProjectDetailPageProps> = observer(({ project, repos
4141
<div className="container mx-auto mt-16 max-w-screen-xl px-4 py-6">
4242
<PageHead title={String(project.name)} />
4343

44-
<div className="flex flex-col md:flex-row">
44+
<div className="flex flex-col gap-4 md:flex-row">
4545
<a className="w-full md:w-2/3" href={String(project.link) || '#'}>
4646
{/**
4747
* @todo replace with LarkImage after R2 is ready
@@ -50,7 +50,7 @@ const ProjectDetailPage: FC<ProjectDetailPageProps> = observer(({ project, repos
5050
</a>
5151

5252
<div className="flex w-full flex-col gap-4 md:w-1/3">
53-
<ProjectCard {...project} />
53+
<ProjectCard {...project} component="div" />
5454
<hr />
5555
<h2 className="text-xl">{t('open_source_project')}</h2>
5656

0 commit comments

Comments
 (0)