mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
styling changes for frontend
This commit is contained in:
diminator
parent
37759582ce
commit
fa2ae7cba8
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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')}? <Link to="signup">{getLangText('Sign up')}...</Link><br/>
|
||||
{getLangText('Forgot my password')}? <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')}? <Link to="signup">{getLangText('Sign up')}...</Link><br/>
|
||||
{getLangText('Forgot my password')}? <Link to="password_reset">{getLangText('Rescue me')}...</Link>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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')}
|
||||
<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')} {getLangText('Terms of Service')}
|
||||
</a>
|
||||
</div>}/>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
.ascribe-piece-list-toolbar {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
max-width: 200px;
|
||||
}
|
||||
@ -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,5 +1,6 @@
|
||||
.ascribe-sliding-container-wrapper {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user