Skip to content

Commit

Permalink
feat(styles): redesigned about page; bug fixed for tag page
Browse files Browse the repository at this point in the history
  • Loading branch information
@UladBohdan
UladBohdan committed Mar 1, 2020
1 parent 3dd1d3e commit 8184714
Show file tree
Hide file tree
Showing 10 changed files with 213 additions and 243 deletions.
9 changes: 2 additions & 7 deletions components/articles/blocks/DiaryBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const DiaryBlock = ({ diary, fetchData }) => {
className={cn('diary__picture', { 'diary__picture--no-image': !diaryImage })}
route={ROUTES_NAMES.diary}
params={{ slug }}
disableStyles
noStyles
>
{diaryImage && (
<Image alt={name} sourceSizes={[DIARY_PICTURE_WIDTH]} baseUrl={diaryImage} mode="x" />
Expand All @@ -59,12 +59,7 @@ const DiaryBlock = ({ diary, fetchData }) => {
</div>
{text && (
<div className="diary__text-wrap">
<Link
className="diary__text"
route={ROUTES_NAMES.diary}
params={{ slug }}
disableStyles
>
<Link className="diary__text" route={ROUTES_NAMES.diary} params={{ slug }} noStyles>
{fiberyToString(text.content)}
</Link>
<Link route={ROUTES_NAMES.diary} params={{ slug }}>
Expand Down
15 changes: 12 additions & 3 deletions components/articles/blocks/TagPageBlockB.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,30 @@ import React from 'react';
import PropTypes from 'prop-types';

import ArticleCard from 'components/articles/cards/ArticleCard';
import PlaceholderCard from 'components/articles/cards/PlaceholderCard';

import { ArticlesArray } from 'utils/customPropTypes';

import BlockWrapper from './BlockWrapper';

const TagPageBlockB = ({ articles, layout }) => {
const resolvedLayout = articles.length === 1 ? 'large-left' : layout;

const [first, second] =
layout === 'large-left' ? articles.slice(0, 2) : articles.slice(0, 2).reverse();
resolvedLayout === 'large-left' ? articles.slice(0, 2) : articles.slice(0, 2).reverse();

return (
<BlockWrapper className={`tag-page-block-b tag-page-block-b__style-${layout}`}>
<BlockWrapper className={`tag-page-block-b tag-page-block-b__style-${resolvedLayout}`}>
<div className="large-card">
<ArticleCard {...first} context={['tag-page-block-b', 'large-card']} />
</div>

<div className="small-card">
<ArticleCard {...second} context={['tag-page-block-b', 'small-card']} />
{second ? (
<ArticleCard {...second} context={['tag-page-block-b', 'small-card']} />
) : (
<PlaceholderCard />
)}
</div>
</BlockWrapper>
);
Expand Down
1 change: 0 additions & 1 deletion components/auth/login-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
&__btn {
align-items: center;
border-radius: 5px;
color: $primary-white;
cursor: pointer;
font-size: 1.1rem;
height: 50px;
Expand Down
8 changes: 4 additions & 4 deletions components/common/Link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Link = ({
titleId,
title,
onMouseUp,
disableStyles,
noStyles,
...props
}) => {
const lang = useLocaleContext();
Expand All @@ -34,7 +34,7 @@ const Link = ({
{React.createElement(
tag,
{
className: linkCn({ className, disabled, dark, active, disableStyles }),
className: linkCn({ className, disabled, dark, active, noStyles }),
target,
title: useLocalization(titleId) || title,
onMouseUp,
Expand All @@ -61,7 +61,7 @@ Link.propTypes = {
disabled: PropTypes.bool,
dark: PropTypes.bool,
active: PropTypes.bool,
disableStyles: PropTypes.bool,
noStyles: PropTypes.bool,
};

Link.defaultProps = {
Expand All @@ -72,7 +72,7 @@ Link.defaultProps = {
disabled: false,
active: false,
dark: false,
disableStyles: false,
noStyles: false,

titleId: '',
title: '',
Expand Down
24 changes: 12 additions & 12 deletions constants/partners.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
// eslint-disable-next-line import/prefer-default-export
export const PARTNERS = [
{
id: 'logo-masaraksh',
img: 'masaraksh_logo.jpg',
url: 'https://vk.com/massaraksh_minsk',
},
{
id: 'logo-shafa',
img: 'shafa_logo.jpg',
Expand All @@ -11,15 +16,10 @@ export const PARTNERS = [
url: 'http://minsklingfest.by',
},
{
id: 'logo-masaraksh',
img: 'masaraksh_logo.jpg',
url: 'https://vk.com/massaraksh_minsk',
},
{
id: 'logo-ethno',
img: 'ethno_logo.jpg',
url: 'https://ethno.by',
className: 'about-page__partner-logo--smallest',
id: 'logo-art-museum',
img: 'mastacki_logo.jpg',
url: 'https://www.artmuseum.by/by/',
className: 'about-page__partner-logo--small',
},
{
id: 'logo-libra',
Expand All @@ -33,9 +33,9 @@ export const PARTNERS = [
url: 'http://brouka.museum.by',
},
{
id: 'logo-art-museum',
img: 'mastacki_logo.jpg',
url: 'https://www.artmuseum.by/by/',
id: 'logo-ethno',
img: 'ethno_logo.jpg',
url: 'https://ethno.by',
className: 'about-page__partner-logo--smallest',
},
];
4 changes: 0 additions & 4 deletions pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,6 @@ class Root extends App {
}
}

// componentDidUpdate() {
// this.setMoment();
// }

render() {
const { Component, store, router, initial } = this.props;
const { permissions = [], getLayoutProps = getEmptyObject } = Component;
Expand Down
135 changes: 66 additions & 69 deletions pages/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,81 +27,78 @@ const AboutPage = ({ lang }) => (
<MetaImage url={DEFAULT_IMAGE} small />

<div className="wir-content-padding about-page">
<div className="about-page__description-block">
<div className="about-page__description-header">
<Text id="about.section1-header" />
</div>
<div className="about-page__description-text">
<Text id="about.section1-text" />
</div>
<div className="about-page__heading">
<Text id="about.section1-header" />
</div>

<div className="about-page__description-block">
<div className="about-page__description-header">
<div className="about-page__text about-page__text--margin-top-small">
<Text id="about.section1-text" />
</div>
<div className="about-page__subheading about-page__subheading--mobile-only about-page__text--margin-top-large">
<Text id="about.section-team-header" />
</div>
<div className="about-page__team">
<div className="about-page__subheading about-page__teammate teammate teammate__placeholder">
<Text id="about.section-team-header" />
</div>
<div className="about-page__description-text about-page__description-text--margin-bottom about-page__team">
{team.map(({ image, name, role }) => (
<div key={name} className="about-page__teammate teammate">
<img className="teammate__pic" src={image} alt={name[lang] || name.be} />
<div className="teammate__name">{name[lang] || name.be}</div>
<div className="teammate__role">{role[lang] || name.be}</div>
</div>
))}
</div>
<div className="about-page__description-text about-page__description-text--margin-bottom">
<Text id="about.section-team-subtext">
{(
thanks,
name1,
descr1,
name2,
descr2,
name3,
descr3,
name4,
descr4,
name5,
descr5,
name6,
descr6
) => (
<>
{thanks}
<b>{name1}</b>
{descr1}
<b>{name2}</b>
{descr2}
<b>{name3}</b>
{descr3}
<b>{name4}</b>
{descr4}
<b>{name5}</b>
{descr5}
<b>{name6}</b>
{descr6}
</>
)}
</Text>
</div>
<div className="about-page__description-text about-page__description-text--margin-bottom">
<Text id="about.section-team-subtext2">
{(thanks, name, descr) => (
<>
{thanks}
<b>{name}</b>
{descr}
</>
)}
</Text>
</div>
{team.map(({ image, name, role }) => (
<div key={name} className="about-page__teammate teammate">
<img className="teammate__pic" src={image} alt={name[lang] || name.be} />
<div className="teammate__name">{name[lang] || name.be}</div>
<div className="teammate__role">{role[lang] || name.be}</div>
</div>
))}
</div>

<div className="about-page__description-block">
<div className="about-page__description-header">
<div className="about-page__text about-page__text--margin-top-medium">
<Text id="about.section-team-subtext">
{(
thanks,
name1,
descr1,
name2,
descr2,
name3,
descr3,
name4,
descr4,
name5,
descr5,
name6,
descr6
) => (
<>
{thanks}
<b>{name1}</b>
{descr1}
<b>{name2}</b>
{descr2}
<b>{name3}</b>
{descr3}
<b>{name4}</b>
{descr4}
<b>{name5}</b>
{descr5}
<b>{name6}</b>
{descr6}
</>
)}
</Text>
</div>
<div className="about-page__text about-page__text--margin-top-medium">
<Text id="about.section-team-subtext2">
{(thanks, name, descr) => (
<>
{thanks}
<b>{name}</b>
{descr}
</>
)}
</Text>
</div>
<div className="about-page__text--margin-top-large about-page__partners">
<div className="about-page__subheading">
<Text id="about.section-partners-header" />
</div>
<div className="about-page__description-text about-page__partners">
<div className="about-page__partners-logos">
{PARTNERS.map(({ id, img, url, className = '' }) => (
<div key={id} className={`about-page__partner-logo ${className}`}>
<ExternalLink href={url}>
Expand Down
Loading

0 comments on commit 8184714

Please sign in to comment.