Skip to content

Commit

Permalink
Merge pull request #72 from ar4s/chore/djlint
Browse files Browse the repository at this point in the history 
chore: add djlint and reformat templates
  • Loading branch information
@nfoert
nfoert authored Oct 5, 2024
2 parents 7500868 + a4c49fc commit 31c4c31
Show file tree
Hide file tree
Showing 17 changed files with 532 additions and 373 deletions.
6 changes: 6 additions & 0 deletions .djlintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"max_line_length": "180",
"max_blank_lines": 1,
"profile": "django"
}

10 changes: 10 additions & 0 deletions .vscode/tasks.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@
"panel": "new"
},
"problemMatcher": []
},
{
"label": "Format Django templats with djlint",
"type": "shell",
"command": "source .venv/bin/activate && djlint cardie --reformat",
"presentation": {
"reveal": "always",
"panel": "new"
},
"problemMatcher": []
}
]
}
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,11 @@ Set the following global environment variables:
- `DATABASE_URL` -> `${db.DATABASE_URL}` (This works on DigitalOcean, this may not work on every hosting provider)

## Development
### djlint
This project uses `djlint` to lint the templates. You can run this using the following command
```bash
djlint cardie --reformat
```
### ruff
This project uses [`ruff`](https://docs.astral.sh/ruff/) to lint and format the code.
You can run the following command to lint and format the code.
Expand Down
94 changes: 61 additions & 33 deletions cardie/main/templates/authentication.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,85 @@
{% extends "base.html" %}

{% load static %}

{% block head_title %}Authentication{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static '/main/ui.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/main/notifications.css' %}">

<link rel="stylesheet" type="text/css" href="{% static '/main/authentication.css' %}">
<link rel="stylesheet"
type="text/css"
href="{% static '/main/notifications.css' %}">
<link rel="stylesheet"
type="text/css"
href="{% static '/main/authentication.css' %}">
{% endblock %}


{% block body %}
<div id="authentication-box" x-data="box_param_check()">
{% csrf_token %}

<img id="authentication-box-image" @click="window.location.href = server_ip" src="{% static '/main/images/logo_light.png' %}">

<div class="ui_status_critical" id="authentication-error" style="display: none;">
<img id="authentication-box-image"
@click="window.location.href = server_ip"
src="{% static '/main/images/logo_light.png' %}">
<div class="ui_status_critical"
id="authentication-error"
style="display: none">
<i class="ph-bold ph-warning-octagon ui_status_icon"></i>
<p class="ui_status_text">Critical status box</p>
</div>

<div id="signin-box" x-show="sign_in" x-transition:enter.delay.200ms>
<p class="ui_text_header"><i class="ph-bold ph-keyhole"></i> Sign In</p>
<p class="ui_text_header">
<i class="ph-bold ph-keyhole"></i> Sign In
</p>
<div class="ui_separator_horizontal"></div>

<input id="signin-username" type="text" class="ui_input_generic" placeholder="Username"></input>
<input id="signin-password" type="password" class="ui_input_generic" placeholder="Password"></input>

<button id="signin-signin" class="ui_button_large"><strong>Sign In</strong> <i class="ph-bold ph-sign-in"></i></button>
<button id="signin-createaccount" class="ui_button_small" @click="sign_in = !sign_in">Create an Account <i class="ph-bold ph-arrow-right"></i></button>
<input id="signin-username"
type="text"
class="ui_input_generic"
placeholder="Username">
<input id="signin-password"
type="password"
class="ui_input_generic"
placeholder="Password">
<button id="signin-signin" class="ui_button_large">
<strong>Sign In</strong> <i class="ph-bold ph-sign-in"></i>
</button>
<button id="signin-createaccount"
class="ui_button_small"
@click="sign_in = !sign_in">
Create an Account <i class="ph-bold ph-arrow-right"></i>
</button>
</div>

<div id="createaccount-box" x-show="!sign_in" x-transition:enter.delay.200ms>
<p class="ui_text_header"><i class="ph-bold ph-key"></i> Create Account</p>
<div id="createaccount-box"
x-show="!sign_in"
x-transition:enter.delay.200ms>
<p class="ui_text_header">
<i class="ph-bold ph-key"></i> Create Account
</p>
<div class="ui_separator_horizontal"></div>

<input id="createaccount-username" type="text" class="ui_input_generic" placeholder="Username"></input>
<input id="createaccount-password" type="password" class="ui_input_generic" placeholder="Password"></input>
<input id="createaccount-email" type="text" class="ui_input_generic" placeholder="Email"></input>

<button id="createaccount-createaccount" class="ui_button_large"><strong>Create Account</strong> <i class="ph-bold ph-user-plus"></i></button>
<button id="createaccount-signin" class="ui_button_small" @click="sign_in = !sign_in">Sign In <i class="ph-bold ph-arrow-right"></i></button>
<input id="createaccount-username"
type="text"
class="ui_input_generic"
placeholder="Username">
<input id="createaccount-password"
type="password"
class="ui_input_generic"
placeholder="Password">
<input id="createaccount-email"
type="text"
class="ui_input_generic"
placeholder="Email">
<button id="createaccount-createaccount" class="ui_button_large">
<strong>Create Account</strong> <i class="ph-bold ph-user-plus"></i>
</button>
<button id="createaccount-signin"
class="ui_button_small"
@click="sign_in = !sign_in">
Sign In <i class="ph-bold ph-arrow-right"></i>
</button>
</div>
<div id="authentication_privacypolicy"
@click="window.location.href = server_ip + '/privacy'">
<i class="ph-bold ph-lock"></i> Privacy Policy
</div>

<div id="authentication_privacypolicy" @click="window.location.href = server_ip + '/privacy'"><i class="ph-bold ph-lock"></i> Privacy Policy</div>
</div>

<div id="blob"></div>

{% endblock %}

{% block scripts %}
Expand All @@ -71,7 +100,6 @@
};
}
</script>

