Merge pull request #1458 from haohangyan/webpage

UI Fixes for db.indra.bio website

indra/assemblers/html/templates/indra/template.html

@@ -61,14 +61,56 @@
           padding-right: 1em;
         }
 
-        .left {
-          width: 20em;
-          left: 0;
+        /* The footer */
+        .footer {
+            position: fixed;   /* Make sure the footer is always visible at the bottom */
+            bottom: 0;         /* Stick it to the bottom of the page */
+            left: 0;
+            right: 20em;
+            color: #606060;
+            text-align: left;
+            padding: 0.5em;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+            height: 110px;
+        }
+
+        .footer h4, .footer p, .footer a {
+            font-size: 9pt;
+            line-height: 1.3;
+            margin: 0;  /* Reduces vertical spacing */
+        }
+
+        .side-info-block {
+            padding: 0em 8px 0em 8px;
+            margin-bottom: 0;
+        }
+
+        /* Footer links */
+        .il-nav-link {
+            display: block;
+            margin: 5px 0;
+            color: #256DC5;   /* Blue color */
+            text-decoration: none;
+        }
+
+        .il-nav-link:hover {
+            text-decoration: underline;
+            color: #007bff;
+        }
+
+        #about-this-project p, #about-this-project a {
+            font-size: 9pt;
+            margin-bottom: 0;
         }
 
         .right {
-          width: 20em;
-          right: 0;
+            width: 20em;                /* Sidebar width */
+            right: 0;
+            position: fixed;            /* Make sure the sidebar stays on the right */
+            top: 0;
+            bottom: 0;
+            background-color: #fff;      /* White background */
+            overflow-y: auto;            /* Allow scrolling if content overflows */
         }
 
         /* The navigation menu links */
@@ -79,19 +121,25 @@
         }
 
         .side-info h4 {
-          font-size: 14pt;
+          font-size: 10pt;
           display: block;
           text-decoration: none;
+          margin-bottom: 0;
         }
 
-        .side-info-block {
-          padding: 1em 8px 1em 16px;
+        #sources-explanation {
+            font-size: 10pt;
         }
 
         .source-desc {
           border-radius: 4px;
-          padding: 0.25em 0.5em 0.25em 0.5em;
-          margin: 4px;
+          padding: 0em 0em;
+          font-size: 0.6em;
+          margin: 1px;
+        }
+
+        h3.bg-white {
+          font-size: 13pt;
         }
 
         {% for category, data in source_colors %}
@@ -109,18 +157,19 @@
         {% if not simple %}
         .content {
           padding-top:85px;
+          padding-bottom: 110px
         }
 
         @media (max-width: 1800px) {
-          .left {
-            display: none;
-          }
           .right {
-            width: 20%;
+            width: 15%;
           }
           .container {
             float: left;
           }
+          .footer {
+              right: 15%;
+          }
         }
 
         @media (max-width: 1500px) {
@@ -130,13 +179,18 @@
           .right {
             width: 15%;
           }
+          .footer {
+              right: 15%;
+          }
         }
 
         @media (max-width: 1100px) {
           .right {
             display: none;
           }
-        }
+          .footer {
+              right: 0em;
+          }
         {% endif %}
     </style>
 
@@ -173,37 +227,6 @@
   {% endblock %}
 </div>
 
-<!-- THE LEFT SIDEBAR -->
-<div class="side-info left bg-white " id="left-side-panel">
-  <div class="side-info-block">
-    <h4>Other Services</h4>
-    <a class=il-nav-link href="https://emmaa.indra.bio">EMMAA</a>
-    <a class=il-nav-link href="http://dialogue.bio">Bob with Bioagents</a>
-  </div>
-
-  <div class="side-info-block">
-    <h4 class="bg-white" type="button" data-toggle="collapse"
-        data-target="#about-this-service">
-      This Service
-    </h4>
-    <div id="about-this-service" class="collapse">
-      {% block header_desc %}
-      {% endblock %}
-    </div>
-
-
-    <h4 class="bg-white" type="button" data-toggle="collapse"
-        data-target="#about-this-project">
-      This Project
-    </h4>
-    <div id="about-this-project" class="collapse">
-      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">indralabs</a>,
-        a part of the Harvard Medical School Laboratory of Systems Pharmacology.</p>
-      {% block additional_footer %}
-      {% endblock %}
-    </div>
-  </div>
-</div>
 {% endif %}
 
 <!-- THE MAIN BODY -->
@@ -225,17 +248,31 @@ <h2>{{ title }}</h2>
 </main>
 
 {% if not simple %}
+<!-- THE FOOTER -->
+<footer class="footer bg-white">
+
+  <div class="side-info-block">
+    <div id="about-this-project">
+      {% block header_desc %}
+      {% endblock %}
+    </div>
+  </div>
+</footer>
+
+
 <!-- THE RIGHT SIDEBAR -->
 <div class="side-info right bg-white" id="right-side-panel">
   <div class="side-info-block">
     <h3 class="bg-white"
         type="button" data-toggle="collapse"
         data-target="#sources-explanation">
-      Our Sources:
+      INDRA sources:
     </h3>
-    <p id="sources-explanation" class="collapse">
-      INDRA allows us to combine the results from a multitude of sources. In
-      particular, the INDRA Database draws on the following...
+    <p id="sources-explanation" >
+      Colored badges next to statement headings correspond to evidence counts
+      from knowledge sources, as shown below. Badges to the left of the | separator
+      correspond to curated knowledge base sources, and badges to the
+      right of it correspond to machine reading systems.
     </p>
   </div>
   {% for category, data in source_colors %}