Add some styling to gnqa answer page.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>
Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>

2 files changed, 97 insertions, 73 deletions

diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html
index 5688655d..31a04aac 100644
--- a/gn2/wqflask/templates/gnqa.html
+++ b/gn2/wqflask/templates/gnqa.html
@@ -3,6 +3,7 @@
 
 {% block css %}
 <style>
+
  .htmx-indicator{
      display:none;
      opacity: 0;
@@ -53,6 +54,28 @@
  .answers {
      width: 75%;
  }
+
+ details > summary {
+     padding: 2px 6px;
+     width: 15em;
+     background-color: #ddd;
+     border: none;
+     box-shadow: 3px 3px 4px black;
+     cursor: pointer;
+ }
+
+ details > p {
+     border-radius: 0 0 10px 10px;
+     background-color: #ddd;
+     padding: 2px 6px;
+     margin: 0;
+     box-shadow: 3px 3px 4px black;
+ }
+
+ details[open] > summary {
+     background-color: #ccf;
+ }
+
 </style>
 {% endblock %}
 
diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html
index 3a53029a..6759ef72 100644
--- a/gn2/wqflask/templates/gnqa_answer.html
+++ b/gn2/wqflask/templates/gnqa_answer.html
@@ -1,91 +1,92 @@
+
 <section class="container-fluid answers gnqa-copy">
-    <h1 class="row text-left">
-	{{ query }}
-    </h1>
-    <div class="row">
-	<p class="col-sm-12 lead">{{ answer }}</p>
-	<div class="rating col-sm-3 col-offset-3" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}">
-	    <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button>
-            <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button>
+    <div class="row container gnqa-answer" style="margin-bottom: 1em">
+	<p class="row lead">
+	    <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{ query }}</i></b></mark><br/>
+	    {{ answer }}
+	</p>
+	<div class="rating row" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}">
+	    <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button>
+            <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button>
 	</div>
     </div>
     <div class="row container">
-	<h1>References</h1>
-	{% if references %}
-
-	<ul class="list-unstyled">
-	    {% for reference in references %}
-	    <li>
-                <div class="panel-group" role="tablist" aria-multiselectable="true">
-		    <div class="panel panel-default">
-			{% if loop.first %}
-			<div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}">
-			    <h4 class="panel-title">
-
-				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ reference.doc_id }}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}">
-				    <h2>{{ reference.bibInfo }} </h2>
-				</a>
-			    </h4>
-			</div>
-			<div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
-			    <div class="panel-body">
-				<div>
-				</div>
-				{% if reference.pubmed %}
-
-				<div style="margin: 5px;color:#3071a9;cursor: pointer;" >
-				    <p class="node-references">{{reference.comboTxt}}</p>
-				    <details>
-					<summary>See PubMed Info</summary>
-					<h4>{{ reference.pubmed[0].get('title') }}</h4>
-					<p><b>Authors: {{ reference.pubmed[0].get('authors') }}</b></p>
-					<p><b>PMID: {{ reference.pubmed[0].get('pub_id') }}</b></p>
-					<p><b>Abstract: </b> {{ reference.pubmed[0].get('abstract')|safe }}</p>
-					<p><i><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></i></p>
-				    </details>
-				{% endif %}
+	<details open>
+	    <summary><h3 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">References</h3></summary>
+	    {% if references %}
+
+	    <ul class="list-unstyled">
+		{% for reference in references %}
+		<li>
+                    <div class="panel-group" role="tablist" aria-multiselectable="true" style="margin-bottom:0;">
+			<div class="panel panel-default">
+			    {% if loop.first %}
+			    <div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}">
+				<h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">
+
+				    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ reference.doc_id }}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}">
+					{{ reference.bibInfo }}
+				    </a>
+				</h4>
 			    </div>
-			</div>
-			{% else %}
-		    <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
-			<h4 class="panel-title">
-
-			    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}">
-				<h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
-			    </a>
-			</h4>
-		    </div>
+			    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
+				<div class="panel-body">
+				    <p class="node-references">{{ reference.comboTxt }}</p>
+				    <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
+					{% if reference.pubmed %}
+					<details>
+					    <summary>See PubMed Info</summary>
+					    <h4 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">{{ reference.pubmed[0].get('title') }}</h4>
+					    <p><b>Authors: {{ reference.pubmed[0].get('authors') }}</b></p>
+					    <p><b>PMID: {{ reference.pubmed[0].get('pub_id') }}</b></p>
+					    <p><b>Abstract: </b> {{ reference.pubmed[0].get('abstract')|safe }}</p>
+					    <p><i><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></i></p>
+					</details>
+					{% endif %}
+				    </div>
+				</div>
+				{% else %}
+				<div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
+				    <h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">
 
-		    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
+					<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}">
+					    {{ reference.bibInfo }}
+					</a>
+				    </h4>
+				</div>
 
-			<div class="panel-body">
+				<div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
 
+				    <div class="panel-body">
 
-			    {% if reference.pubmed %}
 
+					{% if reference.pubmed %}
 
-			    <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
 
-				<button type="button"  data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;">
-				    <span><b>See PubMed Info</b></span>
-				</button>
-			    </div>
+					<div style="margin: 5px;color:#3071a9;cursor: pointer;" >
+
+					    <button type="button"  data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;">
+						<span><b>See PubMed Info</b></span>
+					    </button>
+					</div>
 
-			    {% endif %}
+					{% endif %}
 
-			    <p class="node-references">{{reference.comboTxt}}</p>
+					<p class="node-references">{{reference.comboTxt}}</p>
 
+				    </div>
+				</div>
+				{% endif %}
+			    </div>
 			</div>
+		</li>
+		{% endfor %}
+	    </ul>
+
+	    {% else %}
+	    <p><i>No references available.</i></p>
+	    {% endif %}
+	</details>
+
 		    </div>
-		    {% endif %}
-		    </div>
-		</div>
-	    </li>
-	    {% endfor %}
-	</ul>
-
-	{% else %}
-	<p><i>No references available.</i></p>
-	{% endif %}
-    </div>
 </section>