ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

styling changes for frontend

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 (
<div className={this.props.className}>
<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="col-xs-12 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 clear-paddings">
<Input wrapperClassName='wrapper'>
<Row>
<Col xs={7} sm={4}>
<Input type='text' ref="search" placeholder="Search..." onChange={this.searchFor} addonAfter={searchIcon} />
</Col>
<Col xs={5} sm={5}>
<ButtonLink to="register_piece">
+ Work
</ButtonLink>
</Col>
</Row>
</Input>
</div>
<span className="pull-right search-bar">
<Input
type='text'
ref="search"
placeholder="Search..."
onChange={this.searchFor}
addonAfter={searchIcon} />
</span>
</div>
</div>
</div>

15
js/components/header.js
View File

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

12
js/components/login_container.js
View File

@ -30,7 +30,7 @@ let LoginContainer = React.createClass({
getDefaultProps() {
return {
message: getLangText('Log in to') + ' ascribe ...',
message: getLangText('Enter') + ' ascribe',
redirectOnLoggedIn: true,
redirectOnLoginSuccess: true
};
@ -65,6 +65,10 @@ let LoginContainer = React.createClass({
{this.props.message}
</div>
<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>
);
}
@ -109,7 +113,7 @@ let LoginForm = React.createClass({
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
{getLangText('Log in to')} ascribe
{getLangText('Enter')} ascribe
</button>}
spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@ -137,10 +141,6 @@ let LoginForm = React.createClass({
required/>
</Property>
<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>
);
}

141
js/components/register_piece.js
View File

@ -2,9 +2,13 @@
import React from 'react';
import AppConstants from '../constants/application_constants';
import DatePicker from 'react-datepicker/dist/react-datepicker';
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 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 DatePicker from 'react-datepicker/dist/react-datepicker';
import { mergeOptions } from '../utils/general_utils';
import { getCookie } from '../utils/fetch_api_utils';
@ -121,7 +123,7 @@ let RegisterPiece = React.createClass( {
this.setState({selectedLicense: event.target.selectedIndex});
},
getLicenses() {
if (this.state.licenses && this.state.licenses.length > 0) {
if (this.state.licenses && this.state.licenses.length > 1) {
return (
<Property
name='license'
@ -162,67 +164,76 @@ let RegisterPiece = React.createClass( {
<div
onClick={this.changeSlide}
onFocus={this.changeSlide}>
<h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3>
<Form
ref='form'
url={apiUrls.pieces_list}
getFormData={this.getFormData}
handleSuccess={this.handleSuccess}
buttons={<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
disabled={!this.state.isUploadReady}>
Register your artwork
</button>}
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" />
</button>
}>
<Property label="Files to upload">
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={this.state.isFineUploaderEditable}/>
</Property>
<Property
name='artist_name'
label="Artist Name">
<input
type="text"
placeholder="The name of the creator"
required/>
</Property>
<Property
name='title'
label="Artwork title">
<input
type="text"
placeholder="The title of the artwork"
required/>
</Property>
<Property
name='date_created'
label="Year Created">
<input
type="number"
placeholder="Year Created (e.g. 2015)"
min={0}
required/>
</Property>
<Property
name='num_editions'
label="Number of editions">
<input
type="number"
placeholder="Specify the number of unique editions for this artwork"
min={1}
required/>
</Property>
{this.getLicenses()}
<hr />
</Form>
<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
ref='form'
url={apiUrls.pieces_list}
getFormData={this.getFormData}
handleSuccess={this.handleSuccess}
buttons={<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
disabled={!this.state.isUploadReady}>
Register work
</button>}
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" />
</button>
}>
<Property
name='artist_name'
label="Artist Name">
<input
type="text"
placeholder="(e.g. Andy Warhol)"
required/>
</Property>
<Property
name='title'
label="Title">
<input
type="text"
placeholder="(e.g. 32 Campbell's Soup Cans)"
required/>
</Property>
<Property
name='date_created'
label="Year Created">
<input
type="number"
placeholder="(e.g. 1962)"
min={0}
required/>
</Property>
<Property
name='num_editions'
label="Number of editions">
<input
type="number"
placeholder="(e.g. 32)"
min={1}
required/>
</Property>
{this.getLicenses()}
<hr />
</Form>
</Col>
</Row>
</div>
<div>
<LoginContainer

9
js/components/signup_container.js
View File

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

6
js/constants/languages.js
View File

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

3
js/utils/lang_utils.js
View File

@ -23,7 +23,8 @@ export function getLangText(s, ...args) {
}
} catch(err) {
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 {
console.error(err);
}

18
sass/ascribe_login.scss
View File

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

4
sass/ascribe_piece_list_toolbar.scss
View File

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

12
sass/ascribe_settings.scss
View File

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

1
sass/ascribe_slides_container.scss
View File

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

23
sass/main.scss
View File

@ -30,6 +30,7 @@ $BASE_URL: '<%= BASE_URL %>';
body {
background-color: #FDFDFD;
border-radius: 0;
margin-top: 70px;
}
html {
@ -52,7 +53,8 @@ html {
border-right:0;
margin-bottom: 1.5em;
border-top:0;
border-color: #CCC
border-color: #CCC;
font-size: 0.8em;
}
.truncate {
@ -198,6 +200,23 @@ html {
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,
.datepicker__input {
border-bottom: 1px solid black;
@ -218,7 +237,7 @@ html {
text-align: left;
line-height: 1.6;
width: 90%;
margin-left: auto;
margin-left: 1.6em;
margin-right: auto;
}

2
sass/variables.scss
View File

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