Changeset 6306 for SRUAggregator

Timestamp:

06/17/15 12:06:41 (9 years ago)

Author:

emanuel.dima@uni-tuebingen.de

Message:

22. beta-51: improved embedded view and responsive design

Location:

SRUAggregator/trunk

Files:

• pom.xml (modified) (1 diff)
• src/main/resources/assets/base.css (modified) (1 diff)
• src/main/resources/assets/js/main.js (modified) (3 diffs)
• src/main/resources/assets/js/main.jsx (modified) (3 diffs)
• src/main/resources/assets/js/search.js (modified) (4 diffs)
• src/main/resources/assets/js/search.jsx (modified) (4 diffs)

SRUAggregator/trunk/pom.xml

@@ -8 +8 @@
         <groupId>eu.clarin.sru.fcs</groupId>
         <artifactId>aggregator</artifactId>
-        <version>2.0.0-beta-50</version>
+        <version>2.0.0-beta-51</version>
         <name>FCS Aggregator</name>
 

SRUAggregator/trunk/src/main/resources/assets/base.css

@@ -1 @@
-.navbar-header a img{
+@media (max-width:360px){.hidden-xxs{display:none!important}}
+
+body.embedded #footer {
+        background-color: #f5f5f5;
+}
+
+.navbar-header a img, #footer.embedded a img {
         float:left;
         margin: -3px 5px 0 2px;

SRUAggregator/trunk/src/main/resources/assets/js/main.js

@@ -3 +3 @@
 "use strict";
 
-var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-50";
+var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-51";
 
 var URLROOT = window.MyAggregator.URLROOT =
