Feed page style fixes

2023-07-09 21:34:59 +03:00 · 2023-07-09 21:34:59 +03:00 · af30dd1e90
commit af30dd1e90
parent 5d2b944a64
18 changed files with 147 additions and 107 deletions
--- a/public/icons/rating-control-checked.svg
+++ b/public/icons/rating-control-checked.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path
+  d="M12 3.75C16.5573 3.75 20.25 7.44271 20.25 12C20.25 16.5573 16.5573 20.25 12 20.25C7.44271 20.25 3.75 16.5573 3.75 12C3.75 7.44271 7.44271 3.75 12 3.75ZM16.0052 9.55729C16.2292 9.20833 16.1302 8.74479 15.7839 8.52083C15.4349 8.29427 14.9714 8.39323 14.7448 8.74219L11.1042 14.362L9.1875 12.1823C8.91406 11.8724 8.4401 11.8411 8.13021 12.1146C7.81771 12.388 7.78906 12.862 8.0625 13.1745L10.6328 16.0964C10.776 16.2578 10.9818 16.3516 11.1953 16.3516C11.2135 16.3516 11.2318 16.349 11.25 16.349C11.4844 16.3307 11.6979 16.2057 11.8255 16.0078L16.0052 9.55729Z" fill="currentColor"/>
+</svg>
--- a/public/icons/rating-control-less.svg
+++ b/public/icons/rating-control-less.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path d="M7 12H17" stroke="currentColor" stroke-width="1.5"/>
+</svg>
--- a/public/icons/rating-control-more.svg
+++ b/public/icons/rating-control-more.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M11.25 12.75V17H12.75V12.75H17V11.25H12.75V7H11.25V11.25H7V12.75H11.25Z" fill="currentColor"/>
+</svg>
--- a/src/components/Article/Article.module.scss
+++ b/src/components/Article/Article.module.scss
@ -177,10 +177,10 @@ img {
 }

 .shoutStatsItem {
+  align-items: center;
  @include font-size(1.5rem);
-
  font-weight: 500;
-  display: inline-block;
+  display: flex;
  margin: 0 6% 1em 0;
  vertical-align: baseline;
  cursor: pointer;
@ -190,25 +190,30 @@ img {
  }

  .icon {
-    height: 1.6em;
    display: inline-block;
    margin-right: 0.2em;
-    max-width: 1.4em;
-    max-height: 1.4em;
    transition: filter 0.2s;
    vertical-align: middle;
  }

-  .iconEye {
-    height: 1.8em;
-    max-width: 1.8em;
-    max-height: 1.8em;
-  }
-
  img {
    display: block;
  }

+  .iconHover {
+    display: none;
+  }
+
+  &:hover {
+    .icon {
+      display: none;
+    }
+
+    .iconHover {
+      display: inline-block;
+    }
+  }
+
  a {
    border: none;
    text-decoration: none;
@ -225,21 +230,11 @@ img {
 }

 .shoutStatsItemInner {
-  margin: -0.3em -0.3em 0;
-  padding: 0.3em;
  cursor: pointer;

  .icon {
    margin-right: 0;
  }
-
-  &:hover {
-    background: #000;
-
-    img {
-      filter: invert(1);
-    }
-  }
 }

 .shoutStatsItemLikes {
@ -275,8 +270,6 @@ img {
 }

 .shoutStatsItemViews {
-  margin-left: 2rem;
-  margin-right: 0;
  cursor: default;
 }

@ -285,6 +278,7 @@ img {
  display: inline-block;
  margin-left: 2rem;
  margin-right: 0;
+  margin-bottom: 0;
  cursor: default;

  @include media-breakpoint-down(sm) {
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@ -196,10 +196,20 @@ export const FullArticle = (props: ArticleProps) => {
                {(triggerRef: (el) => void) => (
                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
                    <Icon name="comment" class={styles.icon} />
+                    <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
                    {props.article.stat?.commented ?? ''}
                  </div>
                )}
              </Popover>
+
+              <Show when={props.article.stat?.viewed}>
+                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
+                  <Icon name="eye" class={styles.icon} />
+                  <Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
+                  {props.article.stat?.viewed}
+                </div>
+              </Show>
+
              <Popover content={t('Share')}>
                {(triggerRef: (el) => void) => (
                  <div class={styles.shoutStatsItem} ref={triggerRef}>
@ -211,6 +221,7 @@ export const FullArticle = (props: ArticleProps) => {
                      trigger={
                        <div class={styles.shoutStatsItemInner}>
                          <Icon name="share-outline" class={styles.icon} />
+                          <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                        </div>
                      }
                    />
@ -222,6 +233,7 @@ export const FullArticle = (props: ArticleProps) => {
                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
                    <div class={styles.shoutStatsItemInner}>
                      <Icon name="bookmark" class={styles.icon} />
+                      <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
                    </div>
                  </div>
                )}
@ -235,6 +247,7 @@ export const FullArticle = (props: ArticleProps) => {
                        class={styles.shoutStatsItemInner}
                      >
                        <Icon name="pencil-outline" class={styles.icon} />
+                        <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                      </a>
                    </div>
                  )}
@ -244,12 +257,6 @@ export const FullArticle = (props: ArticleProps) => {
                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
                  {formattedDate()}
                </div>
-                <Show when={props.article.stat?.viewed}>
-                  <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
-                    <Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
-                    {props.article.stat?.viewed}
-                  </div>
-                </Show>
              </div>
            </div>
            <div class={styles.help}>
--- a/src/components/Article/ShoutRatingControl.module.scss
+++ b/src/components/Article/ShoutRatingControl.module.scss
@ -2,36 +2,14 @@
  align-items: center;
  display: flex;

-  &.isDownvoted .downvoteButton,
-  &.isUpvoted .upvoteButton {
-    background: #000;
-    border-color: #000;
-    color: #fff;
-  }
-
  .ratingControl {
-    align-items: center;
-    border: 2px solid;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    height: 0.9em;
-    line-height: 0;
-    font-size: 1.6em;
-    padding: 0;
-    width: 0.9em;
-
    &:hover {
-      background: #000;
-      border-color: #000;
-      color: #fff;
    }
  }
 }

 .ratingValue {
  font-weight: bold;
-  margin: 0 4px;
  padding: 0 4px;
  cursor: pointer;

--- a/src/components/Article/ShoutRatingControl.tsx
+++ b/src/components/Article/ShoutRatingControl.tsx
@ -8,6 +8,7 @@ import { useReactions } from '../../context/reactions'
 import { Popup } from '../_shared/Popup'
 import { VotersList } from '../_shared/VotersList'
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'

 interface ShoutRatingControlProps {
  shout: Shout
@ -80,17 +81,14 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
  }

  return (
-    <div
-      class={clsx(styles.rating, props.class, {
-        [styles.isUpvoted]: isUpvoted(),
-        [styles.isDownvoted]: isDownvoted()
-      })}
-    >
-      <button
-        class={clsx(styles.ratingControl, styles.downvoteButton)}
-        onClick={() => handleRatingChange(false)}
-      >
-        &minus;
+    <div class={clsx(styles.rating, props.class)}>
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(false)}>
+        <Show when={!isDownvoted()}>
+          <Icon name="rating-control-less" />
+        </Show>
+        <Show when={isDownvoted()}>
+          <Icon name="rating-control-checked" />
+        </Show>
      </button>

      <Popup trigger={<span class={styles.ratingValue}>{props.shout.stat.rating}</span>} variant="tiny">
@ -100,11 +98,13 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
        />
      </Popup>

-      <button
-        class={clsx(styles.ratingControl, styles.upvoteButton)}
-        onClick={() => handleRatingChange(true)}
-      >
-        +
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(true)}>
+        <Show when={!isUpvoted()}>
+          <Icon name="rating-control-more" />
+        </Show>
+        <Show when={isUpvoted()}>
+          <Icon name="rating-control-checked" />
+        </Show>
      </button>
    </div>
  )
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@ -19,9 +19,11 @@
  }

  .userpic {
+    background-color: white;
    border-radius: 50%;
+    border: 1.5px solid black;
+    color: #000;
    font-size: small;
-    border: 2px solid black;
    text-align: center;
    line-height: 28px;
    min-width: 32px;
@ -34,12 +36,17 @@
    width: 20px !important;
  }

-  a:link {
+  a:link,
+  a:visited {
+    border: none;
    display: block;
    height: 100%;
-    padding: 0;
+    padding: 0 !important;
+    text-align: center;
+    width: 100%;

    &:hover {
+      background: none;
      color: #000;
    }
  }
@ -78,6 +85,8 @@

 .feedMode {
  .userpic {
+    font-size: 0.8rem;
+    line-height: 14px;
    min-width: 16px;
    max-width: 16px;
  }
--- a/src/components/Discours/Hero.scss
+++ b/src/components/Discours/Hero.scss
@ -28,11 +28,13 @@
  .button {
    border: 3px solid;
    border-radius: 1.2em;
+    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 0.8rem;
    margin-bottom: 0.8em;
+    padding-bottom: 0.6rem;
    transition: all 0.2s;

    &:hover {
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@ -56,7 +56,16 @@
  padding-top: 2.4rem;
 }

+.shoutCardLinkWrapper {
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
 .shoutCardTitlesContainer {
+  &.shoutCardTitlesContainerFeedMode {
+    margin-bottom: 1.4rem;
+  }
+
  a:link {
    border: none;

@ -71,7 +80,7 @@
    }

    &:hover {
-      .shoutCardTitle .shoutCardLinkContainer {
+      .shoutCardTitle .shoutCardLinkWrapper {
        background-color: var(--default-color);
        color: var(--link-hover-color);
      }
@ -166,7 +175,7 @@

  .shoutCardTitlesContainerFeedMode & {
    @include font-size(3.2rem);
-    line-height: 1.25;
+    line-height: 1.1;
  }
 }

@ -246,6 +255,7 @@
      background: #000;

      .icon {
+        display: inline-block;
        filter: invert(1);
      }
    }
@ -511,6 +521,10 @@

  &:first-child {
    padding: 0 1em 1em 0;
+
+    .shoutCardDetailsItem {
+      margin-right: 2rem;
+    }
  }
 }

--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@ -37,6 +37,7 @@ interface ArticleCardProps {
    isCompact?: boolean
    isSingle?: boolean
    isBeside?: boolean
+    withViewed?: boolean
  }
  article: Shout
 }
@ -123,7 +124,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
          <div class={styles.shoutCardType}>
            <a href={`/expo/${layout}`}>
              <Icon name={layout} class={styles.icon} />
-              <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+              {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
            </a>
          </div>
        </Show>
@ -147,7 +148,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
        >
          <a href={`/${slug || ''}`}>
            <div class={styles.shoutCardTitle}>
-              <span class={styles.shoutCardLinkContainer}>{title}</span>
+              <span class={styles.shoutCardLinkWrapper}>
+                <span class={styles.shoutCardLinkContainer}>{title}</span>
+              </span>
            </div>

            <Show when={!props.settings?.nosubtitle && subtitle}>
@ -195,7 +198,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
              >
                <div class={styles.shoutCardType}>
                  <a href={`/expo/${layout}`}>
-                    <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+                    <Icon name={layout} class={styles.icon} />
+                    {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
                  </a>
                </div>
              </Show>
@ -212,11 +216,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
            <div class={styles.shoutCardDetailsContent}>
              <ShoutRatingControl shout={props.article} class={styles.shoutCardDetailsItem} />

-              <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
-                <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
-                {stat?.viewed}
-              </div>
-
              <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
                <a href="#" onClick={(event) => scrollToComments(event)}>
                  <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
@ -227,6 +226,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
                  <span class={styles.shoutCardLinkContainer}>{stat?.commented || t('Add comment')}</span>
                </a>
              </div>
+
+              <Show when={props.settings?.withViewed}>
+                <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
+                  <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
+                  {stat?.viewed}
+                </div>
+              </Show>
            </div>

            <div class={styles.shoutCardDetailsContent}>
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@ -79,9 +79,10 @@
    display: inline-block;
    line-height: 1;
    height: 2.4rem;
+    margin-bottom: 0.2rem;
    margin-right: 0.8rem;
-    vertical-align: middle;
    text-align: center;
+    vertical-align: middle;
    width: 2.4rem;

    img {
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@ -315,16 +315,15 @@
    cursor: pointer;
    border: 0;

-    .icon {
-      opacity: 0.6;
-      transition: opacity 0.3s;
-    }
-
    &:hover {
      background: none;

      .icon {
-        opacity: 1;
+        display: none;
+      }
+
+      .iconHover {
+        display: block;
      }
    }
  }
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@ -130,16 +130,24 @@ export const Header = (props: Props) => {
                  setIsSharePopupVisible(isVisible)
                }}
                containerCssClass={styles.control}
-                trigger={<Icon name="share-outline" class={styles.icon} />}
+                trigger={
+                  <>
+                    <Icon name="share-outline" class={styles.icon} />
+                    <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
+                  </>
+                }
              />
              <div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
-                <Icon name="comments-outline" class={styles.icon} />
+                <Icon name="comment" class={styles.icon} />
+                <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
              </div>
              <a href={getPagePath(router, 'create')} class={styles.control}>
                <Icon name="pencil-outline" class={styles.icon} />
+                <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
              </a>
              <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
                <Icon name="bookmark" class={styles.icon} />
+                <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
              </a>
            </div>
          </Show>
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics.scss
@ -14,6 +14,7 @@
  .topics {
    display: flex;
    flex-wrap: wrap;
+    font-weight: 500;
    list-style: none;
    margin-top: 0;
    padding: 0 7em 0 0;
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@ -1,5 +1,5 @@
 .feedFilter {
-  margin: 0.2em 0 1.6rem;
+  margin: 0.2em 0 4.8rem;
 }

 .feedNavigation {
@ -98,27 +98,34 @@
    line-height: 1.3;

    li {
-      margin-bottom: 1.2rem;
-      padding-left: 2.6rem;
+      margin-bottom: 1.6rem;
+      padding-left: 3.4rem;
      position: relative;

-      &::before {
-        background: url(/icons/knowledge-base-bullet.svg) no-repeat;
-        content: '';
-        height: 1.6rem;
-        left: 0;
-        position: absolute;
-        width: 2rem;
-      }
-
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

-  a {
+  a:link {
    border: none;
+
+    &::before {
+      background: url(/public/icons/knowledge-base-bullet.svg) no-repeat;
+      content: '';
+      height: 2.4rem;
+      left: 0;
+      position: absolute;
+      top: -0.1em;
+      width: 2.4rem;
+    }
+
+    &:hover {
+      &:before {
+        background-image: url(/public/icons/knowledge-base-bullet-hover.svg);
+      }
+    }
  }
 }

--- a/src/components/_shared/VotersList/VotersList.module.scss
+++ b/src/components/_shared/VotersList/VotersList.module.scss
@ -36,4 +36,8 @@
  .commentRatingNegative {
    color: #d00820;
  }
+
+  .fallbackMessage {
+    font-size: 1.2rem;
+  }
 }
--- a/src/components/_shared/VotersList/VotersList.tsx
+++ b/src/components/_shared/VotersList/VotersList.tsx
@ -16,11 +16,7 @@ export const VotersList = (props: Props) => {
      <ul class={clsx('nodash', styles.users)}>
        <Show
          when={props.reactions.length > 0}
-          fallback={
-            <li class={styles.item}>
-              <small>{props.fallbackMessage}</small>
-            </li>
-          }
+          fallback={<li class={clsx(styles.item, styles.fallbackMessage)}>{props.fallbackMessage}</li>}
        >
          <For each={props.reactions}>
            {(reaction) => (