-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): sandwich main content with sidebar on narrow screens
- create a new template "base_page_with_side_cards.html" from which other templates can inherit with styling to send some sidebar cards above main page content and some below main page content on narrow windows - adjust flatpages, article pages and main_app templates to use this template - get rid of independent, media-aware main-content margins (these are now accounted for in the template)
- Loading branch information
Showing
13 changed files
with
2,356 additions
and
2,341 deletions.
There are no files selected for viewing
61 changes: 30 additions & 31 deletions
61
django/cantusdb_project/articles/templates/article_detail.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,39 @@ | ||
| {% extends "base.html" %} | ||
| {% extends "base_page_with_side_cards.html" %} | ||
| {% load helper_tags %} {# for recent_articles #} | ||
| {% block content %} | ||
| <div class="container"> | ||
| <title>{{ article.title }} | Cantus Database</title> | ||
| {% block title %} | ||
| <title>{{ article.title }} | Cantus Database</title> | ||
| {% endblock %} | ||
|
|
||
| {% block uppersidebar %} | ||
| <div class="search-bar mb-3"> | ||
| {% include "global_search_bar.html" %} | ||
| </div> | ||
| {% endblock %} | ||
|
|
||
| {% block maincontent %} | ||
| <h3> | ||
| {{ article.title }} | ||
| </h3> | ||
| <div class="row"> | ||
| <div class="p-3 col-lg-8 bg-white rounded main-content"> | ||
| <h3> | ||
| {{ article.title }} | ||
| </h3> | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <div class="container"> | ||
| <div class="container text-wrap"> | ||
| <small>Submitted by <a href="{% url 'user-detail' article.author.id %}">{{ article.author }}</a> on {{ article.date_created|date:"D, m/d/Y - H:i" }}</small> | ||
| <div style="padding-top: 1em;"> | ||
| {{ article.body.html|safe }} | ||
| </div> | ||
| </div> | ||
| <div class="col"> | ||
| <div class="container"> | ||
| <div class="container text-wrap"> | ||
| <small>Submitted by <a href="{% url 'user-detail' article.author.id %}">{{ article.author }}</a> on {{ article.date_created|date:"D, m/d/Y - H:i" }}</small> | ||
| <div style="padding-top: 1em;"> | ||
| {{ article.body.html|safe }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col p-0 sidebar"> | ||
| <div class="search-bar mb-3"> | ||
| {% include "global_search_bar.html" %} | ||
| </div> | ||
| <div class="card mt-3 w-100"> | ||
| <div class="card-header"> | ||
| What's New | ||
| </div> | ||
| <div class="card-body"> | ||
| {% recent_articles %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} | ||
| {% block lowersidebar %} | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| What's New | ||
| </div> | ||
| <div class="card-body"> | ||
| {% recent_articles %} | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| {% endblock %} |
70 changes: 33 additions & 37 deletions
70
django/cantusdb_project/articles/templates/article_list.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,39 @@ | ||
| {% extends "base.html" %} | ||
| {% load helper_tags %} {# for recent_articles #} | ||
| {% block content %} | ||
| <div class="container"> | ||
| <title>What's New | Cantus Database</title> | ||
| {% extends "base_page_with_side_cards.html" %} | ||
| {% load helper_tags %} {# for recent_articles #}\ | ||
| {% block title %} | ||
| <title>What's New | Cantus Database</title> | ||
| {% endblock %} | ||
| {% block uppersidebar %} | ||
| <div class="search-bar mb-3"> | ||
| {% include "global_search_bar.html" %} | ||
| </div> | ||
| {% endblock %} | ||
| {% block maincontent %} | ||
| <h3>What's New</h3> | ||
| {% for article in articles %} | ||
| <div class="row"> | ||
| <div class="p-3 col-lg-8 bg-white rounded main-content"> | ||
| <h3>What's New</h3> | ||
| {% for article in articles %} | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <small>{{ article.date_created|date:"D, m/d/Y - H:i" }}</small> | ||
| <h4> | ||
| <a href="{% url 'article-detail' article.id %}">{{ article.title }}</a> | ||
| </h4> | ||
| <div class="container"> | ||
| <small> | ||
| {{ article.body.html|safe|truncatechars_html:3000 }} | ||
| </small> | ||
| </div> | ||
| </div> | ||
| <div class="col"> | ||
| <small>{{ article.date_created|date:"D, m/d/Y - H:i" }}</small> | ||
| <h4> | ||
| <a href="{% url 'article-detail' article.id %}">{{ article.title }}</a> | ||
| </h4> | ||
| <div class="container"> | ||
| <small> | ||
| {{ article.body.html|safe|truncatechars_html:3000 }} | ||
| </small> | ||
| </div> | ||
| {% endfor %} | ||
| {% include "pagination.html" %} | ||
| <br> | ||
| </div> | ||
| <div class="col p-0 sidebar"> | ||
| <div class="search-bar mb-3"> | ||
| {% include "global_search_bar.html" %} | ||
| </div> | ||
|
|
||
| <div class="card mt-3 w-100"> | ||
| <div class="card-header"> | ||
| What's New | ||
| </div> | ||
| <div class="card-body"> | ||
| {% recent_articles %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| {% include "pagination.html" %} | ||
| {% endblock %} | ||
| {% block lowersidebar %} | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| What's New | ||
| </div> | ||
| <div class="card-body"> | ||
| {% recent_articles %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
Oops, something went wrong.