Fresh new layout of UI

css/tripal-blast-ui.css

@@ -3,11 +3,52 @@
  * Theme Tripal BLAST UI page:
  */
  
- 
- /*
-  * Accordion override styles.
-  * http://api.jqueryui.com/accordion/#theming
-  */
+/** 
+ * Page, classes:
+ */ 
+.tripal-blast-element-left {
+  float: left;
+  text-align: left;
+}
+
+.tripal-blast-element-right {
+  float: right;
+  text-align: right;
+}
+
+.tripal-blast-clear-float {
+  clear: both;
+  height: 0;
+}
+
+/** 
+ * Tripal BLAST Navigation:
+ */ 
+#tripal-blast-navigation {
+  position: relative;
+}
+
+#tripal-blast-navigation .tripal-blast-element-left {
+  width: 40%;
+}
+
+#tripal-blast-navigation .tripal-blast-element-right {
+  bottom: 10px;
+  height: inherit;
+  position: absolute;
+  right: 0;
+  width: 55%;
+}
+
+#tripal-blast-navigation .tripal-blast-element-right a {
+  font-size: 0.9em;
+}
+
+/** 
+ * Tripal BLAST Accordion:
+ * Accordion override styles.
+ * http://api.jqueryui.com/accordion/#theming
+ */
 .ui-accordion .ui-accordion-header {
   background-color: #314355;
   border-color: #314355;
@@ -39,9 +80,6 @@
   margin-right: 16px;
 }
 
-/**
- * Content area.
- */
 .ui-accordion .ui-accordion-content {
   background-color: #efefef;  
   border-top: 0;
@@ -72,29 +110,25 @@
   border: none;
 }
 
-.ui-accordion .tripal-blast-element-left {
-  float: left;
-  width: 70%;
+#tripal-blast-accordion .tripal-blast-element-right a {
+  font-size: 1.5em;
 }
 
-.ui-accordion .tripal-blast-element-right {
-  float: right;
-  font-size: 1.5em;
-  text-align: right;
-  width: 20%;
+#tripal-blast-accordion .tripal-blast-content-wrapper {
+  -webkit-transition: background-color 1.5s ease-out;
+  -moz-transition: background-color 1.5s ease-out;
+  -o-transition: background-color 1.5s ease-out;
+  transition: background-color 1.5s ease-out;
 }
 
-.ui-accordion .tripal-blast-clear-float {
-  clear: both;
-  height: 0;
+#tripal-blast-accordion .tripal-blast-content-wrapper:hover {
+  background-color: #F6FFEC;
 }
 
-/**
- * Page elements.
- */
-#tripal-blast-information-link {
-  cursor: pointer; z-index: 1000; 
-  font-size: 12px; 
-  float: right; 
-  text-decoration: underline; 
+#tripal-blast-accordion .tripal-blast-element-left {
+  width: 70%;
 }
+
+#tripal-blast-accordion .tripal-blast-element-right {
+  width: 20%;
+}

js/tripal-blast-ui.js

@@ -7,23 +7,28 @@
 (function($, Drupal){
   Drupal.behaviors.TripalBlastUI = {
     attach: function (context, settings) {
-      $('#accordion').accordion({
+      $('#tripal-blast-accordion').accordion({
         icons: false,
         collapsible: true
       });
 
-      // Listen to what is BLAST information link.
-      $('#tripal-blast-information-link').click(function() {
-        var win = jQuery('#tripal-blast-info-win');
-        
-        if (win.is(':visible')) {
-          win.slideUp();
-        }
-        else {
-          win.slideDown();
-        }
-      });
+      // Listen to what is BLAST information link.      
+      var infoLink = 'tripal-blast-nav-blast';
+      var win = $('#tripal-blast-information-window');
+
+      $('#' + infoLink)
+        .once('#' + infoLink)
+        .each(function() {
+          $(this).click(function(e) {
+            e.preventDefault();
+
+            if (win.is(':visible')) {
+              win.slideUp();
+            }
+            else {
+              win.slideDown();
+            }
+          });
+        });
 
-    }
-  }
-})(jQuery, Drupal);
+}}})(jQuery, Drupal);

