Skip to content

Templates

AMY uses Django templating system and Django templating engine.

Templates in AMY are kept in amy/templates/ directory, conveniently grouped by application in subdirectories (comments - from extcomments, communityroles, consents, dashboard, forms - from extforms, fiscal, recruitment, reports, requests - from extrequests, trainings, workshops). There are also directories not related to internal AMY applications:

  • account - contains templates related to login/logout/password reset pages,
  • bootstrap4 - contains templates and/or includes for widgets used by Django Crispy Forms,
  • certificates - contains Typst templates (and their SVG backgrounds) used to generate certificate PDFs,
  • includes - contains a bunch of reusable "components" - Django HTML templates,
  • mailing - contains templates used to generate emails automatically sent when users submit external forms,
  • markdown - contains the template for MarkdownTextarea widget (Markdown editor with live preview rendered via HTMX).

Usually, unsless the template is an includable, one template corresponds to one view, that's why they are grouped in per-application directories.

The rest of the files stored directly in amy/templates/ directory are base templates. Here's a description of them, which almost all the other templates inherit from.

Base templates

All templates use fluid container from Bootstrap 4.

There are multiple types of views in AMY:

  • wide (e.g. 'Dashboard') -- base_nav.html,
  • wide with sidebar (e.g. 'All Events') -- base_nav_sidebar.html,
  • wide with two content columns (e.g. WorkshopRequest accept view) -- base_nav_twocolumn.html.

These templates all inherit from base.html, which holds the HTML structure, includes CSS styles and JS code, displays messages, footer, etc.

The base_nav.html is nothing more but base.html extended with a navigation. Navigation changes depending on user - one navigation bar (navigation.html) exists for admin users, a different one (navigation_instructor_dashboard.html) exists for instructors/trainees. A correct navigation bar is being included in base_nav.html and every instructor-enabled template (e.g. Auto Update Profile form, Upcoming Teaching Opportunities page, etc.).

There are also these templates available at the top-level template directory:

  • base_forms.html - base template for external forms (workshop request, workshop inquiry request, self-organised submission and training request),
  • generic_form.html - a default form used by AMYCreateView and AMYUpdateView (base views for creating and updating entities),
  • generic_form_with_comments.html - the same as generic_form.html, but additionally contains a section with comments provided by extcomments application,
  • pagination.html - displays a neat button groups split with "..." to not show too much pages at once.

Blocks available in base template

Django template blocks used in base.html template:

  • extrastyle in <head>, when you need to load some additional CSS files or embed styles right into the page,
  • extrajs on bottom of <body>, for loading additional JavaScript files / codes,
  • navbar used in templates that include a navigation bar,
  • main with all the main content in case someone really needs to change it,
  • leftcolumn for adding a sidebar or a column (used in base_nav_sidebar.html),
  • maincolumn for changing main content column grid,
  • logo used in views that display AMY logo (login page, log out page, password reset, etc.) - see account in Templates,
  • title to display <h1> tag with page title,
  • content for displaying page content.

Widgets

There are multiple reusable components available in amy/templates/includes directory:

  • assigned_to.html - displays whom has the entity (event, workshop request, workshop inquiry request, self-organised submission) been assigned to; displays a form to change the assignee,
  • assignment_modal.html - displays a modal "window" on the page; this window is used to select person assigned to specified entity (event, workshop request, workshop inquiry request, self-organised submission),
  • assignment.html - displays a dropdown to change filtering events assigned to specific person (user, unassigned, or no filtering),
  • attendance_email_href.html - renders a mailto: link with provided list of emails as recipients and predefined text in email body; used in event details view and in workshop issues report,
  • comments.html - displays comments and form for adding comments for a given entity,
  • country_flag.html - renders county name with this country's flag,
  • curriculum.html - displays curriculum as a Boostrap badge,
  • event_details_table.html - displays a table with event details,
  • event_import_update_from_url.html - modal for importing event details from a given URL address,
  • instructor_profile_snapshot.html - as name suggests, this is a snapshot of person's instructor profile used in Instructor Selection project, on instructor dashboard,
  • instructor_role_badge.html - small component displaying information about active or inactive instructor badge on for a person,
  • instructor_selection_summary.html - a summary of instructor selection for a given event; this is displayed in event's jumbo header,
  • instructorrecruitment.html - a representation of single InstructorRecruitment model instance,
  • last_modified.html - used by last_modified template tag to display audit log information (when entity was created, when it was last modified),
  • logo.html - AMY logo, used by user-facing external forms,
  • merge_radio.html - used to display HTML radio element in Person/Event merge views,
  • request_host_person.html - used to display person from the database matching the person requesting a workshop,
  • request_institution.html - used to display organisation from the database matching the institution of person requesting a workshop,
  • requests_bottom_action_btns.html - displays a group of buttons for accepting, discarding, etc. workshop requests, workshop inquiry requests, and self-organised submissions,
  • selforganisedsubmission_details.html - displays a table with self-organised submission details,
  • tag.html - displays a Boostrap badge of a tag,
  • teaching_opportunity.html - displays details of instructor recruitment instance used in Instructor Selection project, on instructor dashboard,
  • template_response.html - provides a dropdown with templates used for automatic reply to a workshop request,
  • tracker.html - contains Matomo tracker JavaScript code,
  • training_progresses_inline.html - displays person's progress in training with various training requirements,
  • trainingrequest_details.html - displays a table with training request details,
  • workshopinquiry_details.html - displays a table with workshop inquiry request details,
  • workshoprequest_details.html - displays a table with workshop request details.