Fixed buttons style

2023-05-17 23:27:24 +03:00 · 2023-05-17 23:27:24 +03:00 · dd3a6336b2
commit dd3a6336b2
parent 7fca709203
9 changed files with 88 additions and 42 deletions
--- a/src/components/Author/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard.module.scss
@ -168,8 +168,12 @@
  display: none;
 }

+.buttonLabelVisible {
+  display: block;
+}
+
 .buttonWrite {
-  @include font-size(1.5rem);
+  //@include font-size(1.5rem);

  color: #000;
  display: inline-flex;
--- a/src/components/Author/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard.tsx
@ -27,6 +27,7 @@ interface AuthorCardProps {
  isAuthorsList?: boolean
  truncateBio?: boolean
  liteButtons?: boolean
+  isTextButton?: boolean
  isComments?: boolean
  isFeedMode?: boolean
  isNowrap?: boolean
@ -132,18 +133,22 @@ export const AuthorCard = (props: AuthorCardProps) => {
                      onClick={() => subscribe(true)}
                      class={clsx('button', styles.button)}
                      classList={{
-                        [styles.buttonSubscribe]: !props.isAuthorsList,
+                        [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
                        'button--subscribe': !props.isAuthorsList,
-                        'button--subscribe-topic': props.isAuthorsList,
-                        [styles.buttonWrite]: props.isAuthorsList,
+                        'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
+                        [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
                        [styles.isSubscribing]: isSubscribing()
                      }}
                      disabled={isSubscribing()}
                    >
-                      <Show when={!props.isAuthorsList}>
+                      <Show when={!props.isAuthorsList && !props.isTextButton}>
                        <Icon name="author-subscribe" class={styles.icon} />
                      </Show>
-                      <span class={styles.buttonLabel}>{t('Follow')}</span>
+                      <Show when={props.isTextButton}>
+                        <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                          {t('Follow')}
+                        </span>
+                      </Show>
                    </button>
                  }
                >
@ -151,18 +156,22 @@ export const AuthorCard = (props: AuthorCardProps) => {
                    onClick={() => subscribe(false)}
                    class={clsx('button', styles.button)}
                    classList={{
-                      [styles.buttonSubscribe]: !props.isAuthorsList,
+                      [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
                      'button--subscribe': !props.isAuthorsList,
-                      'button--subscribe-topic': props.isAuthorsList,
-                      [styles.buttonWrite]: props.isAuthorsList,
+                      'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
+                      [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
                      [styles.isSubscribing]: isSubscribing()
                    }}
                    disabled={isSubscribing()}
                  >
-                    <Show when={!props.isAuthorsList}>
+                    <Show when={!props.isAuthorsList && !props.isTextButton}>
                      <Icon name="author-unsubscribe" class={styles.icon} />
                    </Show>
-                    <span class={styles.buttonLabel}>{t('Unfollow')}</span>
+                    <Show when={props.isTextButton}>
+                      <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                        {t('Unfollow')}
+                      </span>
+                    </Show>
                  </button>
                </Show>

@ -177,8 +186,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
                    }}
                    onClick={initChat}
                  >
-                    <Icon name="comment" class={styles.icon} />
-                    <Show when={!props.liteButtons}>{t('Write')}</Show>
+                    <Show when={!props.isTextButton}>
+                      <Icon name="comment" class={styles.icon} />
+                    </Show>
+                    <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
                  </button>

                  <Show when={!props.noSocialButtons}>
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@ -18,14 +18,15 @@
    margin-top: 0;
  }

-  .topicTitle {
-    margin-bottom: 0;
+  @include media-breakpoint-up(sm) {
+    .topicDescription {
+      margin-bottom: 0;
+    }
  }
 }

 .topicTitle {
  @include font-size(2.2rem);
-
  font-weight: bold;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem !important;
@ -50,9 +51,8 @@

 .topicDescription {
  @include font-size(1.6rem);
-
  color: #696969;
-  margin: 0 0 1.6rem;
+  margin: 0.5em 0 1.6rem;

  &.compact {
    font-size: medium;
@ -102,7 +102,7 @@
 }

 .controlContainer {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
    text-align: right;
  }
 }
@ -124,4 +124,10 @@
 .isSubscribed {
  background: #000;
  color: #fff;
+  transition: background-color 0.3s, color 0.3s;
+
+  &:hover {
+    background: #fff;
+    color: #000;
+  }
 }
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@ -21,6 +21,7 @@ interface TopicProps {
  isTopicInRow?: boolean
  iconButton?: boolean
  showPublications?: boolean
+  showDescription?: boolean
 }

 export const TopicCard = (props: TopicProps) => {
@ -56,12 +57,12 @@ export const TopicCard = (props: TopicProps) => {
    <div
      class={styles.topic}
      classList={{
-        row: !props.compact && !props.subscribeButtonBottom,
+        row: !props.subscribeButtonBottom,
        [styles.topicCompact]: props.compact,
        [styles.topicInRow]: props.isTopicInRow
      }}
    >
-      <div classList={{ 'col-md-18 col-lg-14 col-xl-12': !props.compact && !props.subscribeButtonBottom }}>
+      <div classList={{ 'col-sm-18 col-lg-14 col-xl-12': !props.subscribeButtonBottom }}>
        <Show when={props.topic.title}>
          <h3 class={styles.topicTitle}>
            <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
@ -75,7 +76,7 @@ export const TopicCard = (props: TopicProps) => {
          </div>
        </Show>

-        <Show when={!props.compact && props.topic?.body}>
+        <Show when={props.showDescription && props.topic?.body}>
          <div
            class={clsx(styles.topicDescription, 'text-truncate')}
            classList={{ 'topic-description--short': props.shortDescription }}
@ -86,7 +87,7 @@ export const TopicCard = (props: TopicProps) => {
      </div>
      <div
        class={styles.controlContainer}
-        classList={{ 'col-md-6': !props.compact && !props.subscribeButtonBottom }}
+        classList={{ 'col-sm-6 col-lg-10 col-xl-12': !props.subscribeButtonBottom }}
      >
        <ShowOnlyOnClient>
          <Show when={isSessionLoaded()}>
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@ -188,6 +188,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
                      noSocialButtons={true}
                      isAuthorsList={true}
                      truncateBio={true}
+                      isTextButton={true}
                    />
                  </div>
                </div>
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@ -176,19 +176,24 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
            </Show>

            <Show when={searchParams().by && searchParams().by !== 'title'}>
-              <For each={filteredResults().slice(0, limit())}>
-                {(topic) => (
-                  <>
-                    <TopicCard
-                      topic={topic}
-                      compact={false}
-                      subscribed={subscribed(topic.slug)}
-                      showPublications={true}
-                    />
-                    <StatMetrics fields={['shouts', 'authors', 'followers']} stat={topic.stat} />
-                  </>
-                )}
-              </For>
+              <div class="row">
+                <div className="col-lg-20 col-xl-18">
+                  <For each={filteredResults().slice(0, limit())}>
+                    {(topic) => (
+                      <>
+                        <TopicCard
+                          topic={topic}
+                          compact={false}
+                          subscribed={subscribed(topic.slug)}
+                          showPublications={true}
+                          showDescription={true}
+                        />
+                        <StatMetrics fields={['shouts', 'authors', 'followers']} stat={topic.stat} />
+                      </>
+                    )}
+                  </For>
+                </div>
+              </div>
            </Show>

            <Show when={filteredResults().length > limit() && searchParams().by !== 'title'}>
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@ -79,3 +79,11 @@
  align-items: center;
  justify-content: center;
 }
+
+.subscriptions {
+  margin-top: -2em;
+}
+
+.authorContainer {
+  margin-top: 3.2rem;
+}
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@ -242,7 +242,7 @@ export const AuthorView = (props: AuthorProps) => {
          </div>
        </Match>
        <Match when={searchParams().by === 'subscriptions'}>
-          <div class="wide-container">
+          <div class={clsx('wide-container', styles.subscriptions)}>
            <div class="row position-relative">
              <Show
                when={isLoaded()}
@ -254,11 +254,18 @@ export const AuthorView = (props: AuthorProps) => {
              >
                <For each={subscriptions()}>
                  {(subscription: Author | Topic) => (
-                    <div class="col-md-24">
+                    <div class="col-md-20 col-lg-18">
                      {isAuthor(subscription) ? (
-                        <AuthorCard author={subscription} hideWriteButton={true} hasLink={true} />
+                        <div class={styles.authorContainer}>
+                          <AuthorCard
+                            author={subscription}
+                            hideWriteButton={true}
+                            hasLink={true}
+                            isTextButton={true}
+                          />
+                        </div>
                      ) : (
-                        <TopicCard compact iconButton isTopicInRow topic={subscription} />
+                        <TopicCard compact isTopicInRow showDescription topic={subscription} />
                      )}
                    </div>
                  )}
--- a/src/components/_shared/Stat.module.scss
+++ b/src/components/_shared/Stat.module.scss
@ -1,13 +1,16 @@
 .statMetrics {
  @include font-size(1.7rem);
-
  color: #9fa1a7;
  display: flex;
-  margin: 0.5em 0 1em;
+  margin: 0 0 1em;

  @include media-breakpoint-down(md) {
    flex-wrap: wrap;
  }
+
+  @include media-breakpoint-down(sm) {
+    margin-top: 0.5em;
+  }
 }

 .statMetricsItem {