Intis/django-htmx-presenatation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Swap content

Browse Source
This commit is contained in:
Eden Kirin
2024-04-06 16:46:24 +02:00
parent ae2612cfd6
commit f2dc83caab
9 changed files with 93 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
project/main/templates/main/base/base.html
View File

@ -8,7 +8,7 @@
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
<title>{{ title or "Django-html demo" }}</title>
</head>
<body>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
{% block body_content %}{% endblock %}
</body>
</html>

3
project/main/templates/main/components/nav.html
View File

@ -9,10 +9,11 @@
{% endmacro %}
<div class="list-group list-group-flush">
{{ render_item("Swap Content", "swap-content") }}
{{ render_item("Swap Content", "swap") }}
{{ render_item("Form Validation", "form-validation") }}
{{ render_item("Complex Form", "complex-form") }}
{{ render_item("Filter List", "filter-list") }}
{{ render_item("Table Inline Edit", "table-inline-edit") }}
{{ render_item("Back to Home", "home") }}
</div>
{% endmacro %}

2
project/main/templates/main/home.html
View File

@ -25,7 +25,7 @@
</ul>
<h4 class="mt-5">
<a href="{{ url("swap-content") }}">
<a href="{{ url("swap") }}">
Start demo
</a>
</h4>

24
project/main/templates/main/swap.html Normal file
View File

@ -0,0 +1,24 @@
{% extends "main/base/layout.html" %}
{% block content %}
{% macro render_btn(title, cls, content) %}
<button
type="button"
class="btn {{ cls }} mb-3"
hx-post="{{ url("swap") }}?content={{ content }}"
hx-target="#swap-content-target"
>
{{ title }}
</button>
{% endmacro %}
{{ render_btn(title="Initial", cls="btn-outline-secondary", content="initial") }}
{{ render_btn(title="Swap to content 1", cls="btn-info", content="info") }}
{{ render_btn(title="Swap to content 2", cls="btn-warning", content="warning") }}
{{ render_btn(title="Swap to content 3", cls="btn-danger", content="danger") }}
<div id="swap-content-target">
{% include("main/swap_content.html") %}
</div>
{% endblock %}

48
project/main/templates/main/swap_content.html
View File

@ -1,8 +1,42 @@
{% extends "main/base/layout.html" %}
{% block content %}
<p>
This is some swappable content bellow.
{% if content == "info" %}
<p class="alert alert-info">
Bacon ipsum dolor amet cow capicola pancetta picanha biltong brisket filet mignon
turducken beef ribs burgdoggen landjaeger meatball venison shank.
Capicola ham pork chop, biltong kielbasa pancetta short loin jowl cupim pig
jerky drumstick turducken burgdoggen beef. Spare ribs flank ribeye cow doner,
shank chuck bacon ham hock porchetta kielbasa tri-tip. Ham t-bone chislic,
capicola andouille ham hock frankfurter tri-tip sausage kevin landjaeger shank ribeye.
Swine tri-tip spare ribs, rump flank bresaola kevin tail. Meatball tail picanha cow,
frankfurter ribeye sirloin pork belly short loin pig. Filet mignon spare ribs pastrami,
tri-tip ball tip tongue fatback pork chop.
</p>
{% endblock %}
{% elif content == "warning" %}
<p class="alert alert-warning">
Beef ribs bacon sausage meatloaf pork belly kielbasa frankfurter ball tip
corned beef boudin. Ribeye turducken corned beef, ground round picanha doner
kielbasa fatback alcatra. Bresaola shankle ribeye meatloaf sirloin
alcatra short ribs chislic shank turkey brisket chicken. Andouille rump tongue,
landjaeger biltong brisket tail turkey leberkas jowl beef ribs corned beef.
Venison meatball pig short ribs, alcatra cow tenderloin. Leberkas fatback biltong,
pig rump doner short loin tongue filet mignon brisket tri-tip. Alcatra meatloaf biltong
drumstick capicola chislic chuck short ribs fatback ribeye turkey kevin.
</p>
{% elif content == "danger" %}
<p class="alert alert-danger">
Ham hock bacon short loin shank pork loin filet mignon kevin tongue. Chicken andouille
beef pork loin strip steak meatball jerky burgdoggen shoulder picanha. Pork belly tri-tip doner,
chicken frankfurter burgdoggen jerky t-bone. Chicken chuck hamburger tail shank burgdoggen.
Tenderloin biltong pork chop, sirloin leberkas pastrami salami jerky jowl tri-tip corned beef
ground round venison spare ribs chicken.
</p>
{% else %}
<p class="alert">
Bacon shankle cupim biltong, burgdoggen hamburger meatloaf frankfurter tenderloin
landjaeger jerky capicola. Leberkas shoulder tri-tip sausage andouille hamburger cow
prosciutto beef ribs drumstick chicken. Capicola hamburger pork landjaeger burgdoggen.
Cupim jerky shank tongue fatback ham corned beef leberkas turkey meatloaf rump pig
ball tip bacon. Ham hock buffalo doner, shankle landjaeger kielbasa chicken pork
loin jowl leberkas alcatra chuck prosciutto brisket andouille. Pancetta meatloaf
shankle burgdoggen.
</p>
{% endif %}