From 7179d5c236a0be592ad852e6b9f3325739ef2955 Mon Sep 17 00:00:00 2001
From: Arun J <cb.en.u4cce19010@cb.students.amrita.edu>
Date: Sun, 27 Dec 2020 14:30:12 +0530
Subject: [PATCH] Improve(?) styles
---
bam/static/bookform.css | 75 +++++++++++++++++++++++-----------------
bam/static/dash.css | 8 +++++
bam/static/hometable.css | 5 +++
bam/templates/add.html | 41 +++++++++++++++-------
bam/templates/edit.html | 47 +++++++++++++++++--------
5 files changed, 117 insertions(+), 59 deletions(-)
diff --git a/bam/static/bookform.css b/bam/static/bookform.css
index 4b190c7..75703ad 100644
--- a/bam/static/bookform.css
+++ b/bam/static/bookform.css
@@ -1,5 +1,5 @@
.content {
- align-self: flex-start;
+ width: var(--content-width);
}
form {
@@ -8,63 +8,76 @@ form {
form {
display: flex;
- flex-direction: column;
+ flex-flow: row wrap;
min-width: min(90vw, 400px);
+ gap: var(--content-gap);
}
-form > label {
- padding-bottom: 5px;
+.field-group {
+ display: flex;
+ flex-direction: column;
}
-input {
+.field-group > label {
+ padding-bottom: 10px;
+ font-weight: 500;
+ font-size: var(--input-label-fsize);
+}
+.field-group > input {
font-family: Roboto;
- font-size: 16px;
- border-radius: 3px;
- padding: 12px;
- background-color: rgba(10, 10, 10, 0.5);
- border: 1px solid #111;
+ font-size: var(--input-box-fsize);
+ font-weight: 300;
+ padding: 12px 18px;
+ background-color: rgba(15, 15, 15, 0.5);
+ border: none;
+ border-bottom: 7px solid #111;
color: #eee;
- transition: background 0.3s;
+ width: min(550px, 90vw);
+ transition: all 0.3s;
}
-input:hover {
+.field-group > input:hover {
--hcolor: rgba(10, 10, 10, 0.7);
background-color: var(--hcolor);
- border: 1px solid var(--hcolor);
+ /* border: 1px solid var(--hcolor); */
+ border-bottom: 7px solid #070707;
}
-input:focus,
-input:active {
+.field-group > input:focus,
+.field-group > input:active {
background-color: rgba(30, 30, 30, 0.5);
- border: 1px solid grey;
+ border-bottom: 7px solid grey;
outline: none;
}
-label {
- text-transform: uppercase;
- font-weight: 700;
- font-size: 0.9rem;
- letter-spacing: 1px;
-}
-
.field-error {
font-style: oblique;
+ margin-top: calc(var(--content-gap) / 2);
color: var(--red);
- font-size: 0.9rem;
}
-[type="submit"] {
+.submit-div {
+ flex-basis: 100%;
+ display: flex;
+ gap: var(--content-gap);
+}
+
+[type="submit"],
+.back {
+ font-family: Roboto;
+ color: white;
+ font-size: 18px;
+ border-radius: 3px;
+ padding: 12px 25px;
+ width: auto;
background-color: var(--red);
border: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
+ transition: all 0.3s;
}
-[type="submit"]:hover {
+[type="submit"]:hover,
+.back:hover {
background-color: var(--dark-red);
cursor: pointer;
}
-
-label,
-[type="submit"] {
- margin-top: 10px;
-}
diff --git a/bam/static/dash.css b/bam/static/dash.css
index 11d3583..d47b5ce 100644
--- a/bam/static/dash.css
+++ b/bam/static/dash.css
@@ -15,6 +15,10 @@ body {
--nav-padding-side: 50px;
--logo-height: 60px;
--nav-gap: 20px;
+ --content-width: 80vw;
+ --content-gap: 20px;
+ --input-box-fsize: 3rem;
+ --input-label-fsize: 1.7rem;
}
@media screen and (max-width: 600px) {
@@ -22,6 +26,10 @@ body {
--nav-padding-top: 15px;
--nav-padding-side: 15px;
--logo-height: 50px;
+ --content-width: 100vw;
+ --content-gap: 10px;
+ --input-box-fsize: 1.8rem;
+ --input-label-fsize: 1.3rem;
}
.navbar {
flex-wrap: wrap;
diff --git a/bam/static/hometable.css b/bam/static/hometable.css
index f4d1421..7078a1a 100644
--- a/bam/static/hometable.css
+++ b/bam/static/hometable.css
@@ -10,6 +10,11 @@ table {
table a {
color: #ccc;
text-decoration: underline 1px dotted grey;
+ transition: all 0.3s ease;
+}
+
+table a:hover {
+ color: #fff;
}
thead tr {
diff --git a/bam/templates/add.html b/bam/templates/add.html
index 83ab79c..f6cf0ce 100644
--- a/bam/templates/add.html
+++ b/bam/templates/add.html
@@ -4,21 +4,36 @@
href="{{ url_for('static', filename='bookform.css') }}"
/>
{% endblock %} {% block content %}
+
+<h1>Add a book</h1>
<form class="addBookForm" action="" method="POST">
{{ form.hidden_tag() }}
- <h1>Add a Book</h1>
- {{ form.title.label() }} {{ form.title }} {% for error in form.title.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.author.label() }} {{ form.author }} {% for error in
- form.author.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.isbn.label() }} {{ form.isbn }} {% for error in
- form.isbn.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.price.label() }} {{ form.price }} {% for error in
- form.price.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.submit() }}
+
+ <div class="field-group">
+ {{ form.title.label() }} {{ form.title }} {% for error in form.title.errors
+ %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+
+ <div class="field-group">
+ {{ form.author.label() }} {{ form.author }} {% for error in
+ form.author.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="field-group">
+ {{ form.isbn.label() }} {{ form.isbn }} {% for error in form.isbn.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="field-group">
+ {{ form.price.label() }} {{ form.price }} {% for error in form.price.errors
+ %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="submit-div">{{ form.submit() }}</div>
</form>
{% endblock %}
diff --git a/bam/templates/edit.html b/bam/templates/edit.html
index cda55a4..648a33a 100644
--- a/bam/templates/edit.html
+++ b/bam/templates/edit.html
@@ -1,26 +1,43 @@
-{% extends "dash.html" %} {% set active_page = "add" %} {% block head %}
+{% extends "dash.html" %} {% set active_page = "edit" %} {% block head %}
<link
rel="stylesheet"
href="{{ url_for('static', filename='bookform.css') }}"
/>
{% endblock %} {% block content %}
+
+<h1>Edit {{ book.title|e }}</h1>
<form class="addBookForm" action="" method="POST">
{{ form.hidden_tag() }}
- <h1>Edit {{ book.title|e }}</h1>
- {{ form.title.label() }} {{ form.title(value=book.title) }} {% for error in
- form.title.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.author.label() }} {{ form.author(value=book.author) }} {%
- for error in form.author.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.isbn.label() }} {{ form.isbn(value=book.isbn) if
- book.isbn else form.isbn }} {% for error in form.isbn.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.price.label() }} {{ form.price(value=book.price) }} {%
- for error in form.price.errors %}
- <div class="field-error">{{ error }}</div>
- {% endfor %} {{ form.submit() }}
+ <div class="field-group">
+ {{ form.title.label() }} {{ form.title(value=book.title) }} {% for error in
+ form.title.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+
+ <div class="field-group">
+ {{ form.author.label() }} {{ form.author(value=book.author) }} {% for error
+ in form.author.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="field-group">
+ {{ form.isbn.label() }} {{ form.isbn(value=book.isbn) if book.isbn else
+ form.isbn }} {% for error in form.isbn.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="field-group">
+ {{ form.price.label() }} {{ form.price(value=book.price) }} {% for error in
+ form.price.errors %}
+ <div class="field-error">{{ error }}</div>
+ {% endfor %}
+ </div>
+ <div class="submit-div">
+ {{ form.submit() }}
+ <a href="{{ url_for('home') }}"><button class="back">Back</button></a>
+ </div>
</form>
{% endblock %}
--
GitLab