From b6601e5bc4ed245bdb391ef88f5de1ca42ca3daf Mon Sep 17 00:00:00 2001
From: rubenwardy
Date: Fri, 18 May 2018 04:06:27 +0100
Subject: [PATCH] Improve form CSS
---
app/scss/components.scss | 63 ++++++++++++++++++----
app/templates/packages/create_edit.html | 36 ++++++-------
app/templates/users/user_profile_page.html | 34 ++++++------
3 files changed, 87 insertions(+), 46 deletions(-)
diff --git a/app/scss/components.scss b/app/scss/components.scss
index f23ba4a..4b9a227 100644
--- a/app/scss/components.scss
+++ b/app/scss/components.scss
@@ -25,16 +25,20 @@ a:hover {
padding: 0;
}
-.box h3 {
+.box h2, .box h3 {
margin: 0;
- padding: 1em 0.5em 0.5em 15px;
+ padding: 0.5em 0.5em 0.5em 15px;
border-bottom: 1px solid #444;
}
-.box p, .box table {
+.box > p, .box > table, .box > .buttonset, .box > form {
margin: 1em;
}
+// .box form {
+// padding: 1em;
+// }
+
.box_grey {
background: #333;
border: 1px solid #444;
@@ -62,6 +66,7 @@ a:hover {
background: #3a3a3a;
}
+
/*
buttonset
*/
@@ -77,19 +82,59 @@ a:hover {
margin: 15px 0;
}
-.button, .buttonset li a {
+.button, .buttonset li a, input[type=submit], input[type=text],
+ input[type=password], textarea, select {
text-align: center;
display: inline-block;
- padding: 0.5em 0.7em;
- background: #333;
- border: 1px solid #444;
+ padding: 0.4em 1em;
+ background: rgba(255,255,255,0.07);
+ border: 1px solid rgba(255,255,255,0.1);
color: #ddd;
border-radius: 5px;
text-decoration: none;
+ font-size: 100%;
}
-.button:hover, .buttonset li a:hover {
- background: #444;
+input[type=text], input[type=password], textarea, select {
+ text-align: left;
+}
+
+select {
+ min-width: 200px;
+}
+
+select:not([multiple]) {
+ background: linear-gradient(#444, #333);
+}
+
+.form-group {
+ padding: 8px 0;
+}
+
+.form-group label {
+ display: block;
+ vertical-align: top;
+ padding: 0 8px 8px 0;
+}
+
+.form-group input, .form-group textarea {
+ display: block;
+ min-width: 100%;
+ max-width: 100%;
+}
+
+.box .form-group input, .box .form-group textarea {
+ min-width: 95%;
+ max-width: 95%;
+}
+
+.form-group textarea {
+ min-height: 200px;
+}
+
+.button:hover, .buttonset li a:hover, input[type=submit]:hover {
+ background: rgba(255,255,255,0.13);
+ border: 1px solid rgba(255,255,255,0.17);
border: 1px solid #555;
text-decoration: none;
}
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 04ea617..1bd7ee6 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -8,32 +8,28 @@
{% endblock %}
{% block content %}
+ Create Package
+
{% from "macros/forms.html" import render_field, render_submit_field %}
-
{% if not package.title %}
diff --git a/app/templates/users/user_profile_page.html b/app/templates/users/user_profile_page.html
index 2d429f1..53afd57 100644
--- a/app/templates/users/user_profile_page.html
+++ b/app/templates/users/user_profile_page.html
@@ -57,34 +57,36 @@
{% endfor %}
{% if user == current_user or user.checkPerm(current_user, "CHANGE_AUTHOR") %}
-
+
Create
-
+
{% endif %}
{% if form %}
{% from "macros/forms.html" import render_field, render_submit_field %}
-