Changeset 6172 for SRUAggregator


Ignore:
Timestamp:
04/29/15 11:24:25 (9 years ago)
Author:
emanuel.dima@uni-tuebingen.de
Message:
  1. beta-44: more UI/css fixes (footer facelift), misc
Location:
SRUAggregator/trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • SRUAggregator/trunk/pom.xml

    r6171 r6172  
    88        <groupId>eu.clarin.sru.fcs</groupId>
    99        <artifactId>aggregator</artifactId>
    10         <version>2.0.0-beta-43</version>
     10        <version>2.0.0-beta-44</version>
    1111        <name>FCS Aggregator</name>
    1212

  • SRUAggregator/trunk/src/main/resources/assets/CLARIN.css

    r6171 r6172  
    77body {
    88  font-family: "Roboto", sans-serif;
    9   /*font-family: "Courier New";*/
    109  -webkit-font-smoothing: antialiased;
    1110  -moz-osx-font-smoothing: grayscale;
    1211  color: black;
    13   /*color: #222;*/
    14   /*font-size: 12px;*/
    15   /*word-wrap: break-word;*/
    1612}
    1713
    1814a {
    19   /*color: #806a52;*/
    2015  color: #B27000;
    21   /*text-decoration: dotted !important;*/
    2216}
    2317a:hover, a:focus {
    24   text-decoration: none !important;
    25 }
    26 a:visited {
    27   /*color: #c0a37c;*/
     18  text-decoration: none;
     19  color: #D08000;
    2820}
    2921
    … …  
    3325}
    3426
    35 a.navbar-brand {
    36   color: #806a52;
    37   font-size: 1.6em;
    38   text-overflow: ellipsis;
    39   line-height: 1em;
     27.navbar a.navbar-brand {
     28  color: #036;
     29}
     30.navbar a.navbar-brand:hover {
     31  color: #259;
     32}
     33
     34#footer a {
     35  color: #036;
     36}
     37#footer a:hover {
     38  color: #259;
    4039}
    4140
    … …  
    165164}
    166165
    167 div.container {
    168   z-index: -1 !important;
    169 }
    170 
    171 /*table.display {
    172   border-collapse: collapse !important;
    173   position: relative !important;
    174   border-spacing: 0 !important;
    175   border: 0px !important;
    176   background-clip: padding-box;
    177 }
    178 table.display th, table.display td {
    179   border: 0px !important;
    180 }
    181 table.display thead tr th {
    182   background-color: #00406f !important;
    183   border-collapse: collapse !important;
    184   background-attachment: scroll !important;
    185   color: #fff !important;
    186 }
    187 table.display thead tr th:first-child {
    188   border-top-left-radius: 6px !important;
    189   border-bottom-left-radius: 6px !important;
    190   -webkit-border-top-left-radius: 6px !important;
    191   -webkit-border-bottom-left-radius: 6px !important;
    192   -moz-border-top-left-radius: 6px !important;
    193   -moz-border-bottom-left-radius: 6px !important;
    194 }
    195 table.display thead tr {
    196   padding: 7px 7px !important;
    197   font-weight: bolder !important;
    198   text-align: left !important;
    199   border: 0px !important;
    200 }
    201 table.display thead tr th a {
    202   color: #fff !important;
    203   text-decoration: underline !important;
    204 }
    205 table.display thead tr th:last-child {
    206   border-top-right-radius: 6px !important;
    207   border-bottom-right-radius: 6px !important;
    208   -webkit-border-top-right-radius: 6px !important;
    209   -webkit-border-bottom-right-radius: 6px !important;
    210   -moz-border-top-right-radius: 6px !important;
    211   -moz-border-bottom-right-radius: 6px !important;
    212 }
    213 
    214 table tbody tr:nth-child(2n+1) td {
    215   background-color: #e3e3e3 !important;
    216 }
    217 table tbody td:first-child {
    218   -webkit-border-top-left-radius: 6px !important;
    219   -webkit-border-bottom-left-radius: 6px !important;
    220   -moz-border-top-left-radius: 6px !important;
    221   -moz-border-bottom-left-radius: 6px !important;
    222   border-top-left-radius: 6px !important;
    223   border-bottom-left-radius: 6px !important;
    224 }
    225 table tbody td:last-child {
    226   -webkit-border-top-right-radius: 6px !important;
    227   -webkit-border-bottom-right-radius: 6px !important;
    228   -moz-border-top-right-radius: 6px !important;
    229   -moz-border-bottom-right-radius: 6px !important;
    230   border-top-right-radius: 6px !important;
    231   border-bottom-right-radius: 6px !important;
    232 }
    233 table tbody tr {
    234   vertical-align: middle !important;
    235 }
    236 table tbody tr:last-child td:first-child {
    237   -webkit-border-bottom-left-radius: 6px !important;
    238   -moz-border-bottom-left-radius: 6px !important;
    239   border-bottom-left-radius: 6px !important;
    240 }
    241 table tbody tr:last-child td:last-child {
    242   -webkit-border-bottom-right-radius: 6px !important;
    243   -moz-border-bottom-right-radius: 6px !important;
    244   border-bottom-right-radius: 6px !important;
    245 }
    246 table tbody tr:last-child {
    247   border-bottom: 1px solid #00406f !important;
    248 }
    249 
    250 table:not(.display) tr:first-child {
    251   border-top: 1px solid #00406f !important;
    252 }
    253 table:not(.display) td, table:not(.display) th {
    254   padding: 5px;
    255 }
    256 table:not(.display) th {
    257   background-color: #e3e3e3;
    258   border-right: 1px dotted black;
    259 }
    260 */
    261 
    262166html body ul#nav ul, html body ul#nav ul li {
    263167  width: 200px;
    … …  
    267171  margin: 0 0 0 200px;
    268172}
    269 div#body {
    270   min-height: 100%;
    271   height: auto;
    272   /* Pad top and bottom to prevent overflow over body div if using fixed-top navbar. */
     173
     174#footer {
     175  border-top: 1px solid #e7e7e7;
     176  background-color: #f8f8f8;
    273177}
    274 
    275 div#footer {
    276   background-color: #f5f5f5;
    277   bottom: 0;
    278   left: 0;
    279   width: 100%;
    280   border-top: 1px solid #e7e7e7;
    281 }
    282 div#footer div.container {
    283   height: 100%;
    284   display: flex;
    285   flex-flow: row wrap;
    286   justify-content: space-between;
    287   align-items: center;
    288   align-content: space-around;
    289 }
    290 div#footer div.container div#CLARIN_footer_left {
    291   order: 1;
    292   display: flex !important;
    293   text-align: left;
    294   vertical-align: middle;
    295   margin: 0;
    296   align-content: space-around;
    297 }
    298 div#footer div.container div#CLARIN_footer_middle {
    299   order: 2;
    300   display: flex !important;
    301   text-align: center;
    302   margin: auto;
    303   align-content: space-around;
    304 }
    305 div#footer div.container div#CLARIN_footer_middle img {
    306   display: inline-block;
    307   max-width: 100%;
    308   max-height: 100%;
    309   overflow: hidden;
    310 }
    311 div#footer div.container div#CLARIN_footer_right {
    312   order: 3;
    313   text-align: right;
    314   vertical-align: middle;
    315   display: flex !important;
    316   margin: 0;
    317   align-content: space-around;
    318 }
    319 
    320 ul#CLARIN_header_right, div#CLARIN_footer_left, div#CLARIN_footer_right {
    321   margin: 0px 4px 0 p x 4px;
    322   color: #653D00;
    323 }
    324 ul#CLARIN_header_right :not(.glyphicon), div#CLARIN_footer_left :not(.glyphicon), div#CLARIN_footer_right :not(.glyphicon) {
    325   font-size: 12px;
    326 }
    327 ul#CLARIN_header_right a, div#CLARIN_footer_left a, div#CLARIN_footer_right a {
    328   color: #653D00;
    329   text-decoration: none;
    330 }
    331 ul#CLARIN_header_right a:hover, ul#CLARIN_header_right a:focus, div#CLARIN_footer_left a:hover, div#CLARIN_footer_left a:focus, div#CLARIN_footer_right a:hover, div#CLARIN_footer_right a:focus {
    332   color: inherit !important;
    333   text-decoration: none !important;
    334 }
    335 ul#CLARIN_header_right a:visited, div#CLARIN_footer_left a:visited, div#CLARIN_footer_right a:visited {
    336   color: inherit !important;
    337   text-decoration: none !important;
    338 }

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

    r6171 r6172  
    1 /* clarin blue: rgb(0,64,111) #00406F; */
    2 /* clarin gold: rgb(128,107,82) #806A52; */
    3 
    41.navbar-header a img{
    52        float:left;
    … …  
    74        padding: 3px 3px;
    85        border-radius: 50% 50%;
    9         border: 1px solid #003f6e;
    10         box-shadow: inset 0 0 3px #003f6e;
     6        border: 1px solid #036;
     7        box-shadow: inset 0 0 3px #036;
    118}
    129
    … …  
    2421        margin: 1px 1px;
    2522        padding: 1px 1px;
    26         background-color: #003f6e;
     23        background-color: #036;
    2724        border-radius: 50% 50%;
    2825        /*border: 1px solid #003f6e;*/
    … …  
    173170}
    174171input:focus, select:focus, textarea:focus, button:focus, a:focus {
    175   /*box-shadow: 0 0 5px #00406F !important;*/
    176   /*border: 1px solid #00406F !important;*/
    177172  box-shadow: 0 0 10px rgb(179,216,253) !important;
    178   /*border: 1px solid rgb(179,216,253) !important;*/
    179173  outline: none !important;
    180174}
    … …  
    258252div.corpus .glyphicon {
    259253        font-size: 12px;
    260         color: rgb(128,107,82); /*gold*/
     254        color: #B27000;
    261255
    262256        -ms-touch-action: manipulation;
    … …  
    271265div.corpus button .glyphicon.glyphicon-check {
    272266        font-size: 20px;
    273         color: rgb(128,107,82); /*gold*/
     267        color: #B27000;
    274268}
    275269div.corpus button .glyphicon.glyphicon-unchecked {
    276270        font-size: 20px;
    277         color: rgb(0,64,111); /*blue*/
     271        color: #036;
    278272}
    279273
    … …  
    319313div.panel:hover .zoomResultButton {
    320314        color: white;
    321         background-color: #00406F;
     315        background-color: #036;
    322316        border: 1px solid black;
    323317}
    … …  
    355349
    356350.panel-body td.keyword {
    357         color: #00406F;
     351        color: #036;
    358352        font-weight: bold;
    359353        font-weight: bold;
    … …  
    364358        margin: 0 0 20px 0;
    365359        border: 1px solid #ddd;
    366         /*border-left: 5px solid #806a52; /*brown*/
    367         /*border-left: 5px solid rgb(191, 133, 64); /*other gold*/
    368360        border-left: 5px solid #00406F; /*blue*/
    369361        border-radius: 4px;
    … …  
    375367}
    376368.bs-callout .panel-title {
    377         color: #806a52;
    378         /*color: #222;*/
     369        color: #B27000;
    379370}
    380371.panel-body {
    … …  
    425416        padding: 15px;
    426417        border: 1px solid #ddd;
    427         border-left: 5px solid #00406F; /*blue*/
     418        border-left: 5px solid #036;
    428419        border-radius: 4px;
    429420}

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

    r6171 r6172  
    118118}
    119119
    120 document.getElementById('clarinservices').innerHTML = renderDropdown(service_list);
     120var csdiv = document.getElementById('clarinservices');
     121if (csdiv) {
     122        csdiv.innerHTML = renderDropdown(service_list);
     123} else if (console && console.warn) {
     124        console.warn("To use the clarinservices module, please define a #clarinservices element");
     125}
    121126
    122127})();

  • SRUAggregator/trunk/src/main/resources/assets/index.html

    r6144 r6172  
    2828                }
    2929                #body {
    30                         padding-bottom:100px;   /* Height of the footer */
     30                        padding-bottom:64px;   /* Height of the footer */
    3131                }
    3232                #footer {
    … …  
    3434                        bottom:0;
    3535                        width:100%;
    36                         height:100px;   /* Height of the footer */
     36                        height:64px;   /* Height of the footer */
    3737                }
    3838        </style>

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

    r6171 r6172  
    33"use strict";
    44
    5 var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-43";
     5var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-44";
    66
    77var URLROOT = window.MyAggregator.URLROOT =
    … …  
    1313var ErrorPane = window.MyReact.ErrorPane;
    1414var AggregatorPage = window.MyAggregator.AggregatorPage;
     15
     16/**
     17The FCS Aggregator UI is based on reactjs.
     18- index.html: describes the general page structure, with a push-down footer;
     19  on that structure the Main and Footer components are plugged.
     20- main.jsx: defines the simple top components (Main, HelpPage, AboutPage, StatisticsPage)
     21- search.jsx: defines
     22        - the Corpora store of collections
     23        - the AggregatorPage component which deals with search and displays the search results
     24- corpora.jsx: defines the CorpusView, rendered when the user views the available collections
     25- components.jsx: various general usage React components
     26
     27The top-most component, Main, tracks of the window's location URL and, depending on the value,
     28  renders various components inside its frame:
     29        - AggregatorPage is the view corresponding to the normal search UI (search bar and all)
     30          This is the most complex component.
     31        - HelpPage renders the help page
     32        - About renders the about page
     33        - Statistics renders the stats page
     34        - another URL, /Aggregator/embed, determines Main and AggregatorPage to render just the search bar.
     35          The embedded view is supposed to work like a YouTube embedded clip.
     36*/
    1537
    1638var Main = React.createClass({displayName: 'Main',
    … …  
    167189                                                        ),
    168190                                                        React.createElement("a", {href: URLROOT, tabIndex: "-1"},
    169                                                                 React.createElement("img", {src: "img/magglass1.png"})
     191                                                                React.createElement("img", {width: "28px", height: "28px", src: "img/magglass1.png"})
    170192                                                        ),
    171193                                                        React.createElement("a", {className: "navbar-brand", href: URLROOT, tabIndex: "-1"},
    … …  
    528550
    529551        render: function() {
    530                 var path = window.location.pathname.split('/');
    531                 if (path.length === 3 && path[2] === 'embed') {
    532                         return false;
    533                 }
    534                 return  (
    535                         React.createElement("div", {className: "container"},
    536                                 React.createElement("div", {id: "CLARIN_footer_left"},
    537                                                 React.createElement("a", {title: "about", href: "about", onClick: this.toAbout},
    538                                                 React.createElement("span", {className: "glyphicon glyphicon-info-sign"}),
    539                                                 React.createElement("span", null, VERSION)
    540                                         )
    541                                 ),
    542                                 React.createElement("div", {id: "CLARIN_footer_middle"},
     552                return (
     553                        React.createElement("div", {className: "container", style: {textAlign:'center'}},
     554                                React.createElement("div", {className: "row"},
    543555                                        React.createElement("a", {title: "CLARIN ERIC", href: "https://www.clarin.eu/"},
    544                                         React.createElement("img", {src: "img/clarindLogo.png", alt: "CLARIN ERIC logo", style: {height:80}})
    545                                         )
    546                                 ),
    547                                 React.createElement("div", {id: "CLARIN_footer_right"},
    548                                         React.createElement("a", {title: "contact", href: "mailto:fcs@clarin.eu"},
    549                                                 React.createElement("span", {className: "glyphicon glyphicon-envelope"}),
    550                                                 React.createElement("span", null, " Contact")
     556                                                React.createElement("img", {src: "img/clarindLogo.png", alt: "CLARIN ERIC logo", style: {height:60}})
     557                                        ),
     558                                        React.createElement("div", {className: "float-right", style: {position:'relative', float:'right'}},
     559                                                React.createElement("div", {style: {margin:4, fontSize:12, textAlign:'right',
     560                                                                        position:'absolute', right:'0', width:100}},
     561                                                        React.createElement("div", null,
     562                                                                React.createElement("a", {title: "about", href: "about", onClick: this.toAbout}, "About")
     563                                                        ),
     564                                                        React.createElement("div", null,
     565                                                                React.createElement("a", {title: "contact", href: "mailto:fcs@clarin.eu"}, "Contact")
     566                                                        ),
     567                                                        React.createElement("div", {style: {color:'#777'}}, VERSION)
     568                                                )
    551569                                        )
    552570                                )
    … …  
    555573        }
    556574});
     575
     576function isEmbeddedView() {
     577        var path = window.location.pathname.split('/');
     578        return (path.length >= 3 && path[2] === 'embed');
     579}
    557580
    558581function endsWith(str, suffix) {
    … …  
    583606
    584607var main = React.render(React.createElement(Main, null),  document.getElementById('body'));
    585 React.render(React.createElement(Footer, null), document.getElementById('footer') );
     608if (!isEmbeddedView()) {
     609        React.render(React.createElement(Footer, null), document.getElementById('footer') );
     610} else if (jQuery) {
     611        jQuery("#footer").remove();
     612}
    586613
    587614window.onpopstate = routeFromLocation.bind(main);

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

    r6171 r6172  
    33"use strict";
    44
    5 var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-43";
     5var VERSION = window.MyAggregator.VERSION = "v.2.0.0-beta-44";
    66
    77var URLROOT = window.MyAggregator.URLROOT =
    … …  
    1313var ErrorPane = window.MyReact.ErrorPane;
    1414var AggregatorPage = window.MyAggregator.AggregatorPage;
     15
     16/**
     17The FCS Aggregator UI is based on reactjs.
     18- index.html: describes the general page structure, with a push-down footer;
     19  on that structure the Main and Footer components are plugged.
     20- main.jsx: defines the simple top components (Main, HelpPage, AboutPage, StatisticsPage)
     21- search.jsx: defines
     22        - the Corpora store of collections
     23        - the AggregatorPage component which deals with search and displays the search results
     24- corpora.jsx: defines the CorpusView, rendered when the user views the available collections
     25- components.jsx: various general usage React components
     26
     27The top-most component, Main, tracks of the window's location URL and, depending on the value,
     28  renders various components inside its frame:
     29        - AggregatorPage is the view corresponding to the normal search UI (search bar and all)
     30          This is the most complex component.
     31        - HelpPage renders the help page
     32        - About renders the about page
     33        - Statistics renders the stats page
     34        - another URL, /Aggregator/embed, determines Main and AggregatorPage to render just the search bar.
     35          The embedded view is supposed to work like a YouTube embedded clip.
     36*/
    1537
    1638var Main = React.createClass({
    … …  
    167189                                                        </button>
    168190                                                        <a href={URLROOT} tabIndex="-1">
    169                                                                 <img src="img/magglass1.png"/>
     191                                                                <img width="28px" height="28px" src="img/magglass1.png"/>
    170192                                                        </a>
    171193                                                        <a className="navbar-brand" href={URLROOT} tabIndex="-1">
    … …  
    528550
    529551        render: function() {
    530                 var path = window.location.pathname.split('/');
    531                 if (path.length === 3 && path[2] === 'embed') {
    532                         return false;
    533                 }
    534                 return  (
    535                         <div className="container">
    536                                 <div id="CLARIN_footer_left">
    537                                                 <a title="about" href="about" onClick={this.toAbout}>
    538                                                 <span className="glyphicon glyphicon-info-sign"></span>
    539                                                 <span>{VERSION}</span>
     552                return (
     553                        <div className="container" style={{textAlign:'center'}}>
     554                                <div className="row">
     555                                        <a title="CLARIN ERIC" href="https://www.clarin.eu/">
     556                                                <img src="img/clarindLogo.png" alt="CLARIN ERIC logo" style={{height:60}}/>
    540557                                        </a>
    541                                 </div>
    542                                 <div id="CLARIN_footer_middle">
    543                                         <a title="CLARIN ERIC" href="https://www.clarin.eu/">
    544                                         <img src="img/clarindLogo.png" alt="CLARIN ERIC logo" style={{height:80}}/>
    545                                         </a>
    546                                 </div>
    547                                 <div id="CLARIN_footer_right">
    548                                         <a title="contact" href="mailto:fcs@clarin.eu">
    549                                                 <span className="glyphicon glyphicon-envelope"></span>
    550                                                 <span> Contact</span>
    551                                         </a>
     558                                        <div className="float-right" style={{position:'relative', float:'right'}}>
     559                                                <div style={{margin:4, fontSize:12, textAlign:'right',
     560                                                                        position:'absolute', right:'0', width:100}}>
     561                                                        <div>
     562                                                                <a title="about" href="about" onClick={this.toAbout}>About</a>
     563                                                        </div>
     564                                                        <div>
     565                                                                <a title="contact" href="mailto:fcs@clarin.eu">Contact</a>
     566                                                        </div>
     567                                                        <div style={{color:'#777'}}>{VERSION}</div>
     568                                                </div>
     569                                        </div>
    552570                                </div>
    553571                        </div>
    … …  
    555573        }
    556574});
     575
     576function isEmbeddedView() {
     577        var path = window.location.pathname.split('/');
     578        return (path.length >= 3 && path[2] === 'embed');
     579}
    557580
    558581function endsWith(str, suffix) {
    … …  
    583606
    584607var main = React.render(<Main />,  document.getElementById('body'));
    585 React.render(<Footer />, document.getElementById('footer') );
     608if (!isEmbeddedView()) {
     609        React.render(<Footer />, document.getElementById('footer') );
     610} else if (jQuery) {
     611        jQuery("#footer").remove();
     612}
    586613
    587614window.onpopstate = routeFromLocation.bind(main);
Note: See TracChangeset for help on using the changeset viewer.