[薪資解鎖] 樣式更新 (#1091)

* One lock per row * Update style * Remove margin-right to the icon * Fix padding on small devices * Fix lint * Add comments
goodjoblife · May 4, 2023 · 5730c86 · 5730c86
1 parent 2bcf9c4
commit 5730c86
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 34 deletions.
diff --git a/src/components/TimeAndSalary/common/injectHideContentBlock.js b/src/components/TimeAndSalary/common/injectHideContentBlock.js
@@ -8,6 +8,9 @@ export default hideRange => rows => {
   const hideIndex = hideRange[0];
   const nHides = hideRange.length;
   const shareLink = useShareLink();
+
+  // Replace original cells with locked cells
+  // on small screens
   rows.forEach(row => {
     row.props.children.splice(
       hideIndex,
@@ -26,21 +29,21 @@ export default hideRange => rows => {
       }),
     );
   });
+
+  // Add locked cells on regular screens
+  // that spans multiple columns
   if (rows.length > 0) {
-    rows[0].props.children.splice(
-      hideIndex,
-      0,
-      <td
-        key="__hideContent"
-        colSpan={nHides}
-        rowSpan={rows.length}
-        className={styles.cell}
-      >
-        <BasicPermissionSimpleBlock
-          to={shareLink}
-          rootClassName={styles.hideContentBlock}
-        />
-      </td>,
-    );
+    for (let i = 0; i < rows.length; i++) {
+      rows[i].props.children.splice(
+        hideIndex,
+        0,
+        <td key="__hideContent" colSpan={nHides} className={styles.cell}>
+          <BasicPermissionSimpleBlock
+            to={shareLink}
+            rootClassName={styles.hideContentBlock}
+          />
+        </td>,
+      );
+    }
   }
 };
diff --git a/src/components/TimeAndSalary/common/injectHideContentBlock.module.css b/src/components/TimeAndSalary/common/injectHideContentBlock.module.css
@@ -1,26 +1,31 @@
+@value below-small, above-small from "common/variables.module.css";
+
 td.cell {
   position: relative;
 
   .hideContentBlock {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 13px;
+    left: 13px;
+    right: 13px;
+    bottom: 13px;
     display: flex;
-    @media (max-width: 850px) {
+    @media (max-width: below-small) {
+      top: 3px;
       left: 120px;
+      right: 3px;
+      bottom: 3px;
     }
   }
 
-  @media (max-width: 850px) {
+  @media (max-width: below-small) {
     display: none !important;
   }
 
   &.mobile {
     display: flex !important;
 
-    @media (min-width: 850px) {
+    @media (min-width: above-small) {
       display: none !important;
     }
   }

diff --git a/src/components/common/PermissionBlock/PermissionBlock.module.css b/src/components/common/PermissionBlock/PermissionBlock.module.css
@@ -1,4 +1,4 @@
-@value above-small, below-small, link-blue from "common/variables.module.css";
+@value above-small, below-small, above-desktop, main-yellow, link-blue from "common/variables.module.css";
 
 .permissionBlock {
   display: inline-block;
@@ -15,9 +15,8 @@
 }
 
 .permissionSimpleBlock {
-  border: 1px solid #fcd406;
-  border-radius: 0px;
-  background-color: #fffbe8;
+  border: 1px solid main-yellow;
+  border-radius: 4px;
 
   .container {
     max-width: 500px;
@@ -28,7 +27,7 @@
 .simple {
   cursor: pointer;
 
-  @media (min-width: 1025px) {
+  @media (min-width: above-desktop) {
     &:hover {
       .headingIcon {
         color: link-blue;
@@ -67,12 +66,7 @@
 
 .headingIcon {
   display: inline;
-  font-size: 24px;
-  margin-right: 10px;
-
-  @media (max-width: 850px) {
-    font-size: 16px;
-  }
+  font-size: 16px;
 }
 
 .heading {
@@ -84,7 +78,7 @@
   justify-content: space-around;
   flex-wrap: nowrap;
 
-  @media (max-width: 850px) {
+  @media (max-width: above-small) {
     flex-direction: column;
     height: 8rem;
     align-items: center;