CSS määrityksiä + responsiivisuus.

Teemu-Kostamo · Apr 21, 2024 · 7ce55d4 · 7ce55d4
1 parent 32b4ecd
commit 7ce55d4
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 62 deletions.
diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/base.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/base.html
@@ -1,43 +1,49 @@
-<!doctype html>
-<htlm>
+<!DOCTYPE html>
+<html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <script src="https://cdn.tailwindcss.com"></script>
         <title>{%block title %} {%endblock%} | Lainatehdas</title>
-        </head>
+    </head>
 
-        <body>
-            <nav class="py-6 px-6 flex justify-between items-center border-b border-gray-300">
-            {% if request.user.is_authenticated %}
-                {% if request.path == '/main/' %}  
-                    <a href="{% url 'lainatehdas:reservations'%}" class="px-6 py-3 text-lg font-semibold bg-green-500 text-white rounded-xl hover:bg-green-700">Omat varaukset</a>
-                {% else %} 
-                    <a href="{% url 'lainatehdas:main'%}" class="px-6 py-3 text-lg font-semibold bg-green-500 text-white rounded-xl hover:bg-green-700">Välineet</a>
+<body>
+    {% block header%}
+    <nav class="py-10 px-6 relative border-b border-gray-300 bg-gray-700 text-center">
+        <div class="text-3xl font-semibold text-white">Lainatehdas</div>
+        <div class="text-2xl font-semibold text-white">Tervetuloa {{ request.user.username|capfirst }}!</div>
+    </nav>
+    {% endblock%}
+    <nav class="py-6 px-6 flex justify-between items-center border-b border-gray-300 bg-gray-400">
+        {% if request.user.is_authenticated %}
+            {% if request.path == '/main/' %}  
+                <a href="{% url 'lainatehdas:reservations'%}" class="px-6 py-3 text-lg font-semibold bg-green-500 text-white rounded-xl hover:bg-green-700">Omat varaukset</a>
+            {% else %} 
+                <a href="{% url 'lainatehdas:main'%}" class="px-6 py-3 text-lg font-semibold bg-green-500 text-white rounded-xl hover:bg-green-700">Välineet</a>
 
-                {% endif %}
-            <a href="/" class="text-xl font-semibold">Tervetuloa {{request.user.username|capfirst}}!</a>
+            {% endif %}
+            <form id="logout-form" action="{% url 'lainatehdas:logout' %}" method="post">
+                {% csrf_token %}
+                <button type="submit" class="px-6 py-3 text-lg font-semibold bg-red-500 text-white rounded-xl hover:bg-blue-700">Kirjaudu ulos</button>
+            </form>
+        {% else  %}
+            <a href="/" class="text-xl font-semibold text-white">Tervetuloa!</a>
             <div class="space-x-6">
-                <form id="logout-form" action="{% url 'lainatehdas:logout' %}" method="post">
-                    {% csrf_token %}
-                    {% comment %} <p>{{request.user.username}}</p> Tää on vain placeholder/testaus {% endcomment %} 
-                    <button type="submit" class="px-6 py-3 text-lg font-semibold bg-red-500 text-white rounded-xl hover:bg-blue-700">Kirjaudu ulos</button>
-                </form>
-                {% else  %}
-                <a href="/" class="text-xl font-semibold">Tervetuloa lainatehtaalle!</a>
-                <div class="space-x-6">
-                <a href="{% url 'lainatehdas:login'%}" class="px-6 py-3 text-lg font-semibold bg-blue-500 text-white rounded-xl hover:bg-blue-700">Kirjaudu</a>
-                <a href="{% url 'lainatehdas:register'%}" class="px-6 py-3 text-lg font-semibold bg-blue-500 text-white rounded-xl hover:bg-blue-700">Luo tili</a>
+                {% if request.path == '/login/' %}
+                    <a href="{% url 'lainatehdas:register'%}" class="px-6 py-3 text-lg font-semibold bg-blue-500 text-white rounded-xl hover:bg-blue-700">Luo tili</a>
+                {% else %}
+                    <a href="{% url 'lainatehdas:login'%}" class="px-6 py-3 text-lg font-semibold bg-blue-500 text-white rounded-xl hover:bg-blue-700">Kirjaudu</a>
                 {% endif %}
