New subject viewer layout

app/classify/subject-tools.cjsx

@@ -15,7 +15,7 @@ module.exports = React.createClass
   render: ->
     <div>
       <div className="drawing-controls">
-        <h2>{@props.subject_set.metadata.BOROUGH} {@props.subject_set.metadata.Date} ({@props.subject_set.display_name})</h2>
+        <h2>{@props.subject_set.metadata.BOROUGH} {@props.subject_set.metadata.Date} ({@props.subject_set.display_name}) {<span>Page {@props.subject.metadata.page}</span> if @props.subject?}</h2>
         <span className="tools">
           <label className="readymade-has-clickable"> 
             <input type="checkbox" name="examples" checked={!@state.fieldGuideHidden} onChange={@toggleFieldGuide} /> 

app/classify/subject-viewer.cjsx

@@ -20,7 +20,6 @@ module.exports = React.createClass
     image = @mediaSrcs['image/jpeg']
     <div className={classList.join ' '}>
       <div className="text-viewer">
-        <h3>Page {@props.subject.metadata.page}</h3>
         <div data-subject={@props.subject.id}>{@state.text}</div>
       </div>
       <div className="subject-image">

css/custom.styl

@@ -1,28 +1,21 @@
 .readymade-subject-viewer-container
 
   .readymade-subject-viewer
-    width: 75vw
-    max-width: 950px
+    width: 55vw
+    max-width: 700px
     background: #eee
     background: rgba(256,256,230,0.75)
 
     .drawing-controls
       display: block
       background: #0b517c
       color: #fff
-      text-align: right
-      margin: 0
+      padding: 0.2em
 
       h2
-        display: inline-block
-        width: 45%
         text-align: left
         font-size: .9em
-
-      .tools
-        display: inline-block
-        text-align: right
-        width: 55%
+        margin: 0.2em 0.3em
 
       .readymade-clickable
         background: rgba(0, 0, 0, 0.1)
@@ -58,14 +51,14 @@
   flex: 5
   min-height: 60vh
   color: #222
-  max-width: 450px
+  max-width: 100%
   margin: 0
 
   div
     padding: 1em
 
 .subject-image
-  flex: 3
+  display: none
 
   img
     width: 100%