Skip to content

Commit 76a149a

Browse files
ammsaammsa
committed
Upgrade bootstrap and clean UI
+ minor changes to topic form + some changes to allow better mobile view
1 parent 73034b0 commit 76a149a

File tree

13 files changed

+1446
-1616
lines changed

13 files changed

+1446
-1616
lines changed

‎HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html‎

Lines changed: 135 additions & 178 deletions
Large diffs are not rendered by default.

‎HiCALWeb/hicalweb/archive/templates/archive/home.html‎

Lines changed: 124 additions & 205 deletions
Large diffs are not rendered by default.

‎HiCALWeb/hicalweb/progress/forms.py‎

100644100755
Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
from crispy_forms.bootstrap import StrictButton
12
from crispy_forms.helper import FormHelper
2-
from crispy_forms.layout import Submit
3+
from crispy_forms.layout import Submit, Layout, Column, Row
34
from django import forms
45
from django.db.models import Q
5-
66
from hicalweb.progress.models import Task
77
from hicalweb.topic.models import Topic
88

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

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

47-
max_number_of_judgments = forms.IntegerField(required=True)
44+
max_number_of_judgments = forms.IntegerField(required=True,
45+
label="Effort",
46+
help_text=TaskForm.Meta.help_texts.get('max_number_of_judgments'))
4847
strategy = forms.ChoiceField(choices=Task.STRATEGY_CHOICES,
4948
required=True,
5049
help_text=TaskForm.Meta.help_texts.get('strategy'))
51-
show_full_document_content = forms.BooleanField(required=False,help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))
50+
show_full_document_content = forms.BooleanField(required=False,
51+
help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))
5252

5353
class Meta:
5454
model = Topic
5555
exclude = ["number", "display_description", "narrative"]
5656