@@ -570 +570 @@
                                                 React.createElement("div", {className: "rightist", style: {position:'absolute', right:'0'}}, 
                                                         React.createElement("a", {title: "contact", href: "mailto:fcs@clarin.eu"}, "Contact")
+                                                )
+                                        )
+                                )
+                        )
+                );
+        }
+});
+
+var EmbeddedFooter = React.createClass({displayName: 'EmbeddedFooter',
+        render: function() {
+                return (
+                        React.createElement("div", {className: "container", style: {textAlign:'center'}}, 
+                                React.createElement("div", {className: "row"}, 
+                                        React.createElement("div", {style: {position:'relative', float:'right'}}, 
+                                                React.createElement("div", {className: "rightist", style: {position:'absolute', right:0, width:150}}, 
+                                                        React.createElement("a", {href: URLROOT, target: "_blank", tabIndex: "-1"}, 
+                                                                React.createElement("img", {width: "28px", height: "28px", src: "img/magglass1.png"}), 
+                                                                React.createElement("header", {className: "inline float-left"}, " Content Search ")
+                                                        )
                                                 )
                                         )
@@ -612 +631 @@
 if (!isEmbeddedView()) {
         React.render(React.createElement(Footer, null), document.getElementById('footer') );
-} else if (jQuery) {
-        jQuery("#footer").remove();
+} else {
+        React.render(React.createElement(EmbeddedFooter, null), document.getElementById('footer') );
+        if (jQuery) { jQuery('body, #footer').addClass('embedded'); }
 }
 

SRUAggregator/trunk/src/main/resources/assets/js/main.jsx

@@ -3 +3 @@
 "use strict";
 
-var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-50";
+var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-51";
 
 var URLROOT = window.MyAggregator.URLROOT =
@@ -570 +570 @@
                                                 <div className="rightist" style={{position:'absolute', right:'0'}}>
                                                         <a title="contact" href="mailto:fcs@clarin.eu">Contact</a>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                );
+        }
+});
+
+var EmbeddedFooter = React.createClass({
+        render: function() {
+                return (
+                        <div className="container" style={{textAlign:'center'}}>
+                                <div className="row">
+                                        <div style={{position:'relative', float:'right'}}>
+                                                <div className="rightist" style={{position:'absolute', right:0, width:150}}>
+                                                        <a href={URLROOT} target="_blank" tabIndex="-1">
+                                                                <img width="28px" height="28px" src="img/magglass1.png"/>
+                                                                <header className="inline float-left"> Content Search </header>
+                                                        </a>
                                                 </div>
                                         </div>
@@ -612 +631 @@
 if (!isEmbeddedView()) {
         React.render(<Footer />, document.getElementById('footer') );
-} else if (jQuery) {
-        jQuery("#footer").remove();
+} else {
+        React.render(<EmbeddedFooter />, document.getElementById('footer') );
+        if (jQuery) { jQuery('body, #footer').addClass('embedded'); }
 }
 

SRUAggregator/trunk/src/main/resources/assets/js/search.js

@@ -502 +502 @@
                                 (window.MyAggregator.URLROOT + "?" + encodeQueryData({query:query, mode:'search'}));
                         return (
-                                React.createElement("a", {className: "btn btn-default input-lg", type: "button", target: "_blank", href: newurl}, 
+                                React.createElement("a", {className: "btn btn-default input-lg", style: {paddingTop:13}, 
+                                        type: "button", target: "_blank", href: newurl}, 
                                         React.createElement("i", {className: "glyphicon glyphicon-search"})
                                 )
@@ -551 +552 @@
                                                                 ), 
 
-                                                                React.createElement("div", {className: "input-group-btn"}, 
+                                                                React.createElement("div", {className: "input-group-btn hidden-xxs"}, 
                                                                         React.createElement("ul", {ref: "layerDropdownMenu", className: "dropdown-menu"}, 
                                                                                         layers.map(function(l) {
@@ -569 +570 @@
                                                         ), 
 
-                                                         this.props.embedded ? false :
-                                                        React.createElement("div", {className: "input-group"}, 
+                                                        React.createElement("div", {className: "input-group hidden-xs"}, 
                                                                 React.createElement("span", {className: "input-group-addon nobkg"}, "in"), 
                                                                 React.createElement("button", {type: "button", className: "btn btn-default", onClick: this.toggleCorpusSelection}, 
@@ -577 +577 @@
                                                         ), 
 
-                                                         this.props.embedded ? false :
-                                                        React.createElement("div", {className: "input-group"}, 
+                                                        React.createElement("div", {className: "input-group hidden-xs hidden-sm"}, 
                                                                 React.createElement("span", {className: "input-group-addon nobkg"}, "and show up to"), 
                                                                 React.createElement("div", {className: "input-group-btn"}, 

SRUAggregator/trunk/src/main/resources/assets/js/search.jsx

@@ -502 +502 @@
                                 (window.MyAggregator.URLROOT + "?" + encodeQueryData({query:query, mode:'search'}));
                         return (
-                                <a className="btn btn-default input-lg" type="button" target="_blank" href={newurl}>
+                                <a className="btn btn-default input-lg" style={{paddingTop:13}}
+                                        type="button" target="_blank" href={newurl}>
                                         <i className="glyphicon glyphicon-search"></i>
                                 </a>
@@ -551 +552 @@
                                                                 </div>
 
-                                                                <div className="input-group-btn">
+                                                                <div className="input-group-btn hidden-xxs">
                                                                         <ul ref="layerDropdownMenu" className="dropdown-menu">
                                                                                 {       layers.map(function(l) {
@@ -569 +570 @@
                                                         </div>
 
-                                                        { this.props.embedded ? false :
-                                                        <div className="input-group">
+                                                        <div className="input-group hidden-xs">
                                                                 <span className="input-group-addon nobkg">in</span>
                                                                 <button type="button" className="btn btn-default" onClick={this.toggleCorpusSelection}>
                                                                         {this.state.corpora.getSelectedMessage()} <span className="caret"/>
                                                                 </button>
-                                                        </div> }
-
-                                                        { this.props.embedded ? false :
-                                                        <div className="input-group">
+                                                        </div>
+
+                                                        <div className="input-group hidden-xs hidden-sm">
                                                                 <span className="input-group-addon nobkg">and show up to</span>
                                                                 <div className="input-group-btn">
@@ -587 +586 @@
                                                                 </div>
                                                                 <span className="input-group-addon nobkg">hits</span>
-                                                        </div> }
+                                                        </div>
                                                 </form>
                                         </div>