Skip to content

Template formatting #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Heliodex merged 24 commits into from
Sep 8, 2026
Merged

Template formatting #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
8ea637c
Format HTML templates with djLint
Heliodex Sep 8, 2026
c505e07
Fixes for leading spaces
Heliodex Sep 8, 2026
c84b28b
Add send_blocks helper for slack_bot
Heliodex Sep 8, 2026
e196cb2
Fix missing logger
Heliodex Sep 8, 2026
147fd62
Missing import fixes
Heliodex Sep 8, 2026
6d19ac2
More type ignore comments
Heliodex Sep 8, 2026
6fe9b1c
Add improved alt text to images
Heliodex Sep 8, 2026
e368052
Correct <html lang="en"> attributes
Heliodex Sep 8, 2026
9df5306
Fix broken cotton component closing tags
Heliodex Sep 8, 2026
0f39bbe
More alt tags and correct aria types
Heliodex Sep 8, 2026
85cef5e
Add empty 1px image instead of missing img src
Heliodex Sep 8, 2026
41bde61
Fix nested link and button tags
Heliodex Sep 8, 2026
1f913b4
Fix broken or duplicate or nonstandard Tailwind classes
Heliodex Sep 8, 2026
9278e34
More button tags and image alt attrs
Heliodex Sep 8, 2026
c766618
Improve checking and modifying (with JS) display: none; elements
Heliodex Sep 8, 2026
aa1ab31
More styling & class fixes, formatting
Heliodex Sep 8, 2026
6a6845b
Remove inline styles in favour of Tailwind classes
Heliodex Sep 8, 2026
56907b9
Reformat templates
Heliodex Sep 8, 2026
b395a03
Format template embedded JS
Heliodex Sep 8, 2026
4bd410a
Fix some !important Tailwind class syntax
Heliodex Sep 8, 2026
118e7f8
Fix JS formatting problems raised by Biome
Heliodex Sep 8, 2026
630ae52
More replacing string concatenation with template interpolation
Heliodex Sep 8, 2026
b65fe6a
Fix admin dash internal URL in href
Heliodex Sep 8, 2026
ef7d483
Remove self-closing endings from void tags
Heliodex Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions twisted/common/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
{% load tailwind_tags static %}
<html>
<head>
{% tailwind_css %}
{% block head %}{% endblock head %}
<link rel="icon" href="{% static 'favicon.png' %}" />
<title>Twisted</title>
</head>
<body class="font-vintage os">
{% block body %}
meow :3
{% endblock body %}
</body>
<script>
// Timezone settings
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; // e.g. "America/New_York"
document.cookie = "django_timezone=" + timezone;
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
{% tailwind_css %}
{% block head %}
{% endblock head %}
<link rel="icon" href="{% static 'favicon.png' %}">
<title>Twisted</title>
</head>
<body class="font-vintage os">
{% block body %}
meow :3
{% endblock body %}
</body>
<script>
// Timezone settings
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; // e.g. "America/New_York"
document.cookie = `django_timezone=${timezone}`;
</script>
</html>
2 changes: 1 addition & 1 deletion twisted/tailwindcsstheme/static_src/src/cotton-ui.sources.css
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions twisted/twisted_site/slack.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
from typing import Any

from django.conf import settings
from slack_sdk import WebClient

Expand All @@ -7,6 +9,18 @@
slack_bot = WebClient(token=SLACK_TOKEN)


def send_blocks(
*,
channel: str,
blocks: list[dict[str, Any]],
text: str = " ",
**kwargs: Any,
):
return slack_bot.chat_postMessage(
channel=channel, text=text, blocks=blocks, **kwargs
)


