feat(template): add header content icon block

!1
This commit is contained in:
2024-05-14 05:05:09 +09:30
parent 4582c955b8
commit 50cc050adf
6 changed files with 63 additions and 3 deletions

View File

@ -1,6 +1,7 @@
{% extends 'base.html.j2' %} {% extends 'base.html.j2' %}
{% block title %}Organizations{% endblock %} {% block title %}Organizations{% endblock %}
{% block content_header_icon %}{% endblock %}
{% block body%} {% block body%}

View File

@ -25,8 +25,29 @@ h2 {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
margin: 0px; margin: 0px;
vertical-align: middle;
align-content: center;
padding-right: 50px;
padding-left: 50px
} }
span#content_header_icon {
float: right;
width: 30px;
height: 100%;
margin-right: 10px;
text-align: center;
align-content: center;
color: #177ee6;
}
/* .icon {
display: block;
content: none;
background-color: #3e8e41;
} */
header { header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View File

@ -132,12 +132,14 @@ input[type=submit] {
/* Change background color of buttons on hover */ /* Change background color of buttons on hover */
.tab button:hover { .tab button:hover {
background-color: #ddd; /* background-color: #ddd; */
border-bottom: 3px solid #ccc;
} }
/* Create an active/current tablink class */ /* Create an active/current tablink class */
.tab button.active { .tab button.active {
background-color: #ccc; /* background-color: #ccc; */
border-bottom: 3px solid #177ee6;
} }
/* Style the tab content */ /* Style the tab content */

View File

@ -47,7 +47,7 @@
{% include 'navigation.html.j2' %} {% include 'navigation.html.j2' %}
</nav> </nav>
<section> <section>
<h2>{% block title %}Page Title{% endblock %}</h2> <h2>{% block title %}Page Title{% endblock %}{% block content_header_icon %}<span title="View History" id="content_header_icon">H</span>{% endblock %}</h2>
<article> <article>
{% block body%}{% endblock %} {% block body%}{% endblock %}
</article> </article>

View File

@ -0,0 +1,34 @@
---
title: Template
description: No Fuss Computings Django Template Jinja TEmplate
date: 2024-06-14
template: project.html
about: https://gitlab.com/nofusscomputing/infrastructure/configuration-management/django_app
---
### Template
The base template includes blocks that are designed to assist in rendering your content. The following blocks are available:
- `title` - The page and title
- `content_header_icon` - Header icon that is middle aligned with the page title, floating right.
- `body` - The html content of the page
``` html title="template.html.j2"
{% extends 'base.html.j2' %}
{% block title %}{% endblock %}
{% block content_header_icon %}<span title="View History" id="content_header_icon">H</span>{% endblock %}
{% block body %}
your content here
{% endblock %}
```

View File

@ -23,6 +23,8 @@ nav:
- projects/django-template/permissions.md - projects/django-template/permissions.md
- projects/django-template/template.md
- Operations: - Operations:
- operations/index.md - operations/index.md