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

postmerge

Browse Source
This commit is contained in:
tonyrewin 2022-11-15 15:15:35 +03:00
commit a9a22cd7f6
9 changed files with 91 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Author/Card.module.scss
View File

@ -52,10 +52,7 @@
.authorSubscribe { .authorSubscribe {
align-items: center; align-items: center;
display: flex; display: flex;
padding: 0 0 0 42px;
@include media-breakpoint-down(lg) {
padding: 0 0 0 42px;
}
a { a {
background: #f7f7f7; background: #f7f7f7;

22
src/components/Nav/Header.module.scss
View File

@ -135,6 +135,10 @@
position: relative; position: relative;
@include font-size(1.7rem); @include font-size(1.7rem);
@include media-breakpoint-down(lg) {
margin-right: 7rem;
}
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
@ -300,7 +304,7 @@
@include font-size(1.4rem); @include font-size(1.4rem);
left: 0; left: 0;
margin: 0.2em; margin: 0.2em 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -329,13 +333,21 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
position: absolute; position: absolute;
right: 2rem; right: 5rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
@include media-breakpoint-up(sm) {
right: 6rem;
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
right: 0; right: 1.5rem;
}
@include media-breakpoint-up(lg) {
right: 1.5rem;
} }
.control { .control {
@ -403,12 +415,10 @@
.userControlItem { .userControlItem {
align-items: center; align-items: center;
border: 2px solid #f6f6f6;
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;
height: 2.4em; height: 2.4em;
justify-content: center; justify-content: center;
margin-left: divide($container-padding-x, 4);
position: relative; position: relative;
transition: margin-left 0.3s; transition: margin-left 0.3s;
width: 2.4em; width: 2.4em;
@ -419,8 +429,6 @@
.headerScrolledTop &, .headerScrolledTop &,
.headerScrolledBottom & { .headerScrolledBottom & {
border-color: transparent;
margin-left: 0;
transition: none; transition: none;
} }

2
src/components/Nav/ProfilePopup.tsx
View File

@ -15,7 +15,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<Popup {...props} horizontalAnchor="right"> <Popup {...props} horizontalAnchor="right">
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href={`/${session().user?.slug}`}>Профиль</a> <a href={`/author/${session().user?.slug}`}>Профиль</a>
</li> </li>
<li> <li>
<a href="#">Черновики</a> <a href="#">Черновики</a>

9
src/components/Pages/ConnectPage.tsx
View File

@ -5,10 +5,11 @@ export const ConnectPage = () => {
<PageWrap> <PageWrap>
<article class="container container--static-page"> <article class="container container--static-page">
<div class="row"> <div class="row">
<h1 class="col-md-8 offset-md-2"> <div class="col-sm-10 col-md-8 col-lg-7 col-xl-6 shift-content">
<span class="wrapped">Предложить идею</span> <h1>
</h1> <span class="wrapped">Предложить идею</span>
<div class="col-md-8 col-lg-6 offset-md-3"> </h1>
<p> <p>
Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам
скорее! Если укажете свою почту, мы&nbsp;обязательно ответим. скорее! Если укажете свою почту, мы&nbsp;обязательно ответим.

2
src/components/Topic/Card.tsx
View File

@ -50,7 +50,7 @@ export const TopicCard = (props: TopicProps) => {
[styles.topicInRow]: props.isTopicInRow [styles.topicInRow]: props.isTopicInRow
}} }}
> >
<div classList={{ 'col-md-9 col-lg-7': !props.compact && !props.subscribeButtonBottom }}> <div classList={{ 'col-md-9 col-lg-7 col-xl-6': !props.compact && !props.subscribeButtonBottom }}>
<Show when={props.topic.title}> <Show when={props.topic.title}>
<h3 class={styles.topicTitle}> <h3 class={styles.topicTitle}>
<a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a> <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>

66
src/components/Views/AllAuthors.tsx
View File

@ -64,13 +64,10 @@ export const AllAuthorsView = (props: Props) => {
<Show when={sortedAuthors().length > 0}> <Show when={sortedAuthors().length > 0}>
<div class="shift-content"> <div class="shift-content">
<div class="row"> <div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}> <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Authors')}</h1> <h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p> <p>{t('Subscribe who you like to tune your personal feed')}</p>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-xl-8">
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}> <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}> <li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}> <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
@ -94,10 +91,15 @@ export const AllAuthorsView = (props: Props) => {
</a> </a>
</li> </li>
</ul> </ul>
<Show </div>
when={!searchParams().by || searchParams().by === 'name'} </div>
fallback={() => (
<div class={styles.stats}> <Show
when={!searchParams().by || searchParams().by === 'name'}
fallback={() => (
<div class={styles.stats}>
<div class="row">
<div class="col-lg-10 col-xl-9">
<For each={sortedAuthors().slice(0, limit())}> <For each={sortedAuthors().slice(0, limit())}>
{(author) => ( {(author) => (
<AuthorCard <AuthorCard
@ -110,25 +112,31 @@ export const AllAuthorsView = (props: Props) => {
/> />
)} )}
</For> </For>
<Show when={sortedAuthors().length > limit()}>
<div class={styles.loadMoreContainer}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')}
</button>
</div>
</Show>
</div> </div>
)} </div>
> <Show when={sortedAuthors().length > limit()}>
<For each={sortedKeys()}> <div class="row">
{(letter) => ( <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<div class={clsx(styles.group, 'group')}> <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
<h2>{letter}</h2> {t('More')}
<div class="container"> </button>
</div>
</div>
</Show>
</div>
)}
>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-10">
<div class="row"> <div class="row">
<For each={byLetter()[letter]}> <For each={byLetter()[letter]}>
{(author: Author) => ( {(author: Author) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}> <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
<div class="topic-title"> <div class="topic-title">
<a href={`/author/${author.slug}`}>{author.name}</a> <a href={`/author/${author.slug}`}>{author.name}</a>
</div> </div>
@ -138,11 +146,11 @@ export const AllAuthorsView = (props: Props) => {
</div> </div>
</div> </div>
</div> </div>
)} </div>
</For> </div>
</Show> )}
</div> </For>
</div> </Show>
</div> </div>
</Show> </Show>
</div> </div>

42
src/components/Views/AllTopics.tsx
View File

@ -63,15 +63,11 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<Show when={sortedTopics().length > 0}> <Show when={sortedTopics().length > 0}>
<div class="shift-content"> <div class="shift-content">
<div class="row"> <div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-9')}> <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Topics')}</h1> <h1>{t('Topics')}</h1>
<div class="col-lg-10"> <p>{t('Subscribe what you like to tune your personal feed')}</p>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
</div>
</div>
<div class="col-12"> <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}> <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}> <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
{t('By shouts')} {t('By shouts')}
@ -114,10 +110,12 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
)} )}
</For> </For>
<Show when={sortedTopics().length > limit()}> <Show when={sortedTopics().length > limit()}>
<div class={styles.loadMoreContainer}> <div class="row">
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}> <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
{t('More')} <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
</button> {t('More')}
</button>
</div>
</div> </div>
</Show> </Show>
</> </>
@ -129,15 +127,19 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<h2>{letter}</h2> <h2>{letter}</h2>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<For each={byLetter()[letter]}> <div class="col-lg-10">
{(topic) => ( <div class="row">
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}> <For each={byLetter()[letter]}>
<div class="topic-title"> {(topic) => (
<a href={`/topic/${topic.slug}`}>{topic.title}</a> <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
</div> <div class="topic-title">
</div> <a href={`/topic/${topic.slug}`}>{topic.title}</a>
)} </div>
</For> </div>
)}
</For>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

