From 1bdea85b1b81f249e257c0044639ff5f1d0bbbc1 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Fri, 21 Feb 2020 21:33:49 +0300 Subject: [PATCH 1/8] content style update: rm thin; rm menu padding --- pages/[...slug].tsx | 3 +- pages/album/[slug].tsx | 3 +- pages/article/[slug].tsx | 3 +- pages/articles/[slug].tsx | 1 - pages/collective.tsx | 1 - pages/document/[slug].tsx | 1 - pages/documents.tsx | 3 +- pages/gallery.tsx | 1 - pages/index.tsx | 1 - pages/schedule.tsx | 1 - pages/teacher/[person].tsx | 3 +- src/components/App/index.tsx | 15 +++++---- src/style.css | 8 ++--- src/style/content.scss | 64 ------------------------------------ 14 files changed, 16 insertions(+), 92 deletions(-) diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx index 1290896e..97628930 100644 --- a/pages/[...slug].tsx +++ b/pages/[...slug].tsx @@ -18,8 +18,7 @@ const Index = props => ( {props.title} diff --git a/pages/album/[slug].tsx b/pages/album/[slug].tsx index 216cd1b9..56a9f695 100644 --- a/pages/album/[slug].tsx +++ b/pages/album/[slug].tsx @@ -23,8 +23,7 @@ const Page: NextPage = props => { {props.data.title} diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx index 81bc1e11..1f172454 100644 --- a/pages/article/[slug].tsx +++ b/pages/article/[slug].tsx @@ -27,8 +27,7 @@ const Page: NextPage = props => { {props.data.title} diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index 16993f65..cd796896 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -30,7 +30,6 @@ const Page: NextPage = props => { diff --git a/pages/collective.tsx b/pages/collective.tsx index 4b93652d..1bf4ee16 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -36,7 +36,6 @@ const Page: NextPage = props => { diff --git a/pages/document/[slug].tsx b/pages/document/[slug].tsx index dc57b44d..c50a68c7 100644 --- a/pages/document/[slug].tsx +++ b/pages/document/[slug].tsx @@ -28,7 +28,6 @@ const Page: NextPage = props => { diff --git a/pages/documents.tsx b/pages/documents.tsx index fc92f0c0..78874c58 100644 --- a/pages/documents.tsx +++ b/pages/documents.tsx @@ -103,8 +103,7 @@ const Page: NextPage = props => ( {props.title} diff --git a/pages/gallery.tsx b/pages/gallery.tsx index 53f95899..39c68de3 100644 --- a/pages/gallery.tsx +++ b/pages/gallery.tsx @@ -73,7 +73,6 @@ const Page: NextPage = props => ( diff --git a/pages/index.tsx b/pages/index.tsx index 1d653c35..aad3fa08 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -22,7 +22,6 @@ const Page: NextPage = props => ( diff --git a/pages/schedule.tsx b/pages/schedule.tsx index ce371cc8..12e96161 100644 --- a/pages/schedule.tsx +++ b/pages/schedule.tsx @@ -17,7 +17,6 @@ const Page: NextPage = props => ( diff --git a/pages/teacher/[person].tsx b/pages/teacher/[person].tsx index 5ae2e39c..e37cf4f2 100644 --- a/pages/teacher/[person].tsx +++ b/pages/teacher/[person].tsx @@ -28,8 +28,7 @@ const Index: NextPage = props => { {props.title} diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index d337d2e3..eda7e4cc 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -15,8 +15,7 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat export interface IAppProps { menu: any showAuthor: boolean - menuPadding: boolean - layout: 'full' | 'wide' | 'thin' + layout: 'full' | 'wide' } export const App: React.FC = props => { @@ -38,10 +37,14 @@ export const App: React.FC = props => { /> )} > -
+
{props.children}
diff --git a/src/style.css b/src/style.css index ca60f6a6..89b1cb89 100644 --- a/src/style.css +++ b/src/style.css @@ -24,11 +24,8 @@ --tablet-max-width: 64em; /* CONTENT */ - --content-full: 100%; - --content-wide: 90%; - --content-semi-wide: 70%; - --content-thin: 60%; - --content-width: var(--content-full); + --content-wide: 60%; + --content-width: 100%; --embed-video-ratio: 56.25%; @@ -198,7 +195,6 @@ a.invisible { --font-size-h2: 1.5rem; --font-size-h3: 1.25rem; - --content-thin: 90%; --content-wide: 90%; --kazimir-image-increase: 0px; diff --git a/src/style/content.scss b/src/style/content.scss index 437e3889..7cd8c12c 100644 --- a/src/style/content.scss +++ b/src/style/content.scss @@ -1,29 +1,11 @@ .content { - // margin: 0 auto 1em; - width: var(--content-width); } -.content_full { - --content-width: var(--content-full); -} - .content_wide { --content-width: var(--content-wide); } -.content_semi-wide { - --content-width: var(--content-semi-wide); -} - -.content_thin { - --content-width: var(--content-thin); -} - -.content--padding-top--menu { - padding-top: var(--menu-thickness); -} - // Animation on load @keyframes smallSlideInFromTop { @@ -44,49 +26,3 @@ .content.reduced-motion { animation: none; } - -@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) { - $thin-value: 70%; - $wide-value: 95%; - $semi-wide-value: 80%; - - .content { - overflow-x: scroll; - - &.content_wide { - width: $wide-value; - } - - &.content_semi-wide { - width: $semi-wide-value; - } - - &.content_thin { - width: $thin-value; - } - - &.content--padding-top--menu { - padding-top: var(--double-margin); - } - } - - @media screen and (orientation: portrait) { - $wide-value: 100%; - $thin-value: 80%; - $semi-wide-value: 95%; - - .content { - &.content_wide { - width: $wide-value; - } - - &.content_semi-wide { - width: $semi-wide-value; - } - - &.content_thin { - width: $thin-value; - } - } - } -} From 400a08d1af31ea4264a7d60a13af79a2b34d1b10 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Fri, 21 Feb 2020 21:55:15 +0300 Subject: [PATCH 2/8] content style update; style refactoring --- pages/articles/[slug].tsx | 5 ++++- pages/collective.tsx | 5 ++++- pages/document/[slug].tsx | 4 +++- pages/documents.tsx | 4 +++- pages/gallery.tsx | 4 +++- pages/index.tsx | 22 +++++++++++++++++----- pages/schedule.tsx | 5 ++++- pages/teacher/[person].tsx | 1 - src/components/App/index.tsx | 12 ++++++------ src/components/HudozkaTitle/index.tsx | 13 +++++++------ src/style.css | 6 ++---- 11 files changed, 53 insertions(+), 28 deletions(-) diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index cd796896..729510d9 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -30,7 +30,10 @@ const Page: NextPage = props => { {props.title} diff --git a/pages/collective.tsx b/pages/collective.tsx index 1bf4ee16..7a975ad6 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -36,7 +36,10 @@ const Page: NextPage = props => { {props.title} diff --git a/pages/document/[slug].tsx b/pages/document/[slug].tsx index c50a68c7..a70c2792 100644 --- a/pages/document/[slug].tsx +++ b/pages/document/[slug].tsx @@ -28,7 +28,9 @@ const Page: NextPage = props => { {props.data.title} diff --git a/pages/documents.tsx b/pages/documents.tsx index 78874c58..93e542a9 100644 --- a/pages/documents.tsx +++ b/pages/documents.tsx @@ -103,7 +103,9 @@ const Page: NextPage = props => ( {props.title} diff --git a/pages/gallery.tsx b/pages/gallery.tsx index 39c68de3..19c3c546 100644 --- a/pages/gallery.tsx +++ b/pages/gallery.tsx @@ -73,7 +73,9 @@ const Page: NextPage = props => ( {props.title} diff --git a/pages/index.tsx b/pages/index.tsx index aad3fa08..6f93be76 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,8 +6,9 @@ import { HudozkaTitle } from 'src/components/HudozkaTitle' import menuModel from 'src/models/menu' import { meta } from 'src/lib/meta' import { buildMenu } from 'src/lib/menu' -import { createApiUrl, requestGet } from 'src/next-lib' +import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' +import { IArticle } from 'src/types' interface IProps { pageUrl: string @@ -22,14 +23,21 @@ const Page: NextPage = props => ( {props.title} - + { const pageUrl = '/' const page = 1 const pageSize = process.env.APP_ARTICLES_PAGE_SIZE - const res = await requestGet(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), {}) as any - const articles = res.items || [] + const res = await requestGet>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null) + const articles = (res.items || []) + .map(x => ({ + ...x, + featured: x.id === '2019-kotiki' + })) const nextPage = res.nextPage const prevPage = res.prevPage const title = 'Шлиссельбургская ДХШ' diff --git a/pages/schedule.tsx b/pages/schedule.tsx index 12e96161..667945db 100644 --- a/pages/schedule.tsx +++ b/pages/schedule.tsx @@ -17,7 +17,10 @@ const Page: NextPage = props => ( {props.title} diff --git a/pages/teacher/[person].tsx b/pages/teacher/[person].tsx index e37cf4f2..b46f2f9d 100644 --- a/pages/teacher/[person].tsx +++ b/pages/teacher/[person].tsx @@ -28,7 +28,6 @@ const Index: NextPage = props => { {props.title} diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index eda7e4cc..977afe91 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -15,10 +15,11 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat export interface IAppProps { menu: any showAuthor: boolean - layout: 'full' | 'wide' + wide?: boolean + contentStyle?: React.CSSProperties } -export const App: React.FC = props => { +export const App: React.FC = ({ wide = false, ...props }) => { const motionDisabled = useReducedMotion() return ( @@ -38,12 +39,11 @@ export const App: React.FC = props => { )} >
{props.children}
diff --git a/src/components/HudozkaTitle/index.tsx b/src/components/HudozkaTitle/index.tsx index 7ac27527..e0f1efcc 100644 --- a/src/components/HudozkaTitle/index.tsx +++ b/src/components/HudozkaTitle/index.tsx @@ -1,12 +1,13 @@ -import * as React from 'react' +import { memo } from 'react' -export const HudozkaTitle: React.FC = React.memo(() => ( -
+export type HudozkaTitleProps = { + style?: React.CSSProperties +} + +export const HudozkaTitle: React.FC = memo(props => ( +