#3 CSS and HTML
This commit is contained in:
parent
ac26050a78
commit
0f69c44cc3
3
Pipfile
3
Pipfile
|
|
@ -7,8 +7,7 @@ name = "pypi"
|
||||||
django = "*"
|
django = "*"
|
||||||
django-responsive-images = "*"
|
django-responsive-images = "*"
|
||||||
pillow = "*"
|
pillow = "*"
|
||||||
|
django-widget-tweaks = "*"
|
||||||
[dev-packages]
|
|
||||||
|
|
||||||
[requires]
|
[requires]
|
||||||
python_version = "3.8"
|
python_version = "3.8"
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@ INSTALLED_APPS = [
|
||||||
'django.contrib.messages',
|
'django.contrib.messages',
|
||||||
'django.contrib.staticfiles',
|
'django.contrib.staticfiles',
|
||||||
'responsive_images',
|
'responsive_images',
|
||||||
|
'widget_tweaks',
|
||||||
'web_galleries',
|
'web_galleries',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% load static %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -5,10 +7,11 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Web Gallery</title>
|
<title>Web Gallery</title>
|
||||||
|
<link rel="stylesheet" href="{% static 'web-galleries.css' %}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="RV-Page">
|
<div class="RV-Page">
|
||||||
<head class="RV-Head">
|
<header class="RV-Header">
|
||||||
<nav class="RV-Navigation">
|
<nav class="RV-Navigation">
|
||||||
<ul class="RV-Navigation__list">
|
<ul class="RV-Navigation__list">
|
||||||
<li class="RV-Navigation__item">
|
<li class="RV-Navigation__item">
|
||||||
|
|
@ -33,7 +36,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</head>
|
</header>
|
||||||
<main class="RV-Content">
|
<main class="RV-Content">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@
|
||||||
<sectoin class="RV-Images">
|
<sectoin class="RV-Images">
|
||||||
<li class="RV-Images__list">
|
<li class="RV-Images__list">
|
||||||
{% for image in images %}
|
{% 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 %}
|
{% endfor %}
|
||||||
</li>
|
</li>
|
||||||
</sectoin>
|
</sectoin>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -3,7 +3,15 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<form method="POST" enctype="multipart/form-data">
|
<form method="POST" enctype="multipart/form-data">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ form }}
|
<div class="RV-Fieldset">
|
||||||
<button type="submit">Upload</button>
|
{% 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>
|
</form>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue