feat(story-selector): restyle story images layout

ubilabs · Sep 9, 2020 · 38a0ebd · 38a0ebd
1 parent b637e5b
commit 38a0ebd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/scripts/components/stories/story-list-item/story-list-item.styl b/src/scripts/components/stories/story-list-item/story-list-item.styl
@@ -1,6 +1,6 @@
 @require '../../../../variables.styl'
 
-.storyItem
+.storyListItem
   display: flex
   flex-direction: column
   justify-content: flex-end
@@ -29,17 +29,25 @@
   text-align: center
   line-height: 30px
 
-.imageInfo
+.image
+  height: 220px
+  background: black
+  background-position: center
+  background-size: cover
+
+.info
   overflow-y: auto
   box-sizing: border-box
   padding: emCalc(16px)
-  min-height: 50%
+  min-height: 45%
   width: 100%
   height: fit-content
   border-bottom-right-radius: 2px
   border-bottom-left-radius: 2px
   background-color: $darkGrey1
-  opacity: 0.95
+
+.storyListItem:hover .info
+  background-color: lighten($darkGrey1, 5)
 
 .title
   margin: 0

diff --git a/src/scripts/components/stories/story-list-item/story-list-item.tsx b/src/scripts/components/stories/story-list-item/story-list-item.tsx
@@ -29,7 +29,7 @@ const StoryListItemContent: FunctionComponent<Props> = ({
   onSelectStory
 }) => {
   const classes = cx(
-    styles.storyItem,
+    styles.storyListItem,
     mode === StoryMode.Present && styles.present,
     selectedIndex >= 0 && styles.selected
   );
@@ -41,13 +41,15 @@ const StoryListItemContent: FunctionComponent<Props> = ({
 
   return (
     <div
-      style={{backgroundImage: `url(${imageUrl})`}}
       className={classes}
       onClick={() => mode === StoryMode.Showcase && onSelectStory(story.id)}>
       {selectedIndex >= 0 && (
         <div className={styles.storyNumber}>{selectedIndex + 1}</div>
       )}
-      <div className={styles.imageInfo}>
+      <div
+        className={styles.image}
+        style={{backgroundImage: `url(${imageUrl})`}}></div>
+      <div className={styles.info}>
         <p className={styles.title}>{story.title}</p>
         <p className={styles.description}>{story.description}</p>
         {story.tags && <StoryTags tags={story.tags} selected={selectedTags} />}

diff --git a/src/scripts/components/stories/story-list/story-list.styl b/src/scripts/components/stories/story-list/story-list.styl
@@ -9,7 +9,7 @@
   display: grid
   padding: emCalc(20px)
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
-  grid-auto-rows: 300px
+  grid-auto-rows: 340px
   grid-gap: 16px
 
 .present

diff --git a/src/scripts/components/stories/story-tags/story-tags.styl b/src/scripts/components/stories/story-tags/story-tags.styl
@@ -19,6 +19,7 @@
   cursor: pointer
 
   &:hover
+    border-color: lighten($darkGrey4, 10)
     background: $darkGrey2
 
 .selected, .selected:hover