discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

About pages fixed grid

Browse Source
This commit is contained in:
kvakazyambra 2022-11-08 09:41:50 +03:00
parent 7142b58bc9
commit 54d4c4d055
11 changed files with 145 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pages/about/DiscussionRulesPage.tsx
View File

@ -7,7 +7,7 @@ export const DiscussionRulesPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1>
<span class="wrapped" innerHTML={title} />
</h1>

2
src/components/Pages/about/DogmaPage.tsx
View File

@ -7,7 +7,7 @@ export const DogmaPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h4>Редакционные принципы</h4>
<p>
Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым

68
src/components/Pages/about/GuidePage.tsx
View File

@ -21,7 +21,40 @@ export const GuidePage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#how-it-works">{title}</a>
</li>
<li>
<a href="#become-author">Как стать автором журнала</a>
</li>
<li>
<a href="#voting">Как проходит голосование</a>
</li>
<li>
<a href="#editing">Как мы делаем тексты друг друга лучше</a>
</li>
<li>
<a href="#perks">Что сообщество дает авторам</a>
</li>
<li>
<a href="#contacts">Как быть в курсе</a>
</li>
</ul>
</nav>
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1 id="about">
<span class="wrapped">Как устроен Дискурс</span>
</h1>
@ -242,39 +275,6 @@ export const GuidePage = () => {
. Мы&nbsp;обязательно ответим.
</p>
</div>
<div class="col-md-2">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#how-it-works">{title}</a>
</li>
<li>
<a href="#become-author">Как стать автором журнала</a>
</li>
<li>
<a href="#voting">Как проходит голосование</a>
</li>
<li>
<a href="#editing">Как мы делаем тексты друг друга лучше</a>
</li>
<li>
<a href="#perks">Что сообщество дает авторам</a>
</li>
<li>
<a href="#contacts">Как быть в курсе</a>
</li>
</ul>
</nav>
</Show>
</div>
</div>
</article>
</MainLayout>

56
src/components/Pages/about/HelpPage.tsx
View File

@ -18,7 +18,34 @@ export const HelpPage = () => {
<article class="container container--static-page discours-help">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
</li>
<li>
<a href="#financial-report">На&nbsp;что пойдут деньги?</a>
</li>
<li>
<a href="#trustee">Войдите в&nbsp;попечительский совет Дискурса</a>
</li>
<li>
<a href="#other">Как ещё можно поддержать Дискурс?</a>
</li>
</ul>
</nav>
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1 id="help-us">
<span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
</h1>
@ -126,33 +153,6 @@ export const HelpPage = () => {
.
</p>
</div>
<div class="col-md-2">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
</li>
<li>
<a href="#financial-report">На&nbsp;что пойдут деньги?</a>
</li>
<li>
<a href="#trustee">Войдите в&nbsp;попечительский совет Дискурса</a>
</li>
<li>
<a href="#other">Как ещё можно поддержать Дискурс?</a>
</li>
</ul>
</nav>
</Show>
</div>
</div>
</article>
</MainLayout>

78
src/components/Pages/about/ManifestPage.tsx
View File

@ -22,7 +22,45 @@ export const ManifestPage = () => {
</Modal>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#manifest">Манифест</a>
</li>
<li>
<a href="#participation">Как участвовать в&nbsp;самиздате</a>
<ul class="nodash">
<li>
<a href="#contribute">Предлагать материалы</a>
</li>
<li>
<a href="#donate">Поддерживать проект</a>
</li>
<li>
<a href="#cooperation">Сотрудничать с&nbsp;журналом</a>
</li>
<li>
<a href="#follow">Как еще можно помочь</a>
</li>
</ul>
</li>
<li>
<a href="#connection">Будем на&nbsp;связи</a>
</li>
</ul>
</nav>
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1 id="manifest">
<span class="wrapped">Манифест</span>
</h1>
@ -145,44 +183,6 @@ export const ManifestPage = () => {
и&nbsp;постараемся реализовать все хорошие задумки.
</p>
</div>
<div class="col-md-2">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#manifest">Манифест</a>
</li>
<li>
<a href="#participation">Как участвовать в&nbsp;самиздате</a>
<ul class="nodash">
<li>
<a href="#contribute">Предлагать материалы</a>
</li>
<li>
<a href="#donate">Поддерживать проект</a>
</li>
<li>
<a href="#cooperation">Сотрудничать с&nbsp;журналом</a>
</li>
<li>
<a href="#follow">Как еще можно помочь</a>
</li>
</ul>
</li>
<li>
<a href="#connection">Будем на&nbsp;связи</a>
</li>
</ul>
</nav>
</Show>
</div>
</div>
</article>
</MainLayout>

2
src/components/Pages/about/PartnersPage.tsx
View File

@ -8,7 +8,7 @@ export const PartnersPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1>{t('Partners')}</h1>
</div>
</div>

2
src/components/Pages/about/PrinciplesPage.tsx
View File

@ -7,7 +7,7 @@ export const PrinciplesPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1>
<span class="wrapped">{title}</span>
</h1>

2
src/components/Pages/about/ProjectsPage.tsx
View File

@ -8,7 +8,7 @@ export const ProjectsPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1>{t('Projects')}</h1>
</div>
</div>

68
src/components/Pages/about/TermsOfUsePage.tsx
View File

@ -16,7 +16,40 @@ export const TermsOfUsePage = () => {
{/*<Meta property="og:description" content={title} />*/}
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#terms-of-use">Пользовательское соглашение</a>
</li>
<li>
<a href="#definitions">Определения</a>
</li>
<li>
<a href="#copyright">Авторские права</a>
</li>
<li>
<a href="#rules">Правила поведения</a>
</li>
<li>
<a href="#privacy-policy">Политика конфиденциальности</a>
</li>
<li>
<a href="#feedback">Обратная связь</a>
</li>
</ul>
</nav>
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1 id="terms-of-use">
<span class="wrapped">Пользовательское соглашение</span>
</h1>
@ -233,39 +266,6 @@ export const TermsOfUsePage = () => {
или через форму <a href="/feedback-idea">&laquo;предложить идею&raquo;</a>.
</p>
</div>
<div class="col-md-2">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
</button>
</p>
<Show when={indexExpanded()}>
<nav class="content-index">
<ul class="nodash">
<li>
<a href="#terms-of-use">Пользовательское соглашение</a>
</li>
<li>
<a href="#definitions">Определения</a>
</li>
<li>
<a href="#copyright">Авторские права</a>
</li>
<li>
<a href="#rules">Правила поведения</a>
</li>
<li>
<a href="#privacy-policy">Политика конфиденциальности</a>
</li>
<li>
<a href="#feedback">Обратная связь</a>
</li>
</ul>
</nav>
</Show>
</div>
</div>
</article>
</MainLayout>

2
src/components/Pages/about/ThanksPage.tsx
View File

@ -12,7 +12,7 @@ export const ThanksPage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 shift-content">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<h1>
<span class="wrapped">{title}</span>
</h1>

4
src/styles/app.scss
View File

@ -3,7 +3,7 @@
@import 'bootstrap/scss/mixins/utilities';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/bootstrap-utilities';
:root {
--background-color: #fff;
@ -586,8 +586,10 @@ astro-island {
}
.container--static-page {
@include media-breakpoint-up(md) {
padding-top: 1.5em;
}
}
.shift-content {
@include media-breakpoint-up(md) {