Small adjustments to masonry layout

mdyna · Apr 14, 2019 · 20fa030 · 20fa030
1 parent 95d4996
commit 20fa030
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -35,7 +35,7 @@
           ["Utils","./app/utils"],
           ["UI", "./app/components/UI"]
         ],
-        "extensions": [".jsx", ".ks"]
+        "extensions": [".jsx", ".js"]
       }
     }
   }

diff --git a/app/components/Cards/CardItem.jsx b/app/components/Cards/CardItem.jsx
@@ -45,7 +45,7 @@ function minimizeCard(card) {
   card.setState({
     minimized: (card && card.state && !card.state.minimized) || false,
   });
-  setTimeout(() => card.scrollToCard(), 500);
+  setTimeout(() => card.scrollToCard(), 600);
 }
 
 class MdynaCard extends PureComponent {

diff --git a/app/components/Cards/CardItem.scss b/app/components/Cards/CardItem.scss
@@ -10,6 +10,7 @@ $code-background: #08090a;
   border-radius: 10px;
   flex-flow: column nowrap !important;
   outline: none !important;
+  transition: all 0.3s ease;
 
   @include breakpoint(small) {
     width: 250px !important;
@@ -24,7 +25,8 @@ $code-background: #08090a;
     width: 450px !important;
   }
   &.expanded {
-    width: 600px !important;
+    width: fit-content !important;
+    min-width: 450px;
     max-width: 100% !important;
   }
 

diff --git a/app/components/Cards/CardList.jsx b/app/components/Cards/CardList.jsx
@@ -9,8 +9,8 @@ import Heading from 'grommet/components/Heading';
 import Button from 'grommet/components/Button';
 import Pulse from 'grommet/components/icons/base/Add';
 import classnames from 'classnames';
-import CardEditor from '../../containers/CardEditor';
-import CardItem from '../../containers/CardItem';
+import CardEditor from 'Containers/CardEditor';
+import CardItem from 'Containers/CardItem';
 
 import './CardList.scss'; // eslint-disable-line
 
@@ -45,8 +45,7 @@ export default class CardList extends Component {
 
   renderVisibleCards() {
     const cards = this.props.cards.filter((d) => {
-      const matchesSearchInput =
-        d.title && d.title.toLowerCase().startsWith(this.props.searchInput.toLowerCase());
+      const matchesSearchInput = d.title && d.title.toLowerCase().startsWith(this.props.searchInput.toLowerCase());
       const matchesLabelFilters = this.matchNoteLabelsWithLabelFilter(
         d.labels && d.labels.map(label => label.title),
       );
@@ -87,9 +86,12 @@ export default class CardList extends Component {
               <Masonry
                 options={{
                   fitWidth: true,
+                  horizontalOrder: true,
+                  transitionDuration: 300,
+                  resize: true,
                 }}
                 enableResizableChildren
-                elementType={'ul'}
+                elementType="ul"
               >
                 {cardItems}
               </Masonry>