Skip to content

Commit

Permalink
BS5 content and navbar spacing (#1150)
Browse files Browse the repository at this point in the history 
* add template tags for main container, heading and subheading, and use them in web app pages

* add "select a state" to the empty select option

* modify template tag to create page title and option button (rather than classes), start implementing

* remove unused template variables (query strings)

* finish implementing page_title template tag

* add page_title template tag to more pages

* tweak page title margins

* indent breadcrumbs with rest of page content (move base container div to include breadcrumb block)

* remove unnecessary container divs from page templates (container div is in base.html)

* add the page_title template tag to more pages

* rename btn argument in page_title to right_side_elements
  • Loading branch information
@becky-gilbert
becky-gilbert authored Mar 24, 2023
1 parent 8f7e4f4 commit fd89da6
Show file tree
Hide file tree
Showing 25 changed files with 1,994 additions and 1,983 deletions.
16 changes: 8 additions & 8 deletions accounts/templates/accounts/participant_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
{% endbreadcrumb %}
{% endblock breadcrumb %}
{% block content %}
<h1>
{{ user.identicon_html }}
{% if user.nickname %}
{{ user.nickname }}
{% else %}
{% trans "Participant ID" %} {{ user.id }}
{% endif %}
</h1>
{% if user.nickname %}
{% set_variable user.identicon_html|add:" "|add:user.nickname as title_text %}
{% else %}
{% trans "Participant ID" as trans_ppt_id %}
{% set_variable user.id|stringformat:"d" as user_id_str %}
{% set_variable user.identicon_html|add:" "|add:trans_ppt_id|add:" "|add:user_id_str as title_text %}
{% endif %}
{% page_title title_text %}
<div>Last Active: {{ user.last_login|date:"n/d/Y"|default:"N/A" }}</div>
<div>Participant global ID: {{ user.uuid }}</div>
<div class="row mb-3 mt-4">
Expand Down
2 changes: 1 addition & 1 deletion accounts/templates/accounts/participant_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% endblock title %}
{% block content %}
{% button_primary_classes "btn-sm" as btn_primary_classes %}
<h1>Participants</h1>
{% page_title "Participants" %}
<form method="get">
<input id="search-participants"
class="form-control"
Expand Down
3 changes: 2 additions & 1 deletion exp/templates/exp/support.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{% extends "exp/base.html" %}
{% load web_extras %}
{% block title %}
Support Lookit
{% endblock title %}
{% block content %}
<h1>How Researchers can Support Lookit</h1>
{% page_title "How Researchers can Support Lookit" %}
<p>
Lookit is free for labs to use, but like any open source software project, it's not free to run!
On this page, you can learn about ways to keep Lookit running (and getting better!) for a long time
Expand Down
389 changes: 195 additions & 194 deletions studies/templates/studies/_all_json_and_csv_data.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion studies/templates/studies/lab_create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{% endbreadcrumb %}
{% endblock breadcrumb %}
{% block content %}
<h1>Create Lab</h1>
{% page_title "Create Lab" %}
<form action="" enctype="multipart/form-data" method="post">
{% csrf_token %}
{% bootstrap_form form %}
Expand Down
28 changes: 11 additions & 17 deletions studies/templates/studies/lab_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,17 @@
{% endbreadcrumb %}
{% endblock breadcrumb %}
{% block content %}
<div class="d-flex justify-content-between">
<h1>{{ lab.name }}</h1>
<div class="d-flex flex-column justify-content-end">
<a href="{% url 'exp:lab-edit' pk=lab.id %}">Edit lab</a>
<a href="{% url 'exp:lab-members' pk=lab.id %}">View/Manage lab members</a>
{% if in_this_lab %}
You have joined this lab.
{% elif requested_this_lab %}
You have requested to join this lab.
{% else %}
<form action="{% url 'exp:lab-request' pk=lab.id %}" method="post">
{% csrf_token %}
{% bootstrap_button "Request to join" %}
</form>
{% endif %}
</div>
</div>
{% url 'exp:lab-edit' pk=lab.id as url_lab_edit %}
{% url 'exp:lab-members' pk=lab.id as url_lab_members %}
{% set_variable '<div><a href="'|add:url_lab_edit|add:'">Edit lab</a></div>' as link_edit_lab %}
{% set_variable '<div><a href="'|add:url_lab_members|add:'">View/manage lab members</a></div>' as link_lab_members %}
{% if in_this_lab %}
{% set_variable "<div>You have joined this lab.</div>" as lab_join_message %}
{% elif requested_this_lab %}
{% set_variable "<div>You have requested to join this lab.</div>" as lab_join_message %}
{% endif %}
{% set_variable link_edit_lab|add:link_lab_members|add:lab_join_message as page_title_right_content %}
{% page_title lab.name right_side_elements=page_title_right_content %}
<div class="row">
<div class="col-12">
<strong>Institution</strong>
Expand Down
13 changes: 5 additions & 8 deletions studies/templates/studies/lab_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,11 @@
Labs
{% endblock title %}
{% block content %}
{% button_primary_classes "btn-sm" as btn_primary_classes %}
<div class="d-flex justify-content-between align-items-center">
<h1>View Labs</h1>
<div>
<a class="{% button_primary_classes %}"
href="{% url 'exp:lab-create' %}">{% bs_icon "plus" %} Create Lab</a>
</div>
</div>
{% url 'exp:lab-create' as url_exp_lab_create %}
{% bs_icon "plus" as bs_icon_plus %}
{% button_primary_classes as btn_primary_classes %}
{% bootstrap_button bs_icon_plus|add:"Create Lab" href=url_exp_lab_create button_class=btn_primary_classes as btn_create_lab %}
{% page_title "View Labs" right_side_elements=btn_create_lab %}
<div class="my-4">
<form method="get">
<input id="search-labs"
Expand Down
2 changes: 1 addition & 1 deletion studies/templates/studies/lab_update.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{% url 'exp:lab-edit' pk=lab.id as url_lab_edit %}
{% button_primary_classes as btn_primary_classes %}
{% button_secondary_classes as btn_secondary_classes %}
<h1>Update Lab</h1>
{% page_title "Update Lab" %}
<form action="" enctype="multipart/form-data" method="post">
{% csrf_token %}
{% bootstrap_form form %}
Expand Down
146 changes: 72 additions & 74 deletions studies/templates/studies/study_attachments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,87 +24,85 @@
{% query_transform request sort='created_at' as sort_date_up %}
{% query_transform request sort='-created_at' as sort_date_down %}
{% button_primary_classes "mt-3" as btn_primary_classes %}
<h1>Videos</h1>
{% page_title "Videos" %}
<div class="row">
<div class="col">{% include "studies/_response_nav_tabs.html" with active="attachments" %}</div>
</div>
<div class="container px-4">
<div class="row">
<div class="col-12">
<span class="text-end">
<form method="post">
{% csrf_token %}
{% bootstrap_button "Download all videos" button_class=btn_primary_classes button_type="submit" name="all-attachments" value="all" %}
{% bootstrap_button "Download all consent videos" button_class=btn_primary_classes button_type="submit" name="all-consent-videos" value="all" %}
</form>
</span>
</div>
</div>
<div class="row text-center justify-content-center mt-3">
<div class="col-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<form method="get">
<input id="search-attachments"
class="form-control form-control-sm"
name="match"
placeholder="Filter video name"
size="50"
type="text"
value="{{ match }}"/>
<input type="hidden" name="sort" value="{{ sort }}"/>
<div class="row">
<div class="col-12">
<span class="text-end">
<form method="post">
{% csrf_token %}
{% bootstrap_button "Download all videos" button_class=btn_primary_classes button_type="submit" name="all-attachments" value="all" %}
{% bootstrap_button "Download all consent videos" button_class=btn_primary_classes button_type="submit" name="all-consent-videos" value="all" %}
</form>
</div>
</span>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="table-responsive">
<table class="study-attachments table table-striped">
<caption class="visually-hidden">Study Attachments</caption>
<thead>
</div>
<div class="row text-center justify-content-center mt-3">
<div class="col-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<form method="get">
<input id="search-attachments"
class="form-control form-control-sm"
name="match"
placeholder="Filter video name"
size="50"
type="text"
value="{{ match }}"/>
<input type="hidden" name="sort" value="{{ sort }}"/>
</form>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="table-responsive">
<table class="study-attachments table table-striped">
<caption class="visually-hidden">Study Attachments</caption>
<thead>
<tr>
<th scope="col">
Name
{% with url_attachments|add:"?"|add:sort_name_up as url_sort_name_up %}
{% bootstrap_button bs_icon_up button_class="btn btn-link ps-1 pe-0" button_type="link" href=url_sort_name_up %}
{% endwith %}
{% with url_attachments|add:"?"|add:sort_name_down as url_sort_name_down %}
{% bootstrap_button bs_icon_down button_class="btn btn-link px-0" button_type="link" href=url_sort_name_down %}
{% endwith %}
</th>
<th scope="col">
Date
{% with url_attachments|add:"?"|add:sort_date_up as url_sort_date_up %}
{% bootstrap_button bs_icon_up button_class="btn btn-link ps-1 pe-0" button_type="link" href=url_sort_date_up %}
{% endwith %}
{% with url_attachments|add:"?"|add:sort_date_down as url_sort_date_down %}
{% bootstrap_button bs_icon_down button_class="btn btn-link px-0" button_type="link" href=url_sort_date_down %}
{% endwith %}
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for video in video_list %}
<tr>
<td>
<span class="small">{{ video.full_name }}</span>
</td>
<td>{{ video.created_at|date:"n/j/Y g:i A"|default:"N/A" }}</td>
<td>
<a href="{% url 'exp:study-response-video-download' pk=study.id video=video.pk %}?mode=download"
class="{% button_primary_classes %} btn-sm"> Download </a>
</td>
</tr>
{% empty %}
<tr>
<th scope="col">
Name
{% with url_attachments|add:"?"|add:sort_name_up as url_sort_name_up %}
{% bootstrap_button bs_icon_up button_class="btn btn-link ps-1 pe-0" button_type="link" href=url_sort_name_up %}
{% endwith %}
{% with url_attachments|add:"?"|add:sort_name_down as url_sort_name_down %}
{% bootstrap_button bs_icon_down button_class="btn btn-link px-0" button_type="link" href=url_sort_name_down %}
{% endwith %}
</th>
<th scope="col">
Date
{% with url_attachments|add:"?"|add:sort_date_up as url_sort_date_up %}
{% bootstrap_button bs_icon_up button_class="btn btn-link ps-1 pe-0" button_type="link" href=url_sort_date_up %}
{% endwith %}
{% with url_attachments|add:"?"|add:sort_date_down as url_sort_date_down %}
{% bootstrap_button bs_icon_down button_class="btn btn-link px-0" button_type="link" href=url_sort_date_down %}
{% endwith %}
</th>
<th scope="col"></th>
<td colspan="3">
<em>No videos available for download.</em>
</td>
</tr>
</thead>
<tbody>
{% for video in video_list %}
<tr>
<td>
<span class="small">{{ video.full_name }}</span>
</td>
<td>{{ video.created_at|date:"n/j/Y g:i A"|default:"N/A" }}</td>
<td>
<a href="{% url 'exp:study-response-video-download' pk=study.id video=video.pk %}?mode=download"
class="{% button_primary_classes %} btn-sm"> Download </a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3">
<em>No videos available for download.</em>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="text-end">{% include "studies/_paginator.html" with page=page_obj %}</div>
</div>
{% endfor %}
</tbody>
</table>
<div class="text-end">{% include "studies/_paginator.html" with page=page_obj %}</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion studies/templates/studies/study_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
defer
data-btn-primary-classes="{{ btn_primary_classes }}"
data-btn-secondary-classes="{{ btn_secondary_classes }}"></script>
<h1>{{ study.name }}</h1>
{% page_title study.name %}
<div class="row">
<div class="col-2">
{% include "studies/_image_display.html" with object=study large=1 %}
Expand Down
Loading

0 comments on commit fd89da6

Please sign in to comment.