Commit 1971ec1b authored by ZeHiro's avatar ZeHiro Committed by ZeHiro
Browse files

Remove useless div. Align panels of all the sections. Fixes #577

parent 24258d4c
......@@ -127,89 +127,87 @@ class Budget extends React.Component {
});
return (
<div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.budget.title') }
</h3>
</div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.budget.title') }
</h3>
</div>
<div className="panel-body">
<div className="row">
<p className="col-md-4">
<label className="budget-period-label">
{ $t('client.budget.period') }:
</label>
<select
onChange={ this.handleChange }
defaultValue={ `${currentYear}-${currentMonth}` }>
{ months }
</select>
</p>
<p className="col-md-4">
<label className="budget-display-label">
{ $t('client.budget.show_categories_without_budget') }:
<input
type="checkbox"
onChange={ this.handleToggleWithoutThreshold }
checked={ this.state.showCatWithoutThreshold }
/>
</label>
</p>
<p className="col-md-4">
<label className="budget-display-label">
{ $t('client.budget.display_in_percent') }:
<input
type="checkbox"
onChange={ this.handleTogglePercentDisplay }
checked={ this.state.displayInPercent }
/>
</label>
</p>
</div>
<div className="panel-body">
<div className="row">
<p className="col-md-4">
<label className="budget-period-label">
{ $t('client.budget.period') }:
</label>
<select
onChange={ this.handleChange }
defaultValue={ `${currentYear}-${currentMonth}` }>
{ months }
</select>
</p>
<p className="col-md-4">
<label className="budget-display-label">
{ $t('client.budget.show_categories_without_budget') }:
<input
type="checkbox"
onChange={ this.handleToggleWithoutThreshold }
checked={ this.state.showCatWithoutThreshold }
/>
</label>
</p>
<p className="col-md-4">
<label className="budget-display-label">
{ $t('client.budget.display_in_percent') }:
<input
type="checkbox"
onChange={ this.handleTogglePercentDisplay }
checked={ this.state.displayInPercent }
/>
</label>
</p>
</div>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover table-bordered budget">
<thead>
<tr>
<th className="col-sm-4 col-xs-6">
{ $t('client.category.column_category_name') }
</th>
<th className="col-sm-4 col-xs-6">
{ $t('client.budget.amount') }
</th>
<th className="col-sm-2 hidden-xs">
{ $t('client.budget.threshold') }
</th>
<th className="col-sm-1 hidden-xs">
{ $t('client.budget.difference') }
</th>
<th className="col-sm-1 hidden-xs">&nbsp;</th>
</tr>
</thead>
<tbody>
{ items }
<tr>
<th className="col-sm-4 col-xs-6">
{ $t('client.budget.total') }
</th>
<th className="col-sm-5 col-xs-6 text-right">
{ sumAmounts.toFixed(2) }
</th>
<th className="col-sm-1 hidden-xs text-right">
{ sumThresholds.toFixed(2) }
</th>
<th className="col-sm-1 hidden-xs text-right">
{ remaining }
</th>
<th className="col-sm-1 hidden-xs">&nbsp;</th>
</tr>
</tbody>
</table>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover table-bordered budget">
<thead>
<tr>
<th className="col-sm-4 col-xs-6">
{ $t('client.category.column_category_name') }
</th>
<th className="col-sm-4 col-xs-6">
{ $t('client.budget.amount') }
</th>
<th className="col-sm-2 hidden-xs">
{ $t('client.budget.threshold') }
</th>
<th className="col-sm-1 hidden-xs">
{ $t('client.budget.difference') }
</th>
<th className="col-sm-1 hidden-xs">&nbsp;</th>
</tr>
</thead>
<tbody>
{ items }
<tr>
<th className="col-sm-4 col-xs-6">
{ $t('client.budget.total') }
</th>
<th className="col-sm-5 col-xs-6 text-right">
{ sumAmounts.toFixed(2) }
</th>
<th className="col-sm-1 hidden-xs text-right">
{ sumThresholds.toFixed(2) }
</th>
<th className="col-sm-1 hidden-xs text-right">
{ remaining }
</th>
<th className="col-sm-1 hidden-xs">&nbsp;</th>
</tr>
</tbody>
</table>
</div>
</div>
);
......
......@@ -70,44 +70,42 @@ class CategoryList extends React.Component {
}
return (
<div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.category.title') }
</h3>
<div className="panel-options">
<span
className={ `option-legend fa fa-${buttonType}-circle` }
aria-label={ buttonAriaLabel }
title={ $t(buttonLabel) }
onClick={ this.handleShowForm }
/>
</div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.category.title') }
</h3>
<div className="panel-options">
<span
className={ `option-legend fa fa-${buttonType}-circle` }
aria-label={ buttonAriaLabel }
title={ $t(buttonLabel) }
onClick={ this.handleShowForm }
/>
</div>
<table className="table table-striped table-hover table-bordered">
<thead>
<tr>
<th className="col-sm-1">
{ $t('client.category.column_category_color') }
</th>
<th className="col-sm-10">
{ $t('client.category.column_category_name') }
</th>
<th className="col-sm-1">
{ $t('client.category.column_action') }
</th>
</tr>
</thead>
<tbody>
{ maybeForm }
{ items }
</tbody>
</table>
</div>
<table className="table table-striped table-hover table-bordered">
<thead>
<tr>
<th className="col-sm-1">
{ $t('client.category.column_category_color') }
</th>
<th className="col-sm-10">
{ $t('client.category.column_category_name') }
</th>
<th className="col-sm-1">
{ $t('client.category.column_action') }
</th>
</tr>
</thead>
<tbody>
{ maybeForm }
{ items }
</tbody>
</table>
</div>
);
}
......
......@@ -127,55 +127,53 @@ export default connect(state => {
}
return (
<div key="duplicates-list">
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.similarity.title') }
</h3>
<div className="panel-options">
<span
className='option-legend fa fa-cog'
title={ $t('client.general.default_parameters') }
data-toggle="modal"
data-target='#defaultParams'
/>
</div>
<DefaultParamsModal modalId='defaultParams' />
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.similarity.title') }
</h3>
<div className="panel-options">
<span
className='option-legend fa fa-cog'
title={ $t('client.general.default_parameters') }
data-toggle="modal"
data-target='#defaultParams'
/>
</div>
<div className="panel-body">
<div className="row duplicates-explanation">
<p className="col-xs-12 col-md-8">
{ $t('client.similarity.threshold_1') }&nbsp;
<strong>
{ props.duplicateThreshold }
&nbsp;{ $t('client.similarity.hours') }
</strong>. { $t('client.similarity.threshold_2') }.
</p>
<div className="col-xs-12 col-md-4">
<div className="btn-group col-xs-12">
<button
className="btn btn-default col-xs-6"
onClick={ fewer }
disabled={ !props.allowFewer }>
{ $t('client.similarity.find_fewer') }
</button>
<button
className="btn btn-default col-xs-6"
onClick={ more }
disabled={ !props.allowMore }>
{ $t('client.similarity.find_more') }
</button>
</div>
<DefaultParamsModal modalId='defaultParams' />
</div>
<div className="panel-body">
<div className="row duplicates-explanation">
<p className="col-xs-12 col-md-8">
{ $t('client.similarity.threshold_1') }&nbsp;
<strong>
{ props.duplicateThreshold }
&nbsp;{ $t('client.similarity.hours') }
</strong>. { $t('client.similarity.threshold_2') }.
</p>
<div className="col-xs-12 col-md-4">
<div className="btn-group col-xs-12">
<button
className="btn btn-default col-xs-6"
onClick={ fewer }
disabled={ !props.allowFewer }>
{ $t('client.similarity.find_fewer') }
</button>
<button
className="btn btn-default col-xs-6"
onClick={ more }
disabled={ !props.allowMore }>
{ $t('client.similarity.find_more') }
</button>
</div>
</div>
<div className="alert alert-info">
<span className="fa fa-question-circle pull-left" />
{ $t('client.similarity.help') }
</div>
{ sim }
</div>
<div className="alert alert-info">
<span className="fa fa-question-circle pull-left" />
{ $t('client.similarity.help') }
</div>
{ sim }
</div>
</div>
);
......
......@@ -52,23 +52,21 @@ export default class SettingsComponents extends React.Component {
menuItems.set('weboob', $t('client.settings.tab_weboob'));
return (
<div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.settings.title') }
</h3>
</div>
<div className="top-panel panel panel-default">
<div className="panel-heading">
<h3 className="title panel-title">
{ $t('client.settings.title') }
</h3>
</div>
<div className="panel-body">
<TabMenu
onChange={ this.handleTabChange }
defaultValue={ this.state.showing }
tabs={ menuItems }
/>
<div className="panel-body">
<TabMenu
onChange={ this.handleTabChange }
defaultValue={ this.state.showing }
tabs={ menuItems }
/>
{ Tab }
</div>
{ Tab }
</div>
</div>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment