Skip to content

Commit

Permalink
Upgrade bootstrap and clean UI
Browse files Browse the repository at this point in the history 
+ minor changes to topic form
+ some changes to allow better mobile view
  • Loading branch information
@ammsa
ammsa committed May 23, 2020
1 parent 73034b0 commit 76a149a
Show file tree
Hide file tree
Showing 13 changed files with 1,446 additions and 1,616 deletions.
313 changes: 135 additions & 178 deletions HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html
View file

Large diffs are not rendered by default.

329 changes: 124 additions & 205 deletions HiCALWeb/hicalweb/archive/templates/archive/home.html
View file

Large diffs are not rendered by default.

46 changes: 32 additions & 14 deletions HiCALWeb/hicalweb/progress/forms.py
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
from crispy_forms.bootstrap import StrictButton
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
from crispy_forms.layout import Submit, Layout, Column, Row
from django import forms
from django.db.models import Q

from hicalweb.progress.models import Task
from hicalweb.topic.models import Topic

Expand All @@ -18,13 +18,10 @@ class Meta:
model = Task
exclude = ["username", "setting", "timespent", "last_activity"]
help_texts = {
'max_number_of_judgments': 'Max number of judgments (effort) for this task. '
'Enter 0 or negative number to '
'disable (i.e. no max).',
'strategy': 'Choose the strategy of retrieval.',
'show_full_document_content': 'For paragraph strategies, '
'indicate whether you would like ability to view full '
'document content.',
'max_number_of_judgments': 'Max number of judgments for this topic. '
'Enter <= 0 to disable (i.e. no max).',
'strategy': 'CAL strategy of retrieval.',
'show_full_document_content': 'Only for paragraph strategies.'
}

