fix: Function list sidebar being expanded by the items inside

nocpiun · Aug 11, 2024 · 6ade7ad · 6ade7ad · github-actions · Aug 11, 2024
1 parent 6a4f4b3
commit 6ade7ad
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/src/components/sidebar/FunctionListItem.tsx b/src/components/sidebar/FunctionListItem.tsx
@@ -54,7 +54,10 @@ const FunctionListItem: React.FC<ListItemProps> = (props) => {
                     <span><InlineMath>{(props.mode === FunctionInputtingType.NORMAL ? "y" : "\\rho") +"_{"+ (props.index + 1).toString() +"} ="}</InlineMath></span>
                 </div>
                 <div className="function-list-item-value">
-                    <span><InlineMath>{props.value}</InlineMath></span>
+                    <span>
+                        <InlineMath>{props.value}</InlineMath>
+                        <div className="function-list-item-value-shadow"/>
+                    </span>
                 </div>
 
                 <div className="function-list-item-buttons">

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -54,7 +54,7 @@ const Sidebar: React.FC = () => {
     }, [sidebarOpen]);
 
     return (
-        <aside className={"sidebar-container"+ (sidebarOpen ? " open" : "")} style={!Utils.isMobile() ? { width } : {}}>
+        <aside className={"sidebar-container"+ (sidebarOpen ? " open" : "")} style={!Utils.isMobile() ? { minWidth: width, maxWidth: width } : {}}>
             {/* Mobile only */}
             {<div className="mobile-control-panel">
                 <div className="sidebar-title">

diff --git a/src/style/calculator/mixin.less b/src/style/calculator/mixin.less
@@ -147,13 +147,11 @@
     overflow-y: auto;
     .scrollbar-style();
     &-item {
-        @transition-delay: 90ms;
         display: flex;
         height: 25px;
         margin: 3px 20px;
         padding: 3px 7px;
         border-radius: 5px;
-        transition: background-color @transition-delay ease;
         animation: function-item-added 100ms ease;
         animation-iteration-count: 1;
         &-tag {
@@ -163,9 +161,20 @@
         }
         &-value {
             flex: 5;
+            width: 100%;
             display: flex;
             align-items: center;
             color: var(--ca-gray-light);
+            overflow: hidden;
+            position: relative;
+            &-shadow {
+                width: 30px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(to left, var(--ca-light2), transparent);
+            }
         }
         &-buttons {
             flex: .5;
@@ -181,7 +190,6 @@
                     width: 19px;
                     height: 19px;
                     margin-top: 3px;
-                    transition: fill @transition-delay ease;
                     cursor: pointer;
                 }
             }
@@ -194,6 +202,9 @@
             .function-list-item-buttons svg:hover {
                 fill: var(--ca-gray1);
             }
+            .function-list-item-value .function-list-item-value-shadow {
+                background: linear-gradient(to left, var(--ca-gray9), transparent);
+            }
         }
     }
 }

diff --git a/src/style/sidebar.less b/src/style/sidebar.less
@@ -1,7 +1,9 @@
 .sidebar-container {
     display: flex;
     flex-direction: row;
+    overflow: hidden;
     .border-line(top);
+    .border-line(right);
     .mobile-control-panel {
         display: none;
         flex-direction: column;
@@ -99,10 +101,11 @@
     }
     .ka-wrapper {
         flex: 4;
+        width: 100%;
         background-color: var(--ca-light2);
         position: relative;
-        .border-line(right);
         .ka-content {
+            width: 100%;
             height: 100%;
             .sidebar-page {
                 display: flex;
@@ -287,4 +290,7 @@
     .sash {
         height: calc(100% - 26px - 40px);
     }
+    &:has(.sidebar-page#function-list) {
+        z-index: 1;
+    }
 }
diff --git a/src/style/theme.less b/src/style/theme.less
@@ -20,9 +20,8 @@ body[theme=light] {
         }
     }
 
-    .sidebar-container .ka-wrapper:has(.sidebar-page#function-list) {
+    .sidebar-container:has(.sidebar-page#function-list) {
         box-shadow: 3px 0 10px -2px rgba(0, 0, 0, 0.1);
-        z-index: 1;
     }
 
     .calculator-container .output-container .number-box-list .number-box.active * {