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 AclButton from './../ascribe_buttons/acl_button';
import ActionPanel from '../ascribe_panel/action_panel';
import AppConstants from '../../constants/application_constants';
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() {
let edition = this.props.editions[0];
let buttonAccept = (
@ -86,13 +98,13 @@ let RequestActionForm = React.createClass({
</span>
);
}
return (
<Alert bsStyle='warning'>
<div style={{textAlign: 'center'}}>
<div>{ edition.owner } {getLangText('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
{buttons}
</div>
</Alert>
<ActionPanel
content={this.getContent()}
buttons={buttons}/>
);
}
});

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

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

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

@ -174,8 +174,16 @@ let PrizeJurySettings = React.createClass({
<ActionPanel
name={member.email}
key={i}
title={member.email}
content={member.status}
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</div>
</div>
}
buttons={
<div className="pull-right">
<button
@ -201,17 +209,23 @@ let PrizeJurySettings = React.createClass({
<ActionPanel
name={member.email}
key={i}
title={member.email}
content={member.status}
buttons={
<div className="pull-right">
<button
className="btn btn-default btn-sm ascribe-btn-gray"
onClick={this.handleRevoke}
data-id={member.email}>
{getLangText('REVOKE')}
</button>
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</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
name={member.email}
key={i}
title={member.email}
content={member.status}
buttons={
<div className="pull-right">
<button
className="btn btn-default btn-sm"
onClick={this.handleActivate}
data-id={member.email}>
{getLangText('ACTIVATE')}
</button>
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</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 {
border: 1px solid #DDD;
padding: 1.4em;
margin: 1em 0 1em 0;
min-height: 5em;
height: 5em;
margin-top: 1em;
> div {
height: 100%;
float: left;
&:first-child {
width: 60%;
}
&:nth-child(2) {
width: 40%;
}
}
}
.ascribe-panel-title {
margin-bottom: 0.5em;
.ascribe-panel-table {
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 {
font-size: 0.9em;
color: rgba(0,0,0,0.5);
@media(max-width:767px) {
.ascribe-panel-title {
font-size: .9em;
}
.ascribe-panel-subtitle {
font-size: .7em;
color: rgba(0,0,0,0.5);
}
}
.ascribe-panel-buttons {
margin-top: 0.5em;
}
@media(min-width:768px) {
.ascribe-panel-title {
font-size: 1.1em;
}
.ascribe-panel-subtitle {
font-size: .9em;
color: rgba(0,0,0,0.5);
}
}