<script src="{% static '/main/scripts/authentication/authentication.js' %}"></script>
<script src="{% static '/main/scripts/global/notifications.js' %}"></script>
{% endblock %}
29 changes: 16 additions & 13 deletions cardie/main/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,37 @@
<!DOCTYPE html>
<html>
<head>
{% block head_scripts %}{% endblock head_scripts %}

{% block head_scripts %}
{% endblock head_scripts %}
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<link rel="stylesheet" type="text/css" href="{% static '/main/variables.css' %}">
<script defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="{% static '/main/variables.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/main/ui.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/main/footer.css' %}">
<link rel="stylesheet"
type="text/css"
href="{% static '/main/footer.css' %}">
{% block stylesheets %}{% endblock %}

<link rel="shortcut icon" type="image/png" href="{% static '/main/images/favicon_light.ico' %}"/>

<link rel="shortcut icon"
type="image/png"
href="{% static '/main/images/favicon_light.ico' %}" />
<meta name="darkreader-lock">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% url "config_js" %}"></script>
<title>Cardie | {% block head_title %}{% endblock %}</title>
<title>Cardie |
{% block head_title %}{% endblock %}
</title>
</head>

<body>
{% block body %}{% endblock %}
{% include "footer.html" %}

<script>
var server_ip = "{{ server.ip }}";
var production = "{{ server.production }}";
var username = "{{ username }}"
</script>

<script src="{% static '/main/scripts/global/favicon.js' %}"></script>
<script src="{% static '/main/scripts/global/logging.js' %}"></script>
{% block scripts %}{% endblock %}
Expand Down
25 changes: 9 additions & 16 deletions cardie/main/templates/card.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,32 @@
<div class="card_wrap">
<div class="card_card" card-align="left">

<div class="card_card_front">
<div class="card_content">
<div class="card_top">
<img class="card_top_profilepicture">

<div class="card_top_text">
<p class="card_top_text_username">username</p>
<p class="card_top_text_pronouns">pronouns</p>
</div>

</div>

<div class="card_items">

</div>
<div class="card_items"></div>
</div>
</div>

<div class="card_card_back">
<div class="card_content">
<p>Back of card</p>
</div>
</div>
</div>
</div>

<dialog id="dialog_card_menu" class="ui_dialog_generic" x-data="{ single: false }">
<dialog id="dialog_card_menu"
class="ui_dialog_generic"
x-data="{ single: false }">
<div class="ui_dialog_generic_top">
<p class="ui_text_subheader_left ui_dialog_generic_top_text">All Items</p>
<button class="ui_button_icon ui_dialog_generic_top_close"><i class="ph-bold ph-x-circle"></i></button>
</div>

<div id="dialog_card_menu_items">

