Skip to content

Commit ee13781

Browse files
caduribascaduribas
committed
CSS file customization - #12 
1 parent a070049 commit ee13781

File tree

10 files changed

+83
-33
lines changed

10 files changed

+83
-33
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ To show some examples and/or enable the Rfam search, use:
3939
/>
4040
```
4141

42-
For a minimal example, see [index.html](./index.html).
42+
For a minimal example, see [index.html](./index.html). For an Rfam example, see [rfam.html](./rfam.html).
4343

44-
For an Rfam example, see [rfam.html](./rfam.html).
44+
To change the layout, you will need to edit this file: [index.scss](./src/index.scss)
4545

4646
## Attributes/parameters
4747

‎dist/RNAcentral-sequence-search.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/RNAcentral-sequence-search.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ 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'
1516

1617

1718
// Prepare data
@@ -40,6 +41,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
4041
<style key={animate} dangerouslySetInnerHTML={{__html: animate}}/>,
4142
<style key={sequenceSearchStyles} dangerouslySetInnerHTML={{__html: sequenceSearchStyles}}/>,
4243
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
44+
<style key={customStyles} dangerouslySetInnerHTML={{__html: customStyles}}/>,
4345
<body key='body'>
4446
<Provider key='provider' store={store}>
4547
<SequenceSearch databases={databases} examples={examples} rfam={rfam}/>

‎src/containers/SequenceSearch/components/Results/components/Facets.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class Facets extends React.Component {
1313

1414
renderFacet(facet) {
1515
return [
16-
<legend key={`legend-${facet.id}`}><h5 style={{color: 'rgb(0,124,130)' }}>{ facet.label }</h5></legend>,
16+
<legend key={`legend-${facet.id}`}><h5 className="custom-h5">{ facet.label }</h5></legend>,
1717
<ul key={facet.id} className="vertical menu facet">
1818
{
1919
facet.facetValues.map(facetValue => (

‎src/containers/SequenceSearch/components/Results/components/Hit.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ class Hit extends React.Component {
99
return (
1010
<li className="result">
1111
<div className="text-search-result">
12-
<h4>
12+
<h6 className="custom-h6">
1313
<a href={`https://rnacentral.org/rna/${ this.props.entry.rnacentral_id }`}>{ this.props.entry.description }</a>
14-
</h4>
14+
</h6>
1515
<small>{ this.props.entry.rnacentral_id }</small>
1616
<ul className="menu small">
1717
<li>{this.props.entry.target_length} nucleotides</li>
18-
<li></li>
1918
</ul>
2019
<small>
2120
<a onClick={ this.props.onToggleAlignmentsCollapsed }>

