Skip to content

Commit a40da1f

Browse files
BurkovBABurkovBA
committed
Removed css modules stuff, built everything as web component. Only fonts
still glitch.
1 parent ecf2116 commit a40da1f

File tree

12 files changed

+89
-106
lines changed

12 files changed

+89
-106
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"babel-preset-es2015": "^6.24.1",
6666
"babel-preset-react": "^6.24.1",
6767
"css-loader": "^0.28.4",
68+
"css-to-string-loader": "^0.1.3",
6869
"extract-text-webpack-plugin": "^3.0.2",
6970
"file-loader": "^0.11.2",
7071
"html-webpack-plugin": "^3.2.0",

‎src/actions/actions.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import styles from 'containers/SequenceSearch/components/SearchForm/index.scss';
2-
31
import * as types from './actionTypes';
42
import routes from 'services/routes.jsx';
53
import {store} from 'app.jsx';

‎src/app.jsx‎

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,44 @@ import {Provider} from 'react-redux';
66
import SequenceSearch from 'containers/SequenceSearch/index.jsx';
77
import configureStore from 'store/configureStore.js';
88

9+
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
10+
import themeLight from 'ebi-framework/css/theme-light.css';
11+
import 'EBI-Icon-fonts/fonts.css';
12+
import fonts from 'EBI-Icon-fonts/fonts.css';
13+
import animate from 'animate.css/animate.min.css';
14+
import sequenceSearchStyles from 'containers/SequenceSearch/index.scss';
15+
import resultsStyles from 'containers/SequenceSearch/components/Results/index.scss';
16+
917

1018
// Prepare data
1119
export const store = configureStore();
1220
export const databases = ['mirbase'];
13-
//
14-
// // Get the shadow root
15-
// const shadowHost = document.querySelector('div#sequence-search');
16-
// const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
17-
//
18-
// // Create div element for react to render into
19-
// const reactRoot = document.createElement('div');
20-
// reactRoot.setAttribute('id', 'react-root');
21-
//
22-
// // Append react root to shadow root
23-
// shadowRoot.appendChild(reactRoot);
24-
//
25-
// // Render react
26-
// ReactDOM.render(
27-
// <Provider store={store}>
28-
// <SequenceSearch databases={databases}/>
29-
// </Provider>,
30-
// reactRoot
31-
// );
3221

3322

3423
class RNAcentralSequenceSearch extends HTMLElement {
3524
constructor() {
3625
super();
3726

38-
const mountPoint = document.createElement('div');
27+
const mountPoint = document.createElement('html');
3928
const shadowRoot = this.attachShadow({mode: 'open'});
4029
shadowRoot.appendChild(mountPoint);
4130
ReactDOM.render([
42-
<link key='styles' href="RNAcentral-sequence-search.css" rel="stylesheet" />,
43-
<Provider key='provider' store={store}>
44-
<SequenceSearch databases={databases}/>
45-
</Provider>],
31+
<style key={ebiGlobal} dangerouslySetInnerHTML={{__html: ebiGlobal}}/>,
32+
<style key={themeLight} dangerouslySetInnerHTML={{__html: themeLight}}/>,
33+
<style key={fonts} dangerouslySetInnerHTML={{__html: fonts}}/>,
34+
<style key={animate} dangerouslySetInnerHTML={{__html: animate}}/>,
35+
<style key={sequenceSearchStyles} dangerouslySetInnerHTML={{__html: sequenceSearchStyles}}/>,
36+
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
37+
<body key='body'>
38+
<Provider key='provider' store={store}>
39+
<SequenceSearch databases={databases}/>
40+
</Provider>
41+
</body>
42+
],
4643
mountPoint
4744
);
4845
retargetEvents(shadowRoot);
4946
}
5047
}
5148

