ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

styling changes for frontend

Browse Source
This commit is contained in:
diminator 2015-07-07 10:28:39 +02:00
parent 37759582ce
commit fa2ae7cba8
13 changed files with 152 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -26,22 +26,16 @@ let PieceListToolbar = React.createClass({
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<div className="row"> <div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
<div className="row"> <div className="row">
<div className="col-xs-12 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 clear-paddings"> <span className="pull-right search-bar">
<Input wrapperClassName='wrapper'> <Input
<Row> type='text'
<Col xs={7} sm={4}> ref="search"
<Input type='text' ref="search" placeholder="Search..." onChange={this.searchFor} addonAfter={searchIcon} /> placeholder="Search..."
</Col> onChange={this.searchFor}
<Col xs={5} sm={5}> addonAfter={searchIcon} />
<ButtonLink to="register_piece"> </span>
+ Work
</ButtonLink>
</Col>
</Row>
</Input>
</div>
</div> </div>
</div> </div>
</div> </div>

15
js/components/header.js
View File

@ -81,18 +81,17 @@ let Header = React.createClass({
let account = null; let account = null;
let signup = null; let signup = null;
let collection = null; let collection = null;
let addNewWork = null;
if (this.state.currentUser.username){ if (this.state.currentUser.username){
account = ( account = (
<DropdownButton eventKey="1" title={this.state.currentUser.username}> <DropdownButton eventKey="1" title={this.state.currentUser.username}>
<MenuItemLink to="settings">{getLangText('Account Settings')}</MenuItemLink> <MenuItemLink eventKey="2" to="settings">{getLangText('Account Settings')}</MenuItemLink>
<li className="divider"></li>
<MenuItem eventKey="2" href="/art/faq/">{getLangText('FAQ')}</MenuItem>
<MenuItem eventKey="3" href="/art/terms/">{getLangText('Terms of Service')}</MenuItem>
<MenuItem divider /> <MenuItem divider />
<MenuItem eventKey="4" onClick={this.handleLogout}>{getLangText('Log out')}</MenuItem> <MenuItem eventKey="3" onClick={this.handleLogout}>{getLangText('Log out')}</MenuItem>
</DropdownButton> </DropdownButton>
); );
collection = <NavItemLink to="pieces">COLLECTION</NavItemLink>; collection = <NavItemLink to="pieces">COLLECTION</NavItemLink>;
addNewWork = <NavItemLink to="register_piece">+ NEW WORK</NavItemLink>;
} }
else { else {
account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>; account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>;
@ -106,12 +105,14 @@ let Header = React.createClass({
<Link className="navbar-brand" to="pieces"> <Link className="navbar-brand" to="pieces">
{this.getLogo()} {this.getLogo()}
</Link>} </Link>}
toggleNavKey={0}> toggleNavKey={0}
fixedTop={true}>
<CollapsibleNav eventKey={0}> <CollapsibleNav eventKey={0}>
<Nav navbar left> <Nav navbar left>
{collection}
</Nav> </Nav>
<Nav navbar right> <Nav navbar right>
{addNewWork}
{collection}
{account} {account}
{signup} {signup}
</Nav> </Nav>

12
js/components/login_container.js
View File

@ -30,7 +30,7 @@ let LoginContainer = React.createClass({
getDefaultProps() { getDefaultProps() {
return { return {
message: getLangText('Log in to') + ' ascribe ...', message: getLangText('Enter') + ' ascribe',
redirectOnLoggedIn: true, redirectOnLoggedIn: true,
redirectOnLoginSuccess: true redirectOnLoginSuccess: true
}; };
@ -65,6 +65,10 @@ let LoginContainer = React.createClass({
{this.props.message} {this.props.message}
</div> </div>
<LoginForm /> <LoginForm />
<div className="ascribe-login-text">
{getLangText('Not an ascribe user')}&#63; <Link to="signup">{getLangText('Sign up')}...</Link><br/>
{getLangText('Forgot my password')}&#63; <Link to="password_reset">{getLangText('Rescue me')}...</Link>
</div>
</div> </div>
); );
} }
@ -109,7 +113,7 @@ let LoginForm = React.createClass({
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn ascribe-btn ascribe-btn-login">
{getLangText('Log in to')} ascribe {getLangText('Enter')} ascribe
</button>} </button>}
spinner={ spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@ -137,10 +141,6 @@ let LoginForm = React.createClass({
required/> required/>
</Property> </Property>
<hr /> <hr />
<div className="ascribe-login-text">
{getLangText('Not an ascribe user')}&#63; <Link to="signup">{getLangText('Sign up')}...</Link><br/>
{getLangText('Forgot my password')}&#63; <Link to="password_reset">{getLangText('Rescue me')}...</Link>
</div>
</Form> </Form>
); );
} }

47
js/components/register_piece.js
View File

@ -2,9 +2,13 @@
import React from 'react'; import React from 'react';
import AppConstants from '../constants/application_constants'; import DatePicker from 'react-datepicker/dist/react-datepicker';
import Router from 'react-router'; import Router from 'react-router';
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import AppConstants from '../constants/application_constants';
import LicenseActions from '../actions/license_actions'; import LicenseActions from '../actions/license_actions';
import LicenseStore from '../stores/license_store'; import LicenseStore from '../stores/license_store';
@ -27,8 +31,6 @@ import apiUrls from '../constants/api_urls';
import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader'; import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
import DatePicker from 'react-datepicker/dist/react-datepicker';
import { mergeOptions } from '../utils/general_utils'; import { mergeOptions } from '../utils/general_utils';
import { getCookie } from '../utils/fetch_api_utils'; import { getCookie } from '../utils/fetch_api_utils';
@ -121,7 +123,7 @@ let RegisterPiece = React.createClass( {
this.setState({selectedLicense: event.target.selectedIndex}); this.setState({selectedLicense: event.target.selectedIndex});
}, },
getLicenses() { getLicenses() {
if (this.state.licenses && this.state.licenses.length > 0) { if (this.state.licenses && this.state.licenses.length > 1) {
return ( return (
<Property <Property
name='license' name='license'
@ -162,7 +164,20 @@ let RegisterPiece = React.createClass( {
<div <div
onClick={this.changeSlide} onClick={this.changeSlide}
onFocus={this.changeSlide}> onFocus={this.changeSlide}>
<h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3> <Row className="no-margin">
<Col sm={4}>
<div style={{'marginTop': 0, 'marginLeft': '1em'}}>
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={this.state.isFineUploaderEditable}/>
</div>
<br />
<br />
</Col>
<Col sm={8}>
<h3 style={{'marginTop': 0, 'marginLeft': '1em'}} onClick={this.changePage}>Lock down title</h3>
<Form <Form
ref='form' ref='form'
url={apiUrls.pieces_list} url={apiUrls.pieces_list}
@ -172,34 +187,28 @@ let RegisterPiece = React.createClass( {
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login" className="btn ascribe-btn ascribe-btn-login"
disabled={!this.state.isUploadReady}> disabled={!this.state.isUploadReady}>
Register your artwork Register work
</button>} </button>}
spinner={ spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</button> </button>
}> }>
<Property label="Files to upload">
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={this.state.isFineUploaderEditable}/>
</Property>
<Property <Property
name='artist_name' name='artist_name'
label="Artist Name"> label="Artist Name">
<input <input
type="text" type="text"
placeholder="The name of the creator" placeholder="(e.g. Andy Warhol)"
required/> required/>
</Property> </Property>
<Property <Property
name='title' name='title'
label="Artwork title"> label="Title">
<input <input
type="text" type="text"
placeholder="The title of the artwork" placeholder="(e.g. 32 Campbell's Soup Cans)"
required/> required/>
</Property> </Property>
<Property <Property
@ -207,7 +216,7 @@ let RegisterPiece = React.createClass( {
label="Year Created"> label="Year Created">
<input <input
type="number" type="number"
placeholder="Year Created (e.g. 2015)" placeholder="(e.g. 1962)"
min={0} min={0}
required/> required/>
</Property> </Property>
@ -216,13 +225,15 @@ let RegisterPiece = React.createClass( {
label="Number of editions"> label="Number of editions">
<input <input
type="number" type="number"
placeholder="Specify the number of unique editions for this artwork" placeholder="(e.g. 32)"
min={1} min={1}
required/> required/>
</Property> </Property>
{this.getLicenses()} {this.getLicenses()}
<hr /> <hr />
</Form> </Form>
</Col>
</Row>
</div> </div>
<div> <div>
<LoginContainer <LoginContainer

9
js/components/signup_container.js
View File

@ -111,7 +111,7 @@ let SignupForm = React.createClass({
label={getLangText('Email')}> label={getLangText('Email')}>
<input <input
type="email" type="email"
placeholder={getLangText('Enter your email')} placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
autoComplete="on" autoComplete="on"
required/> required/>
</Property> </Property>
@ -121,7 +121,7 @@ let SignupForm = React.createClass({
tooltip={tooltipPassword}> tooltip={tooltipPassword}>
<input <input
type="password" type="password"
placeholder={getLangText('Enter your password')} placeholder={getLangText('Use a combination of minimum 10 chars and numbers')}
autoComplete="on" autoComplete="on"
required/> required/>
</Property> </Property>
@ -148,8 +148,9 @@ let SignupForm = React.createClass({
required="required" required="required"
label={ label={
<div> <div>
{getLangText('I agree to the')}&nbsp; <a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
<a href="/terms" target="_blank"> {getLangText('Terms of Service')}</a> {getLangText('I agree to the')}&nbsp;{getLangText('Terms of Service')}
</a>
</div>}/> </div>}/>
</Form> </Form>
); );

6
js/constants/languages.js
View File

@ -15,7 +15,7 @@ const languages = {
'Previous': 'Previous', 'Previous': 'Previous',
'Next': 'Next', 'Next': 'Next',
'%s license': '%s license', '%s license': '%s license',
'Log in to': 'Log in to', 'Log into': 'Log into',
'Email': 'Email', 'Email': 'Email',
'Enter your email': 'Enter your email', 'Enter your email': 'Enter your email',
'Password': 'Password', 'Password': 'Password',
@ -77,7 +77,7 @@ const languages = {
'Previous': 'Zurück', 'Previous': 'Zurück',
'Next': 'Weiter', 'Next': 'Weiter',
'%s license': '%s license', '%s license': '%s license',
'Log in to': 'Log in to', 'Log into': 'Log into',
'Email': 'Email', 'Email': 'Email',
'Enter your email': 'Enter your email', 'Enter your email': 'Enter your email',
'Password': 'Password', 'Password': 'Password',
@ -139,7 +139,7 @@ const languages = {
'Previous': 'Précédent', 'Previous': 'Précédent',
'Next': 'Suivant', 'Next': 'Suivant',
'%s license': '%s license', '%s license': '%s license',
'Log in to': 'Se connecter à', 'Log into': 'Se connecter à',
'Email': 'E-mail', 'Email': 'E-mail',
'Enter your email': 'Entrez votre e-mail', 'Enter your email': 'Entrez votre e-mail',
'Password': 'Mot de passe', 'Password': 'Mot de passe',

3
js/utils/lang_utils.js
View File

@ -23,7 +23,8 @@ export function getLangText(s, ...args) {
} }
} catch(err) { } catch(err) {
if(!(s in languages[lang])) { if(!(s in languages[lang])) {
//console.error(new Error('Language-string is not in constants file. Add: "' + s + '" to the "' + lang + '" language file.')); console.warn('Language-string is not in constants file. Add: "' + s + '" to the "' + lang + '" language file. Defaulting to keyname');
return s;
} else { } else {
console.error(err); console.error(err);
} }

18
sass/ascribe_login.scss
View File

@ -2,7 +2,7 @@ $break-small: 764px;
.ascribe-btn-login { .ascribe-btn-login {
padding: 1.5em; padding: 0.5em;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
background-color: rgba(2, 182, 163, 1); background-color: rgba(2, 182, 163, 1);
@ -11,7 +11,7 @@ $break-small: 764px;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
border:none; border:none;
//margin-left: 1.2em;
&:hover { &:hover {
color: white; color: white;
@ -27,9 +27,9 @@ $break-small: 764px;
.ascribe-btn-login-spinner{ .ascribe-btn-login-spinner{
background-color: rgba(2, 182, 163, 0.4); background-color: rgba(2, 182, 163, 0.4);
padding: 0.8em; padding: 0.4em;
img { img {
height: 3em; height: 1.6em;
} }
&:hover { &:hover {
background-color: rgba(2, 182, 163, 0.4); background-color: rgba(2, 182, 163, 0.4);
@ -50,22 +50,24 @@ $break-small: 764px;
} }
.ascribe-login-text { .ascribe-login-text {
font-size: 1em; font-size: 0.8em;
padding: 0 0 1em 0; padding: 0 0 1em 0;
margin-left: 0.4em; margin-left: 0.4em;
margin-top: 1.5em;
color: rgba(0, 0, 0, 0.6);
} }
.ascribe-login-header { .ascribe-login-header {
font-size: 2em; font-size: 2em;
padding: 0 0 0.5em 0; margin-left: 0.8em;
} }
.ascribe-form { .ascribe-form {
hr { hr {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.05);
border: none; border: none;
height: 1px; height: 1px;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.05);
margin-top: 0; margin-top: 0;
} }
} }

4
sass/ascribe_piece_list_toolbar.scss
View File

@ -1,3 +1,7 @@
.ascribe-piece-list-toolbar { .ascribe-piece-list-toolbar {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.search-bar {
max-width: 200px;
}

12
sass/ascribe_settings.scss
View File

@ -4,12 +4,12 @@
text-align: center; text-align: center;
padding-bottom: 1em; padding-bottom: 1em;
background-color: white; background-color: rgba(0,0,0,0);
border-left: 3px solid rgba(0,0,0,0); border-left: 3px solid rgba(0,0,0,0);
&div:last-of-type { &div:last-of-type {
border-bottom: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.05);
} }
&:hover{ &:hover{
border-left: 3px solid rgba(2, 182, 163, 0.4); border-left: 3px solid rgba(2, 182, 163, 0.4);
@ -64,7 +64,7 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
text-align: left; text-align: left;
border-top: 1px solid rgba(0,0,0,.2); border-top: 1px solid rgba(0,0,0,.05);
padding-top: 1em; padding-top: 1em;
padding-left: 1.5em; padding-left: 1.5em;
@ -79,7 +79,7 @@
span { span {
font-weight: normal; font-weight: normal;
font-size: 0.9em; font-size: 0.9em;
color: rgba(0,0,0,.7); color: rgba(0,0,0,.5);
} }
div { div {
@ -90,7 +90,7 @@
font-weight: normal; font-weight: normal;
font-size: 1.1em; font-size: 1.1em;
cursor: default; cursor: default;
color: rgba(0, 0, 0, .7); color: rgba(0, 0, 0, .5);
} }
} }
@ -105,7 +105,7 @@
margin-top: .5em; margin-top: .5em;
border: 0; border: 0;
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
color: #38BAAD; color: rgba(0,0,0,.8);
padding-left: 0; padding-left: 0;
&:focus { &:focus {

1
sass/ascribe_slides_container.scss
View File

@ -1,5 +1,6 @@
.ascribe-sliding-container-wrapper { .ascribe-sliding-container-wrapper {
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
padding-left: 0; padding-left: 0;
} }

23
sass/main.scss
View File

@ -30,6 +30,7 @@ $BASE_URL: '<%= BASE_URL %>';
body { body {
background-color: #FDFDFD; background-color: #FDFDFD;
border-radius: 0; border-radius: 0;
margin-top: 70px;
} }
html { html {
@ -52,7 +53,8 @@ html {
border-right:0; border-right:0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
border-top:0; border-top:0;
border-color: #CCC border-color: #CCC;
font-size: 0.8em;
} }
.truncate { .truncate {
@ -198,6 +200,23 @@ html {
padding-bottom: 0.4em; padding-bottom: 0.4em;
} }
::-webkit-input-placeholder { /* WebKit browsers */
font-size: 0.9em;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 0.9em;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 0.9em;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 0.9em;
font-style: italic;
}
.input-text-ascribe, .input-text-ascribe,
.datepicker__input { .datepicker__input {
border-bottom: 1px solid black; border-bottom: 1px solid black;
@ -218,7 +237,7 @@ html {
text-align: left; text-align: left;
line-height: 1.6; line-height: 1.6;
width: 90%; width: 90%;
margin-left: auto; margin-left: 1.6em;
margin-right: auto; margin-right: auto;
} }

2
sass/variables.scss
View File

@ -273,7 +273,7 @@ $zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default; $zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default; $zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default; $zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default; $zindex-navbar-fixed: 1000 !default;
$zindex-modal-background: 1040 !default; $zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default; $zindex-modal: 1050 !default;