Skip to content

Commit

Permalink
[cw|#63] re-style dashboard sections
Browse files Browse the repository at this point in the history
  • Loading branch information
connorwalsh committed Dec 25, 2018
1 parent f242e0d commit 47bda4a
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 83 deletions.
90 changes: 72 additions & 18 deletions client/src/components/dashboard/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@
color: pink;
}

.profile-user-details-divider {
width: 60%;
margin-top: 2em;
border-bottom: 1px solid #ffe3e9;
}

.profile-poets-container {
display: flex;
width: 100%;
Expand All @@ -45,31 +51,49 @@
align-items: center;
}

.profile-poets-list {
.profile-poets-list-container {
display: flex;
position: relative;
width: 100%;
justify-content: space-between;
align-items: center;
border: 4px solid pink;
}

.profile-poets-list-header-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 4em;
align-self: stretch;
background-color: pink;
}

.profile-poets-list-header {
align-self: center;
font-size: 2em;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
font-weight: 400;
padding-bottom: 1em;
color: #ffb2e4;
font-size: 3em;
text-shadow: 4px 4px #affbff;
padding: 1em 0.3em 1em 0.3em;
}


.profile-poets-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 1em 0.5em 1em 0.5em;
}

.profile-poet-summary-container {
display: flex;
flex-direction: row;
padding: 1em;
width: 90%;
margin-bottom: 3em;
margin-bottom: 1em;
margin-top: 1em;
border: 4px solid #ffffff;
}

Expand Down Expand Up @@ -131,26 +155,56 @@
cursor: pointer;
}

/* .create-poet-form-container { */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
/* padding: 1em 4em 4em 4em; */
/* text-align: left; */
/* width: 70%; */
/* } */



.create-poet-form-container {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 80%;
justify-content: space-between;
align-items: center;
padding: 1em 4em 4em 4em;
text-align: left;
width: 70%;
border: 4px solid #b2ffb2;
margin-top: 6em;
}

