Refactor updates to optional blocks used in indra_db template

Author: kkaris

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

@@ -85,22 +85,27 @@
             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;
         }
 
-        .mid-right {
-          position: fixed;
-          top: 0;
-          bottom: 0;
-          width: 20em;
-          background: #fff;
-          padding-top: 85px;
-          overflow-y: auto;
-        }
+        {% block mid_right_styles %}
+        {% endblock %}
+
         .right {
             width: 20em;                /* Sidebar width */
             right: 0;
@@ -110,18 +115,17 @@
             background-color: #fff;      /* White background */
             overflow-y: auto;            /* Allow scrolling if content overflows */
         }
-        .mid-right { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); }
-        .right { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); }
 
         /* The navigation menu links */
-        .side-info{
+        .side-info .il-nav-link {
           font-size: 12pt;
           target-new: tab;
           display: block;
         }
 
         .side-info h4 {
           font-size: 10pt;
+          display: block;
           text-decoration: none;
           margin-bottom: 0;
         }
@@ -155,30 +159,44 @@
 
         {% if not simple %}
         .content {
-          margin-right: calc(15% + 20%);
           padding-top:85px;
           padding-bottom: 65px
         }
 
-        @media (min-width: 1500px) {
-          .right     { width: 15%; }
-          .mid-right { width: 20%; right: 15%; }
-          .content   { margin-right: calc(15% + 20%); }
-          .footer    { right: calc(15% + 20%); }
+        {% block layout_media_queries %}
+        @media (max-width: 1800px) {
+          .right {
+            width: 15%;
+          }
+          .container {
+            float: left;
+          }
+          .footer {
+              right: 15%;
+          }
         }
 
         @media (max-width: 1500px) {
-          .right     { width: 15%; }
-          .mid-right { width: 20%; right: 15%; }
-          .content   { margin-right: calc(15% + 20%); }
-          .footer    { right: calc(15% + 20%); }
+          .container {
+            max-width: 960px;
+          }
+          .right {
+            width: 15%;
+          }
+          .footer {
+              right: 15%;
+          }
         }
 
         @media (max-width: 1100px) {
-          .right, .mid-right { display: none; }
-          .content { margin-right: 0; }
-          .footer  { right: 0; }
+          .right {
+            display: none;
+          }
+          .footer {
+              right: 0em;
+          }
         }
+        {% endblock %}
         {% endif %}
     </style>
 
@@ -247,82 +265,8 @@ <h2>{{ title }}</h2>
   </div>
 </footer>
 
-<div class="side-info mid-right" id="mid-right-panel">
-  <h3 class="bg-white">Summary</h3>
-  <p>On this page, you can search for statements from the INDRA Database by applying different filters such as agents, relation types, MeSH terms, or papers.</p>
-  <h4>Examples</h4>
-    <!-- Examples -->
-    <span style="color:#888;">•</span>
-    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
-          data-agent1="DUSP1"
-          data-agent2="MAPK1"
-          data-preset="s-o"
-          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
-            agent1: this.dataset.agent1,
-            agent2: this.dataset.agent2,
-            preset: this.dataset.preset
-          }}))">
-      How does DUSP1 affect MAPK1?
-    </span>
-
-    <br/>
-
-    <span style="color:#888;">•</span>
-    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
-          data-agent1="CDK12"
-          data-stmt-type="Phosphorylation"
-          data-preset="s-o"
-          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
-            agent1: this.dataset.agent1,
-            stmtType: this.dataset.stmtType,
-            preset: this.dataset.preset
-          }}))">
-      What does CDK12 phosphorylate?
-    </span>
-
-    <br/>
-
-    <span style="color:#888;">•</span>
-    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
-          data-agent1="MTOR"
-          data-stmt-type="Inhibition"
-          data-preset="o-s"
-          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
-            agent1: this.dataset.agent1,
-            stmtType: this.dataset.stmtType,
-            preset: this.dataset.preset
-          }}))">
-      What is known to inhibit mTOR?
-    </span>
-
-    <br/>
-
-    <span style="color:#888;">•</span>
-    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
-          data-agent1="PIK3CA"
-          data-preset="any-any"
-          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
-            agent1: this.dataset.agent1,
-            preset: this.dataset.preset
-          }}))">
-      Show all interactions involving PIK3CA.
-    </span>
-
-    <br/>
-
-    <span style="color:#888;">•</span>
-    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
-          data-agent1="Seliciclib"
-          data-stmt-type="Inhibition"
-          data-preset="s-o"
-          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
-            agent1: this.dataset.agent1,
-            stmtType: this.dataset.stmtType,
-            preset: this.dataset.preset
-          }}))">
-      What does Seliciclib inhibit?
-    </span>
-</div>
+{% block mid_right_panel %}
+{% endblock %}
 
 <!-- THE RIGHT SIDEBAR -->
 <div class="side-info right bg-white" id="right-side-panel">