From 251df4b2c0045bebc880edc28973d864685616a7 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Fri, 10 Mar 2023 17:42:48 +0000 Subject: [PATCH] New grid --- src/components/Article/CommentsTree.tsx | 6 +- src/components/Article/FullArticle.tsx | 264 +++++++++--------- src/components/Author/Full.tsx | 2 +- src/components/Discours/Banner.tsx | 4 +- src/components/Discours/Footer.tsx | 8 +- src/components/Discours/Hero.tsx | 2 +- src/components/Feed/Beside.tsx | 4 +- src/components/Feed/Card.module.scss | 12 +- src/components/Feed/Group.scss | 2 +- src/components/Feed/Group.tsx | 12 +- src/components/Feed/Row1.tsx | 2 +- src/components/Feed/Row2.tsx | 10 +- src/components/Feed/Row3.tsx | 2 +- src/components/Feed/Row5.tsx | 6 +- src/components/Feed/RowShort.tsx | 2 +- src/components/Feed/Sidebar.module.scss | 1 - .../Nav/AuthModal/AuthModal.module.scss | 2 +- .../Nav/AuthModal/SocialProviders.module.scss | 2 +- src/components/Nav/AuthModal/index.tsx | 4 +- src/components/Nav/Header.module.scss | 14 +- src/components/Nav/Header.tsx | 6 +- src/components/Nav/HeaderAuth.tsx | 2 +- src/components/Topic/Card.tsx | 4 +- src/components/Topic/FloorHeader.tsx | 4 +- src/components/Topic/Full.tsx | 2 +- src/components/Views/AllAuthors.tsx | 14 +- src/components/Views/AllTopics.tsx | 138 ++++----- src/components/Views/Author.tsx | 4 +- src/components/Views/Feed.tsx | 214 +++++++------- src/components/Views/FourOuFour.tsx | 6 +- src/components/Views/Inbox.tsx | 4 +- src/components/Views/Search.tsx | 8 +- src/components/Views/Topic.tsx | 4 +- src/components/_shared/Slider.tsx | 2 +- src/pages/about/discussionRules.page.tsx | 2 +- src/pages/about/dogma.page.tsx | 2 +- src/pages/about/guide.page.tsx | 4 +- src/pages/about/help.page.tsx | 6 +- src/pages/about/manifest.page.tsx | 4 +- src/pages/about/partners.page.tsx | 2 +- src/pages/about/principles.page.tsx | 2 +- src/pages/about/projects.page.tsx | 2 +- src/pages/about/termsOfUse.page.tsx | 4 +- src/pages/about/thanks.page.tsx | 2 +- src/pages/connect.page.tsx | 2 +- src/pages/layoutShouts.page.tsx | 4 +- src/pages/profile/profileSecurity.page.tsx | 4 +- src/pages/profile/profileSettings.page.tsx | 4 +- .../profile/profileSubscriptions.page.tsx | 4 +- src/styles/_globals.scss | 8 +- src/styles/app.scss | 10 +- 51 files changed, 423 insertions(+), 416 deletions(-) diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 9fe08ebf..a6ac5449 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -162,11 +162,11 @@ export const CommentsTree = (props: Props) => { - {t('To write a comment, you must')}  + {t('To write a comment, you must')}{' '} {t('sign up')} - -  {t('or')}  + {' '} + {t('or')}  {t('sign in')} diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 59963839..a350b1fb 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -117,60 +117,62 @@ export const FullArticle = (props: ArticleProps) => { <> {props.article.title}
-
-
-
- - {mainTopic().title} - -
+
+
+
+
+ + {mainTopic().title} + +
-

{props.article.title}

- -

{capitalize(props.article.subtitle, false)}

- - -
- - {(a: Author, index) => ( - <> - 0}>, - {a.name} - - )} - -
-
-
- - -
- - {(m: MediaItem) => ( -
- - -
- -
- )} - -
- - -
- }> - +

{props.article.title}

+ +

{capitalize(props.article.subtitle, false)}

 + +
+ + {(a: Author, index) => ( + <> + 0}>, + {a.name} + + )} + +
+
- -
+ + +
+ + {(m: MediaItem) => ( +
+ + +
+ +
+ )} + +
+ + +
+ }> + + +
+ +
+
@@ -190,91 +192,93 @@ export const FullArticle = (props: ArticleProps) => {
-
-
-
- -
- - -
- - {props.article.stat?.viewed} -
- - -
scrollToComments()}> - - {/*{props.article.stat?.commented || ''}*/} -
- -
- } - /> -
- -
- -
- - +
+
+
- - - {t('Edit')} - +
- -
-
- {formattedDate()} + + +
+ + {props.article.stat?.viewed} +
+ + +
scrollToComments()}> + + {/*{props.article.stat?.commented || ''}*/} +
+ +
+ } + /> +
+ +
+ +
+ + +
+ + + {t('Edit')} + +
+ +
+
+ {formattedDate()} +
-
-
- - - - - - -
+
+ + + + + + +
-
- - {(topic) => ( -
- {topic.title} -
- )} - -
+
+ + {(topic) => ( +
+ {topic.title} +
+ )} + +
-
- 1}> -