.create-poet-form {
.create-poet-form-header-container {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
background-color: #b2ffb2;
}

.create-poet-form-header {
align-self: center;
font-size: 2em;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
font-weight: 400;
padding-bottom: 2em;
color: #ffb2e4;
font-size: 3em;
text-shadow: 4px 4px #affbff;
padding: 1em 0.3em 1em 0.3em;
}


.create-poet-form-and-error {
display: flex;
flex-direction: column;
margin: 3em 3em 3em 3em;
}

.create-poet-form {
display: flex;
flex-direction: column;
}

.create-poet-form-language-select {
Expand Down Expand Up @@ -212,8 +266,8 @@
}

.profile-poet-upload-error-message {
padding-top: 1em;
color: #ff7792;
margin-top: 2em;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
Expand Down
36 changes: 23 additions & 13 deletions client/src/components/dashboard/poet.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,17 +76,23 @@ class poetMgmt extends Component {

return (
<div className='profile-poets-container'>
<div className='profile-poets-list'>
<div className='profile-poets-list-header'>{`${user.username}'s poets`}</div>
{
map(
this.props.poets,
(poet, idx) => (
<PoetSummary poet={poet} retirePoet={retirePoet}key={idx}/>
),
[],
)
}
<div className='profile-poets-list-container'>
<div className='profile-poets-list-header-container'>
<div className='profile-poets-list-header'>
{`poets`}
</div>
</div>
<div className='profile-poets-list'>
{
map(
this.props.poets,
(poet, idx) => (
<PoetSummary poet={poet} retirePoet={retirePoet}key={idx}/>
),
[],
)
}
</div>
</div>
<CreatePoetForm onSubmit={this.createPoet} languages={languages} errors={this.props.errors} userErrors={this.props.userErrors}/>
</div>
Expand Down Expand Up @@ -186,8 +192,11 @@ export class createPoetForm extends Component {

return (
<div className='create-poet-form-container'>
<div className='create-poet-form-header'>upload a poet</div>
<form className='create-poet-form' onSubmit={handleSubmit}>
<div className='create-poet-form-header-container'>
<div className='create-poet-form-header'>upload a poet</div>
</div>
<div className='create-poet-form-and-error'>
<form className='create-poet-form' onSubmit={handleSubmit}>
<div>
<Field name='name' component={renderTextField} type='text' placeholder='name'/>
</div>
Expand Down Expand Up @@ -221,6 +230,7 @@ export class createPoetForm extends Component {
<div className='profile-poet-upload-error-message'>
{this.props.errors}
</div>
</div>
{
// <div>
// {
Expand Down
1 change: 1 addition & 0 deletions client/src/components/dashboard/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ ${user.username}!`
<td className='profile-user-details-value'>**********</td>
</tr>
</table>
<div className='profile-user-details-divider'></div>
</div>
)
}
Expand Down
12 changes: 12 additions & 0 deletions client/src/components/home/menu.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.home-menu {
position: fixed;
top: 0px;
width: 100%;
display: flex;
justify-content: space-around;
Expand All @@ -9,6 +10,17 @@
z-index: 9999;
}

.home-menu-dummy {
width: 100%;
left: 0px;
top: 0px;
font-size: x-large;
padding-top: 1em;
margin-bottom: 1em;
color: white;
z-index: 0;
}

.header-menu-item {
display: flex;
flex-direction: column;
Expand Down
107 changes: 56 additions & 51 deletions client/src/components/home/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,57 +20,62 @@ class menu extends Component {
// TODO (cw|11.24.2018) refactor this stuff below. possible render all these
// links in a loop so we don't have to write everything out.
return (
<div className='home-menu'>
<Link to='/' className='header-menu-item'>
<Animation
frames={['> █', '>']}
style={{fontSize: 'inherit'}}
mainStyle={{color: '#ffbae5'}}
bottomStyle={{color: '#f4f3a4'}}
/>
</Link>
<Link to='/about' className='header-menu-item'>
<Animation
frames={['about']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/tutorial' className='header-menu-item'>
<Animation
frames={['tutorial']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/issues' className='header-menu-item'>
<Animation
frames={['volumes']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/poets' className='header-menu-item'>
<Animation
frames={['poets']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
{
loggedIn ?
<Link to='/profile' className='header-menu-item'>
@
</Link>
: <Link to='/login' className='header-menu-item'>
<Animation
frames={['signup', 'signin']}
speed={2}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
}
<div>
<div className='home-menu-dummy'>
♬ ♬ ♬ ♬ ♬ ♬ ♬ ♬
</div>
<div className='home-menu'>
<Link to='/' className='header-menu-item'>
<Animation
frames={['> █', '>']}
style={{fontSize: 'inherit'}}
mainStyle={{color: '#ffbae5'}}
bottomStyle={{color: '#f4f3a4'}}
/>
</Link>
<Link to='/about' className='header-menu-item'>
<Animation
frames={['about']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/tutorial' className='header-menu-item'>
<Animation
frames={['tutorial']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/issues' className='header-menu-item'>
<Animation
frames={['volumes']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
<Link to='/poets' className='header-menu-item'>
<Animation
frames={['poets']}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
{
loggedIn ?
<Link to='/profile' className='header-menu-item'>
@
</Link>
: <Link to='/login' className='header-menu-item'>
<Animation
frames={['signup', 'signin']}
speed={2}
style={{fontSize: 'inherit', fontWeight: 800}}
mainStyle={{color: '#ffbae5', opacity: 1}}
bottomStyle={{color: '#f4f3a4', opacity: 1}}/>
</Link>
}
</div>
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/login/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.login-container {
margin-top: 3em;
margin-top: 15em;
border: 1px solid #fff;
background-color: #fff;
padding: 3em;
Expand Down

0 comments on commit 47bda4a

Please sign in to comment.