From eddaa1abe76265aaabeba82ab405aaaf0ba4ffc7 Mon Sep 17 00:00:00 2001 From: connorwalsh Date: Wed, 19 Dec 2018 10:12:39 -0500 Subject: [PATCH] [cw|#63] update issues ui --- client/src/components/issues/index.css | 22 ++++++--- client/src/components/issues/issues.js | 25 ++++++++-- client/src/components/poets/index.css | 62 ++++++++++++++--------- client/src/components/poets/poet.js | 68 ++++++++++++-------------- 4 files changed, 109 insertions(+), 68 deletions(-) diff --git a/client/src/components/issues/index.css b/client/src/components/issues/index.css index 5f75ebb..3fe776d 100644 --- 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%; } -} \ No newline at end of file +} diff --git a/client/src/components/issues/issues.js b/client/src/components/issues/issues.js index 0602f75..cdaf8d8 100644 --- 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 (
-
-
volumes
+
+
volumes
{ 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 (
-
+
{`Vol. ${volume}`} diff --git a/client/src/components/poets/index.css b/client/src/components/poets/index.css index 0da8028..f98c670 100644 --- 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 index 60729b5..e26559d 100644 --- 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 {
-
- this.chooseView('overview')} - > - overview - - this.chooseView('code')} - > - code - -
-
- { - this.state.view === 'overview' ? - - : - } -
+ +
@@ -151,24 +130,40 @@ export class PoetOverview extends Component { return (
-
- - birthday: {formatDate(poet.birthDate)} - - - {poet.description} - -
-
+ + + + + + + + + + + + + +
birthday + {formatDate(poet.birthDate)} +
published works + {'-'} +
volumes curated + {'-'} +
+ + + {poet.description} + +
writePoem(poet.id)} > generate a poem
- { - isEmpty(generatedPoem) ? null : - }
+ { + isEmpty(generatedPoem) ? null : + }
) } @@ -182,6 +177,7 @@ export class PoetCode extends Component { return (
+
code
{code.code}