def log_to_channel(message):
if settings.DEBUG:
slack_bot.chat_postMessage(
Expand Down
11 changes: 7 additions & 4 deletions twisted/twisted_site/templates/admin/announcements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<c-base>
<c-ui.button variant="primary">Primary Button</c-ui.button>
<c-ui.button variant="default">Default Button</c-ui.button>

</c-base>
<c-ui.button variant="primary">
Primary Button
</c-ui.button>
<c-ui.button variant="default">
Default Button
</c-ui.button>
</c-base>
154 changes: 92 additions & 62 deletions twisted/twisted_site/templates/admin/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
<c-base>
<c-slot name="head">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</c-slot>
<c-ui.card class="bg-zinc-900 mb-4">
<h3 class="text-lg font-semibold mb-2">Welcome back, {{ user.profile.slack_username }}!</h3>
<p class="text-ink-400">
<c-ui.button onclick="alert('weh, you are looking at them right now >:(')">See statistics</c-ui.button>
<c-ui.button onclick="alert('weh, you are looking at them right now >:(')">
See statistics
</c-ui.button>
<a href="{% url 'admin.users' %}">
<c-ui.button>Manage Users</c-ui.button>
<c-ui.button>
Manage Users
</c-ui.button>
</a>
<c-ui.button>Edit Pathways</c-ui.button>
<c-ui.button>Fulfill orders</c-ui.button>
<c-ui.button>Edit shop</c-ui.button>
<c-ui.button>Review projects</c-ui.button>
<c-ui.button>Announce stuff</c-ui.button>
<c-ui.button>
Edit Pathways
</c-ui.button>
<c-ui.button>
Fulfill orders
</c-ui.button>
<c-ui.button>
Edit shop
</c-ui.button>
<c-ui.button>
Review projects
</c-ui.button>
<c-ui.button>
Announce stuff
</c-ui.button>
</p>
</c-ui.card>
<c-ui.tabs variant="segmented">
Expand All @@ -22,29 +36,32 @@ <h3 class="text-lg font-semibold mb-2">Welcome back, {{ user.profile.slack_usern
<div class="flex flex-col md:flex-row text-center md:text-left gap-4">
<div class="md:w-fit">
<div>
<div class="text-center">
Hours logged
</div>
<div class="text-center text-lg font-bold">
{{ hours_logged }}h
</div>
<div class="text-center">Hours logged</div>
<div class="text-center text-lg font-bold">{{ hours_logged }}h</div>
<div id="hours_logged_chart" class="mx-auto md:mx-0">
<div class="text-center py-4">
Loading chart...
</div>
<div class="text-center py-4">Loading chart...</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable({{ hours_logged_chart|safe }});

var options = {
vAxis: {minValue: 0},
animation: {duration: 250, startup: true},
backgroundColor: {fill: 'transparent'},
vAxis: {
minValue: 0
},
animation: {
duration: 250,
startup: true
},
backgroundColor: {
fill: 'transparent'
},
theme: "maximized",
width: 240,
height: 160
Expand All @@ -57,26 +74,31 @@ <h3 class="text-lg font-semibold mb-2">Welcome back, {{ user.profile.slack_usern
</div>
<div class="md:w-fit flex flex-row">
<div>
<div class="text-center">
Project type
</div>
<div class="text-center">Project type</div>
<div id="logged_project_type" class="mx-auto md:mx-0 mt-6">
<div class="text-center py-4">
Loading chart...
</div>
<div class="text-center py-4">Loading chart...</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable({{ logged_project_type|safe }});

var options = {
vAxis: {minValue: 0},
animation: {duration: 250, startup: true},
backgroundColor: {fill: 'transparent'},
vAxis: {
minValue: 0
},
animation: {
duration: 250,
startup: true
},
backgroundColor: {
fill: 'transparent'
},
theme: "maximized",
width: 240,
height: 160
Expand All @@ -94,60 +116,68 @@ <h3 class="text-lg font-semibold mb-2">Welcome back, {{ user.profile.slack_usern
<c-ui.card class="bg-zinc-900">
<div class="flex flex-col md:flex-row text-center md:text-left gap-4">
<div class="md:w-fit">
<div class="text-center">
Hours shipped
</div>
<div class="text-center text-lg font-bold">
{{ hours_shipped }}h
</div>
<div class="text-center">Hours shipped</div>
<div class="text-center text-lg font-bold">{{ hours_shipped }}h</div>
<div id="hours_shipped_chart" class="mx-auto md:mx-0">
<div class="text-center py-4">
Loading chart...
</div>
<div class="text-center py-4">Loading chart...</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable({{ hours_shipped_chart|safe }});

var options = {
vAxis: {minValue: 0},
animation: {duration: 250, startup: true},
backgroundColor: {fill: 'transparent'},
vAxis: {
minValue: 0
},
animation: {
duration: 250,
startup: true
},
backgroundColor: {
fill: 'transparent'
},
theme: "maximized",
width: 240,
height: 160
};

var chart = new google.visualization.AreaChart(document.getElementById('hours_shipped_chart'));
chart.draw(data, options);
}
</script>
</div>
<div class="md:w-fit flex flex-row">
<div>
<div class="text-center">
Project type
</div>
<div class="text-center">Project type</div>
<div id="shipped_project_type" class="mx-auto md:mx-0 mt-6">
<div class="text-center py-4">
Loading chart...
</div>
<div class="text-center py-4">Loading chart...</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable({{ shipped_project_type|safe }});

var options = {
vAxis: {minValue: 0},
animation: {duration: 250, startup: true},
backgroundColor: {fill: 'transparent'},
vAxis: {
minValue: 0
},
animation: {
duration: 250,
startup: true
},
backgroundColor: {
fill: 'transparent'
},
theme: "maximized",
width: 240,
height: 160
Expand All @@ -165,4 +195,4 @@ <h3 class="text-lg font-semibold mb-2">Welcome back, {{ user.profile.slack_usern
This is still WIP! (annoy @kavyansh. to fix if you see this after the YSWS has started!)
</c-ui.tabs.tab>
</c-ui.tabs>
</c-base>
</c-base>
Loading
Loading