{t('Authors')}

- - - {(a) => ( -
- -
- )} - -
-
- - - +
+ 1}> +

{t('Authors')}

+ + + {(a) => ( +
+ +
+ )} + +
+
+ + + +
diff --git a/src/components/Author/Full.tsx b/src/components/Author/Full.tsx index 0d621af4..8ec9975e 100644 --- a/src/components/Author/Full.tsx +++ b/src/components/Author/Full.tsx @@ -5,7 +5,7 @@ import './Full.scss' export const AuthorFull = (props: { author: Author }) => { return (
-
+
diff --git a/src/components/Discours/Banner.tsx b/src/components/Discours/Banner.tsx index a0f939ef..f13bc3cc 100644 --- a/src/components/Discours/Banner.tsx +++ b/src/components/Discours/Banner.tsx @@ -10,7 +10,7 @@ export default () => {
-
+

{t('Discours is created with our common effort')}

{t('Support us')} @@ -20,7 +20,7 @@ export default () => {

-
+
{t('Discours')}
diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx index 8147630e..3a21afad 100644 --- a/src/components/Discours/Footer.tsx +++ b/src/components/Discours/Footer.tsx @@ -116,7 +116,7 @@ export const Footer = () => {
{({ header, items }) => ( -
+
{t(header)}
    @@ -133,7 +133,7 @@ export const Footer = () => {
)} -
+
{t('Subscription')}

{t('Join our maillist')}

@@ -141,14 +141,14 @@ export const Footer = () => {
-
+
{t( 'Independant magazine with an open horizontal cooperation about culture, science and society' )} . {t('Discours')} © 2015–{new Date().getFullYear()}{' '} {t('Terms of use')}
-
+
{(social) => (
diff --git a/src/components/Discours/Hero.tsx b/src/components/Discours/Hero.tsx index 554b499a..18dff663 100644 --- a/src/components/Discours/Hero.tsx +++ b/src/components/Discours/Hero.tsx @@ -9,7 +9,7 @@ export default () => {
-
+

{t('Horizontal collaborative journalistic platform')}

{t( diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index d12a4f84..47cb0a1c 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -32,7 +32,7 @@ export const Beside = (props: BesideProps) => {

-
+

{props.title}

@@ -92,7 +92,7 @@ export const Beside = (props: BesideProps) => {
-
+
{ 4}>
-
{props.header}
+
{props.header}
-
+
-
+
{(a) => (
-
+
{ = 4}> -
+
{(a) => ( { )}
-
+
{(a) => ( (
-
+
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx index 71fdc1f2..2a58940e 100644 --- a/src/components/Feed/Row2.tsx +++ b/src/components/Feed/Row2.tsx @@ -3,9 +3,9 @@ import type { Shout } from '../../graphql/types.gen' import { ArticleCard } from './Card' const x = [ - ['6', '6'], - ['4', '8'], - ['8', '4'] + ['12', '12'], + ['8', '16'], + ['16', '8'] ] export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boolean }) => { @@ -21,11 +21,11 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boo {(a, i) => { return ( -
+
diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx index 026aca50..e2581e2d 100644 --- a/src/components/Feed/Row3.tsx +++ b/src/components/Feed/Row3.tsx @@ -11,7 +11,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?:
{props.header}
{(a) => ( -
+
)} diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx index 091c2a4b..f189ce19 100644 --- a/src/components/Feed/Row5.tsx +++ b/src/components/Feed/Row5.tsx @@ -6,20 +6,20 @@ export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
-
+
-
+
-
+
(
{(a) => ( -
+
{ class={clsx('row', styles.view)} classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }} > -
+
{

-
+
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index fdafbcc9..29927f32 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -8,7 +8,7 @@ .wide-container { background: #fff; - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(lg) { padding: 0 divide($container-padding-x, 2); } } @@ -53,7 +53,7 @@ .headerInner { align-items: center; background: #fff; - flex-wrap: nowrap; + flex-wrap: nowrap !important; justify-content: space-between; margin: 0; @@ -130,15 +130,14 @@ display: inline-flex; font-weight: 500; position: relative; + //flex: 1 100% !important; // replace row > * selector to remove !important - padding-right: 0 !important; - width: auto !important; + //width: auto !important; @include media-breakpoint-down(md) { flex: 1; - padding-left: 0; - padding-right: 0; + padding-right: 0 !important; } } @@ -225,7 +224,6 @@ float: right; padding-left: 0; padding-right: 0; - width: 2.2rem; @include media-breakpoint-up(sm) { padding-left: divide($container-padding-x, 2); @@ -312,7 +310,7 @@ .articleHeader { @include font-size(1.4rem); - left: 0; + left: $container-padding-x; margin: 0.2em 0; overflow: hidden; position: absolute; diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index f16e8dcc..6a5775ab 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -95,12 +95,12 @@ export const Header = (props: Props) => {