templates/template-tripal-blast-ui.html.twig

@@ -5,7 +5,8 @@
  */
 #}
 
-<div id="tripal-blast-info-win" style="display: none">In Bioinformatics, BLAST (Basic Local Alignment Search Tool) is an algorithm
+<div id="tripal-blast-information-window" style="display: none">
+In Bioinformatics, BLAST (Basic Local Alignment Search Tool) is an algorithm
 for comparing primary biological sequence information, such as the amino-acid
 sequences of different proteins or the nucleotides of DNA sequences. A BLAST
 search enables a researcher to compare a query sequence with a library or
@@ -21,16 +22,25 @@ gene based on similarity of sequence.
 (1990) Basic local alignment search tool. J. Mol. Biol., 215, 403–410.</blockquote>
 </div>
 
-<h2>BLAST Search <span id="tripal-blast-information-link">What is BLAST?</span></span></h2>
+<div id="tripal-blast-navigation">
+  <div class="tripal-blast-element-left">
+    <h2>BLAST Search</h2>
+  </div>
+  <div class="tripal-blast-element-right">
+    <a href="#" id="tripal-blast-nav-blast">What is BLAST?</a> | 
+    <a href="https://tripal-blast-ui.readthedocs.io/en/latest/user_guide/features.html" target="_blank">Help</a>
+  </div>
+  <div class="tripal-blast-clear-float"></div>
+</div>
 <p>
   Search for one or more of your sequences (using BLAST). First pick 
   a query type (nucleotide or protein). You will be able to set search 
   parameters on the next page. Choose the appropriate program based on the 
   Query type and Target database type. 
-  Please click on the program name to view the search form.
+  <br /><br /><em>Please click on the program name to view the search form</em>.
 <p>
 
-<div id="accordion">
+<div id="tripal-blast-accordion">
   <h3>Nucleotide Query</h3>
   <div class="ui-accordion-content">
     <div class="tripal-blast-content-wrapper">
@@ -39,7 +49,7 @@ gene based on similarity of sequence.
         <small>Search a nucleotide database using a nucleotide query.</small>
       </div>  
       <div class="tripal-blast-element-right">
-        {{ context_links['link_blastn'] }}
+        {{ context_links['link_blastn'] }} Program
       </div>
       <div class="tripal-blast-clear-float">&nbsp;</div>
     </div>
@@ -49,7 +59,7 @@ gene based on similarity of sequence.
         <small>Search protein database using a translated nucleotide query.</small>
       </div>  
       <div class="tripal-blast-element-right">
-        {{ context_links['link_blastx'] }}
+        {{ context_links['link_blastx'] }} Program
       </div>
       <div class="tripal-blast-clear-float">&nbsp;</div>
     </div>
@@ -63,7 +73,7 @@ gene based on similarity of sequence.
         <small>Search translated nucleotide database using a protein query.</small>
       </div>  
       <div class="tripal-blast-element-right">
-        {{ context_links['link_tblastn'] }}
+        {{ context_links['link_tblastn'] }} Program
       </div>
       <div class="tripal-blast-clear-float">&nbsp;</div>
     </div>
@@ -73,7 +83,7 @@ gene based on similarity of sequence.
         <small>Search protein database using a protein query.</small>
       </div>  
       <div class="tripal-blast-element-right">        
-        {{ context_links['link_blastp'] }}
+        {{ context_links['link_blastp'] }} Program
       </div>
       <div class="tripal-blast-clear-float">&nbsp;</div>
     </div>

tripal_blast.libraries.yml

@@ -14,4 +14,5 @@ tripal-blast-ui:
   dependencies:
     - jquery_ui/core
     - jquery_ui/widget
-
+    - core/jquery
+    - core/jquery.once