Take aspect ratio into consideration. (#3728)

mozilla-services · Nov 22, 2017 · d7d2bbe · d7d2bbe
1 parent ea021a9
commit d7d2bbe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -304,7 +304,7 @@ class Card extends React.Component {
     }
 
     return (
-      <div className={`shot ${this.state.panelOpen} ${this.isDeleted()}`} key={shot.id}>
+      <div className={`shot ${this.getClipType(clip._image.dimensions)} ${this.state.panelOpen} ${this.isDeleted()}`} key={shot.id}>
         <a href={shot.viewUrl} onClick={this.onOpen.bind(this, shot.viewUrl)}>
           <div className="shot-image-container">
             <img src={imageUrl} />
@@ -335,6 +335,13 @@ class Card extends React.Component {
     );
   }
 
+  getClipType(dimensions) {
+    if ((dimensions.x / dimensions.y) > (4 / 3)) {
+      return "landscape";
+    }
+    return "portrait";
+  }
+
   setPanelState(state) {
     this.setState({panelOpen: state});
   }

diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss
@@ -160,10 +160,18 @@ h1 {
   .shot-image-container {
     background-size: cover;
     box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
-    min-height: 140px;
     max-height: 280px;
+    max-width: 210px;
     overflow: hidden;
+  }
+
+  &.landscape .shot-image-container {
+    img {
+      max-height: 280px;
+    }
+  }
 
+  &.portrait .shot-image-container {
     img {
       width: 210px;
     }