Skip to content

Commit f607fef

Browse files
carlosribascarlosribas
committed
Layout customisation - #12 
1 parent 627f2ad commit f607fef

File tree

10 files changed

+76
-78
lines changed

10 files changed

+76
-78
lines changed

Diff for: ‎dist/RNAcentral-sequence-search.js

+8-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/RNAcentral-sequence-search.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/app.jsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ import fonts from 'EBI-Icon-fonts/fonts.css';
1212
import animate from 'animate.css/animate.min.css';
1313
import sequenceSearchStyles from 'containers/SequenceSearch/index.scss';
1414
import resultsStyles from 'containers/SequenceSearch/components/Results/index.scss';
15-
import customStyles from 'index.scss'
16-
1715

1816
// Prepare data
1917
export const store = configureStore();
@@ -33,6 +31,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
3331
const examples = JSON.parse(this.attributes.examples ? this.attributes.examples.nodeValue : null);
3432
const rfam = JSON.parse(this.attributes.rfam ? this.attributes.rfam.nodeValue : null);
3533
const hideFacet = JSON.parse(this.attributes.hideFacet ? this.attributes.hideFacet.nodeValue : null);
34+
const customStyle = JSON.parse(this.attributes.customStyle ? this.attributes.customStyle.nodeValue : null);
3635

