1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00

piece rating + navigation OK

close prize
This commit is contained in:
diminator 2015-08-13 13:28:09 +02:00
parent 81ff4641c7
commit 247cca3ee2
7 changed files with 126 additions and 43 deletions

View File

@ -60,7 +60,8 @@ let AccordionListItemPiece = React.createClass({
</Link>}
subheading={
<h3>
{getLangText('by %s', this.props.piece.artist_name)}
{getLangText('by ')}
{this.props.artistName ? this.props.artistName : this.props.piece.artist_name}
</h3>
}
subsubheading={this.props.subsubheading}

View File

@ -37,7 +37,6 @@ class PrizeRatingActions {
resolve(res);
})
.catch((err) => {
console.logGlobal(err);
reject(err);
});
});
@ -52,7 +51,6 @@ class PrizeRatingActions {
resolve(res);
})
.catch((err) => {
console.logGlobal(err);
reject(err);
});
});

View File

@ -69,7 +69,7 @@ let AccordionListItemPrize = React.createClass({
// jury and rating available
let rating = parseInt(this.props.content.ratings.rating, 10);
return (
<div className="pull-right">
<div id="list-rating" className="pull-right">
<Link to='piece' params={{pieceId: this.props.content.id}}>
<StarRating
ref='rating'
@ -109,11 +109,14 @@ let AccordionListItemPrize = React.createClass({
},
render() {
let artistName = this.state.currentUser.is_jury ?
<span className="glyphicon glyphicon-eye-close" style={{fontSize: '0.75em'}} aria-hidden="true"/> :
this.props.content.artist_name;
return (
<AccordionListItemPiece
className={this.props.className}
piece={this.props.content}
artistName={artistName}
subsubheading={
<div className="pull-left">
<span>{this.props.content.date_created.split('-')[0]}</span>

View File

@ -80,6 +80,8 @@ let PieceContainer = React.createClass({
render() {
if('title' in this.state.piece) {
let artistName = this.state.currentUser.is_jury ?
<span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.state.piece.artist_name;
return (
<Piece
piece={this.state.piece}
@ -89,9 +91,9 @@ let PieceContainer = React.createClass({
<NavigationHeader
piece={this.state.piece}
currentUser={this.state.currentUser}/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<hr/>
<DetailProperty label="BY" value={this.state.piece.artist_name} />
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label="BY" value={artistName} />
<DetailProperty label="DATE" value={ this.state.piece.date_created.slice(0, 4) } />
<hr/>
</div>
@ -121,18 +123,18 @@ let NavigationHeader = React.createClass({
},
render() {
if (this.props.currentUser && this.props.currentUser.is_jury && this.props.piece.navigation) {
if (this.props.currentUser && this.props.piece.navigation) {
let nav = this.props.piece.navigation;
return (
<div style={{marginBottom: '1em'}}>
<div className="row no-margin">
<Link className="disable-select" to='piece' params={{pieceId: nav.prev_index ? nav.prev_index : this.props.piece.id}}>
<span className="glyphicon glyphicon-chevron-left pull-left" aria-hidden="true">
<span className="glyphicon glyphicon-chevron-left pull-left link-ascribe" aria-hidden="true">
Previous
</span>
</Link>
<Link className="disable-select" to='piece' params={{pieceId: nav.next_index ? nav.next_index : this.props.piece.id}}>
<span className="pull-right">
<span className="pull-right link-ascribe">
Next
<span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</span>
@ -197,13 +199,11 @@ let PrizePieceRatings = React.createClass({
render(){
if (this.props.currentUser && this.props.currentUser.is_jury) {
return (
<div>
<DetailProperty
labelClassName='col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height col-middle ascribe-detail-property-label'
label={
<span>YOUR VOTE</span>
}
value={
<CollapsibleParagraph
title="Rating"
show={true}
defaultExpanded={true}>
<div style={{marginLeft: '1.5em', marginBottom: '1em'}}>
<StarRating
ref='rating'
name="prize-rating"
@ -213,11 +213,11 @@ let PrizePieceRatings = React.createClass({
rating={this.state.currentRating}
onRatingClick={this.onRatingClick}
ratingAmount={5} />
}/>
</div>
<PersonalNote
piece={this.props.piece}
currentUser={this.props.currentUser}/>
</div>);
</CollapsibleParagraph>);
}
return null;
}
@ -241,13 +241,13 @@ let PersonalNote = React.createClass({
handleSuccess={this.showNotification}>
<Property
name='value'
label={getLangText('Note')}
label={getLangText('Jury note')}
editable={true}>
<InputTextAreaToggable
rows={1}
editable={true}
defaultValue={this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null}
placeholder={getLangText('Enter a personal note%s', '...')}/>
placeholder={getLangText('Enter your comments...')}/>
</Property>
<Property hidden={true} name='piece_id'>
<input defaultValue={this.props.piece.id}/>
@ -256,7 +256,7 @@ let PersonalNote = React.createClass({
</Form>
);
}
return null;
return nul
}
});

View File

@ -3,28 +3,39 @@
import React from 'react';
import Router from 'react-router';
import PrizeActions from '../actions/prize_actions';
import PrizeStore from '../stores/prize_store';
import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
import UserStore from '../../../../stores/user_store';
import UserActions from '../../../../actions/user_actions';
import { mergeOptions } from '../../../../utils/general_utils';
let Landing = React.createClass({
mixins: [Router.Navigation],
getInitialState() {
return UserStore.getState();
return mergeOptions(
PrizeStore.getState(),
UserStore.getState()
);
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeStore.listen(this.onChange);
PrizeActions.fetchPrize();
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
PrizeStore.unlisten(this.onChange);
},
onChange(state) {
@ -37,15 +48,9 @@ let Landing = React.createClass({
}
},
render() {
getButtons() {
if (this.state.prize && this.state.prize.active){
return (
<div className="container">
<div className="row">
<div className="col-xs-12 wp-landing-wrapper">
<h1>Sluice_screens ↄc Prize 2015</h1>
<p>
This is the submission page for Sluice_screens ↄc Prize 2015.
</p>
<ButtonGroup className="enter" bsSize="large" vertical>
<ButtonLink to="signup">
Sign up to submit
@ -58,6 +63,46 @@ let Landing = React.createClass({
Log in to submit
</ButtonLink>
</ButtonGroup>
);
}
return (
<ButtonGroup className="enter" bsSize="large" vertical>
<a className="btn btn-default" href="https://www.ascribe.io/app/signup">
Sign up to ascribe
</a>
<p>
or, already an ascribe user?
</p>
<ButtonLink to="login">
Log in
</ButtonLink>
</ButtonGroup>
);
},
getTitle() {
if (this.state.prize && this.state.prize.active){
return (
<p>
This is the submission page for Sluice_screens ↄc Prize 2015.
</p>
);
}
return (
<p>
Submissions for Sluice_screens ↄc Prize 2015 are now closed.
</p>
);
},
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-12 wp-landing-wrapper">
<h1>Sluice_screens ↄc Prize 2015</h1>
{this.getTitle()}
{this.getButtons()}
</div>
</div>
</div>

View File

@ -3,21 +3,47 @@
import React from 'react';
import PieceList from '../../../piece_list';
import PrizeActions from '../actions/prize_actions';
import PrizeStore from '../stores/prize_store';
import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
let PrizePieceList = React.createClass({
getInitialState() {
return PrizeStore.getState();
},
componentDidMount() {
PrizeStore.listen(this.onChange);
PrizeActions.fetchPrize();
},
componentWillUnmount() {
PrizeStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
getButtonSubmit() {
if (this.state.prize && this.state.prize.active){
return (
<ButtonLink to="register_piece">
Submit to prize
</ButtonLink>
);
}
return null;
},
render() {
return (
<div>
<PieceList
redirectTo="register_piece"
accordionListItemType={AccordionListItemPrize}
customSubmitButton={
<ButtonLink to="register_piece">
Submit to prize
</ButtonLink>
}/>
customSubmitButton={this.getButtonSubmit()}/>
</div>
);
}

View File

@ -386,6 +386,9 @@ hr {
.rating-container .rating-stars {
width: 25px;
color: #02b6a3;
}
#list-rating > a > span > span > .rating-container .rating-stars{
color: #000;
}
@ -399,3 +402,10 @@ hr {
-ms-user-select: none;
user-select: none;
}
.link-ascribe {
color: #666;
&:hover {
color: #000;
}
}