Merge pull request #624 from plebbit/master

Development

src/components/catalog-row/catalog-row.module.css

@@ -13,7 +13,11 @@
   padding: 10px 0 3px 0;
   vertical-align: top;
   display: inline-block;
+}
+
+.postContent {
   overflow: hidden;
+  max-height: 155px;
 }
 
 .large {
@@ -145,4 +149,15 @@
 
 .postPreview .capcode {
   color: var(--catalog-post-preview-author-capcode-color);
-}
+}
+
+.xmasHat {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  left: -10px;
+  margin-top: -55px;
+  z-index: 999;
+  box-shadow: none !important;
+}

src/components/catalog-row/catalog-row.tsx

@@ -19,6 +19,7 @@ import styles from './catalog-row.module.css';
 import _ from 'lodash';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
+import { shouldShowSnow } from '../../lib/snow';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -228,27 +229,30 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <span className={styles.hiddenThumbnail} />
             </Link>
           ) : hasThumbnail ? (
-            <Link to={postLink}>
-              <div
-                className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
-                ref={refs.setReference}
-                onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
-                onMouseLeave={() => {
-                  setShowPortal(false);
-                  if (timeoutRef.current) {
-                    clearTimeout(timeoutRef.current);
-                    timeoutRef.current = null;
-                  }
-                }}
-              >
-                {threadIcons}
-                {spoiler ? (
-                  <img src='assets/spoiler.png' alt='' />
-                ) : (
-                  <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
-                )}
-              </div>
-            </Link>
+            <>
+              {shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} alt='' />}
+              <Link to={postLink}>
+                <div
+                  className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
+                  ref={refs.setReference}
+                  onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
+                  onMouseLeave={() => {
+                    setShowPortal(false);
+                    if (timeoutRef.current) {
+                      clearTimeout(timeoutRef.current);
+                      timeoutRef.current = null;
+                    }
+                  }}
+                >
+                  {threadIcons}
+                  {spoiler ? (
+                    <img src='assets/spoiler.png' alt='' />
+                  ) : (
+                    <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
+                  )}
+                </div>
+              </Link>
+            </>
           ) : (
             threadIcons
           )}
@@ -264,7 +268,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <PostMenuDesktop post={post} />
             </span>
           </div>
-          {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
+          <div className={styles.postContent}>{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}</div>
         </div>
       </div>
       {(hoveredCid === cid || isDescription) &&

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -74,7 +74,7 @@ const Style = () => {
   const today = new Date();
   const month = today.getMonth();
   const day = today.getDate();
-  const isChristmas = month === 11 && (day === 24 || day === 25);
+  const isChristmas = (month === 11 && day >= 24) || (month === 0 && day <= 5);
 
   const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newTheme = e.target.value;

src/hooks/use-theme.ts

@@ -42,7 +42,7 @@ const useTheme = (): [string, (theme: string) => void] => {
     const today = new Date();
     const month = today.getMonth();
     const day = today.getDate();
-    const isChristmas = month === 11 && (day === 24 || day === 25);
+    const isChristmas = (month === 11 && day >= 24) || (month === 0 && day <= 5);
     const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
 
     if (isChristmas && isEnabled === null && subplebbitAddress && !isInAllView && !isInSubscriptionsView) {

src/lib/snow.ts

@@ -102,5 +102,5 @@ export const shouldShowSnow = (): boolean => {
   const today = new Date();
   const month = today.getMonth();
   const day = today.getDate();
-  return month === 11 && (day === 24 || day === 25);
+  return (month === 11 && day >= 24) || (month === 0 && day <= 5);
 };

src/views/board/board.module.css

@@ -1,7 +1,3 @@
-.content {
-  overflow: hidden;
-}
-
 .footer {
   color: var(--post-mobile-abbr-text-color);
   padding: 15px 0 20px 5px;

src/views/post/post.module.css

@@ -1,6 +1,6 @@
 .content {
   margin-bottom: 15px;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .error {