3736
// render React
3837
ReactDOM.render([
@@ -42,10 +41,15 @@ class RNAcentralSequenceSearch extends HTMLElement {
4241
<style key={animate} dangerouslySetInnerHTML={{__html: animate}}/>,
4342
<style key={sequenceSearchStyles} dangerouslySetInnerHTML={{__html: sequenceSearchStyles}}/>,
4443
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
45-
<style key={customStyles} dangerouslySetInnerHTML={{__html: customStyles}}/>,
4644
<body key='body'>
4745
<Provider key='provider' store={store}>
48-
<SequenceSearch databases={databases} examples={examples} rfam={rfam} hideFacet={hideFacet}/>
46+
<SequenceSearch
47+
databases={databases}
48+
examples={examples}
49+
rfam={rfam}
50+
hideFacet={hideFacet}
51+
customStyle={customStyle}
52+
/>
4953
</Provider>
5054
</body>
5155
],

Diff for: ‎src/containers/SequenceSearch/components/Results/components/Facets.jsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@ class Facets extends React.Component {
1212
}
1313

1414
renderFacet(facet) {
15+
let facetStyle = {
16+
color: this.props.customStyle && this.props.customStyle.facetColor ? this.props.customStyle.facetColor : "#007c82",
17+
fontSize: this.props.customStyle && this.props.customStyle.facetSize ? this.props.customStyle.facetSize : "",
18+
};
1519
return [
16-
<legend key={`legend-${facet.id}`}><h5 className="custom-h5">{ facet.label }</h5></legend>,
20+
<legend key={`legend-${facet.id}`}><h5 style={facetStyle}>{ facet.label }</h5></legend>,
1721
<ul key={facet.id} className="vertical menu facet">
1822
{
1923
facet.facetValues.map(facetValue => (

Diff for: ‎src/containers/SequenceSearch/components/Results/components/Hit.jsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@ import * as actionCreators from 'actions/actions';
66

77
class Hit extends React.Component {
88
render() {
9+
let seqTitleStyle = {
10+
color: this.props.customStyle && this.props.customStyle.seqTitleColor ? this.props.customStyle.seqTitleColor : "",
11+
fontSize: this.props.customStyle && this.props.customStyle.seqTitleSize ? this.props.customStyle.seqTitleSize : "20px",
12+
};
13+
let seqInfoStyle = {
14+
color: this.props.customStyle && this.props.customStyle.seqInfoColor ? this.props.customStyle.seqInfoColor : "",
15+
fontSize: this.props.customStyle && this.props.customStyle.seqInfoSize ? this.props.customStyle.seqInfoSize : "14px",
16+
};
917
return (
1018
<li className="result">
1119
<div className="text-search-result">
12-
<h6 className="custom-h6">
13-
<a href={`https://rnacentral.org/rna/${ this.props.entry.rnacentral_id }`}>{ this.props.entry.description }</a>
14-
</h6>
15-
<small>{ this.props.entry.rnacentral_id }</small>
16-
<ul className="menu small">
17-
<li>{this.props.entry.target_length} nucleotides</li>
18-
</ul>
20+
<div>
21+
<a style={seqTitleStyle} href={`https://rnacentral.org/rna/${ this.props.entry.rnacentral_id }`}>{ this.props.entry.description }</a>
22+
</div>
23+
<div style={seqInfoStyle}>{ this.props.entry.rnacentral_id }</div>
24+
<div style={seqInfoStyle}>{this.props.entry.target_length} nucleotides</div>
1925
<small>
2026
<a onClick={ this.props.onToggleAlignmentsCollapsed }>
2127
{ this.props.alignmentsCollapsed ? <span>&#x25B6; show alignments</span> : <span>&#x25BC; hide alignments</span> }

Diff for: ‎src/containers/SequenceSearch/components/Results/index.jsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ class Results extends React.Component {
1414
}
1515

1616
render() {
17+
let h2Style = {
18+
color: this.props.customStyle && this.props.customStyle.h2Color ? this.props.customStyle.h2Color : "#666",
19+
fontSize: this.props.customStyle && this.props.customStyle.h2Size ? this.props.customStyle.h2Size : "",
20+
fontWeight: "300",
21+
};
1722
return (
1823
<div className="row">
1924
{
@@ -42,9 +47,9 @@ class Results extends React.Component {
4247
{
4348
this.props.rfam && (
4449
(this.props.infernal_status === "loading" || this.props.infernal_status === "success") && [
45-
<h2 className="custom-h2" key={`infernal-header`}>Rfam classification: { this.props.infernal_status === "loading" ? <i className="animated infinite flash">...</i> : '' }</h2>,
50+
<h2 style={h2Style} key={`infernal-header`}>Rfam classification: { this.props.infernal_status === "loading" ? <i className="animated infinite flash">...</i> : '' }</h2>,
4651
<div key={`infernal-div`}>
47-
<table id="infernal-table">
52+
<table className="responsive-table">
4853
<thead>
4954
<tr>
5055
<th>Family</th>
@@ -76,11 +81,11 @@ class Results extends React.Component {
7681
}
7782
{
7883
(this.props.status === "loading" || this.props.status === "success" || this.props.status === "partial_success") && [
79-
<h2 className="custom-h2" key={`results-header`}>Similar sequences: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount }</small> }</h2>,
84+
<h2 style={h2Style} key={`results-header`}>Similar sequences: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount }</small> }</h2>,
8085
<div key={`results-div`} className="small-12 medium-10 medium-push-2 columns">
8186
<section>
8287
{ this.props.entries.map((entry, index) => (
83-
<ul key={`${entry}_${index}`}><Hit entry={entry} alignmentsCollapsed={this.props.alignmentsCollapsed} onToggleAlignmentsCollapsed={ this.onToggleAlignmentsCollapsed } /></ul>
88+
<ul key={`${entry}_${index}`}><Hit entry={entry} alignmentsCollapsed={this.props.alignmentsCollapsed} onToggleAlignmentsCollapsed={ this.onToggleAlignmentsCollapsed } customStyle={ this.props.customStyle }/></ul>
8489
)) }
8590
{(this.props.status === "success" || this.props.status === "partial_success") && (this.props.entries.length < this.props.hitCount) && (<a className="button small" onClick={this.props.onLoadMore} target="_blank">Load more</a>)}
8691
</section>
@@ -94,6 +99,7 @@ class Results extends React.Component {
9499
ordering={ this.props.ordering }
95100
textSearchError={ this.props.textSearchError }
96101
hideFacet={ this.props.hideFacet}
102+
customStyle={ this.props.customStyle }
97103
/> : ''}
98104
</div>
99105
]

Diff for: ‎src/containers/SequenceSearch/components/SearchForm/index.jsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ import {store} from "app.jsx";
88
class SearchForm extends React.Component {
99
showDatabase(){
1010
const databases = this.props.databases;
11+
const h1Style = {
12+
color: this.props.customStyle && this.props.customStyle.h1Color ? this.props.customStyle.h1Color : "",
13+
fontSize: this.props.customStyle && this.props.customStyle.h1Size ? this.props.customStyle.h1Size : "",
14+
};
1115
if (databases.length > 1) {
1216
return (
1317
<div>
14-
<h1 className="custom-h1">Search in&nbsp;
18+
<h1 style={h1Style}>Search in&nbsp;
1519
{
1620
databases.map(function(item, index) {
1721
return <span key={`${index}`}>{ (index ? ', ' : '') + item }</span>;
@@ -21,9 +25,9 @@ class SearchForm extends React.Component {
2125
</div>
2226
)
2327
} else if (databases.length === 0) {
24-
return <h1 className="custom-h1">Search in RNAcentral</h1>
28+
return <h1 style={h1Style}>Search in RNAcentral</h1>
2529
} else {
26-
return <h1 className="custom-h1">Search in {databases}</h1>
30+
return <h1 style={h1Style}>Search in {databases}</h1>
2731
}
2832
}
2933

@@ -47,6 +51,8 @@ class SearchForm extends React.Component {
4751
}
4852

4953
render() {
54+
const submitButtonColor = this.props.customStyle && this.props.customStyle.submitButtonColor ? this.props.customStyle.submitButtonColor : "";
55+
const clearButtonColor = this.props.customStyle && this.props.customStyle.clearButtonColor ? this.props.customStyle.clearButtonColor : "#6c757d";
5056
return (
5157
<div className="row">
5258
<div className="col-lg-12">
@@ -73,8 +79,8 @@ class SearchForm extends React.Component {
7379
<div>
7480
<fieldset>
7581
<div>
76-
<input id="submit-button" name="submit" type="submit" value="Submit" className="button" />{' '}
77-
<input id="clear-button" name="clear" type="submit" value="Clear sequence" className="button" onClick={ this.props.onClearSequence } />{' '}
82+
<input id="submit-button" style={{background: submitButtonColor}} name="submit" type="submit" value="Submit" className="button" />{' '}
83+
<input id="clear-button" style={{background: clearButtonColor}} name="clear" type="submit" value="Clear sequence" className="button" onClick={ this.props.onClearSequence } />{' '}
7884
<div id="powered-by">Powered by <a target='_blank' href='https://rnacentral.org/'>RNAcentral</a></div>
7985
</div>
8086
</fieldset>

Diff for: ‎src/containers/SequenceSearch/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ class SequenceSearch extends React.Component {
1313

1414
render() {
1515
return [
16-
<SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples}/>,
17-
<Results key={`results`} rfam={this.props.rfam} hideFacet={this.props.hideFacet}/>
16+
<SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples} customStyle={this.props.customStyle}/>,
17+
<Results key={`results`} rfam={this.props.rfam} hideFacet={this.props.hideFacet} customStyle={this.props.customStyle}/>
1818
]
1919
}
2020
}

Diff for: ‎src/containers/SequenceSearch/index.scss

+18
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@
2020
margin-bottom: 1em;
2121
}
2222

23+
// div with sequence examples
24+
#examples ul{
25+
list-style: none;
26+
padding: 0;
27+
margin: 0;
28+
}
29+
30+
#examples ul li {
31+
display: inline;
32+
padding-right: 10px;
33+
}
34+
35+
// upload file
36+
#upload-file input {
37+
font-size: smaller;
38+
}
39+
40+
// div powered-by
2341
#powered-by {
2442
float: right;
2543
font-family: Verdana, sans-serif;

Diff for: ‎src/index.scss

-46
This file was deleted.

0 commit comments

Comments
 (0)