#3 CSS and HTML

This commit is contained in:
2022-12-25 12:18:15 +01:00
parent ac26050a78
commit 0f69c44cc3
7 changed files with 110 additions and 7 deletions

View File

@@ -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 %}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 %}