#3 CSS and HTML

Merge branch 'feature/image-upload' into develop
Squashed commit of the following:
2022-12-25 12:18:15 +01:00 · 2022-12-25 12:15:57 +01:00 · 2022-12-18 09:24:55 +01:00
7 changed files with 110 additions and 7 deletions
--- a/3
+++ b/3
@@ -7,8 +7,7 @@ name = "pypi"
 django = "*"
 django-responsive-images = "*"
 pillow = "*"
-
-[dev-packages]
+django-widget-tweaks = "*"

 [requires]
 python_version = "3.8"
--- a/django_web_galleries/django_web_galleries/settings.py
+++ b/django_web_galleries/django_web_galleries/settings.py
@@ -38,6 +38,7 @@ INSTALLED_APPS = [
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'responsive_images',
+    'widget_tweaks',
    'web_galleries',
 ]

--- a/django_web_galleries/web_galleries/static/web-galleries.css
+++ b/django_web_galleries/web_galleries/static/web-galleries.css
@@ -0,0 +1,74 @@
+.RV-Header {
+    height: 80px;
+    margin-bottom: 70px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    border-bottom: 1px solid gray;
+}
+
+.RV-Navigation__list {
+    display: flex;
+    flex-direction: row;
+
+    list-style-type: none;
+    gap: 1em;
+
+    font-size: 22px;
+}
+
+.RV-Navigation__link {
+    text-decoration: none;
+    display: inline-block;
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Navigation__link:hover {
+    transform: scale(1.2);
+}
+
+.RV-Images__list {
+    list-style-type: none;
+    display: grid;
+    gap: 22px;
+
+    grid-template-columns: repeat(auto-fit, 200px);
+}
+
+.RV-Image__link {
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Image__link:hover {
+    transform: scale(1.1);
+}
+
+.RV-Fieldset {
+    margin: 50px 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.RV-Input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.RV-Input--compact {
+    flex-direction: row;
+}
+
+.RV-Input.RV-Input--reverse {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+}
+
+.RV-Input--compact.RV-Input--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
--- a/django_web_galleries/web_galleries/templates/global.html
+++ b/django_web_galleries/web_galleries/templates/global.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,10 +7,11 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Gallery</title>
+    <link rel="stylesheet" href="{% static 'web-galleries.css' %}">
 </head>
 <body>
    <div class="RV-Page">
-        <head class="RV-Head">
+        <header class="RV-Header">
            <nav class="RV-Navigation">
                <ul class="RV-Navigation__list">
                    <li class="RV-Navigation__item">
@@ -33,7 +36,7 @@
                    </li>
                </ul>
            </nav>
-        </head>
+        </header>
        <main class="RV-Content">
            {% block content %}
            {% endblock content %}
--- a/django_web_galleries/web_galleries/templates/list_images/image_list.html
+++ b/django_web_galleries/web_galleries/templates/list_images/image_list.html
@@ -6,7 +6,9 @@
    <sectoin class="RV-Images">
        <li class="RV-Images__list">
            {% for image in images %}
-                <img src="{% src image.image_file 200x200 %}">
+                <a href="#" class="RV-Image__link RV-Image__link--detail">
+                    <img class="RV-Image__source" src="{% src image.image_file 200x200 %}">
+                </a>
            {% endfor %}
        </li>
    </sectoin>
--- a/django_web_galleries/web_galleries/templates/partials/form_input.html
+++ b/django_web_galleries/web_galleries/templates/partials/form_input.html
@@ -0,0 +1,16 @@
+{% load widget_tweaks %}
+
+<div class="RV-Input {% if classes%}{{classes}}{% endif %} {% if field.errors %} RV-Input--error {% endif %}">
+    <label for="{{field.id_for_label}}" class="RV-Input__Label">{{field.label}}</label>
+    {% render_field field class+='RV-Input__Field' %}
+
+    <span class="RV-Input__Message">
+        {% if field.errors %}
+        {% for error in field.errors%}
+        {{error}}
+        {% endfor %}
+        {% elif field.help_text%}
+        {{ field.help_text }}
+        {% endif %}
+    </span>
+</div>
--- a/django_web_galleries/web_galleries/templates/upload_image/upload.html
+++ b/django_web_galleries/web_galleries/templates/upload_image/upload.html
@@ -3,7 +3,15 @@
 {% block content %}
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
-        {{ form }}
-        <button type="submit">Upload</button>
+        <div class="RV-Fieldset">
+            {% include 'partials/form_input.html' with field=form.title %}
+            {% include 'partials/form_input.html' with field=form.image_file %}
+            {% include 'partials/form_input.html' with field=form.description %}
+            {% include 'partials/form_input.html' with field=form.private classes='RV-Input--compact RV-Input--reverse' %}
+
+        </div>
+        <div class="RV-Fieldset">
+            <button type="submit">Upload</button>
+        </div>
    </form>
 {% endblock content %}