11
src/styles/AllTopics.module.scss
View File

@ -17,9 +17,7 @@
} }
.topic { .topic {
@include media-breakpoint-down(md) { margin-bottom: 1.6rem;
margin-top: 1.6rem;
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-left: 2.6rem; margin-left: 2.6rem;
@ -41,6 +39,11 @@
text-align: center; text-align: center;
.loadMoreButton { .loadMoreButton {
padding: 0.6em 1.5em; padding: 0.6em 5em;
width: 100%;
@include media-breakpoint-up(sm) {
width: auto;
}
} }
} }

12
src/styles/app.scss
View File

@ -471,15 +471,9 @@ figcaption {
flex-wrap: wrap; flex-wrap: wrap;
font-weight: bold; font-weight: bold;
list-style: none; list-style: none;
margin: 2.4rem 0 0; margin: 3.6rem 0 0;
padding: 0; padding: 0;
.all-topics-page & {
@include media-breakpoint-down(sm) {
margin-left: 1.3rem;
}
}
li { li {
display: inline-block; display: inline-block;
margin-right: 1em; margin-right: 1em;
@ -628,12 +622,10 @@ figcaption {
padding-left: divide($container-padding-x, 2); padding-left: divide($container-padding-x, 2);
padding-right: divide($container-padding-x, 2); padding-right: divide($container-padding-x, 2);
/* > .row {
.row {
margin-left: divide(-$container-padding-x, 2); margin-left: divide(-$container-padding-x, 2);
margin-right: divide(-$container-padding-x, 2); margin-right: divide(-$container-padding-x, 2);
} }
*/
} }
} }