def __init__(self, *args, **kwargs):
Expand All @@ -44,20 +41,41 @@ class TopicForm(forms.ModelForm):
"""
submit_name = 'submit-topic-form'

max_number_of_judgments = forms.IntegerField(required=True)
max_number_of_judgments = forms.IntegerField(required=True,
label="Effort",
help_text=TaskForm.Meta.help_texts.get('max_number_of_judgments'))
strategy = forms.ChoiceField(choices=Task.STRATEGY_CHOICES,
required=True,
help_text=TaskForm.Meta.help_texts.get('strategy'))
show_full_document_content = forms.BooleanField(required=False,help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))
show_full_document_content = forms.BooleanField(required=False,
help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))

class Meta:
model = Topic
exclude = ["number", "display_description", "narrative"]

def __init__(self, *args, **kwargs):
super(TopicForm, self).__init__(*args, **kwargs)
self.fields['description'].widget.attrs['rows'] = 2
self.helper = FormHelper(self)
self.helper.layout.append(
Submit(self.submit_name, u'Create topic and start judging',
css_class='btn btn-warning btn-sm')
self.helper.layout = Layout(
Row(
Column('title', css_class='form-group col-md-4 mb-0'),
Column('seed_query', css_class='form-group col-md-8 mb-0'),
css_class='form-row'
),
'description',
Row(
Column('max_number_of_judgments', css_class='form-group col-md-6 mb-0'),
Column('strategy', css_class='form-group col-md-6 mb-0'),
css_class='form-row'
),
'show_full_document_content',
StrictButton(u'Create topic and start judging',
name=self.submit_name,
type="submit",
css_class='btn btn-sm btn-outline-secondary')
# Alternative to StrictButton
# Submit(self.submit_name, u'Create topic and start judging',
# css_class='btn btn-sm')
)
282 changes: 126 additions & 156 deletions HiCALWeb/hicalweb/progress/templates/progress/home.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,172 +4,142 @@
{% block pagetitle %}Home{% endblock %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"
type="application/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="application/javascript"></script>
{% endblock %}


{% block nav-header %}{% endblock %}
{% block nav-right%}
<li class="nav-item mt-0-4 mr-3">
{% if request.user.is_authenticated and request.user|has_group:"practice" %}
<a href="{% url 'progress:practice_complete' %}" class="btn btn-primary btn-sm">Exit practice</a>
{% elif request.user.is_authenticated %}
<a class="btn btn-outline-primary btn-sm small" href="{% url 'account_logout' %}">Sign out</a>
{% else %}
<a class="btn btn-outline-primary btn-sm small" href="{% url 'account_login' %}">Sign In</a>
{% endif %}
</li>
{% endblock %}


{% block help_modal_text %}
<p>Here you can initiate the topic of your search. You can select one of the pre-defined TREC topics or create your own topic.</p>
{% endblock %}



{% block main %}
<div class="row">
<div class="col-md-8">
<div class="card small-shadow bottom-margin ">
<div class="card-block">
{% if user.current_task %}
<h2 class="text-primary"> Your current topic </h2>
<hr>
<p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
<p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
<p><strong>Description</strong>: {{ user.current_task.topic.description }}</p>
{% else %}
<h2 class="text-danger">Please create or select a topic</h2>
<hr>
<p>You currently don't have an active topic session. Please select or create a topic of search.</p>
{% endif %}
</div>
</div>
<div class="row">

{% if user.current_task %}
<div class="card small-shadow">
<div class="card-block" id="first">
<h4 class="text-primary">How many documents did you judge?</h4>
<div class="row extra-top-margin">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Judgment Category</th>
<th>Learning model</th>
<th>Search model</th>
<th>All</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><span
class="text-success">Highly relevant</span></th>
<td>{{ total_highlyRelevant_CAL }}</td>
<td>{{ total_highlyRelevant_search }}</td>
<td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
</tr>
<tr>
<th scope="row"><span
class="text-warning">Relevant</span></th>
<td>{{ total_relevant_CAL }}</td>
<td>{{ total_relevant_search }}</td>
<td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
</tr>
<tr>
<th scope="row"><span
class="text-danger">Non relevant</span></th>
<td>{{ total_nonrelevant_CAL }}</td>
<td>{{ total_nonrelevant_search }}</td>
<td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="offset-md-2 col-md-8">
<canvas id="piechart" width="200" height="200"
class="extra-top-margin"></canvas>
</div>
</div>
<script>
var ctx = document.getElementById("piechart");
var data = {
labels: [
"Highly relevant",
"Relevant",
"Non relevant"
],
datasets: [
{
data: [
{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
{{ total_relevant_CAL|add:total_relevant_search }},
{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
backgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
],
hoverBackgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
]
}]
};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
legend: {
display: true,
position: 'right'
}
}
});
</script>
<div class="col-md-4">
<div class="card border-0">
<div class="card-block">
{% if user.current_task %}
<h2 class="text-secondary">Current topic</h2>
<hr>
<p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
<p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
{% if user.current_task.topic.description %}<p><strong>Description</strong>: {{ user.current_task.topic.description }}</p> {% endif %}
{% else %}
<h2 class="text-danger">Please create a topic</h2>
<hr>
<p>You currently don't have an active topic session. Please create a topic first.</p>
{% endif %}
</div>
</div>
</div>

</div>
</div>
{% endif %}
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="card-block">

<div class="col-md-4">
<div class="card small-shadow bottom-margin" style="border-color: #6190e8">
<div class="card-block">
<h2 class="text-primary">Old sessions</h2>
<hr>
<a href="{% url 'progress:sessions' %}" class="btn btn-sm btn-primary">Click to view old sessions</a>
</div>
{% if user.current_task %}
<h2 class="text-secondary">Judgments</h2>
<hr>
<div class="row">
<div class="col-md-12">
<table class="table table-borderless table-hover">
<thead>
<tr>
<th>Type</th>
<th>CAL</th>
<th>Search</th>
<th>All</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><span
class="text-success">Highly relevant</span></th>
<td>{{ total_highlyRelevant_CAL }}</td>
<td>{{ total_highlyRelevant_search }}</td>
<td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
</tr>
<tr>
<th scope="row"><span
class="text-warning">Relevant</span></th>
<td>{{ total_relevant_CAL }}</td>
<td>{{ total_relevant_search }}</td>
<td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
</tr>
<tr>
<th scope="row"><span
class="text-danger">Non relevant</span></th>
<td>{{ total_nonrelevant_CAL }}</td>
<td>{{ total_nonrelevant_search }}</td>
<td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
</tr>
</tbody>
</table>
</div>

<div class="card small-shadow bottom-margin" style="border-color: #EFAC57">
<div class="card-block">
<h2 class="text-warning">TREC topics </h2>
<hr>
<form method="POST">
{% csrf_token %}
{% crispy form %}
</form>
</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-5 mx-auto center-text">
<canvas id="piechart" width="200" height="200"
class="mt-2"></canvas>
</div>
<script>
var ctx = document.getElementById("piechart");
var data = {
labels: [
"Highly relevant",
"Relevant",
"Non relevant"
],
datasets: [
{
data: [
{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
{{ total_relevant_CAL|add:total_relevant_search }},
{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
backgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
],
hoverBackgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
]
}]
};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
legend: {
display: true,
position: 'right'
}
}
});
</script>
</div>
{% endif %}
</div>
</div>
</div>

<div class="card small-shadow" style="border-color: #EFAC57">
<div class="card-block">
<h2 class="text-warning">Create new topic </h2>
<hr>
<form method="POST">
{% csrf_token %}
{% crispy form_topic %}
</form>
</div>
<div class="col-md-4">
<div class="card border-0 mb-4 ">
<div class="card-block">
<h2 class="text-secondary">Create new topic </h2>
<hr>
<div class=row>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<form method="POST">
{% csrf_token %}
{% crispy form_topic %}
</form>
</div>
</div>

</div>
</div>
</div>
</div>
</div>

</div>
{% endblock %}
Loading

0 comments on commit 76a149a

Please sign in to comment.