[cw|#63] update issues ui

asmr-hex · Dec 19, 2018 · eddaa1a · eddaa1a
1 parent 0733c29
commit eddaa1a
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 68 deletions.
diff --git a/client/src/components/issues/index.css b/client/src/components/issues/index.css
@@ -1,7 +1,7 @@
 /*  issues page styles  */
 .issues-header {
     font-size: xx-large;
-    letter-spacing: 0.7em;
+    /* letter-spacing: 0.7em; */
     font-weight: 400;
     margin-top: 1em;
     margin-bottom: 1em;
@@ -21,11 +21,11 @@
     padding: 0.5em;
     margin-top: 1em;
     margin-bottom: 1em;
-    border: 1px solid #fff;
+    border: 4px solid #fff;
 }
 
 .issue-row:hover {
-    border: 1px solid #444;
+    border: 4px dashed #ede98b;
 }
 
 
@@ -49,6 +49,9 @@
     text-align: left;
     width: 100%;
     margin-left: 1em;
+    font-style: italic;
+    color: #97efbd;
+    text-shadow: 2px 2px #ade1ff;
 }
 
 
@@ -58,8 +61,11 @@
 }
 
 .issue-toc {
+    color: #ffb2e4;
+    text-shadow: 4px 4px #affbff;
+    margin-top: 4em;
     padding-top: 2em;
-    border-bottom: 1px solid #ccc;    
+    border-bottom: 1px solid #19ecff;
 }
 
 .issue-toc-header {
@@ -68,14 +74,14 @@
     justify-content: center;
     margin-top: 1em;
     margin-bottom: 1em;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #19ecff;
 }
 
 .issue-toc-title {
     font-size: xx-large;
     letter-spacing: 0.7em;
     font-weight: 400;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #19ecff;
 }
 
 .issue-toc-subheader {
@@ -152,6 +158,8 @@
 }
 
 .issue-poem {
+    color: #ffb2e4;
+    text-shadow: 4px 4px #affbff;
     padding-bottom: 10em;
 }
 
@@ -201,4 +209,4 @@
     .issue-page-container {
         width: 80%;
     }
-}
+}
diff --git a/client/src/components/issues/issues.js b/client/src/components/issues/issues.js
@@ -33,10 +33,23 @@ export class issues extends Component {
       issues,
     } = this.props
 
