labasarea/laba-webgunea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Orri sekundarioak css modulesera pasatzen ditu (#14)

Browse Source 
* refactor: extract component

* refactor: extract component

* refactor: use comonent

* feat: Orrialde basikoa CSS modulesera pasatzen du

* chore: erabiltzen ez den konponentea kentzen du

* feat: Oina CSS modulesera pasatzen du

* refactor: CSS variable

* chore: erabiltzen ez den tema kentzen du

* chore: erabiltzen ez den objektua kentzen du

* chore: dependentziak kentzen ditu
This commit is contained in:
Aitor Urrutia
2023-12-26 11:43:01 +01:00
committed by GitHub
parent 311e25cdd7
commit 2646b21712
36 changed files with 209 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss
View File

@@ -15,12 +15,12 @@
.izena {
margin-bottom: var(--size-tiny);
font-weight: 700;
font-weight: var(--font-weight-bold);
text-align: center;
}
.zenbakia {
font-weight: 700;
font-weight: var(--font-weight-bold);
text-align: center;
color: var(--color-morea);
}

115
front/src/components/Dialog.tsx
View File

@@ -1,115 +0,0 @@
import React, { PropsWithChildren, useEffect, useRef } from 'react';
import styled from 'styled-components';
import { colors, font, media, size } from '../ui/theme';
import { rgba } from 'polished';
interface Props {
open: boolean;
onClose: () => void;
}
export const Dialog: React.FC<PropsWithChildren<Props>> = ({
open,
onClose,
children,
}) => {
const modalRef = useRef<HTMLDialogElement>(null);
useEffect(() => {
if (!modalRef) {
return;
}
if (open) {
modalRef.current?.showModal();
return;
}
modalRef.current?.close();
}, [open, modalRef]);
return (
<DialogWrapper
ref={modalRef}
// @ts-expect-error dialog-en tipoetan arazo bat dagoela dirudi
onClose={onClose}
onCancel={onClose}
onClick={({ target }) => {
if (target !== modalRef.current) {
return;
}
onClose();
}}
>
<DialogContent>
<Close title="Itxi" onClick={onClose}>
✕
</Close>
{children && <DialogBody>{children}</DialogBody>}
</DialogContent>
</DialogWrapper>
);
};
const Close = styled.button`
position: absolute;
top: ${size.tiny}px;
right: ${size.tiny}px;
color: ${colors.zuria};
${font.base()};
background-color: ${rgba(colors.beltza, 0.7)};
border: none;
cursor: pointer;
z-index: 1;
border-radius: 5px;
&:hover {
color: ${colors.urdina};
}
`;
const DialogBody = styled.div``;
const DialogContent = styled.div`
width: 100%;
height: 100%;
`;
const DialogWrapper = styled.dialog`
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 30px auto;
padding: 0;
width: 85vw;
border: 1px solid ${colors.beltza};
box-shadow: 0 5px 15px ${colors.beltza};
${media.tablet`
width: 600px;
`}
&::backdrop {
backdrop-filter: blur(4px);
background-color: ${rgba(colors.beltza, 0.6)};
}
&[open] {
animation: show 1s ease normal;
}
@keyframes show {
from {
transform: translateY(-110%);
}
to {
transform: translateY(0%);
}
}
`;

33
front/src/components/Oina.tsx
View File

@@ -1,33 +0,0 @@
import { Link } from 'gatsby';
import { rem } from 'polished';
import React from 'react';
import styled from 'styled-components';
import { colors, size } from '../ui/theme';
export const Oina: React.VFC = () => (
<Wrapper>
<Esteka to="/lege-oharra">Lege oharra</Esteka>
<Esteka to="/pribatutasun-politika">Pribatutasun politika</Esteka>
</Wrapper>
);
const Wrapper = styled.footer`
display: flex;
justify-content: center;
padding: ${rem(size.base)};
`;
const Esteka = styled(Link)`
&:not(:last-child) {
margin-right: ${rem(size.mini)};
}
transition: color 500ms ease-out 100ms;
&:hover {
color: ${colors.morea};
}
&:focus {
outline: 2px solid ${colors.morea};
}
`;

20
front/src/components/Oina/Oina.module.scss Normal file
View File

@@ -0,0 +1,20 @@
.wrapper {
display: flex;
justify-content: center;
padding: var(--size-base);
}
.esteka {
&:not(:last-child) {
margin-right: var(--size-mini);
}
transition: color 500ms ease-out 100ms;
&:hover {
color: var(--color-morea);
}
&:focus {
outline: 2px solid var(--color-morea);
}
}

16
front/src/components/Oina/Oina.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Link } from 'gatsby';
import * as styles from './Oina.module.scss';
export const Oina: React.FC = () => (
<footer className={styles.wrapper}>
<Link className={styles.esteka} to="/lege-oharra">
Lege oharra
</Link>
<Link className={styles.esteka} to="/pribatutasun-politika">
Pribatutasun politika
</Link>
</footer>
);