-                </nav>
-            <div class="px-6 py-6">
-              {%block content%}
-              {% endblock %}
-            </div>
-            <footer class="py-7 px-7 flex justify-between bg-gray-700">
-                <div class="w-1/3 pr-7">
-                    <h3 class="mb-5 font-semibold text-white">Lainatehtailijat</h3>
-                </div>
-                </footer>
-            </body>
-            </html>
+        {% endif %}
+    </nav>
+    <div class="px-6 py-6">
+        {%block content%}
+        {% endblock %}
+    </div>
+    <footer class="py-7 px-7 flex justify-between bg-gray-700">
+        <div class="w-1/3 pr-7">
+            <h3 class="mb-5 font-semibold text-white">Lainatehtailijat</h3>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/detail.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/detail.html
@@ -1,5 +1,13 @@
 {% extends "lainatehdas/base.html" %}
 {% load static %}
+
+{% block header %}
+<nav class="py-10 px-6 relative border-b border-gray-300 bg-gray-700 text-center">
+    <div class="text-3xl font-semibold text-white">Lainatehdas</div>
+    <br>
+</nav>
+{% endblock header %}
+
 {% block content %}
     <div class="container mx-auto px-4 py-8">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
@@ -15,7 +23,7 @@ <h2 class="text-3xl font-bold text-gray-900 mb-4">{{ item.item_name }}</h2>
                     {% if item.item_avail == "Va" %}
                         <form method="POST" action="{% url 'lainatehdas:create_new_reservation' item.id %}">
                             {% csrf_token %}
-                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Varaa</button>
+                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md ">Varaa</button>
                         </form>
                     {% elif item.item_avail == "Vr" %}
                         {% for reservation in reservation_list %}

diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/login.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/login.html
@@ -2,8 +2,14 @@
 
 {% block title %}Kirjaudu{% endblock %}
 
+{% block header%}
+<nav class="py-10 px-6 relative border-b border-gray-300 bg-gray-700 text-center">
+    <div class="text-3xl font-semibold text-white">Lainatehdas</div>
+</nav>
+{% endblock%}
+
 {% block content %}
-<div class="w-1/2 my-6 mx-auto p-5 bg-gray-200 rounded-xl">
+<div class="w-full md:w-1/2 my-6 mx-auto p-5 bg-gray-200 rounded-xl">
     <h1 class="mb-6 text-2xl">Kirjaudu sisään</h1>
 
     <form method="POST" action=".">
@@ -21,16 +27,11 @@ <h1 class="mb-6 text-2xl">Kirjaudu sisään</h1>
             <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                 {% for field in form %}
                     {{ field.errors }}
-
-                    {% endfor %}
-
+                {% endfor %}
                 {{form.non_field_errors }}
-
-
             </div>
-
         {% endif %}
-<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">Kirjaudu</button>
-    </form>"
-    </div>
-{% endblock %}
+        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">Kirjaudu</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/main.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/main.html
@@ -2,7 +2,6 @@
 {% load static %}
 
 {% block title %}Välineet{% endblock %}
-
 {% block content %}
 <div class="container mx-auto px-4 py-8">
     <h1 class="text-3xl font-bold mb-8">Välineet</h1>
@@ -14,7 +13,7 @@ <h1 class="text-3xl font-bold mb-8">Välineet</h1>
     {% if items_list %}
     <ul id="itemList" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
         {% for item in items_list %}
