UI Fixes & ReadMe

README.md

@@ -1 +1,74 @@
-# splashcat
+<h1 align='center'>
+<img src="https://raw.githubusercontent.com/splashcat-ink/splashcat/refs/heads/main/static/images/judd-pride.png" width="150">
+<br>
+<b>Splashcat</b>
+</h1>
+
+[Splashcat](http://splashcat.ink "Splashcat") is an award-winning service to track Splatoon 3 battles. Built upon Django, HTMX, _hyperscript, and Tailwind.CSS.
+
+## How to contribute
+Thank you for taking the time to contribute to Splashcat! We appreciate your help. There are multiple ways you can help:
+- [Getting Started](#getting-started)
+- [Contributing to the codebase](#contributing-to-the-codebase)
+- [Reporting bugs](#reporting-bugs)
+- [Donating](https://github.com/sponsors/catgirlinspace)
+
+## Getting Started
+Required Dependencies: [Python](https://www.python.org/downloads/ "Python"), [Poetry](http://python-poetry.org/docs "Poetry") & [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm "NPM")
+1. Fork the repository
+2. Clone the repo:
+    ```bash
+    git clone https://github.com/your-username/splashcat.git
+    ```
+3.  cd into the directory:
+    ```bash
+    cd *file path*
+    ```
+4. Install dependencies:
+    ```bash
+	poetry install
+	npm install
+	npx update-browserslist-db@latest
+	npm run build
+    ```
+5. Run the website:
+   <br>
+   macOS/Linux:
+	```bash
+	poetry shell
+	./manage.py runserver
+	```
+   Windows:
+	```bash
+	poetry shell
+	python manage.py runserver
+	```
+
+## Contributing to the codebase
+1. **Create a branch** for your feature or fix:
+    ```bash
+    git checkout -b myfeature
+    ```
+2. **Commit your changes**:
+    ```bash
+    git commit -m "Description of the change"
+    ```
+3. **Push** to the branch:
+    ```bash
+    git push origin myfeature
+    ```
+4. **Submit a pull request**.
+
+## Reporting Bugs
+If you've found a bug in Splashcat please [report it! ](https://github.com/splashcat-ink/splashcat/issues/new "report it! ")
+If it's a security vulnerability please contact [email protected] or use GitHub's tools for reporting security issues. Do **not** use a public GitHub issue.
+
+## Donating
+Sponsoring me will support Splashcat and its server costs. Getting $5+ monthly tier also gives you some little additional features in Splashcat! For more details, see [here](https://splashcat.ink/sponsor/ "here") and to donate click [here](https://github.com/sponsors/catgirlinspace "here")!
+
+## Contact
+Want to get in touch with us you can join the Discord server [here!](https://discord.gg/JPFwvbSWMS "here!") 
+
+## License
+Splashcat is licensed under the terms of the [AGPL-3.0 license ](https://github.com/splashcat-ink/splashcat/blob/main/LICENSE "AGPL-3.0 license ")
+

groups/templates/groups/admin/create.html

@@ -33,7 +33,7 @@ <h1 class="text-3xl font-splatoon1 mb-2">
 
                 <div>
                     {{ form.privacy_level.errors }}
-                    <label class="text-xl" for="{{ form.privacy_level.id_for_label }}">Privacy Level</label>
+                    <label class="text-xl pt-2" for="{{ form.privacy_level.id_for_label }}">Privacy Level</label>
                     {{ form.privacy_level }}
                 </div>
 

groups/templates/groups/admin/index.html

@@ -33,7 +33,7 @@ <h1 class="text-3xl font-splatoon1 mb-2">
 
                 <div>
                     {{ form.privacy_level.errors }}
-                    <label class="text-xl" for="{{ form.privacy_level.id_for_label }}">Privacy Level</label>
+                    <label class="text-xl pt-2" for="{{ form.privacy_level.id_for_label }}">Privacy Level</label>
                     {{ form.privacy_level }}
                 </div>
 

groups/templates/groups/index.html

@@ -10,13 +10,13 @@ <h1 class="font-splatoon1 text-3xl py-1">{% block title %}
     </p>
 
     <div class="py-4">
-        <a href="{% url 'groups:create_group' %}" class="bg-purple-700 hover:bg-purple-800 p-2 rounded">
+        <a href="{% url 'groups:create_group' %}" class="bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
             Create Group
         </a>
     </div>
 
     {% if member_groups|length > 0 %}
-        <h2 class="font-splatoon1 text-2xl py-1">Joined Groups</h2>
+        <h2 class="font-splatoon1 text-2xl py-2">Joined Groups</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {% for group in member_groups %}
                 {% include "groups/includes/card.html" with group=group %}
@@ -25,7 +25,7 @@ <h2 class="font-splatoon1 text-2xl py-1">Joined Groups</h2>
     {% endif %}
 
     {% if random_public_groups|length > 0 %}
-        <h2 class="font-splatoon1 text-2xl py-1">Discover</h2>
+        <h2 class="font-splatoon1 text-2xl py-2">Discover</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {% for group in random_public_groups %}
                 {% include "groups/includes/card.html" with group=group %}

groups/templates/groups/view.html

@@ -9,10 +9,10 @@ <h1 class="font-splatoon1 text-3xl pb-2">
     </h1>
     <div class="flex flex-row gap-4">
         {% if user.is_staff %}
-            <a href="{% url 'admin:groups_group_change' group.id %}" class="bg-red-700 p-2 rounded w-fit">Admin</a>
+            <a href="{% url 'admin:groups_group_change' group.id %}" class="bg-red-700 py-2 px-3 rounded w-fit">Admin</a>
         {% endif %}
         {% if group.owner == user %}
-            <a href="{% url 'groups:group_admin' group.id %}" class="bg-purple-700 p-2 rounded w-fit">Manage Group</a>
+            <a href="{% url 'groups:group_admin' group.id %}" class="bg-purple-700 py-2 px-3 rounded w-fit">Manage Group</a>
         {% endif %}
         {% if is_group_member and group.owner != user %}
             <a hx-post="{% url 'groups:leave_group' group.id %}"
@@ -39,15 +39,15 @@ <h2 class="font-splatoon1 text-xl">Owner</h2>
     {% include "users/includes/user-link.html" with user=group.owner show_splashtag=True %}
 
     {% if group.members.count > 0 %}
-        <h2 class="font-splatoon1 text-xl">Members</h2>
+        <h2 class="font-splatoon1 text-xl pt-2">Members</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             {% for member in group.members.all %}
                 {% include "users/includes/user-link.html" with user=member show_splashtag=True %}
             {% endfor %}
         </div>
     {% endif %}
 
-    <h2 class="font-splatoon1 text-xl">Statistics</h2>
+    <h2 class="font-splatoon1 text-xl pt-2">Statistics</h2>
     <div class="flex flex-row flex-wrap divide-x-2 divide-gray-500 gap-y-2">
         <div class="px-4">
             <div class="text-lg">Victories</div>
@@ -63,7 +63,7 @@ <h2 class="font-splatoon1 text-xl">Statistics</h2>
         </div>
     </div>
 
-    <h2 class="font-splatoon1 text-xl">Recent Battles</h2>
+    <h2 class="font-splatoon1 text-xl pt-2">Recent Battles</h2>
     {% if group_recent_battles|length == 0 %}
         <div class="flex flex-col gap-2 items-center">
             <div class="text-2xl font-splatoon1">No battles</div>

templates/base.html

@@ -3,7 +3,7 @@
 {% load django_htmx %}
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}{% endblock %} | Splashcat</title>
@@ -67,51 +67,54 @@
     {% block opengraph_head %}
     {% endblock %}
 </head>
-<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-{% csrf_token %}
-<header>
-    {% include 'includes/navbar.html' %}
-</header>
+<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="h-full flex flex-col">
+    {% csrf_token %}
+    <header>
+        {% include 'includes/navbar.html' %}
+    </header>
 
-<div class="container">
-    {% if messages %}
-        <div class="flex flex-col gap-2 py-2">
-            {% for message in messages %}
-                <div class="p-2 bg-purple-800 rounded
-                        {% if message.tags %}{{ message.tags }}{% endif %}">{{ message }}</div>
-            {% endfor %}
-        </div>
-    {% endif %}
+    <div class="container flex-grow"> <!-- Add flex-grow here -->
+        {% if messages %}
+            <div class="flex flex-col gap-2 py-2">
+                {% for message in messages %}
+                    <div class="p-2 bg-purple-800 rounded
+                            {% if message.tags %}{{ message.tags }}{% endif %}">{{ message }}</div>
+                {% endfor %}
+            </div>
+        {% endif %}
 
-    <main role="main" class="py-3">
-        {% block content %}{% endblock %}
-    </main>
-</div>
+        <main role="main" class="py-3 flex-grow"> <!-- Add flex-grow here -->
+            {% block content %}{% endblock %}
+        </main>
+    </div>
 
-<footer class="border-top footer text-muted bg-gray-800/70 py-4">
-    <div class="container">
-        <img src="{% static 'images/judd-pride.png' %}?height=192" alt="Judd with a LGBTQ and transgender pride flag"
-             class="float-right h-32 w-auto" height="2048" width="2048" loading="lazy">
-        <div class="text-lg">Splashcat</div>
-        <div class="text-sm">This website is not affiliated with Nintendo. All product names, logos, and brands are
-            property of their respective owners.
-        </div>
-        <a href="{% url 'uploaders_information' %}" class="text-blue-500 underline p-2 pl-0">Information on Available
-            Uploaders</a>
-        <a href="{% url 'legal' %}" class="text-blue-500 underline p-2">Legal Stuff</a>
-        <a href="{% url 'about' %}" class="text-blue-500 underline p-2">About Splashcat</a>
-        <div class="py-4 flex flex-row flex-wrap gap-4">
-            <a href="https://github.com/splashcat-ink/splashcat"
-               class="my-auto">
-                <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/splashcat-ink/splashcat"
-                     loading="lazy" decoding="async">
+    <footer class="border-top footer text-muted bg-gray-800/70 py-4">
+        <div class="container mx-auto">
+            <a href="{% url 'home' %}">
+                <img src="{% static 'images/judd-pride.png' %}?height=192" alt="Judd with a LGBTQ and transgender pride flag"
+                    class="float-right h-32 w-auto" height="2048" width="2048" loading="lazy">
             </a>
-            <a href="https://github.com/splashcat-ink/splashcat"
-               class="bg-purple-600 hover:bg-purple-700 rounded p-4 my-auto">GitHub</a>
-            <a href="https://discord.gg/JPFwvbSWMS"
-               class="bg-purple-600 hover:bg-purple-700 rounded p-4 my-auto">Discord</a>
+            <div class="text-lg">Splashcat</div>
+            <div class="text-sm">This website is not affiliated with Nintendo. All product names, logos, and brands are
+                property of their respective owners.
+            </div>
+            <a href="{% url 'uploaders_information' %}" class="text-blue-500 underline p-2 pl-0">Information on Available
+                Uploaders</a>
+            <a href="{% url 'legal' %}" class="text-blue-500 underline p-2">Legal Stuff</a>
+            <a href="{% url 'about' %}" class="text-blue-500 underline p-2">About Splashcat</a>
+            <div class="py-4 flex flex-row flex-wrap gap-4">
+                <a href="https://github.com/splashcat-ink/splashcat"
+                class="my-auto">
+                    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/splashcat-ink/splashcat"
+                        loading="lazy" decoding="async">
+                </a>
+                <a href="https://github.com/splashcat-ink/splashcat"
+                class="bg-purple-600 hover:bg-purple-700 rounded px-4 py-2 my-auto">GitHub</a>
+                <a href="https://discord.gg/JPFwvbSWMS"
+                class="bg-purple-600 hover:bg-purple-700 rounded px-4 py-2 my-auto">Discord</a>
+            </div>
         </div>
-    </div>
-</footer>
+    </footer>
 </body>
+
 </html>

templates/splashcat/home.html

@@ -93,9 +93,9 @@ <h2 class="text-2xl font-splatoon1">Recent Battles</h2>
         {% endfor %}
     </div>
 
-    <h2 class="text-2xl font-splatoon1">Data</h2>
+    <h2 class="text-2xl font-splatoon1 pt-2">Data</h2>
     <div class="flex flex-row gap-4">
-        <a href="{% url 'battles:global_data_export' %}" class="p-4 rounded bg-pink-700 hover:bg-pink-800">Global Battle
+        <a href="{% url 'battles:global_data_export' %}" class="py-2 px-3 rounded bg-pink-700 hover:bg-pink-800">Global Battle
             Data</a>
     </div>
 {% endblock %}