<button class="ui_button_icon ui_dialog_generic_top_close">
<i class="ph-bold ph-x-circle"></i>
</button>
</div>
</dialog>
<div id="dialog_card_menu_items"></div>
</dialog>
38 changes: 19 additions & 19 deletions cardie/main/templates/card_view.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
{% extends "base.html" %}

{% load static %}

{% block head_title %}Card{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static '/main/card.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/main/notifications.css' %}">

<link rel="stylesheet" type="text/css" href="{% static '/main/card_view.css' %}">
<link rel="stylesheet"
type="text/css"
href="{% static '/main/notifications.css' %}">
<link rel="stylesheet"
type="text/css"
href="{% static '/main/card_view.css' %}">
{% endblock %}

{% block body %}
<div id="cardview">
<div id="cardview_top">
Expand All @@ -20,28 +19,29 @@
<p class="ui_text_body" id="cardview_text_username">Created by username</p>
</div>
</div>


<div id="cardview_card">
{% include "card.html" %}
</div>

<div id="cardview_card">{% include "card.html" %}</div>
<div id="cardview_bottom">
<div id="cardview_bottom_createaccount">
<p class="ui_text_body">Created with Cardie. You can <button id="cardview_signin" class="ui_button_small">Sign in</button> to save this card for later and to make your own.</p>
<p class="ui_text_body">
Created with Cardie. You can
<button id="cardview_signin" class="ui_button_small">Sign in</button>
to save this card for later and to make your own.
</p>
</div>

<div id="cardview_bottom_save">
<p class="ui_text_body"><strong>Hello {{ username }}</strong> <button id="cardview_save" class="ui_button_small">Save this card to your Wallet</button></p>
<p class="ui_text_body">
<strong>Hello {{ username }}</strong>
<button id="cardview_save" class="ui_button_small">Save this card to your Wallet</button>
</p>
</div>

<div id="cardview_bottom_owned">
<p class="ui_text_body"><i>This card is owned by you</i></p>
<p class="ui_text_body">
<i>This card is owned by you</i>
</p>
</div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static '/main/scripts/card_view/card_view.js' %}"></script>
<script src="{% static '/main/scripts/global/card.js' %}"></script>
Expand Down
38 changes: 21 additions & 17 deletions cardie/main/templates/dialogs/print.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
<dialog id="dialog_print" class="ui_dialog_generic" x-data="{ single: false }">
<dialog id="dialog_print"
class="ui_dialog_generic"
x-data="{ single: false }">
<div class="ui_dialog_generic_top">
<p class="ui_text_subheader_left ui_dialog_generic_top_text">Print Card</p>
<button class="ui_button_icon ui_dialog_generic_top_close"><i class="ph-bold ph-x-circle"></i></button>
<button class="ui_button_icon ui_dialog_generic_top_close">
<i class="ph-bold ph-x-circle"></i>
</button>
</div>

<button id="dialog_print_single"
class="ui_button_small"
@click="single = true"
x-bind:disabled="single">Print one sided</button>
<button id="dialog_print_double"
class="ui_button_small"
@click="single = false"
x-bind:disabled="!single">Print two sided</button>

<button id="dialog_print_single"
class="ui_button_small"
@click="single = true"
x-bind:disabled="single">Print one sided</button>
<button id="dialog_print_double"
class="ui_button_small"
@click="single = false"
x-bind:disabled="!single">Print two sided</button>
<div x-show="single" x-transition:enter.delay.200ms>
<p class="ui_text_body">Puts a total of 4 cards on one page, fronts and backs. After you print the page you can cut and glue the two halves together.</p>
</div>

<div x-show="!single" x-transition:enter.delay.200ms>
<p class="ui_text_body">A layout of 8 cards per two pages. Print them both and select double sided (and flip on the long edge) or print the first page, put the paper back in the printer and print the second page again.</p>
<p class="ui_text_body">
A layout of 8 cards per two pages. Print them both and select double sided (and flip on the long edge) or print the first page, put the paper back in the printer and print the second page again.
</p>
</div>

<button id="dialog_print_print" class="ui_button_large"><i class="ph-bold ph-printer"></i> Print</button>
</dialog>
<button id="dialog_print_print" class="ui_button_large">
<i class="ph-bold ph-printer"></i> Print
</button>
</dialog>
Loading

0 comments on commit 31c4c31

Please sign in to comment.