chore: update share memo image (#482)

web/src/components/MemoResources.tsx

@@ -3,12 +3,24 @@ import Icon from "./Icon";
 import "../less/memo-resources.less";
 
 interface Props {
-  className?: string;
   resourceList: Resource[];
+  className?: string;
+  style?: "row" | "col";
 }
 
+const getDefaultProps = (): Props => {
+  return {
+    className: "",
+    style: "row",
+    resourceList: [],
+  };
+};
+
 const MemoResources: React.FC<Props> = (props: Props) => {
-  const { className, resourceList } = props;
+  const { className, style, resourceList } = {
+    ...getDefaultProps(),
+    ...props,
+  };
   const imageList = resourceList.filter((resource) => resource.type.includes("image"));
   const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
 
@@ -24,7 +36,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   return (
     <div className={`resource-wrapper ${className || ""}`}>
       {imageList.length > 0 && (
-        <div className="images-wrapper">
+        <div className={`images-wrapper ${style}`}>
           {imageList.map((resource, index) => (
             <Image className="memo-img" key={resource.id} imgUrls={imgUrls} index={index} />
           ))}

web/src/components/ShareMemoImageDialog.tsx

@@ -112,7 +112,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-wrapper">
             <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
-            <MemoResources resourceList={memo.resourceList} />
+            <MemoResources style="col" resourceList={memo.resourceList} />
           </div>
           <div className="watermark-container">
             <div className="userinfo-container">

web/src/css/index.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

web/src/less/base-dialog.less

-@import "./mixin.less";
-
 .dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
-  .hide-scroll-bar();
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
 
   &.showup {
     background-color: rgba(0, 0, 0, 0.6);
   }
 
   &.showoff {
-    display: none;
+    @apply hidden;
   }
 
   > .dialog-container {

web/src/less/common-dialog.less

-@import "./mixin.less";
-
 .common-dialog {
   > .dialog-container {
     @apply w-80;

web/src/less/common/selector.less

-@import "../mixin.less";
-
 .selector-wrapper {
   @apply flex flex-col justify-start items-start relative h-8;
 
@@ -26,11 +24,10 @@
   }
 
   > .items-wrapper {
-    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1;
+    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1 hide-scrollbar;
     min-width: calc(100% + 16px);
     max-height: 256px;
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-    .hide-scroll-bar();
 
     > .item-container {
       @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;

web/src/less/daily-memo.less

-@import "./mixin.less";
-
 .daily-memo-wrapper {
   @apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;
 

web/src/less/daily-review-dialog.less

-@import "./mixin.less";
-
 .daily-review-dialog {
   @apply p-0 sm:py-16;
 

web/src/less/editor.less

-@import "./mixin.less";
-
 .common-editor-wrapper {
   @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
 
   > .common-editor-inputer {
     @apply w-full h-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
     max-height: 300px;
-    .pretty-scroll-bar(2px, 0);
 
     &::placeholder {
       padding-left: 2px;

web/src/less/global.less

-@import "./mixin.less";
-
 body,
 html {
   @apply text-base;

web/src/less/home.less

-@import "./mixin.less";
-
 .page-wrapper.home {
   @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
   background-color: #f6f5f4;

web/src/less/image.less

-@import "./mixin.less";
-
 .image-container {
   width: 200px;
   height: auto;
   overflow-y: scroll;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  .pretty-scroll-bar(2px, 0);
 
   > img {
-    margin: auto;
-    width: 100%;
-    height: auto;
+    @apply m-auto w-full h-auto;
   }
 }

web/src/less/memo-content.less

-@import "./mixin.less";
-
 .memo-content-wrapper {
   @apply w-full flex flex-col justify-start items-start;
 

web/src/less/memo-list.less

-@import "./mixin.less";
-
 .memo-list-container {
-  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36;
-  .hide-scroll-bar();
+  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36 hide-scrollbar;
 
   > .status-text-container {
     @apply flex flex-col justify-start items-center w-full my-6;

web/src/less/memo-resources.less

-@import "./mixin.less";
-
 .resource-wrapper {
   @apply w-full flex flex-col justify-start items-start;
 
   > .images-wrapper {
-    @apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
+    @apply w-full flex mt-2 pb-1;
 
     > .memo-img {
-      @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
-      .hide-scroll-bar();
+      @apply w-auto h-auto shrink-0 grow-0;
 
       > img {
-        @apply w-auto max-h-40 rounded;
+        @apply rounded;
+      }
+    }
+
+    &.row {
+      @apply flex-row justify-start items-start overflow-x-auto overflow-y-hidden;
+
+      > .memo-img {
+        @apply mr-2 last:mr-0;
+
+        > img {
+          @apply w-auto max-h-40;
+        }
+      }
+    }
+
+    &.col {
+      @apply flex-col justify-start items-start;
+
+      > .memo-img {
+        @apply w-full h-auto shrink-0 mb-2 last:mb-0 hide-scrollbar;
+
+        > img {
+          @apply w-full h-auto;
+        }
       }
     }
   }

web/src/less/memo.less

-@import "./mixin.less";
-
 .memo-wrapper {
   @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 

web/src/less/memos-header.less

-@import "./mixin.less";
-
 .section-header-container,
 .memos-header-container {
   @apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-1;

web/src/less/mixin.less

-.hide-scroll-bar {
-  .pretty-scroll-bar(0, 0);
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.pretty-scroll-bar(@width: 0px, @height: 0px) {
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: @width;
-    height: @height;
-    cursor: pointer;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    width: @width;
-    height: @height;
-    border-radius: 8px;
-    background-color: #d5d5d5;
-
-    &:hover {
-      background-color: #ccc;
-    }
-  }
-}

web/src/less/preview-image-dialog.less

-@import "./mixin.less";
-
 .preview-image-dialog {
   @apply p-0;
   z-index: 101;
@@ -22,9 +20,8 @@
     }
 
     > .img-container {
-      @apply w-full h-full p-4 flex flex-col justify-center items-center;
+      @apply w-full h-full p-4 flex flex-col justify-center items-center hide-scrollbar;
       background-color: unset;
-      .hide-scroll-bar();
 
       > img {
         @apply h-auto w-auto max-w-full max-h-full shadow;

web/src/less/resources-dialog.less

-@import "./mixin.less";
-
 .resources-dialog {
   @apply px-4;
 

web/src/less/search-bar.less

-@import "./mixin.less";
-
 .search-bar-container {
   @apply relative w-auto;
 

web/src/less/setting-dialog.less

-@import "./mixin.less";
-
 .setting-dialog {
   @apply px-4;
 
@@ -7,8 +5,7 @@
     @apply w-180 max-w-full mb-8 p-0;
 
     > .dialog-content-container {
-      @apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0;
-      .hide-scroll-bar();
+      @apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0 hide-scrollbar;
 
       > .close-btn {
         @apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded bg-white hover:bg-gray-200 hover:shadow;
@@ -39,8 +36,7 @@
       }
 
       > .section-content-container {
-        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
-        .hide-scroll-bar();
+        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll hide-scrollbar;
 
         > .section-container {
           @apply flex flex-col justify-start items-start w-full my-2;

web/src/less/share-memo-image-dialog.less

-@import "./mixin.less";
-
 .share-memo-image-dialog {
   > .dialog-container {
     @apply w-96 p-0 bg-gray-200;

web/src/less/shortcut-list.less

-@import "./mixin.less";
-
 .shortcuts-wrapper {
-  @apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap;
-  .hide-scroll-bar();
+  @apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
 
   > .title-text {
     @apply flex flex-row justify-start items-center w-full px-4;

web/src/less/siderbar.less

-@import "./mixin.less";
-
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain;
-  .hide-scroll-bar();
+  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
 
   &.show {
     @apply translate-x-0 shadow-2xl sm:shadow-none;

web/src/less/tag-list.less

-@import "./mixin.less";
-
 .tags-wrapper {
-  @apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow;
-  .hide-scroll-bar();
+  @apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
 
   > .title-text {
     @apply w-full px-4 text-sm leading-6 font-mono text-gray-400;