tmshv/hudozka
1
0 Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Merge pull request #22 from tmshv/fix/content-simplify

Browse Source 
Content simplify
This commit is contained in:
tmshv authored and GitHub committed 2020-02-21 22:39:36 +03:00
2 parents f2b548aee8 8f01c6e9d2
commit 0ce8486d99
21 files changed
+89 -203
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/[...slug].tsx
+3 -2
View File
@@ -18,8 +18,9 @@ const Index = props => (
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'thin'}
contentStyle={{
marginTop: 'var(--size-l)'
}}
>
<Head>
<title>{props.title}</title>
pages/_app.tsx
+1
View File
@@ -1,4 +1,5 @@
import 'src/style.css'
import 'src/style/content.css'
import 'src/style/kazimir/image.css'
import 'src/style/kazimir/video.css'
import 'src/style/style.scss'
pages/album/[slug].tsx
-2
View File
@@ -23,8 +23,6 @@ const Page: NextPage<Props> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'thin'}
>
<Head>
<title>{props.data.title}</title>
pages/article/[slug].tsx
-2
View File
@@ -27,8 +27,6 @@ const Page: NextPage<Props> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'thin'}
>
<Head>
<title>{props.data.title}</title>
pages/articles/[slug].tsx
+4 -2
View File
@@ -30,8 +30,10 @@ const Page: NextPage<Props> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
wide={true}
contentStyle={{
margin: 'var(--size-l) var(--size-xl)'
}}
>
<Head>
<title>{props.title}</title>
pages/collective.tsx
+4 -2
View File
@@ -36,8 +36,10 @@ const Page: NextPage<Props> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
wide={true}
contentStyle={{
margin: 'var(--size-l) var(--size-xl)'
}}
>
<Head>
<title>{props.title}</title>
pages/document/[slug].tsx
+3 -2
View File
@@ -28,8 +28,9 @@ const Page: NextPage<Props> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
contentStyle={{
marginTop: 'var(--size-l)'
}}
>
<Head>
<title>{props.data.title}</title>
pages/documents.tsx
+4 -3
View File
@@ -103,8 +103,9 @@ const Page: NextPage<IProps> = props => (
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'thin'}
contentStyle={{
marginTop: 'var(--size-l)'
}}
>
<Head>
<title>{props.title}</title>
@@ -125,7 +126,7 @@ const Page: NextPage<IProps> = props => (
export const unstable_getStaticProps = async (ctx) => {
const pageUrl = '/documents'
const res = await requestGet<IResponseItems<IDocument>>(createApiUrl('/api/files'), { items: [] })
const res = await requestGet<IResponseItems<IDocument>>(createApiUrl('/api/files'), null)
const files = res.items
const title = 'Документы'
const collections = getSorted(files)
pages/gallery.tsx
+4 -2
View File
@@ -73,8 +73,10 @@ const Page: NextPage<IProps> = props => (
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
wide={true}
contentStyle={{
margin: 'var(--size-l) var(--size-xl)'
}}
>
<Head>
<title>{props.title}</title>
pages/index.tsx
+13 -6
View File
@@ -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,15 +23,21 @@ const Page: NextPage<IProps> = props => (
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
wide={true}
contentStyle={{
margin: 'var(--size-l) var(--size-xl)',
}}
>
<Head>
<title>{props.title}</title>
<Meta meta={props.meta} />
</Head>
<HudozkaTitle />
<HudozkaTitle
style={{
marginBottom: 'var(--size-l)'
}}
/>
<ArticleCardList
articles={props.articles}
@@ -44,8 +51,8 @@ export const unstable_getStaticProps = async () => {
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<IResponseItems<IArticle>>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null)
const articles = (res.items || [])
const nextPage = res.nextPage
const prevPage = res.prevPage
const title = 'Шлиссельбургская ДХШ'
pages/schedule.tsx
+4 -2
View File
@@ -17,8 +17,10 @@ const Page: NextPage<Props> = props => (
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'wide'}
wide={true}
contentStyle={{
marginTop: 'var(--size-l)'
}}
>
<Head>
<title>{props.title}</title>
pages/teacher/[person].tsx
-2
View File
@@ -28,8 +28,6 @@ const Index: NextPage<IProps> = props => {
<App
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
layout={'thin'}
>
<Head>
<title>{props.title}</title>
src/components/App/index.tsx
+10 -7
View File
@@ -15,11 +15,11 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat
export interface IAppProps {
menu: any
showAuthor: boolean
menuPadding: boolean
layout: 'full' | 'wide' | 'thin'
wide?: boolean
contentStyle?: React.CSSProperties
}
export const App: React.FC<IAppProps> = props => {
export const App: React.FC<IAppProps> = ({ wide = false, ...props }) => {
const motionDisabled = useReducedMotion()
return (
@@ -38,10 +38,13 @@ export const App: React.FC<IAppProps> = props => {
/>
)}
>
<div className={cx('content', `content_${props.layout}`, {
'content--padding-top--menu': props.menuPadding,
'reduced-motion': motionDisabled,
})}>
<div
className={cx('content', {
'reduced-motion': motionDisabled,
'content_wide': wide,
})}
style={props.contentStyle}
>
{props.children}
</div>
src/components/HudozkaTitle/index.tsx
+7 -6
View File
@@ -1,12 +1,13 @@
import * as React from 'react'
import { memo } from 'react'
export const HudozkaTitle: React.FC = React.memo(() => (
<div>
export type HudozkaTitleProps = {
style?: React.CSSProperties
}
export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
<div style={props.style}>
<style jsx>{`
div {
--padding: var(--double-margin) 0;
padding: var(--padding);
text-align: center;
}
src/next-lib.ts
+2
View File
@@ -3,6 +3,8 @@ import { NextPageContext } from 'next'
export interface IResponseItems<T> {
items: T[]
nextPage: number
prevPage: number
}
export async function requestGet<T>(url: string, defaultResponse: T): Promise<T> {
src/style.css
+2 -8
View File
@@ -12,9 +12,7 @@
--biggest-font-size: 2.25rem;
/* MENU */
--menu-thickness: 2.5em;
--menu-colored-mark-thickness: 4px;
--menu-inactive-item-color: hsl(0, 0%, 50%);
/* SIZE */
--mobile-width: 31.25em;
@@ -24,11 +22,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: 100%;
--content-width: 60%;
--embed-video-ratio: 56.25%;
@@ -198,7 +193,6 @@ a.invisible {
--font-size-h2: 1.5rem;
--font-size-h3: 1.25rem;
--content-thin: 90%;
--content-wide: 90%;
--kazimir-image-increase: 0px;
src/style/components/album.scss
-46
View File
@@ -1,46 +0,0 @@
.album {
margin-bottom: var(--double-margin);
&__head {
margin-bottom: 1.25em;
h3 {
font-size: var(--biggest-font-size);
text-align: center;
}
.date {
text-align: center;
color: #aaa;
}
a {
color: var(--dark-color);
border-bottom: none;
}
}
&__body{
img {
max-width: 100%;
max-height: 40em;
display: block;
margin: 1.25em auto var(--small-margin);
}
p{
margin-bottom: 1.25em;
}
}
}
@media (max-width: var(--mobile-width)) {
.album {
&__body {
img {
max-height: 20em;
}
}
}
}
src/style/components/footer-links.scss
-13
View File
@@ -1,13 +0,0 @@
.footer-links {
&__header {
margin-bottom: var(--single-margin);
}
&__link {
margin-bottom: var(--half-margin);
}
ul {
list-style: none;
}
}
src/style/content.css
+28
View File
@@ -0,0 +1,28 @@
.content {
width: var(--content-width);
}
.content_wide {
--content-width: var(--content-wide);
}
/* Animation on load */
@keyframes smallSlideInFromTop {
0% {
transform: translateY(-10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.content {
animation: smallSlideInFromTop 350ms ease-out;
}
.content.reduced-motion {
animation: none;
}
src/style/content.scss
-92
View File
@@ -1,92 +0,0 @@
.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 {
0% {
transform: translateY(-10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.content {
animation: smallSlideInFromTop 350ms ease-out;
}
.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;
}
}
}
}
src/style/style.scss
-4
View File
@@ -4,11 +4,7 @@
@import "components/document-row";
@import "components/documents-container";
@import "components/schedule-table";
@import "components/footer-links";
@import "components/Article";
@import "components/album";
@import "content";
// THEMES