-        <li class="bg-gray-200 rounded-lg shadow-md">
+        <li class="bg-gray-200 rounded-lg hover:shadow-lg transition-transform transform hover:-translate-y-2">
             <a href="{% url 'lainatehdas:detail' item.id %}" class="block p-4">
                 <h2 class="text-xl font-bold text-gray-900 mb-2">{{ item.item_name|capfirst }}</h2>
                 <div class="aspect-w-4 aspect-h-5 mb-4">
@@ -24,7 +23,7 @@ <h2 class="text-xl font-bold text-gray-900 mb-2">{{ item.item_name|capfirst }}</
                     {% if item.item_avail == "Va" %}
                     <form method="POST" action="{% url 'lainatehdas:create_new_reservation' item.id %}">
                         {% csrf_token %}
-                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Varaa</button>
+                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md ">Varaa</button>
                     </form>
                     {% elif item.item_avail == "Vr" %}
                     {% for reservation in reservation_list %}

diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/register.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/register.html
@@ -2,6 +2,12 @@
 
 {% block title %}Luo tili{% endblock %}
 
+{% block header%}
+<nav class="py-10 px-6 relative border-b border-gray-300 bg-gray-700 text-center">
+    <div class="text-3xl font-semibold text-white">Lainatehdas</div>
+</nav>
+{% endblock%}
+
 {% block content %}
 <div class="w-1/2 my-6 mx-auto p-5 bg-gray-200 rounded-xl">
     <h1 class="mb-6 text-2xl">Luo tili</h1>
@@ -38,6 +44,6 @@ <h1 class="mb-6 text-2xl">Luo tili</h1>
 
         {% endif %}
 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">Luo tili</button>
-    </form>"
+    </form>
     </div>
 {% endblock %}
diff --git a/lainatehtailijat/lainatehdas/templates/lainatehdas/reservations.html b/lainatehtailijat/lainatehdas/templates/lainatehdas/reservations.html
@@ -3,6 +3,12 @@
 
 {% block title %}Omat varaukset{% endblock %}
 
+{% block header %}
+<nav class="py-10 px-6 relative border-b border-gray-300 bg-gray-700 text-center">
+    <div class="text-3xl font-semibold text-white">Lainatehdas</div>
+</nav>
+{% endblock header %}
+
 {% block content %}
 <h1 class="text-3xl font-bold mb-4">Omat varaukset</h1>
 

diff --git a/lainatehtailijat/lainatehtailijat/settings.py b/lainatehtailijat/lainatehtailijat/settings.py
@@ -30,7 +30,7 @@
 LOGOUT_REDIRECT_URL = '/'
 LOGIN_URL='/login'
 
-ALLOWED_HOSTS = ["192.168.8.10", "lainatehdas.duckdns.org"]
+ALLOWED_HOSTS = ["127.0.0.1","192.168.8.10", "lainatehdas.duckdns.org"]
 CSRF_TRUSTED_ORIGINS = ["https://lainatehdas.duckdns.org"]
 
 
@@ -81,18 +81,18 @@
 # https://docs.djangoproject.com/en/5.0/ref/settings/#databases
 
 DATABASES = {
-    # 'default': {
-    #     'ENGINE': 'django.db.backends.sqlite3',
-    #     'NAME': BASE_DIR / 'db.sqlite3',
-    # }
-    "default": {
-        "ENGINE": "django.db.backends.mysql",
-        "NAME": "LAINATEHDAS_DATABASE",
-        "USER": "LAINATEHDAS_USER",
-        "PASSWORD": "970577417AbCd!",
-        "HOST": "192.168.8.10",
-        "PORT": "3307",
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
     }
+    # "default": {
+    #     "ENGINE": "django.db.backends.mysql",
+    #     "NAME": "LAINATEHDAS_DATABASE",
+    #     "USER": "LAINATEHDAS_USER",
+    #     "PASSWORD": "970577417AbCd!",
+    #     "HOST": "192.168.8.10",
+    #     "PORT": "3307",
+    # }
 }