5757
def __init__(self, *args, **kwargs):
5858
super(TopicForm, self).__init__(*args, **kwargs)
59+
self.fields['description'].widget.attrs['rows'] = 2
5960
self.helper = FormHelper(self)
60-
self.helper.layout.append(
61-
Submit(self.submit_name, u'Create topic and start judging',
62-
css_class='btn btn-warning btn-sm')
61+
self.helper.layout = Layout(
62+
Row(
63+
Column('title', css_class='form-group col-md-4 mb-0'),
64+
Column('seed_query', css_class='form-group col-md-8 mb-0'),
65+
css_class='form-row'
66+
),
67+
'description',
68+
Row(
69+
Column('max_number_of_judgments', css_class='form-group col-md-6 mb-0'),
70+
Column('strategy', css_class='form-group col-md-6 mb-0'),
71+
css_class='form-row'
72+
),
73+
'show_full_document_content',
74+
StrictButton(u'Create topic and start judging',
75+
name=self.submit_name,
76+
type="submit",
77+
css_class='btn btn-sm btn-outline-secondary')
78+
# Alternative to StrictButton
79+
# Submit(self.submit_name, u'Create topic and start judging',
80+
# css_class='btn btn-sm')
6381
)

‎HiCALWeb/hicalweb/progress/templates/progress/home.html‎

100644100755
Lines changed: 126 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -4,172 +4,142 @@
44
{% block pagetitle %}Home{% endblock %}
55

66
{% block extra_head %}
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"
8-
type="application/javascript"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="application/javascript"></script>
98
{% endblock %}
109

11-
12-
{% block nav-header %}{% endblock %}
13-
{% block nav-right%}
14-
<li class="nav-item mt-0-4 mr-3">
15-
{% if request.user.is_authenticated and request.user|has_group:"practice" %}
16-
<a href="{% url 'progress:practice_complete' %}" class="btn btn-primary btn-sm">Exit practice</a>
17-
{% elif request.user.is_authenticated %}
18-
<a class="btn btn-outline-primary btn-sm small" href="{% url 'account_logout' %}">Sign out</a>
19-
{% else %}
20-
<a class="btn btn-outline-primary btn-sm small" href="{% url 'account_login' %}">Sign In</a>
21-
{% endif %}
22-
</li>
23-
{% endblock %}
24-
25-
26-
{% block help_modal_text %}
27-
<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>
28-
{% endblock %}
29-
30-
31-
3210
{% block main %}
33-
<div class="row">
34-
<div class="col-md-8">
35-
<div class="card small-shadow bottom-margin ">
36-
<div class="card-block">
37-
{% if user.current_task %}
38-
<h2 class="text-primary"> Your current topic </h2>
39-
<hr>
40-
<p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
41-
<p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
42-
<p><strong>Description</strong>: {{ user.current_task.topic.description }}</p>
43-
{% else %}
44-
<h2 class="text-danger">Please create or select a topic</h2>
45-
<hr>
46-
<p>You currently don't have an active topic session. Please select or create a topic of search.</p>
47-
{% endif %}
48-
</div>
49-
</div>
11+
<div class="row">
5012

51-
{% if user.current_task %}
52-
<div class="card small-shadow">
53-
<div class="card-block" id="first">
54-
<h4 class="text-primary">How many documents did you judge?</h4>
55-
<div class="row extra-top-margin">
56-
<div class="col-md-12">
57-
<table class="table table-hover">
58-
<thead>
59-
<tr>
60-
<th>Judgment Category</th>
61-
<th>Learning model</th>
62-
<th>Search model</th>
63-
<th>All</th>
64-
</tr>
65-
</thead>
66-
<tbody>
67-
<tr>
68-
<th scope="row"><span
69-
class="text-success">Highly relevant</span></th>
70-
<td>{{ total_highlyRelevant_CAL }}</td>
71-
<td>{{ total_highlyRelevant_search }}</td>
72-
<td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
73-
</tr>
74-
<tr>
75-
<th scope="row"><span
76-
class="text-warning">Relevant</span></th>
77-
<td>{{ total_relevant_CAL }}</td>
78-
<td>{{ total_relevant_search }}</td>
79-
<td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
80-
</tr>
81-
<tr>
82-
<th scope="row"><span
83-
class="text-danger">Non relevant</span></th>
84-
<td>{{ total_nonrelevant_CAL }}</td>
85-
<td>{{ total_nonrelevant_search }}</td>
86-
<td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
87-
</tr>
88-
</tbody>
89-
</table>
90-
</div>
91-
</div>
92-
<hr>
93-
<div class="row">
94-
<div class="offset-md-2 col-md-8">
95-
<canvas id="piechart" width="200" height="200"
96-
class="extra-top-margin"></canvas>
97-
</div>
98-
</div>
99-
<script>
100-
var ctx = document.getElementById("piechart");
101-
var data = {
102-
labels: [
103-
"Highly relevant",
104-
"Relevant",
105-
"Non relevant"
106-
],
107-
datasets: [
108-
{
109-
data: [
110-
{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
111-
{{ total_relevant_CAL|add:total_relevant_search }},
112-
{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
113-
backgroundColor: [
114-
"#5cb85c",
115-
"#f0ad4e",
116-
"#d9534f"
117-
],
118-
hoverBackgroundColor: [
119-
"#5cb85c",
120-
"#f0ad4e",
121-
"#d9534f"
122-
]
123-
}]
124-
};
125-
var myPieChart = new Chart(ctx, {
126-
type: 'pie',
127-
data: data,
128-
options: {
129-
legend: {
130-
display: true,
131-
position: 'right'
132-
}
133-
}
134-
});
135-
</script>
13+
<div class="col-md-4">
14+
<div class="card border-0">
15+
<div class="card-block">
16+
{% if user.current_task %}
17+
<h2 class="text-secondary">Current topic</h2>
18+
<hr>
19+
<p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
20+
<p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
21+
{% if user.current_task.topic.description %}<p><strong>Description</strong>: {{ user.current_task.topic.description }}</p> {% endif %}
22+
{% else %}
23+
<h2 class="text-danger">Please create a topic</h2>
24+
<hr>
25+
<p>You currently don't have an active topic session. Please create a topic first.</p>
26+
{% endif %}
27+
</div>
28+
</div>
29+
</div>
13630

137-
</div>
138-
</div>
139-
{% endif %}
140-
</div>
31+
<div class="col-md-4">
32+
<div class="card border-0">
33+
<div class="card-block">
14134

142-
<div class="col-md-4">
143-
<div class="card small-shadow bottom-margin" style="border-color: #6190e8">
144-
<div class="card-block">
145-
<h2 class="text-primary">Old sessions</h2>
146-
<hr>
147-
<a href="{% url 'progress:sessions' %}" class="btn btn-sm btn-primary">Click to view old sessions</a>
148-
</div>
35+
{% if user.current_task %}
36+
<h2 class="text-secondary">Judgments</h2>
37+
<hr>
38+
<div class="row">
39+
<div class="col-md-12">
40+
<table class="table table-borderless table-hover">
41+
<thead>
42+
<tr>
43+
<th>Type</th>
44+
<th>CAL</th>
45+
<th>Search</th>
46+
<th>All</th>
47+
</tr>
48+
</thead>
49+
<tbody>
50+
<tr>
51+
<th scope="row"><span
52+
class="text-success">Highly relevant</span></th>
53+
<td>{{ total_highlyRelevant_CAL }}</td>
54+
<td>{{ total_highlyRelevant_search }}</td>
55+
<td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
56+
</tr>
57+
<tr>
58+
<th scope="row"><span
59+
class="text-warning">Relevant</span></th>
60+
<td>{{ total_relevant_CAL }}</td>
61+
<td>{{ total_relevant_search }}</td>
62+
<td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
63+
</tr>
64+
<tr>
65+
<th scope="row"><span
66+
class="text-danger">Non relevant</span></th>
67+
<td>{{ total_nonrelevant_CAL }}</td>
68+
<td>{{ total_nonrelevant_search }}</td>
69+
<td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
70+
</tr>
71+
</tbody>
72+
</table>
14973
</div>
150-
151-
<div class="card small-shadow bottom-margin" style="border-color: #EFAC57">
152-
<div class="card-block">
153-
<h2 class="text-warning">TREC topics </h2>
154-
<hr>
155-
<form method="POST">
156-
{% csrf_token %}
157-
{% crispy form %}
158-
</form>
159-
</div>
74+
</div>
75+
<div class="row">
76+
<div class="col-md-8 col-sm-5 mx-auto center-text">
77+
<canvas id="piechart" width="200" height="200"
78+
class="mt-2"></canvas>
16079
</div>
80+
<script>
81+
var ctx = document.getElementById("piechart");
82+
var data = {
83+
labels: [
84+
"Highly relevant",
85+
"Relevant",
86+
"Non relevant"
87+
],
88+
datasets: [
89+
{
90+
data: [
91+
{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
92+
{{ total_relevant_CAL|add:total_relevant_search }},
93+
{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
94+
backgroundColor: [
95+
"#5cb85c",
96+
"#f0ad4e",
97+
"#d9534f"
98+
],
99+
hoverBackgroundColor: [
100+
"#5cb85c",
101+
"#f0ad4e",
102+
"#d9534f"
103+
]
104+
}]
105+
};
106+
var myPieChart = new Chart(ctx, {
107+
type: 'pie',
108+
data: data,
109+
options: {
110+
legend: {
111+
display: true,
112+
position: 'right'
113+
}
114+
}
115+
});
116+
</script>
117+
</div>
118+
{% endif %}
119+
</div>
120+
</div>
121+
</div>
161122

162-
<div class="card small-shadow" style="border-color: #EFAC57">
163-
<div class="card-block">
164-
<h2 class="text-warning">Create new topic </h2>
165-
<hr>
166-
<form method="POST">
167-
{% csrf_token %}
168-
{% crispy form_topic %}
169-
</form>
170-
</div>
123+
<div class="col-md-4">
124+
<div class="card border-0 mb-4 ">
125+
<div class="card-block">
126+
<h2 class="text-secondary">Create new topic </h2>
127+
<hr>
128+
<div class=row>
129+
<div class="col-md-12">
130+
<div class="card">
131+
<div class="card-body">
132+
<form method="POST">
133+
{% csrf_token %}
134+
{% crispy form_topic %}
135+
</form>
136+
</div>
171137
</div>
172-
138+
</div>
173139
</div>
140+
</div>
174141
</div>
142+
</div>
143+
144+
</div>
175145
{% endblock %}

0 commit comments

Comments
 (0)