diff options
| -rw-r--r-- | gn2/wqflask/static/new/css/llm.css | 11 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 141 |
2 files changed, 127 insertions, 25 deletions
diff --git a/gn2/wqflask/static/new/css/llm.css b/gn2/wqflask/static/new/css/llm.css index bb50fdac..5a666a3d 100644 --- a/gn2/wqflask/static/new/css/llm.css +++ b/gn2/wqflask/static/new/css/llm.css @@ -23,14 +23,14 @@ #gnqa_ref { - height: 90vh; + min-height: 100vh; overflow: hidden; - overflow-y: scroll; + overflow-y:auto; + /* overflow-y: scroll; */ } #gnqa_ref_item{ - border-bottom: 1px solid lightgrey; padding:12px; } @@ -39,7 +39,6 @@ font-size: 24px; font-family: serif; color: #3071a9; - text-transform: capitalize; text-decoration: underline; } @@ -48,12 +47,10 @@ } - #gnqa_answer { - text-transform: capitalize; - } #gnqa_answer::first-letter{ font-weight: bold; + text-transform: uppercase; } diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index 597ed78b..01c94d35 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -46,9 +46,44 @@ } +} +.panel-heading { + padding: 0; + border:0; +} +.panel-title>a, .panel-title>a:active{ + display:block; + padding:15px; + color:#555; + font-weight:bold; +text-decoration:none; +border: none; + +outline: none; +} + +.panel-heading a:before { + font-family: 'Glyphicons Halflings'; + content: "\e114"; + float: right; + transition: all 0.5s; +} +.panel-heading.active a:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); +} + + + + </style> -<div style="height: 90vh;width: 100vw; margin-bottom: 10px;"> + + + + +<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;"> <div id="loader"> @@ -58,31 +93,91 @@ <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1> </div> - <div style="width:80vw;overflow-wrap: normal; margin-top: 5px;"> - <p style="word-spacing: 0.7em;" id="gnqa_answer">{{answer}} <p> + <div style="width:90vw;overflow-wrap: normal; margin-top: 5px;"> + <p id="gnqa_answer">{{answer}} <p> </div> </div> <div> - - <div class="container" style="overflow-y: hidden;"> - <h4> <a href="#">References</a></h4> + <div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;"> + <h4> <a href="#" style="font-weight: bold;">References</a></h4> {% if references %} <ul id="gnqa_ref"> - {% for reference in references %} - <li id="gnqa_ref_item"> - <h2 style="font-weight:bolder;">{{ reference.bibInfo }} </h2> - <p>{{reference.comboTxt}}</p> - - <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}"> - - <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button> - <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this reference -1"><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></button> - - </div> - </li> + + {% for reference in references %} + + <li id="gnqa_ref_item"> +<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> +<!--panel starts here --> +<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 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>{{reference.comboTxt}}</p> + <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}"> + + <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button> + <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this reference -1"><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></button> + + </div> + + + </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" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> + <div class="panel-body"> + + <p>{{reference.comboTxt}}</p> + <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}"> + + <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button> + <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this reference -1"><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></button> + + </div> + + + </div> + </div> + + {% endif %} + + </div> + + </div> + </li> {% endfor %} </ul> {% else %} @@ -92,9 +187,19 @@ </div> </div> + + <script src="https://use.fontawesome.com/fe459689b4.js"></script> +<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script> + <script type="text/javascript"> +$('.panel-collapse').on('show.bs.collapse', function () { + $(this).siblings('.panel-heading').addClass('active'); + }); + $('.panel-collapse').on('hide.bs.collapse', function () { + $(this).siblings('.panel-heading').removeClass('active'); + }); document.addEventListener('DOMContentLoaded', function() { const GN_SERVER_URL = {{gn_server_url|tojson}} |