Formatting improvements (#798)

* Formatting improvements on search page * Fix formatting * Revert generate file * Fix conflict * Remove unnecessary text, update position option presests desc, fix compiled js file
wurmlab · Oct 21, 2024 · b5c70c6 · b5c70c6
1 parent 481f570
commit b5c70c6
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 35 deletions.
diff --git a/public/css/app.min.css b/public/css/app.min.css
diff --git a/public/js/databases.js b/public/js/databases.js
@@ -76,7 +76,7 @@ export class Databases extends Component {
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'px-2 text-sm';
+        var toggleClass = 'px-2 text-base md:text-lg';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
         if (toggleShown && toggleDisabled) {
@@ -94,7 +94,7 @@ export class Databases extends Component {
             <div className={columnClass} key={'DB_' + category}>
                 <div>
                     <div className="border-b border-seqorange mb-2">
-                        <h4 className="font-medium inline">
+                        <h4 className="font-medium inline text-base md:text-lg">
                             {panelTitle}
                         </h4>
                         <button
@@ -108,12 +108,12 @@ export class Databases extends Component {
                             {toggleState}
                         </button>
                     </div>
-                    <ul className={'databases text-lg ' + category}>
+                    <ul className={'databases ' + category}>
                         {_.map(
                             this.databases(category),
                             _.bind(function (database, index) {
                                 return (
-                                    <li key={'DB_' + category + index} className="h-6">
+                                    <li key={'DB_' + category + index} className="h-6 text-base md:text-lg">
                                         {this.renderDatabase(database)}
                                     </li>
                                 );

diff --git a/public/js/databases_tree.js b/public/js/databases_tree.js
@@ -63,7 +63,7 @@ export default class extends Databases {
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'px-2 text-sm hidden';
+        var toggleClass = 'px-2 text-base md:text-lg hidden';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
         if (toggleShown && toggleDisabled) {
@@ -80,8 +80,8 @@ export default class extends Databases {
         return (
             <div className={columnClass} key={'DB_' + category}>
                 <div>
-                    <div className="border-b border-seqorange mb-2 text-lg" id="database_list">
-                        <h4 className="font-medium">{panelTitle}</h4>
+                    <div className="border-b border-seqorange mb-2" id="database_list">
+                        <h4 className="font-medium text-base md:text-lg">{panelTitle}</h4>
                         {
                             this.renderDatabaseSearch(category)
                         }

diff --git a/public/js/options.js b/public/js/options.js
@@ -72,9 +72,10 @@ export class Options extends Component {
         return (
             <div id="options-presets" className="w-full">
                 { Object.keys(this.props.predefinedOptions).length > 1 && <>
-                    <h3 className="text-base w-full font-medium border-b border-seqorange mb-2">Settings</h3>
-
-                    <p className="text-sm">Choose a predefined setting or customize BLAST parameters.</p>
+                    <div className="flex items-center border-b border-seqorange mb-2">
+                        <h3 className="text-base md:text-lg font-medium pr-1">Settings</h3>
+                        <p className="text-base text-gray-500">Choose a predefined setting or customize parameters.</p>
+                    </div>
                     {this.presetListJSX()}
                 </>}
             </div>
@@ -83,7 +84,7 @@ export class Options extends Component {
 
     presetListJSX() {
         return (
-            <ul className="text-sm my-1">
+            <ul className="text-lg my-1">
                 {
                     Object.entries(this.props.predefinedOptions).map(
                         ([key, config], index) => {
@@ -119,26 +120,20 @@ export class Options extends Component {
         return(
              <div className={this.state.paramsMode !== 'advanced' ? 'w-full hidden' : 'w-full'}>
                 <div className="flex items-end">
-                    <label className="flex items-center text-lg" htmlFor="advanced">
-                        Advanced parameters
+                    <label className="flex items-center text-base md:text-lg text-gray-500" htmlFor="advanced">
+                        Parameters options as they would appear in a command-line.
                     </label>
 
                     {this.props.blastMethod &&
                         <button
-                            className="text-seqblue ml-2"
+                            className="text-seqblue text-base md:text-lg ml-2"
                             type="button"
                             onClick={this.showAdvancedOptionsHelp}
                             data-toggle="modal" data-target="#help">
-                            See available options
+                            See options
                             <i className="fa fa-question-circle ml-1 w-3 h-4 fill-current"></i>
                         </button>
                     }
-
-                    {!this.props.blastMethod &&
-                        <span className="text-gray-600 ml-2 text-sm hidden sm:block">
-                            Select databases and fill in the query to see options.
-                        </span>
-                    }
                 </div>
 
                 <div className='flex-grow flex w-full'>
@@ -151,9 +146,6 @@ export class Options extends Component {
                         title="View, and enter advanced parameters."
                     />
                 </div>
-                <div className="text-sm text-gray-600 mt-2">
-                    Options as they would appear in a command line when calling BLAST eg: <i>-evalue 1.0e-5 -num_alignments 100</i>
-                </div>
             </div>
         )
     }

diff --git a/public/js/query.js b/public/js/query.js
@@ -350,7 +350,7 @@ export class SearchQueryWidget extends Component {
                     className="sequence">
                     <textarea
                         id="sequence" ref={this.textareaRef}
-                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-base font-mono min-h-52 resize-y"
+                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-sm font-mono min-h-52 resize-y"
                         name="sequence" value={this.state.value}
                         rows="6"
                         required="required"

diff --git a/public/js/tests/form.spec.js b/public/js/tests/form.spec.js
@@ -12,7 +12,7 @@ export const setMockJSONResult = (result) => {
     global.$.getJSON = (_, cb) => cb(result);
 };
 
-describe('ADVANCED PARAMETERS', () => {
+describe('PARAMETERS', () => {
     let csrfMetaTag;
 
     beforeEach(() => {

diff --git a/public/sequenceserver-report.min.js.map b/public/sequenceserver-report.min.js.map
diff --git a/public/sequenceserver-search.min.js b/public/sequenceserver-search.min.js
diff --git a/public/sequenceserver-search.min.js.map b/public/sequenceserver-search.min.js.map
diff --git a/views/layout.erb b/views/layout.erb
@@ -16,12 +16,12 @@
   <header id="header" class="border-b border-seqorange">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div class="flex flex-none items-center">
-        <div class="py-4">
+        <div class="pr-8 md:pr-0 py-4">
           <a href="https://sequenceserver.com" target="_blank" class="flex items-end">
             <img src="sequenceserver_logo.webp" alt="sequenceserver_logo" width="1620" height="213" class="h-8 w-auto pr-2">
-            <small>
+            <span class="text-sm md:text-base">
               <%= SequenceServer::VERSION %>
-            </small>
+            </span>
           </a>
         </div>
 
@@ -38,7 +38,7 @@
           </li>
           <li>
             <a
-              class="text-seqblue flex items-center text-sm hover:text-seqorange"
+              class="text-seqblue flex items-center text-sm md:text-base hover:text-seqorange"
               target="_blank"
               href="https://sequenceserver.com/support">
 

diff --git a/views/search.erb b/views/search.erb
@@ -13,7 +13,7 @@
     <div class="relative flex flex-col rounded-lg bg-white shadow">
       <div class="flex items-start justify-between rounded-t border-b p-5">
         <h3 class="text-xl font-medium text-gray-900">
-          Advanced Options
+          Options
         </h3>
       </div>
       <div class="overflow-y-scroll max-h-96 bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">