Add layout for second side bar and example text

Author: haohangyan

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

@@ -85,24 +85,23 @@
             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;
+          right: 0;
+          width: 20em;
+          background: #fff;
+          padding-top: 85px;
+          overflow-y: auto;
+        }
         .right {
             width: 20em;                /* Sidebar width */
             right: 0;
@@ -112,17 +111,18 @@
             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 .il-nav-link {
+        .side-info{
           font-size: 12pt;
           target-new: tab;
           display: block;
         }
 
         .side-info h4 {
           font-size: 10pt;
-          display: block;
           text-decoration: none;
           margin-bottom: 0;
         }
@@ -156,41 +156,30 @@
 
         {% if not simple %}
         .content {
+          margin-right: calc(15% + 20%);
           padding-top:85px;
           padding-bottom: 65px
         }
 
         @media (max-width: 1800px) {
-          .right {
-            width: 15%;
-          }
-          .container {
-            float: left;
-          }
-          .footer {
-              right: 15%;
-          }
+          .right     { width: 15%; }
+          .mid-right { width: 20%; right: 15%; }
+          .content   { margin-right: calc(15% + 20%); }
+          .footer    { right: calc(15% + 20%); }
         }
 
         @media (max-width: 1500px) {
-          .container {
-            max-width: 960px;
-          }
-          .right {
-            width: 15%;
-          }
-          .footer {
-              right: 15%;
-          }
+          .right     { width: 15%; }
+          .mid-right { width: 20%; right: 15%; }
+          .content   { margin-right: calc(15% + 20%); }
+          .footer    { right: calc(15% + 20%); }
         }
 
         @media (max-width: 1100px) {
-          .right {
-            display: none;
-          }
-          .footer {
-              right: 0em;
-          }
+          .right, .mid-right { display: none; }
+          .content { margin-right: 0; }
+          .footer  { right: 0; }
+        }
         {% endif %}
     </style>
 
@@ -230,7 +219,7 @@
 {% endif %}
 
 <!-- THE MAIN BODY -->
-<main role="main" class="container">
+<main role="main" class="container-fluid">
 
   {% if simple %}
     <!-- THE SIMPLE HEADING -->
@@ -259,6 +248,67 @@ <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>
+    <span style="color:#888;">•</span>
+    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
+        data-agent1="DUSP1" data-agent2="MAPK1"
+        onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: { agent1: this.dataset.agent1, agent2: this.dataset.agent2 } }))">
+            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-role1="subject" data-stmt-type="Phosphorylation"
+          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
+            agent1: this.dataset.agent1,
+            role1: this.dataset.role1,
+            stmtType: this.dataset.stmtType
+          }}))">
+            What does CDK12 phosphorylate?
+    </span>
+
+    <br/>
+
+    <span style="color:#888;">•</span>
+    <span style="cursor:pointer; color:#256DC5; text-decoration:underline;"
+          data-agent2="MTOR" data-role2="object" data-stmt-type="Inhibition"
+          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
+            agent2: this.dataset.agent2,
+            role2: this.dataset.role2,
+            stmtType: this.dataset.stmtType
+          }}))">
+            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"
+          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
+            agent1: this.dataset.agent1
+          }}))">
+            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-role1="subject" data-stmt-type="Inhibition"
+          onclick="window.dispatchEvent(new CustomEvent('indra:example', { detail: {
+            agent1: this.dataset.agent1,
+            role1: this.dataset.role1,
+            stmtType: this.dataset.stmtType
+          }}))">
+            What does Seliciclib inhibit?
+    </span>
+</div>
 
 <!-- THE RIGHT SIDEBAR -->
 <div class="side-info right bg-white" id="right-side-panel">