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

Fixed content index control style

Browse Source
This commit is contained in:
kvakazyambra 2022-11-09 22:51:41 +03:00
parent c9958adadc
commit 64907a84e6
7 changed files with 72 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/icons/content-index-control-expanded.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 8V5H0V3H10V0L14 4L10 8Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 154 B

4
public/icons/content-index-control.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="black"/>
<rect x="1" y="1" width="26" height="26" stroke="black" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

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

@ -1,6 +1,7 @@
import { createSignal, Show } from 'solid-js'
import { MainLayout } from '../../Layouts/MainLayout'
import { t } from '../../../utils/intl'
import { Icon } from '../../Nav/Icon'
export const GuidePage = () => {
const title = t('How it works')
@ -22,9 +23,14 @@ export const GuidePage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
<p class="content-index-control-container">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
</Show>
<Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" />
</Show>
</button>
</p>

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

@ -1,6 +1,7 @@
import { createSignal, Show } from 'solid-js'
import { MainLayout } from '../../Layouts/MainLayout'
import { Donate } from '../../Discours/Donate'
import { Icon } from '../../Nav/Icon'
// const title = t('Support us')
@ -19,9 +20,14 @@ export const HelpPage = () => {
<article class="container container--static-page discours-help">
<div class="row">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
<p class="content-index-control-container">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
</Show>
<Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" />
</Show>
</button>
</p>

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

@ -4,6 +4,7 @@ import { Modal } from '../../Nav/Modal'
import { Feedback } from '../../Discours/Feedback'
import Subscribe from '../../Discours/Subscribe'
import Opener from '../../Nav/Opener'
import { Icon } from '../../Nav/Icon'
// title={t('Manifest')}
@ -23,9 +24,14 @@ export const ManifestPage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
<p class="content-index-control-container">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
</Show>
<Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" />
</Show>
</button>
</p>

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

@ -1,5 +1,6 @@
import { createSignal, Show } from 'solid-js'
import { MainLayout } from '../../Layouts/MainLayout'
import { Icon } from '../../Nav/Icon'
// const title = t('Terms of use')
@ -17,9 +18,14 @@ export const TermsOfUsePage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
<p class="content-index-control-container">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
</Show>
<Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" />
</Show>
</button>
</p>

30
src/styles/app.scss
View File

@ -32,7 +32,7 @@ html {
body {
font-family: Muller, Arial, Helvetica, sans-serif;
font-size: 2rem;
line-height: 1.4;
line-height: 1.6;
min-height: 100%;
text-size-adjust: 100%;
@ -239,6 +239,30 @@ button {
}
}
.button--content-index {
border: 2px solid #fff;
background: none;
height: 3.2rem;
padding: 0;
width: 3.2rem;
.icon,
img {
vertical-align: middle;
width: auto;
}
&:hover {
.icon {
opacity: 0.5;
}
}
}
.content-index-control-container {
text-align: right;
}
form {
.pretty-form__item {
position: relative;
@ -654,6 +678,10 @@ astro-island {
li {
margin-bottom: 1em;
}
a {
border: none;
}
}
.load-more-container {