From 0f69c44cc31c0d0f161366a75ed793b7012a3210 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 25 Dec 2022 12:18:15 +0100 Subject: [PATCH] #3 CSS and HTML --- Pipfile | 3 +- .../django_web_galleries/settings.py | 1 + .../web_galleries/static/web-galleries.css | 74 +++++++++++++++++++ .../web_galleries/templates/global.html | 7 +- .../templates/list_images/image_list.html | 4 +- .../templates/partials/form_input.html | 16 ++++ .../templates/upload_image/upload.html | 12 ++- 7 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 django_web_galleries/web_galleries/static/web-galleries.css create mode 100644 django_web_galleries/web_galleries/templates/partials/form_input.html diff --git a/Pipfile b/Pipfile index 31c9bf3..e3458dd 100644 --- a/Pipfile +++ b/Pipfile @@ -7,8 +7,7 @@ name = "pypi" django = "*" django-responsive-images = "*" pillow = "*" - -[dev-packages] +django-widget-tweaks = "*" [requires] python_version = "3.8" diff --git a/django_web_galleries/django_web_galleries/settings.py b/django_web_galleries/django_web_galleries/settings.py index 212777d..66ec291 100644 --- 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', ] diff --git a/django_web_galleries/web_galleries/static/web-galleries.css b/django_web_galleries/web_galleries/static/web-galleries.css new file mode 100644 index 0000000..7381f51 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/django_web_galleries/web_galleries/templates/global.html b/django_web_galleries/web_galleries/templates/global.html index cf9376c..e96ef43 100644 --- a/django_web_galleries/web_galleries/templates/global.html +++ b/django_web_galleries/web_galleries/templates/global.html @@ -1,3 +1,5 @@ +{% load static %} + @@ -5,10 +7,11 @@ Web Gallery +
- +
- +
{% block content %} {% endblock content %} diff --git a/django_web_galleries/web_galleries/templates/list_images/image_list.html b/django_web_galleries/web_galleries/templates/list_images/image_list.html index 8df5b74..4227257 100644 --- 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 @@
  • {% for image in images %} - + + + {% endfor %}
    • diff --git a/django_web_galleries/web_galleries/templates/partials/form_input.html b/django_web_galleries/web_galleries/templates/partials/form_input.html new file mode 100644 index 0000000..6ac0406 --- /dev/null +++ b/django_web_galleries/web_galleries/templates/partials/form_input.html @@ -0,0 +1,16 @@ +{% load widget_tweaks %} + +
    + + {% render_field field class+='RV-Input__Field' %} + + + {% if field.errors %} + {% for error in field.errors%} + {{error}} + {% endfor %} + {% elif field.help_text%} + {{ field.help_text }} + {% endif %} + +
    \ No newline at end of file diff --git a/django_web_galleries/web_galleries/templates/upload_image/upload.html b/django_web_galleries/web_galleries/templates/upload_image/upload.html index 494a6ce..bdea07f 100644 --- 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 %}
    {% csrf_token %} - {{ form }} - +
    + {% 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' %} + +
    +
    + +
    {% endblock content %}