some css cleanup

ui/js/page/discover/view.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import lbryio from "lbryio.js";
 import lbryuri from "lbryuri";
 import FileCard from "component/fileCard";
 import { Icon, BusyMessage } from "component/common.js";
@@ -150,31 +149,9 @@ class FeaturedCategory extends React.PureComponent {
 
   render() {
     const { category, names } = this.props;
-    const leftNavClassName =
-      "card-row__nav left-nav" +
-      (this.state.canScrollPrevious ? " can-scroll" : "");
-    const rightNavClassName =
-      "card-row__nav right-nav" +
-      (this.state.canScrollNext ? " can-scroll" : "");
 
     return (
       <div className="card-row card-row--small">
-        <div className={leftNavClassName}>
-          <a
-            className="card-row__scroll-button"
-            onClick={this.handleScrollPrevious.bind(this)}
-          >
-            <Icon icon="icon-chevron-left" />
-          </a>
-        </div>
-        <div className={rightNavClassName}>
-          <a
-            className="card-row__scroll-button"
-            onClick={this.handleScrollNext.bind(this)}
-          >
-            <Icon icon="icon-chevron-right" />
-          </a>
-        </div>
         <h3 className="card-row__header">
           {category}
           {category &&
@@ -187,15 +164,35 @@ class FeaturedCategory extends React.PureComponent {
               className="tooltip--header"
             />}
         </h3>
-        <div ref="rowitems" className="card-row__items">
+        <div className="card-row__scrollhouse">
-          {names &&
+          {this.state.canScrollPrevious &&
-            names.map(name =>
+            <div className="card-row__nav card-row__nav--left">
-              <FileCard
+              <a
-                key={name}
+                className="card-row__scroll-button"
-                displayStyle="card"
+                onClick={this.handleScrollPrevious.bind(this)}
-                uri={lbryuri.normalize(name)}
+              >
-              />
+                <Icon icon="icon-chevron-left" />
-            )}
+              </a>
+            </div>}
+          {this.state.canScrollNext &&
+            <div className="card-row__nav card-row__nav--right">
+              <a
+                className="card-row__scroll-button"
+                onClick={this.handleScrollNext.bind(this)}
+              >
+                <Icon icon="icon-chevron-right" />
+              </a>
+            </div>}
+          <div ref="rowitems" className="card-row__items">
+            {names &&
+              names.map(name =>
+                <FileCard
+                  key={name}
+                  displayStyle="card"
+                  uri={lbryuri.normalize(name)}
+                />
+              )}
+          </div>
         </div>
       </div>
     );

ui/scss/_global.scss

@@ -31,8 +31,8 @@ $max-text-width: 660px;
 $width-page-constrained: 800px;
 $width-input-text: 330px;
 
-$height-header: $spacing-vertical * 2.5;
 $height-button: $spacing-vertical * 1.5;
+$height-header: $spacing-vertical * 2.5;
 $height-video-embedded: $width-page-constrained * 9 / 16;
 
 $box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

ui/scss/component/_card.scss

@@ -2,6 +2,7 @@
 
 $padding-card-horizontal: $spacing-vertical * 2/3;
 $translate-card-hover: 10px;
+$width-card-small: $spacing-vertical * 10;
 
 .card {
   margin-left: auto;
@@ -58,9 +59,10 @@ $translate-card-hover: 10px;
   margin-top: $spacing-vertical * 2/3;
   margin-bottom: $spacing-vertical * 2/3;
 }
+$font-size-subtext-multiple: 0.82;
 .card__subtext {
   color: $color-meta-light;
-  font-size: 0.82em;
+  font-size: $font-size-subtext-multiple * 1.0em;
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
@@ -68,7 +70,7 @@ $translate-card-hover: 10px;
   white-space: pre-wrap;
 }
 .card__subtext--two-lines {
-  height: $font-size * 0.82 * $font-line-height * 2; /*this is so one line text still has the proper height*/
+  height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
 }
 .card-overlay {
   position: absolute;
@@ -156,8 +158,7 @@ $card-link-scaling: 1.1;
   top: 36%
 }
 
-$width-card-small: $spacing-vertical * 10;
+
-$height-card-small: $spacing-vertical * 15;
 
 .card--small {
   width: $width-card-small;
@@ -191,44 +192,41 @@ $height-card-small: $spacing-vertical * 15;
     margin-top: $spacing-vertical * 1/3;
   }
 }
-.card-row__items {
+$padding-top-card-hover-hack: 20px;
-  > .card {
-    vertical-align: top;
-    display: inline-block;
-    margin-right: $spacing-vertical / 3;
-  }
-  > .card:last-child {
-    margin-right: 0
-  }
-}
-.card-row--small {
-  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-
-  /*hacky way to give space for hover */
-  padding-right: 30px;
-}
 .card-row__items {
   width: 100%;
   overflow: hidden;
 
   /*hacky way to give space for hover */
-  padding-top: 20px;
+  padding-top: $padding-top-card-hover-hack;
-  margin-top: -20px;
+  margin-top: -1 * $padding-top-card-hover-hack;
   padding-right: 30px;
   margin-right: -30px;
+  > .card {
+    vertical-align: top;
+    display: inline-block;
+  }
+  > .card + .card {
+    margin-left: $spacing-vertical / 3;
+  }
+}
+.card-row--small {
+  overflow: hidden;
+  white-space: nowrap;
 }
 .card-row__header {
   margin-bottom: $spacing-vertical / 3;
 }
 
+.card-row__scrollhouse {
+  position: relative;
+}
+
 .card-row__nav {
-  display: none;
   position: absolute;
-  padding: 0 $spacing-vertical / 1.5;
+  padding: 0 $spacing-vertical * 2 / 3;
-  top: ($font-size * 1.4 * $font-line-height) + ($spacing-vertical / 3);
+  height: 100%;
-  height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3)
+  top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
 }
 .card-row__nav .card-row__scroll-button {
   background: $color-bg;
@@ -240,7 +238,7 @@ $height-card-small: $spacing-vertical * 15;
   left: 0;
   top: 36%;
   z-index: 2;
-  opacity: 0.5;
+  opacity: 0.8;
   transition: transform 60ms ease-in-out;
 
   &:hover {
@@ -248,12 +246,9 @@ $height-card-small: $spacing-vertical * 15;
     transform: scale($card-link-scaling * 1.1)
   }
 }
-.card-row__nav.left-nav {
+.card-row__nav--left {
   left: 0;
 }
-.card-row__nav.right-nav {
+.card-row__nav--right {
   right: 0;
 }
-.card-row__nav.can-scroll {
-  display: block
-}