1
front/src/components/Oina/index.ts Normal file
View File

@@ -0,0 +1 @@
export { Oina } from './Oina';

6
front/src/components/SEO.tsx
View File

@@ -1,6 +1,8 @@
import { PageProps } from 'gatsby';
import React from 'react';
import { Helmet } from 'react-helmet';
import { PageProps } from 'gatsby';
import ogImagePath from '../images/og-image.jpeg';
interface Props {
@@ -10,7 +12,7 @@ interface Props {
location: PageProps['location'];
}
export const SEO: React.VFC<Props> = ({ title, description, location }) => (
export const SEO: React.FC<Props> = ({ title, description, location }) => (
<Helmet title={`${title} | Laba`} htmlAttributes={{ lang: 'eu' }}>
{description && <meta name="description" content={description} />}

26
front/src/pages/404.tsx
View File

@@ -1,30 +1,16 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'gatsby';
import { PageProps } from 'gatsby';
import { Container } from '../components/Container';
import { Gainburua } from '../components/Gainburua';
import { GlobalStyles } from '../ui/GlobalStyles';
import { SEO } from '../components/SEO';
import { NotFound } from '../views/NotFound';
const NotFoundPage: React.FC = () => {
const NotFoundPage: React.FC<PageProps> = ({ location }) => {
return (
<>
<Helmet
title={`Ez dugu orria topatu | Laba`}
htmlAttributes={{ lang: 'eu' }}
/>
<SEO title="Ez dugu orria topatu" location={location} />
<GlobalStyles />
<Gainburua />
<Container>
<main>
<h1>Ez dugu orria topatu</h1>
<br />
<Link to="/">Hasierara bueltatu</Link>
</main>
</Container>
<NotFound />
</>
);
};

77
front/src/pages/lege-oharra.tsx
View File

@@ -1,24 +1,16 @@
import { graphql, PageProps, useStaticQuery } from 'gatsby';
import React from 'react';
import { GlobalStyles } from '../ui/GlobalStyles';
import { Container } from '../components/Container';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';
import { font, fontWeight, size } from '../ui/theme';
import { rem } from 'polished';
import { Gainburua } from '../components/Gainburua';
import { Oina } from '../components/Oina';
import { graphql, PageProps, useStaticQuery } from 'gatsby';
import { SEO } from '../components/SEO';
import { RegularPage } from '../views/RegularPage';
import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
interface DataProps {
strapiLegeOharra: {
izenburua: string;
edukia: string;
};
strapiLegeOharra: RegularPageContent;
}
const LegeOharra: React.VFC<PageProps> = ({ location }) => {
const LegeOharra: React.FC<PageProps> = ({ location }) => {
const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
{
strapiLegeOharra {
@@ -32,64 +24,9 @@ const LegeOharra: React.VFC<PageProps> = ({ location }) => {
<>
<SEO title={strapiLegeOharra.izenburua} location={location} />
<GlobalStyles />
<Gainburua />
<Container>
<Atala>
<Edukia>{strapiLegeOharra.edukia}</Edukia>
</Atala>
</Container>
<Oina />
<RegularPage content={strapiLegeOharra} />
</>
);
};
const Atala = styled.section`
padding-top: ${rem(size.base)};
`;
const Edukia = styled(ReactMarkdown)`
font-weight: ${fontWeight.regular};
${font.base()};
p:not(-last-child) {
margin-bottom: ${rem(size.base)};
}
h1 {
${font.gargantuan()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h2 {
${font.huge()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h3 {
${font.large()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h4 {
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.mini)};
}
ul {
margin-bottom: ${rem(size.base)};
}
li {
list-style: disc inside;
margin-bottom: ${rem(size.small)};
}
`;
export default LegeOharra;

97
front/src/pages/pribatutasun-politika.tsx
View File

@@ -1,25 +1,16 @@
import { graphql, PageProps, useStaticQuery } from 'gatsby';
import React from 'react';
import { GlobalStyles } from '../ui/GlobalStyles';
import remarkGfm from 'remark-gfm';
import { Container } from '../components/Container';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';
import { colors, font, fontWeight, size } from '../ui/theme';
import { rem } from 'polished';
import { Gainburua } from '../components/Gainburua';
import { Oina } from '../components/Oina';
import { graphql, PageProps, useStaticQuery } from 'gatsby';
import { SEO } from '../components/SEO';
import { RegularPage } from '../views/RegularPage/RegularPage';
import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
interface DataProps {
strapiPribatutasunPolitika: {
izenburua: string;
edukia: string;
};
strapiPribatutasunPolitika: RegularPageContent;
}
const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
const PribatutasunPolitika: React.FC<PageProps> = ({ location }) => {
const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
{
strapiPribatutasunPolitika {
@@ -33,83 +24,9 @@ const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
<>
<SEO title={strapiPribatutasunPolitika.izenburua} location={location} />
<GlobalStyles />
<Gainburua />
<Container>
<Atala>
<Edukia>{strapiPribatutasunPolitika.edukia}</Edukia>
</Atala>
</Container>
<Oina />
<RegularPage content={strapiPribatutasunPolitika} />
</>
);
};
const Atala = styled.section`
padding-top: ${rem(size.base)};
`;
const Edukia = styled(ReactMarkdown).attrs({ remarkPlugins: [remarkGfm] })`
font-weight: ${fontWeight.regular};
${font.base()};
p:not(-last-child) {
margin-bottom: ${rem(size.base)};
}
h1 {
${font.gargantuan()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h2 {
${font.huge()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h3 {
${font.large()};
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.base)};
}
h4 {
font-weight: ${fontWeight.bold};
margin-bottom: ${rem(size.mini)};
}
ul {
margin-bottom: ${rem(size.base)};
}
li {
list-style: disc inside;
margin-bottom: ${rem(size.small)};
}
table {
margin-bottom: ${rem(size.base)};
}
th {
padding: ${size.small}px;
}
td {
padding: ${size.small}px;
border: 1px solid ${colors.beltza};
}
hr {
border: 2px solid ${colors.horia};
margin-bottom: ${rem(size.base)};
margin-top: ${rem(size.base)};
}
`;
export default PribatutasunPolitika;

2
front/src/styles/cssConfig.scss
View File

@@ -13,7 +13,7 @@ body {
font-family: 'Almarai', sans-serif;
@include baseFont;
font-weight: 700;
font-weight: var(--font-weight-bold);
color: var(--color-beltza);
}

2
front/src/styles/generic/reboot.scss
View File

@@ -31,5 +31,5 @@ body {
}
strong {
font-weight: 700;
font-weight: var(--font-weight-bold);
}

4
front/src/styles/settings/fontWeight.scss Normal file
View File

@@ -0,0 +1,4 @@
:root {
--font-weight-regular: 300;
--font-weight-bold: 700;
}

1
front/src/styles/settings/index.scss
View File

@@ -1,2 +1,3 @@
@import 'colors';
@import 'sizes';
@import 'fontWeight';

213
front/src/ui/GlobalStyles.tsx
View File

@@ -1,213 +0,0 @@
import { createGlobalStyle, css } from 'styled-components';
import { font, fontWeight } from './theme';
import { colors } from './theme/colors';
/**
* Inicializa estilos base
* 1. Change from `box-sizing: content-box` so that `width` is not affected
* by `padding` or `border`.
* 2. As a best practice, apply a default 'background-color'.
* 3. Set an explicit initial text-align value so that we can later use the the 'inherit'
* value on things like '<th>' elements.
* 4. Prevent adjustments of font size after orientation changes in IE on
* Windows Phone and in iOS.
* 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge,
* so we force a non-overlapping, non-auto-hiding scrollbar to counteract.
* 6. Change the default tap highlight to be completely transparent in iOS.
* 7. Implement full height to let children control own height.
*/
const reboot = css`
*,
*::before,
*::after {
box-sizing: border-box; /* 1 */
}
html {
-webkit-text-size-adjust: 100%; /* 4 */
-ms-text-size-adjust: 100%; /* 4 */
-ms-overflow-style: scrollbar; /* 5 */
-webkit-tap-highlight-color: rgba(#000, 0); /* 6 */
-webkit-tap-highlight-color: transparent;
}
body {
min-height: 100vh;
}
-ms-viewport {
width: device-width;
}
strong {
font-weight: 700;
}
`;
const reset = css`
/* http://meyerweb.com/eric/tools/css/reset/
v4.0 | 20180602
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
em,
i,
b {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
*:focus,
:active {
outline: 0;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
`;
export const GlobalStyles = createGlobalStyle`
${reset};
${reboot};
html {
scroll-behavior: smooth;
}
body {
font-family: 'Almarai', sans-serif;
${font.base()}
font-weight: ${fontWeight.bold};
color: ${colors.beltza};
}
`;

4
front/src/ui/theme/breakpoints.ts
View File

@@ -1,4 +0,0 @@
export const breakpoints = {
tablet: 768,
desktop: 1024,
};

10
front/src/ui/theme/colors.ts
View File

@@ -1,10 +0,0 @@
export const colors = {
beltza: '#191919',
urdina: '#8FBBFD',
morea: '#510DFB',
horia: '#FDB201',
gorria: '#FD3647',
zuria: '#FFFFFF',
};
export type Color = keyof typeof colors;

41
front/src/ui/theme/font.ts
View File

@@ -1,41 +0,0 @@
import { css } from 'styled-components';
import { rem } from 'polished';
export const font = {
tiny() {
return css`
font-size: ${rem(12.64)};
line-height: ${rem(17)};
`;
},
small() {
return css`
font-size: ${rem(16)};
line-height: ${rem(22)};
`;
},
base() {
return css`
font-size: ${rem(18)};
line-height: ${rem(24)};
`;
},
large() {
return css`
font-size: ${rem(25.63)};
line-height: ${rem(35)};
`;
},
huge() {
return css`
font-size: ${rem(36.41)};
line-height: ${rem(50)};
`;
},
gargantuan() {
return css`
font-size: ${rem(41.83)};
line-height: ${rem(57)};
`;
},
};

4
front/src/ui/theme/fontWeight.ts
View File

@@ -1,4 +0,0 @@
export const fontWeight = {
regular: 300,
bold: 700,
};

7
front/src/ui/theme/index.ts
View File

@@ -1,7 +0,0 @@
export { breakpoints } from './breakpoints';
export { font } from './font';
export { media } from './media';
export { size } from './size';
export { colors } from './colors';
export type { Color } from './colors';
export { fontWeight } from './fontWeight';

15
front/src/ui/theme/media.ts
View File

@@ -1,15 +0,0 @@
import { css } from 'styled-components';
import { breakpoints } from './breakpoints';
export const media = {
tablet: (styles: TemplateStringsArray, ...args) => css`
@media (min-width: ${breakpoints.tablet}px) {
${css(styles, ...args)};
}
`,
desktop: (styles: TemplateStringsArray, ...args) => css`
@media (min-width: ${breakpoints.desktop}px) {
${css(styles, ...args)};
}
`,
};

12
front/src/ui/theme/size.ts
View File

@@ -1,12 +0,0 @@
export const size = {
none: 0,
xtiny: 4,
tiny: 8,
small: 12,
mini: 16,
base: 24,
medium: 32,
large: 48,
xlarge: 64,
huge: 96,
};

27
front/src/utils/dateUtils.ts
View File

@@ -1,27 +0,0 @@
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
export const datesUtils = {
getDate,
getHour,
areSameDay,
isToday,
};
function getDate(rawDate: string): Date {
return dayjs(rawDate).toDate();
}
function getHour(date: Date): string {
return dayjs(date).format('H:mm');
}
function areSameDay(date: Date, reference: Date): boolean {
return dayjs(date).isSame(reference, 'day');
}
function isToday(date: Date) {
return dayjs(date).isSame(new Date(), 'day');
}

4
front/src/views/Hasiera/Hasiera.module.scss
View File

@@ -2,7 +2,7 @@
.contentWrapper {
padding: var(--size-huge) 0;
font-weight: 300;
font-weight: var(--font-weight-regular);
@include largeFont;
}
@@ -24,7 +24,7 @@
@include largeFont;
padding: var(--size-base);
background: var(--color-zuria);
font-weight: 700;
font-weight: var(--font-weight-bold);
cursor: pointer;
display: flex;
align-items: center;

6
front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss
View File

@@ -27,7 +27,7 @@
.izena {
text-align: left;
font-weight: 300;
font-weight: var(--font-weight-regular);
padding: 0 var(--size-xtiny);
vertical-align: top;
}
@@ -35,7 +35,7 @@
.prezioa {
width: var(--size-huge);
text-align: right;
font-weight: 300;
font-weight: var(--font-weight-regular);
padding: 0 var(--size-xtiny);
vertical-align: top;
}
@@ -58,7 +58,7 @@
.alergenoa {
color: var(--color-morea);
font-weight: 700;
font-weight: var(--font-weight-bold);
&:not(:last-child)::after {
content: ', ';

20
front/src/views/NotFound/NotFound.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { Link } from 'gatsby';
import { Container } from '../../components/Container';
import { Gainburua } from '../../components/Gainburua';
export const NotFound: React.FC = () => (
<>
<Gainburua />
<Container>
<main>
<h1>404: Ez dugu bilatzen duzun orria topatu</h1>
<br />
<Link to="/">Hasierara bueltatu</Link>
</main>
</Container>
</>
);

1
front/src/views/NotFound/index.ts Normal file
View File

@@ -0,0 +1 @@
export { NotFound } from './NotFound';

65
front/src/views/RegularPage/RegularPage.module.scss Normal file
View File

@@ -0,0 +1,65 @@
@import '../../styles/tools/mixins/font.scss';
.atala {
padding-top: var(--size-base);
}
.edukia {
font-weight: var(--font-weight-regular);
@include baseFont;
p:not(-last-child) {
margin-bottom: var(--size-base);
}
h1 {
@include gargantuanFont;
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-base);
}
h2 {
@include hugeFont;
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-base);
}
h3 {
@include largeFont;
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-base);
}
h4 {
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-mini);
}
ul {
margin-bottom: var(--size-base);
}
li {
list-style: disc inside;
margin-bottom: var(--size-small);
}
table {
margin-bottom: var(--size-base);
}
th {
padding: var(--size-small);
}
td {
padding: var(--size-small);
border: 1px solid var(--color-beltza);
}
hr {
border: 2px solid var(--color-beltza);
margin-bottom: var(--size-base);
margin-top: var(--size-base);
}
}

34
front/src/views/RegularPage/RegularPage.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Container } from '../../components/Container';
import { Gainburua } from '../../components/Gainburua';
import { Oina } from '../../components/Oina';
import * as styles from './RegularPage.module.scss';
import { RegularPageContent } from './RegularPageContent';
interface Props {
content: RegularPageContent;
}
export const RegularPage: React.FC<Props> = ({ content }) => {
const { edukia } = content;
return (
<>
<Gainburua />
<Container>
<section className={styles.atala}>
<ReactMarkdown remarkPlugins={[remarkGfm]} className={styles.edukia}>
{edukia}
</ReactMarkdown>
</section>
</Container>
<Oina />
</>
);
};

4
front/src/views/RegularPage/RegularPageContent.ts Normal file
View File

@@ -0,0 +1,4 @@
export interface RegularPageContent {
izenburua: string;
edukia: string;
}

1
front/src/views/RegularPage/index.ts Normal file
View File

@@ -0,0 +1 @@
export { RegularPage } from './RegularPage';