Fix layout for header & image carousel.

[#118047299] [#118047319] https://www.pivotaltracker.com/story/show/118047299 https://www.pivotaltracker.com/story/show/118047319
concord-consortium · Apr 20, 2016 · e7facc7 · e7facc7
1 parent dbf19ee
commit e7facc7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 44 deletions.
diff --git a/css/button.less b/css/button.less
@@ -5,7 +5,7 @@
   font-size: .9em;
   font-weight: normal;
   margin: 0;
-  padding: .3125em .625em;
+  padding: .25em;
   text-align: center;
   text-decoration: none;
   border-radius: .1875em;

diff --git a/css/image-question-details.less b/css/image-question-details.less
@@ -20,48 +20,40 @@
       width: 50px;
     }
 
-    .horizontal-slide-container {
+    .slide-container {
       background: #f3f3f3;
       display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: flex-start;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
       overflow: hidden;
-      flex-wrap: nowrap;
+      height: 410px;
       img {
-        margin: 1em;
+        margin-top: 1em;
         width: 300px;
         display: block;
+        flex-grow: 4;
       }
-
-      .info {
-        margin: 1em;
-        margin-right: 0em;
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
-        align-items: flex-start;
+      .author {
+        font-style: italic;
+        font-size: 10pt;
+        margin: 0.5em;
+        flex-grow: 1;
+      }
+      .note {
+        width: 300px;
+        height: 80%;
+        overflow: scroll;
+        margin-top: 1em;
+        padding: 0.5em;
         align-self: stretch;
-        .author {
-          font-style: italic;
-          font-size: 10pt;
-          margin-bottom: 1em;
-          align-self: flex-end;
-          text-align: right;
-        }
-        .note {
-          width: 300px;
-          padding: 0.5em;
-          align-self: stretch;
-          font-style: normal;
-          font-weight: normal;
-          border-radius: 2px;
-          font-size: 10pt;
-          flex-grow: 2;
-          background-color: white;
-        }
+        font-style: normal;
+        font-weight: normal;
+        border-radius: 2px;
+        font-size: 10pt;
+        background-color: white;
       }
-
     }
 
     .thumb.selected, .thumb:hover {

diff --git a/css/report.less b/css/report.less
@@ -17,6 +17,7 @@
       padding-right: 5%;
       .report-header {
         padding-top: 4px;
+        padding-right: 10%;
       }
     }
     &.main {
@@ -42,15 +43,15 @@
     flex-wrap: nowrap;
     flex-direction: row;
     justify-content: space-between;
-    margin-right: 10%;
     height: 40px;
     .controls {
+      white-space: nowrap;
       @media print {
         display: none;
       }
 
       a, select {
-        margin: 0 0.5em;
+        margin: 0 0.25em;
       }
 
       select {

diff --git a/css/variables.less b/css/variables.less
@@ -1,4 +1,4 @@
 @color: #3f3f3f;
 @font: 16px verdana, helvetica, sans-serif;
-@report-width: 85%;
-@min-report-width: 30em;
+@report-width: 90%;
+@min-report-width: 40em;
diff --git a/js/components/image-question-details.js b/js/components/image-question-details.js
@@ -14,14 +14,12 @@ function renderNote(note) {
   return ""
 }
 function renderImage(src, author, key, note) {
-  const className = (note && note.length > 0) ? "horizontal-slide-container" : "vertical-slide-container"
+  const className = (note && note.length > 0) ? "slide-container" : "slide-container vertical"
   return (
-    <div className="horizontal-slide-container"  key={key}>
-      <div className="info">
-        <div className="author">{author} </div>
-        {renderNote(note)}
-      </div>
+    <div className={className} key={key}>
       <img src={src}/>
+      <div className="author">{author} </div>
+      {renderNote(note)}
     </div>
   )
 }