5249
customElements.define('rnacentral-sequence-search', RNAcentralSequenceSearch);
53-
54-
55-
56-
// const proto = Object.create(HTMLElement.prototype, {
57-
// attachedCallback: {
58-
// value: function() {
59-
// const mountPoint = document.createElement('div');
60-
// const shadowRoot = this.createShadowRoot();
61-
// shadowRoot.appendChild(mountPoint);
62-
// ReactDOM.render([
63-
// <link key='styles' href="RNAcentral-sequence-search.css" rel="stylesheet" />,
64-
// <Provider key='provider' store={store}>
65-
// <SequenceSearch databases={databases}/>
66-
// </Provider>],
67-
// mountPoint
68-
// );
69-
// retargetEvents(shadowRoot);
70-
// }
71-
// }
72-
// });
73-
74-
// document.registerElement('RNAcentral-sequence-search', {prototype: proto});

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
2-
import fonts from 'EBI-Icon-fonts/fonts.css';
3-
import styles from '../index.scss';
4-
import componentStyles from 'containers/SequenceSearch/index.scss';
5-
6-
71
import React from 'react';
82
import {connect} from "react-redux";
93

@@ -21,11 +15,11 @@ class Facets extends React.Component {
2115
renderFacet(facet) {
2216
return [
2317
<legend key={`legend-${facet.id}`}><h5 style={{color: 'rgb(0,124,130)' }}>{ facet.label }</h5></legend>,
24-
<ul key={facet.id} className={`${ebiGlobal.vertical} ${ebiGlobal.menu} ${componentStyles.facet}`}>
18+
<ul key={facet.id} className="vertical menu facet">
2519
{
2620
facet.facetValues.map(facetValue => (
2721
<li key={`li ${facetValue.label}`}>
28-
<span className={styles.facetValue}>
22+
<span className="facetValue">
2923
<input id={`checkbox-${facet.id}-${facetValue.value}`} type="checkbox"
3024
checked={this.props.selectedFacets.hasOwnProperty(facet.id) && this.props.selectedFacets[facet.id].indexOf(facetValue.value) !== -1}
3125
onChange={(e) => {
@@ -44,7 +38,7 @@ class Facets extends React.Component {
4438

4539
render() {
4640
return (
47-
<div className={`${ebiGlobal['small-12']} ${ebiGlobal['medium-2']} ${ebiGlobal['medium-pull-10']} ${ebiGlobal['columns']}`}>
41+
<div className="small-12 medium-2 medium-pull-10 columns">
4842
<label>Sort by:
4943
<select value={this.props.sortingOrder} onChange={this.props.onSort}>
5044
<option value="e_value">E-value (min to max) - default</option>
@@ -63,9 +57,9 @@ class Facets extends React.Component {
6357
</div>
6458
{
6559
this.props.textSearchError &&
66-
<div className={`${ebiGlobal.callout} ${ebiGlobal.alert}`}>
60+
<div className="callout alert">
6761
<h3>Failed to retrieve text search data.</h3>
68-
<a onClick={ this.props.onReload }><i className={`${fonts.icon} ${fonts['icon-functional']}`} data-icon="R"/> Reload</a>
62+
<a onClick={ this.props.onReload }><i className="icon icon-functional" data-icon="R"/> Reload</a>
6963
</div>
7064
}
7165
<small>

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
2-
import styles from '../index.scss';
3-
import fonts from 'EBI-Icon-fonts/fonts.css';
4-
51
import React from 'react';
62
import {connect} from "react-redux";
73

@@ -12,23 +8,23 @@ import * as actionCreators from 'actions/actions';
128
class Hit extends React.Component {
139
render() {
1410
return (
15-
<li className={styles.result}>
16-
<div className={styles['text-search-result']}>
11+
<li className="result">
12+
<div className="text-search-result">
1713
<h4>
1814
<a href={`https://rnacentral.org/rna/${ this.props.entry.rnacentral_id }`}>{ this.props.entry.description }</a>
1915
</h4>
2016
<small>{ this.props.entry.rnacentral_id }</small>
21-
<ul className={`${ebiGlobal.menu} ${ebiGlobal.small}`}>
17+
<ul className="menu small">
2218
<li>{this.props.entry.target_length} nucleotides</li>
2319
<li></li>
2420
</ul>
2521
<small>
2622
<a onClick={ this.props.onToggleAlignmentsCollapsed }>
27-
{ this.props.alignmentsCollapsed ? <span><i className={`${fonts.icon} ${fonts['icon-functional']}`} data-icon="9" /> show alignments</span> : <span><i className={`${fonts.icon} ${fonts['icon-functional']}`} data-icon="8"/> hide alignments</span> }
23+
{ this.props.alignmentsCollapsed ? <span><i className="icon icon-functional" data-icon="9" /> show alignments</span> : <span><i className="icon icon-functional" data-icon="8"/> hide alignments</span> }
2824
</a>
2925
</small>
30-
<div className={`${ebiGlobal.callout} ${styles.alignment} ${this.props.alignmentsCollapsed ? styles['alignment-collapsed'] : ''}`}>
31-
<table className={ `${ebiGlobal['responsive-table']} ${styles['alignment-table']}` }>
26+
<div className={`callout alignment ${this.props.alignmentsCollapsed ? 'alignment-collapsed' : ''}`}>
27+
<table className="responsive-table alignment-table">
3228
<thead>
3329
<tr>
3430
<th>E-value</th>

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
2-
import componentStyles from 'containers/SequenceSearch/index.scss';
3-
import fonts from 'EBI-Icon-fonts/fonts.css';
4-
51
import React from 'react';
62
import {connect} from 'react-redux';
73

@@ -20,39 +16,39 @@ class Results extends React.Component {
2016

2117
render() {
2218
return (
23-
<div className={ebiGlobal.row}>
19+
<div className="row">
2420
{
2521
this.props.status === "partial_success" && (
26-
<div className={`${ebiGlobal.callout} ${ebiGlobal.alert}`}>
22+
<div className="callout alert">
2723
<h3>Search against some databases failed.</h3>
2824
<p>Search results might be incomplete, you might want to retry running the search.</p>
2925
</div>
3026
)
3127
}
3228
{
3329
this.props.status === "does_not_exist" && (
34-
<div className={`${ebiGlobal.callout} ${ebiGlobal.alert}`}>
30+
<div className="callout alert">
3531
<h3>Job with id='{ this.props.jobId }' does not exist.</h3>
3632
</div>
3733
)
3834
}
3935
{
4036
this.props.status === "error" && (
41-
<div className={`${ebiGlobal.callout} ${ebiGlobal.alert}`}>
37+
<div className="callout alert">
4238
<h3>Server got itself into a trouble.</h3>
4339
<a href="mailto:rnacentral@gmail.com">Contact us</a> if the problem persists.
4440
</div>
4541
)
4642
}
4743
{
4844
(this.props.status === "loading" || this.props.status === "success" || this.props.status === "partial_success") && [
49-
<h1 key={`results-header`} className={`${ebiGlobal['margin-top-large']} ${ebiGlobal['margin-bottom-large']}`}>Results: { this.props.status === "loading" ? <i className={`${fonts['icon']} ${fonts['icon-functional']} ${componentStyles.spin}`} data-icon="s"/> : <small>{ this.props.hitCount } total</small> }</h1>,
50-
<div key={`results-div`} className={`${ebiGlobal['small-12']} ${ebiGlobal['medium-10']} ${ebiGlobal['medium-push-2']} ${ebiGlobal['columns']}`}>
45+
<h1 key={`results-header`} className="margin-top-large margin-bottom-large">Results: { this.props.status === "loading" ? <i className="icon icon-functional spin" data-icon="s"/> : <small>{ this.props.hitCount } total</small> }</h1>,
46+
<div key={`results-div`} className="small-12 medium-10 medium-push-2 columns">
5147
<section>
5248
{ this.props.entries.map((entry, index) => (
5349
<ul key={`${entry}_${index}`}><Hit entry={entry} alignmentsCollapsed={this.props.alignmentsCollapsed} onToggleAlignmentsCollapsed={ this.onToggleAlignmentsCollapsed } /></ul>
5450
)) }
55-
{(this.props.status === "success" || this.props.status === "partial_success") && (this.props.entries.length < this.props.hitCount) && (<a className={`${ebiGlobal.button} ${ebiGlobal.small}`} onClick={this.props.onLoadMore} target="_blank">Load more</a>)}
51+
{(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>)}
5652
</section>
5753
</div>,
5854
<Facets key={`results-facets`} facets={ this.props.facets } selectedFacets={ this.props.selectedFacets } toggleFacet={ this.toggleFacet } ordering={ this.props.ordering } textSearchError={ this.props.textSearchError } />

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
2-
import fonts from 'EBI-Icon-fonts/fonts.css';
3-
import themeLight from 'ebi-framework/css/theme-light.css';
4-
import styles from './index.scss';
5-
import componentStyles from 'containers/SequenceSearch/index.scss';
6-
71
import React from 'react';
82
import {connect} from 'react-redux';
93

@@ -14,13 +8,13 @@ import {store} from "app.jsx";
148
class SearchForm extends React.Component {
159
render() {
1610
return (
17-
<div className={ebiGlobal.row}>
18-
<div className={ebiGlobal['col-lg-12']}>
19-
<div className={ebiGlobal.hpanel}>
20-
<div className={ebiGlobal['panel-heading']}>
11+
<div className="row">
12+
<div className="col-lg-12">
13+
<div className="hpanel">
14+
<div className="panel-heading">
2115
<h1>Search an RNA sequence in RNA databases</h1>
2216
</div>
23-
<div className={ebiGlobal['panel-body']}>
17+
<div className="panel-body">
2418
<form onSubmit={(e) => this.onSubmit(e)}>
2519
<div>
2620
<fieldset>
@@ -37,14 +31,14 @@ class SearchForm extends React.Component {
3731
</p>
3832
</fieldset>
3933
</div>
40-
{ this.props.submissionError && <div className={`${ebiGlobal.callout} ${ebiGlobal.alert}`}>
34+
{ this.props.submissionError && <div className="callout alert">
4135
<h3>Form submission failed</h3>
4236
{ this.props.submissionError }
4337
</div>}
4438
<div>
4539
<fieldset>
4640
<div id="jd_submitButtonPanel">
47-
<input name="submit" type="submit" value="Submit" className={`${themeLight.button} ${ebiGlobal.button}`} />
41+
<input name="submit" type="submit" value="Submit" className="button" />
4842
</div>
4943
</fieldset>
5044
</div>

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

Whitespace-only changes.

‎src/containers/SequenceSearch/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import 'ebi-framework/js/foundationExtendEBI.js';
55
import 'jquery/dist/jquery.js';
66

77
// import 'foundation-sites/dist/css/foundation.css'; // clash with ebi-framework1.3: header 'display: block/flexbox'
8-
import 'ebi-framework/css/ebi-global.css';
9-
import 'ebi-framework/css/theme-light.css';
10-
import 'EBI-Icon-fonts/fonts.css';
11-
import 'animate.css/animate.min.css';
8+
// import 'ebi-framework/css/ebi-global.css';
9+
// import 'ebi-framework/css/theme-light.css';
10+
// import 'EBI-Icon-fonts/fonts.css';
11+
// import 'animate.css/animate.min.css';
1212

1313
import Results from 'containers/SequenceSearch/components/Results/index.jsx';
1414
import SearchForm from 'containers/SequenceSearch/components/SearchForm/index.jsx';

0 commit comments

Comments
 (0)