frontend: remove the nodejs stuff, I don't think I need it for such a simple project

This commit is contained in:
Lennart
2024-11-03 13:32:57 +01:00
parent bb0b055e50
commit 957a5d5f48
11 changed files with 4 additions and 889 deletions

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}RustiCal{% endblock %}</title>
<script src="/frontend/assets/htmx.org.js"></script>
<style>
* {
box-sizing: border-box;
}
</style>
{% block imports %}{% endblock %}
</head>
<body>
<div id="app" hx-boost="true">
{% block content %}<p>Placeholder</p>{% endblock %}
</div>
</body>
</html>

View File

@@ -0,0 +1,9 @@
{% extends "layouts/default.html" %}
{% block imports %}
{% endblock %}
{% block content %}
<h1>Test</h1>
<a href="/frontend/user/{{ calendar.principal }}">Back</a>
{% endblock %}

View File

@@ -0,0 +1,12 @@
{% extends "layouts/default.html" %}
{% block content %}
<h1>Login</h1>
<form action="login" method="post">
<label for="username">Username</label>
<input type="text" name="username" placeholder="username">
<label for="password">Password</label>
<input type="password" name="password" placeholder="password">
<button type="submit">Login</button>
</form>
{% endblock %}

View File

@@ -0,0 +1,50 @@
{% extends "layouts/default.html" %}
{% block imports %}
{% endblock %}
{% block content %}
<style>
li.calendar-list-item {
list-style: none;
display: grid;
margin: 12px;
min-height: 80px;
background: #EEE;
padding: 8px;
border-radius: 12px;
grid-template-areas:
"title color-chip"
"description color-chip";
grid-template-rows: auto auto;
grid-template-columns: auto 50px;
padding: 0;
a {
display: contents;
.color-chip {
background: var(--color);
grid-area: color-chip;
border-radius: 0 12px 12px 0;
}
}
}
</style>
<h2>Welcome {{ user_id }}!</h2>
<ul>
{% for calendar in calendars %}
{% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
<li class="calendar-list-item" style="--color: {{ color }}">
<a href="/frontend/user/{{ user_id }}/{{ calendar.id}}">
<span class="title">{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}</span>
<span class="description">
{% if let Some(description) = calendar.description %}{{ description }}{% endif %}
</span>
<div class="color-chip"></div>
</a>
</li>
{% endfor %}
</ul>
{% endblock %}