Commit b7913db0 authored by charlie-ablett's avatar charlie-ablett

Further styling

parent 1d8a06e8
Pipeline #368 skipped
......@@ -26,7 +26,8 @@ export default class ConversionDetail extends Component {
renderTitle() {
let { conversion } = this.props;
const success_or_failure = conversion.successful === true ? "Successful" : "Failed";
return(`${success_or_failure} conversion of ${conversion.input_file_name}`);
const time = this.renderExecutedAtForHumans(conversion.executed_at)
return(`${success_or_failure} conversion of ${conversion.input_file_name} (${time})`);
}
renderLinkText(file_name) {
......@@ -60,15 +61,14 @@ export default class ConversionDetail extends Component {
return (
<div className="conversion-result-border">
{this.conversionResult()}
<p>Converted {this.renderExecutedAtForHumans(conversion.executed_at)}</p>
<p>Original: <a href="/download_file" onClick={this.handleInputFileDownload}>{this.renderLinkText(conversion.input_file_name)}</a>
<span className="fa fa-2x fa-magic"/><span className="fa fa-2x fa-arrow-right"/>
{this.renderOutputFileLink(conversion.output_file_path, this.handleInputFileDownload)}
=> {this.renderOutputFileLink(conversion.output_file_path, this.handleInputFileDownload)}
</p>
<table striped bordered condensed hover>
<table className="table">
<thead>
<tr>
<th>conversion status</th>
<th>status</th>
<th>#</th>
<th>Step name</th>
<th>Output file</th>
......
import React, { Component, PropTypes } from 'react';
import _ from "lodash"
import * as actions from '../actions/authenticationActions';
import { downloadFile } from '../businessLogic/fileLogic';
......@@ -11,17 +13,17 @@ export default class ConversionDetailStep extends Component {
}
renderRowClass(executed_at, conversion_errors) {
if(executed_at === null) {
if(_.isNil(executed_at)) {
return("");
}
else if(conversion_errors === null || conversion_errors === "") {
else if(_.isNil(conversion_errors) || _.isEmpty(conversion_errors)) {
return("success");
}
return("danger");
return("fail");
}
renderIcon(conversion_errors) {
if(conversion_errors === null || conversion_errors === "") {
if(_.isNil(conversion_errors) || _.isEmpty(conversion_errors)) {
return(<span className="fa fa-check"/>);
}
......@@ -31,9 +33,9 @@ export default class ConversionDetailStep extends Component {
}
renderLink(conversion_errors, conversion_step_id, handleOutputFileDownload) {
if(conversion_errors === null || conversion_errors === undefined || conversion_errors === "") {
if(_.isNil(conversion_errors) || _.isEmpty(conversion_errors)) {
return(
<a onClick={handleOutputFileDownload}>Result <span className="fa fa-download"/></a>
<a href="#" onClick={handleOutputFileDownload}>Result <span className="fa fa-download"/></a>
);
}
return(
......@@ -46,9 +48,9 @@ export default class ConversionDetailStep extends Component {
return(
<tr className={this.renderRowClass(step.executed_at, step.conversion_errors)}>
<td>{this.renderIcon(step.conversion_errors)}</td>
<td>{step.position}</td>
<td>{step.step_class_name}</td>
<td className="cell">{this.renderIcon(step.conversion_errors)}</td>
<td className="cell">{step.position}</td>
<td className="cell">{step.step_class_name}</td>
<td>{this.renderLink(step.conversion_errors, step.id, this.handleOutputFileDownload)}</td>
</tr>
);
......
......@@ -23,7 +23,8 @@ export default class ConversionFileForm extends Component {
return(
<span className="grey">
<div>
<input type="file" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
<input type="file-picker file-picker--disabled" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
<br/>
<input type="file-button file-button--disabled" disabled><i className="fa fa-spinner fa-pulse grey fa-lg"></i> Converting...</input>
</div>
</span>
......@@ -32,8 +33,9 @@ export default class ConversionFileForm extends Component {
return(
<div className="choose-file-container">
<input type="file" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
<button onClick={this.handleExecution}>Convert!</button>
<input className="file-picker" type="file" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
<br/>
<button className="file-button" onClick={this.handleExecution}>Convert!</button>
</div>
);
}
......
......@@ -19,7 +19,6 @@ export default class ConversionList extends Component {
if(this.props.recipe) {
return (
<div>
<h4><span className="fa fa-file"/> File conversions <span>({this.props.recipe.times_executed})</span></h4>
<div className="conversion-result-border__top">
{this.props.recipe.conversion_chains.map(conversion =>
<ConversionDetail
......
......@@ -4,11 +4,13 @@ import * as actions from '../actions/authenticationActions';
export default class RecipeStepDetail extends Component {
render() {
const stepClassName = this.props.recipeStep.step_class_name;
const position = this.props.recipeStep.position;
const { position, step_class_name, step_class_description} = this.props.recipeStep;
return(
<p className="step step--blue step--regular">{position}. {stepClassName}</p>
<div>
<div className="step step--blue step__number">{position}. {step_class_name}</div>
<div className="step step--blue step__description">{ step_class_description }</div>
</div>
);
}
}
......
......@@ -71,15 +71,17 @@ class RecipeShowPage extends Component {
<div className="recipe-detail-view-container">
<div>
<h3>Steps</h3>
{recipe.recipe_steps.map(recipeStep =>
<RecipeStepDetail
key={recipeStep.id}
recipeStep={recipeStep}
/>)
}
<div className="steps-container">
{recipe.recipe_steps.map(recipeStep =>
<RecipeStepDetail
key={recipeStep.id}
recipeStep={recipeStep}
/>)
}
</div>
</div>
<div className="recipe-conversion-history-container">
<h3>Previous conversions</h3>
<h3>Previous conversions ({recipe.times_executed})</h3>
{this.renderConversionList(recipe)}
</div>
</div>
......
......@@ -35,7 +35,6 @@
background-color: $studio
cursor: pointer
// TODO: Discuss with the team how we want to handle accessibility
outline: none
&--clear
......
table
width: 100%
td
border-top: 1px solid transparentize($fountain-blue, 0.7)
.cell
border-right: 1px solid transparentize($fountain-blue, 0.7)
tr.success
color: $chelsea-cucumber
tr.fail
color: $punch
......@@ -25,4 +25,10 @@ p
.step
font-size: 1.25rem
color: $fountain-blue
&--blue
color: $fountain-blue
&--white
color: $white
font-weight: bold
......@@ -12,6 +12,7 @@
@import "atoms/hrules.sass"
@import "atoms/lists.sass"
@import "atoms/typography.sass"
@import "atoms/tables.sass"
// molecules
......@@ -21,6 +22,7 @@
@import "molecules/logo.sass"
@import "molecules/recipe-item.sass"
@import "molecules/sign-in-form.sass"
@import "molecules/steps-container.sass"
// organisms
......
......@@ -3,3 +3,28 @@
border-radius: 10px
padding: $spacing
margin-bottom: 2px
input[type="file"]::-webkit-file-upload-button
border: none
font-size: 1.5rem
background-color: $fountain-blue
font-family: "Fira Sans"
color: $white
.file-picker
font-family: "Fira Sans"
&--disabled
color: $silver
background-color: transparentize($fountain-blue, 0.7)
.file-button
font-family: "Fira Sans"
background-color: $studio
color: $white
font-size: 1.5rem
border: none
&--disabled
color: $silver
background-color: transparentize($studio, 0.3)
.steps-container
border-top: 1px solid $fountain-blue
border-bottom: 1px solid $fountain-blue
padding: $spacing
margin-right: $spacing * 2
width: 300px
.step__description
font-size: 1rem
padding-left: $spacing/2
margin-bottom: $spacing *2
.step__number
font-size: 2rem
font-weight: bold
margin-top: $spacing
margin-bottom: $spacing/2
.recipe-detail-view-container
display: flex
justify-content: space-around
margin-top: $spacing * 1.5
Markdown is supported
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