‎src/containers/SequenceSearch/components/Results/index.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ class Results extends React.Component {
4242
{
4343
this.props.rfam && (
4444
(this.props.infernal_status === "loading" || this.props.infernal_status === "success") && [
45-
<h1 key={`infernal-header`} className="margin-top-large margin-bottom-large">Rfam classification: { this.props.infernal_status === "loading" ? <i className="animated infinite flash">...</i> : '' }</h1>,
45+
<h2 className="custom-h2" key={`infernal-header`}>Rfam classification: { this.props.infernal_status === "loading" ? <i className="animated infinite flash">...</i> : '' }</h2>,
4646
<div key={`infernal-div`}>
47-
<table>
47+
<table id="infernal-table">
4848
<thead>
4949
<tr>
5050
<th>Family</th>
@@ -59,8 +59,8 @@ class Results extends React.Component {
5959
<tbody>
6060
{ this.props.infernal_entries.length ? this.props.infernal_entries.map((entry, index) => (
6161
<tr key={`${index}`}>
62-
<td>{entry.description}</td>
63-
<td>{entry.accession_rfam}</td>
62+
<td><a href={`https://rfam.org/family/${entry.target_name}`} target="_blank">{entry.description}</a></td>
63+
<td><a href={`https://rfam.org/family/${entry.accession_rfam}`} target="_blank">{entry.accession_rfam}</a></td>
6464
<td>{entry.seq_from}</td>
6565
<td>{entry.seq_to}</td>
6666
<td>{entry.score}</td>
@@ -76,7 +76,7 @@ class Results extends React.Component {
7676
}
7777
{
7878
(this.props.status === "loading" || this.props.status === "success" || this.props.status === "partial_success") && [
79-
<h1 key={`results-header`} className="margin-top-large margin-bottom-large">Similar sequences: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount }</small> }</h1>,
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>,
8080
<div key={`results-div`} className="small-12 medium-10 medium-push-2 columns">
8181
<section>
8282
{ this.props.entries.map((entry, index) => (

‎src/containers/SequenceSearch/components/SearchForm/index.jsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class SearchForm extends React.Component {
1111
if (databases.length > 1) {
1212
return (
1313
<div>
14-
<h1>Search in&nbsp;
14+
<h1 className="custom-h1">Search in&nbsp;
1515
{
1616
databases.map(function(item, index) {
1717
return <span key={`${index}`}>{ (index ? ', ' : '') + item }</span>;
@@ -21,21 +21,19 @@ class SearchForm extends React.Component {
2121
</div>
2222
)
2323
} else if (databases.length === 0) {
24-
return <h1>Search in RNAcentral</h1>
24+
return <h1 className="custom-h1">Search in RNAcentral</h1>
2525
} else {
26-
return <h1>Search in {databases}</h1>
26+
return <h1 className="custom-h1">Search in {databases}</h1>
2727
}
2828
}
2929

3030
showExamples(){
3131
const examples = this.props.examples;
3232
return examples.map(example =>
33-
<div key={example.description} style={{marginLeft: '10px'}}>
34-
<label>
35-
- <a onClick={() => this.props.onExampleSequence(example.sequence)}>{example.description}</a>
36-
<small>{!!(example.urs) ? `(${example.urs})` : ""}</small>
37-
</label>
38-
</div>)
33+
<li key={example.description}>
34+
<a onClick={() => this.props.onExampleSequence(example.sequence)}>{example.description}</a>
35+
<small>{!!(example.urs) ? ` (${example.urs})` : " "}</small>
36+
</li>)
3937
}
4038

4139
onSubmit(event) {
@@ -60,13 +58,12 @@ class SearchForm extends React.Component {
6058
<form onSubmit={(e) => this.onSubmit(e)}>
6159
<div>
6260
<fieldset>
63-
<div>Examples:</div>
64-
{this.showExamples()}
61+
{this.props.examples ? <div id="examples"><span>Examples:</span><ul>{this.showExamples()}</ul></div> : ""}
6562
<textarea id="sequence" name="sequence" rows="7" value={this.props.sequence} onChange={(e) => this.props.onSequenceTextareaChange(e)} />
66-
<p>
67-
Or upload a file (with ".fasta" extension):
63+
<div id="upload-file">
64+
<span>Or upload a file (with ".fasta" extension):</span>
6865
<input id="sequence-file" name="sequence-file" type="file" accept=".fasta" onChange={this.props.onFileUpload} />
69-
</p>
66+
</div>
7067
</fieldset>
7168
</div>
7269
{ this.props.submissionError && <div className="callout alert">
@@ -75,10 +72,10 @@ class SearchForm extends React.Component {
7572
</div>}
7673
<div>
7774
<fieldset>
78-
<div id="jd_submitButtonPanel">
79-
<input name="submit" type="submit" value="Submit" className="button" />{' '}
80-
<input name="clear" type="submit" value="Clear sequence" className="button" style={{background: '#6c757d'}} onClick={ this.props.onClearSequence } />{' '}
81-
<spam style={{float: 'right', fontFamily: 'Verdana,sans-serif', fontSize: '85%'}}>Powered by <a target='_blank' href='https://rnacentral.org/'>RNAcentral</a></spam>
75+
<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 } />{' '}
78+
<div id="powered-by">Powered by <a target='_blank' href='https://rnacentral.org/'>RNAcentral</a></div>
8279
</div>
8380
</fieldset>
8481
</div>

‎src/containers/SequenceSearch/index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,9 @@
1919
max-height: 20em;
2020
margin-bottom: 1em;
2121
}
22+
23+
#powered-by {
24+
float: right;
25+
font-family: Verdana, sans-serif;
26+
font-size: 85%
27+
}

‎src/index.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// h1 text (Search in XYZ)
2+
.custom-h1 {}
3+
4+
// h2 text (Rfam classification / Similar sequences)
5+
.custom-h2 {
6+
color: #666;
7+
font-weight: 300;
8+
font-size: 2rem;
9+
}
10+
11+
// h5 text (used in the title of each facet)
12+
.custom-h5 {
13+
color: #007c82
14+
}
15+
16+
// h6 text (used in the result title for each sequence)
17+
.custom-h6 {}
18+
19+
// div with sequence examples
20+
#examples ul{
21+
list-style: none;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
#examples ul li {
27+
display: inline;
28+
padding-right: 10px;
29+
}
30+
31+
// upload file
32+
#upload-file input {
33+
font-size: smaller;
34+
}
35+
36+
// submit button
37+
#submit-button {}
38+
39+
// clear button
40+
#clear-button {
41+
background: #6c757d
42+
}
43+
44+
// Rfam results table
45+
#infernal-table {}
46+

0 commit comments

Comments
 (0)