ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

refactor action panel: mostly css and layout

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-08-10 09:22:39 +02:00
parent 5cef512c0d
commit b70eb23dc0
4 changed files with 153 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/components/ascribe_forms/form_request_action.js
View File

@ -8,6 +8,7 @@ import ApiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin'; import FormMixin from '../../mixins/form_mixin';
import AclButton from './../ascribe_buttons/acl_button'; import AclButton from './../ascribe_buttons/acl_button';
import ActionPanel from '../ascribe_panel/action_panel';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -52,6 +53,17 @@ let RequestActionForm = React.createClass({
}; };
}, },
getContent() {
let edition = this.props.editions[0];
let message = edition.owner + ' ' + getLangText('requests you') + ' ' + edition.request_action + ' ' + getLangText('this edition%s', '.');
return (
<span>
{message}
</span>
);
},
renderForm() { renderForm() {
let edition = this.props.editions[0]; let edition = this.props.editions[0];
let buttonAccept = ( let buttonAccept = (
@ -86,13 +98,13 @@ let RequestActionForm = React.createClass({
</span> </span>
); );
} }
return ( return (
<Alert bsStyle='warning'> <ActionPanel
<div style={{textAlign: 'center'}}> content={this.getContent()}
<div>{ edition.owner } {getLangText('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div> buttons={buttons}/>
{buttons}
</div>
</Alert>
); );
} }
}); });

21
js/components/ascribe_panel/action_panel.js
View File

@ -40,21 +40,14 @@ let ActionPanel = React.createClass({
render() { render() {
return ( return (
<div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}> <div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
<div className='row'> <div className="ascribe-panel-table">
<div className='col-xs-7 col-md-8'> <div className="ascribe-panel-content">
<div className='ascribe-panel-content-wrapper'> {this.props.content}
<div className='ascribe-panel-title'>
{this.props.title}
</div>
<div className="ascribe-panel-content">
{this.props.content}
</div>
</div>
</div> </div>
<div className='col-xs-5 col-md-4'> </div>
<div className='ascribe-panel-buttons'> <div className="ascribe-panel-table">
{this.props.buttons} <div className="ascribe-panel-content">
</div> {this.props.buttons}
</div> </div>
</div> </div>
</div> </div>

64
js/components/whitelabel/prize/components/settings_container.js
View File

@ -174,8 +174,16 @@ let PrizeJurySettings = React.createClass({
<ActionPanel <ActionPanel
name={member.email} name={member.email}
key={i} key={i}
title={member.email} content={
content={member.status} <div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</div>
</div>
}
buttons={ buttons={
<div className="pull-right"> <div className="pull-right">
<button <button
@ -201,17 +209,23 @@ let PrizeJurySettings = React.createClass({
<ActionPanel <ActionPanel
name={member.email} name={member.email}
key={i} key={i}
title={member.email} content={
content={member.status} <div>
buttons={ <div className='ascribe-panel-title'>
<div className="pull-right"> {member.email}
<button </div>
className="btn btn-default btn-sm ascribe-btn-gray" <div className="ascribe-panel-subtitle">
onClick={this.handleRevoke} {member.status}
data-id={member.email}> </div>
{getLangText('REVOKE')}
</button>
</div> </div>
}
buttons={
<button
className="btn btn-default btn-sm ascribe-btn-gray"
onClick={this.handleRevoke}
data-id={member.email}>
{getLangText('REVOKE')}
</button>
}/> }/>
); );
@ -223,17 +237,23 @@ let PrizeJurySettings = React.createClass({
<ActionPanel <ActionPanel
name={member.email} name={member.email}
key={i} key={i}
title={member.email} content={
content={member.status} <div>
buttons={ <div className='ascribe-panel-title'>
<div className="pull-right"> {member.email}
<button </div>
className="btn btn-default btn-sm" <div className="ascribe-panel-subtitle">
onClick={this.handleActivate} {member.status}
data-id={member.email}> </div>
{getLangText('ACTIVATE')}
</button>
</div> </div>
}
buttons={
<button
className="btn btn-default btn-sm"
onClick={this.handleActivate}
data-id={member.email}>
{getLangText('ACTIVATE')}
</button>
}/> }/>
); );

96
sass/ascribe_panel.scss
View File

@ -1,18 +1,94 @@
.ascribe-panel-wrapper { .ascribe-panel-wrapper {
border: 1px solid #DDD; border: 1px solid #DDD;
padding: 1.4em; min-height: 5em;
margin: 1em 0 1em 0; height: 5em;
margin-top: 1em;
> div {
height: 100%;
float: left;
&:first-child {
width: 60%;
}
&:nth-child(2) {
width: 40%;
}
}
} }
.ascribe-panel-title { .ascribe-panel-table {
margin-bottom: 0.5em; display:table;
> .ascribe-panel-content {
display: table-cell;
vertical-align: middle;
}
@media(max-width:767px) {
&:first-child {
> div {
padding-left: 1em;
}
}
&:nth-child(2) {
> div {
padding-right: 1em;
> button {
float:right;
}
}
}
}
@media(min-width:768px) {
&:first-child {
> div {
padding-left: 2em;
}
}
&:nth-child(2) {
> div {
padding-right: 2em;
> button {
float:right;
}
}
}
}
} }
.ascribe-panel-content { @media(max-width:767px) {
font-size: 0.9em; .ascribe-panel-title {
color: rgba(0,0,0,0.5); font-size: .9em;
}
.ascribe-panel-subtitle {
font-size: .7em;
color: rgba(0,0,0,0.5);
}
} }
.ascribe-panel-buttons { @media(min-width:768px) {
margin-top: 0.5em; .ascribe-panel-title {
} font-size: 1.1em;
}
.ascribe-panel-subtitle {
font-size: .9em;
color: rgba(0,0,0,0.5);
}
}