+    const pageStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      margin: '2em 25% 5em 25%',
+    }
+
+    const headerStyle = {
+      color: '#ffb2e4',
+      fontSize: '4em',
+      textShadow: '4px 4px #affbff',
+    }
+
     return (
       <div className='main'>
-        <div className='issues-summaries-container'>
-          <div className='issues-header'>volumes</div>
+        <div className='issues-summaries-container' style={pageStyle}>
+          <div className='issues-header' style={headerStyle}>volumes</div>
           {
             map(
               issues,
@@ -63,10 +76,16 @@ export class IssueRow extends Component {
       description,
     } = this.props.issue
 
+    const contentStyle = {
+      fontSize: '2.3em',
+      color: '#19ecff',
+      textShadow: '2px 2px #ffb2e4',
+    }
+
     return (
       <Link to={`/issue/${volume}`}>
         <div className='issue-row-container'>
-          <div className='issue-row'>
+          <div className='issue-row' style={contentStyle}>
             <div className='issue-row-title-line'>
               <span>
                 <span className='issue-row-volume-item'>{`Vol. ${volume}`}</span>

diff --git a/client/src/components/poets/index.css b/client/src/components/poets/index.css
@@ -21,7 +21,7 @@
 }
 
 .poet-row:hover {
-    border: 4px dashed #ade1ff;
+    border: 4px dashed #ede98b;
 }
 
 .poet-row-name-line {
@@ -53,7 +53,7 @@
     flex-direction: column;
     align-items: flex-start;
     padding-bottom: 2em;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px dotted #19ecff;
 }
 
 .poet-header-name {
@@ -125,27 +125,44 @@
 
 .poet-overview {
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: #19ecff;
+    text-shadow: 2px 2px #ffb2e4;
+    font-size: 2.5em;
+    margin-top: 2em;
 }
 
 .poet-overview-details {
-    /* flex-grow: 1; */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 50%;
-    border-right: 1px solid #ccc;
-    padding-right: 2em;
+    text-align: left;
+    font-size: 0.7em;
 }
 
-.poet-overview-details-birthday {
-    font-size: 1.4em;
+.poet-overview-detail {
+    text-align: left;
     white-space: pre-wrap;
 }
 
-.poet-overview-details-description {
-    font-size: 1.6em;
-    white-space: pre-wrap;
-    padding-top: 1em;
+.poet-overview-detail-value {
+    text-align: center;
+    font-weight: bold;
+    color: #ffb2e4;
+    text-shadow: 3px 3px #19ecff;
+}
+
+.poet-overview-header {
+    margin-top: 2em;
+    font-weight: bold;
+    font-size: 3em;
+    color: #ffb2e4;
+    text-shadow: 3px 3px #affbff;
+}
+
+.poet-overview-description {
+    margin-top: 1em;
+    width: 100%;
+    padding-bottom: 2em;
+    border-bottom: 1px dotted #19ecff;
     text-align: justify;
 }
 
@@ -160,20 +177,21 @@
 
 .poet-overview-generate-poem-button {
     padding: 1em;
-    background-color: #222;
-    border: 1px solid #222;
-    font-size: 1.3em;
-    color: #eee;
+    background-color: #ffffff;
+    border: 1px solid #f28cce;
+    font-size: 0.6em;
+    color: #f28cce;
     font-weight: 500;
     cursor:pointer;
     margin-bottom: 2em;
+    margin-top: 3em;
 }
 
 
 .poet-overview-generate-poem-button:hover {
-    background-color: #fff;
-    border: 1px solid #222;
-    color: #222;
+    background-color: #ffb2e4;
+    border: 1px solid #ffb2e4;
+    color: #ffffff;
 }
 
 /* ----------- MOBILE MEDIA QUERIES ----------- */

diff --git a/client/src/components/poets/poet.js b/client/src/components/poets/poet.js
@@ -88,7 +88,7 @@ export class poet extends Component {
     }
 
     const subheaderStyle = {
-      color: '#bc75ff',
+      color: '#75b0ff',
       textShadow: '4px 4px #affbff',
     }
 
@@ -109,29 +109,8 @@ export class poet extends Component {
             </div>
           </div>
           <div className='poet-body'>
-            <div className='poet-body-menu'>
-              <span className={this.state.view === 'overview' ?
-                                   'poet-body-menu-item-selected'
-                                   : 'poet-body-menu-item'}
-                    onClick={() => this.chooseView('overview')}
-                    >
-                overview
-              </span>
-              <span className={this.state.view === 'code' ?
-                                   'poet-body-menu-item-selected'
-                                   : 'poet-body-menu-item'}
-                    onClick={() => this.chooseView('code')}
-                    >
-                code
-              </span>
-            </div>
-            <div className='poet-body-content'>
-              {
-                this.state.view === 'overview' ?
-                <PoetOverview poet={poet} writePoem={writePoem} generatedPoem={generatedPoem}/>
-                  :<PoetCode poet={poet} code={code}/>
-              }
-            </div>
+            <PoetOverview poet={poet} writePoem={writePoem} generatedPoem={generatedPoem}/>           
+            <PoetCode {...{ poet, code}}/>
           </div>
         </div>
       </div>
@@ -151,24 +130,40 @@ export class PoetOverview extends Component {
 
     return (
       <div className='poet-overview'>
-        <div className='poet-overview-details'>
-          <span className='poet-overview-details-birthday'>
-            birthday:   {formatDate(poet.birthDate)}
-          </span>
-          <span className='poet-overview-details-description'>
-            {poet.description}
-          </span>
-        </div>
-        <div className='poet-overview-generate-poem'>
+        <table className='poet-overview-details'>
+          <tr>
+            <td className='poet-overview-detail'>birthday   </td>
+            <td className='poet-overview-detail-value'>
+              {formatDate(poet.birthDate)}
+            </td>
+          </tr>
+          <tr>
+            <td className='poet-overview-detail'>published works   </td>
+            <td className='poet-overview-detail-value'>
+              {'-'}
+            </td>
+          </tr>
+          <tr>
+            <td className='poet-overview-detail'>volumes curated   </td>
+            <td className='poet-overview-detail-value'>
+              {'-'}
+            </td>
+          </tr>
+        </table>
+
+        <span className='poet-overview-description'>
+          {poet.description}
+        </span>
+        <div style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
           <div className='poet-overview-generate-poem-button'
                onClick={() => writePoem(poet.id)}
             >
             generate a poem
           </div>
-          {
-            isEmpty(generatedPoem) ? null : <Poem poem={generatedPoem}/>
-          }
         </div>
+        {
+          isEmpty(generatedPoem) ? null : <Poem poem={generatedPoem}/>
+        }
       </div>
     )
   }
@@ -182,6 +177,7 @@ export class PoetCode extends Component {
 
     return (
       <div className='poet-code'>
+        <div className='poet-overview-header'>code</div>
         <Highlight className="python poet-body-code">
           {code.code}
         </Highlight>