Modified styles for the app to look better

This commit is contained in:
Gregory Ballantine 2022-11-03 20:29:52 -04:00
parent 6751d832fd
commit 5f00cf0edd
5 changed files with 83 additions and 27 deletions

View File

@ -1,5 +1,7 @@
$primary-color: orange;
$primary-color: orangered;
$primary-color-highlight: darken($primary-color, 10%);
$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$nav-bar-height: 60px;
@ -8,6 +10,29 @@ body{
background: lightgrey;
}
a{
color: $primary-color;
transition: all 230ms ease-in-out;
&:hover{
color: $primary-color-highlight;
}
}
.button.button-primary,
button.button-primary,
input[type="button"].button-primary,
input[type="reset"].button-primary,
input[type="submit"].button-primary{
background-color: $primary-color;
color: white;
transition: all 230ms ease-in-out;
&:hover{
background-color: $primary-color-highlight;
}
}
.container.fluid{
max-width: 100%;
}
@ -19,7 +44,7 @@ body{
width: 100%;
height: $nav-bar-height;
background: #212121;
box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
box-shadow: $box-shadow-1;
color: white;
.nav-bar-left{
@ -36,26 +61,43 @@ body{
.site-logo,
.nav-link a{
padding: 9px 12px;
padding: 10px 12px;
font-size: 2.5rem;
text-decoration: none;
}
.site-logo{
padding-left: 35px;
font-weight: bold;
}
.nav-link a{
color: $primary-color;
transition: all 230ms ease-in-out;
&:hover{
color: $primary-color-highlight;
}
}
}
#main-content{
margin-top: 25px;
padding: 15px 25px;
padding: 20px 32px;
background: white;
box-shadow: $box-shadow-2;
}
#record-actions{
p{
margin-bottom: 0;
font-size: 2rem;
}
}
#item-header{
margin-bottom: 25px;
h1{
margin-bottom: 7px;
}
.item-added-date,
.item-updated-date{
margin-bottom: 5px;
color: #666;
font-size: 1.6rem;
font-style: italic;
}
}

View File

@ -11,22 +11,28 @@
</div>
</header>
<section class="row">
<section id="record-actions" class="row">
<div class="columns six">
<a href="/item/add">
<i class="fa-solid fa-plus"></i>
<p>Add Item</p>
<p><i class="fa-solid fa-plus"></i> Add Item</p>
</a>
</div>
<div class="columns six">
<a href="/item/search">
<i class="fa-solid fa-search"></i>
<p>Search</p>
<p><i class="fa-solid fa-search"></i> Search</p>
</a>
</div>
</section>
<hr>
<section class="row">
<div class="columns twelve">
<h3>Recently updated records:</h3>
</div>
</section>
<section class="row">
<table class="columns twelve">
<thead>

View File

@ -1,6 +1,6 @@
{% extends 'layout.twig' %}
{% block title %}Create Item{% endblock %}
{% block title %}Add New Item{% endblock %}
{% block content %}
@ -17,7 +17,7 @@
<div class="row">
<div class="columns twelve">
<label for="item_name">Item name:</label>
<input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name">
<input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
</div>
</div>
@ -65,7 +65,7 @@
</div>
</div>
<input class="button-primary" type="submit" value="Submit">
<input class="button-primary u-full-width" type="submit" value="Submit">
</form>
</div>
</section>

View File

@ -5,9 +5,11 @@
{% block content %}
<!-- page header -->
<header class="row">
<header id="item-header" class="row">
<div class="columns twelve">
<h1>{{ item.name }}</h1>
<h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
<h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
</div>
</header>
@ -16,18 +18,24 @@
<table class="columns twelve">
<thead>
<tr>
<th>Name</th>
<th>Product name</th>
<th>Serial number</th>
<th>SKU Number</th>
<th>Manufacturer</th>
<th>Type</th>
<th>Created date</th>
<th>Seller</th>
<th>Purchase date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ item.name }}</td>
<td>{{ item.manufacturer }}</td>
<td>{{ item.serialNumber ? item.serialNumber : 'N/a' }}</td>
<td>{{ item.skuNumber ? item.skuNumber : 'N/a' }}</td>
<td>{{ item.manufacturer ? item.manufacturer : 'N/a' }}</td>
<td>{{ item.type }}</td>
<td>{{ item.createdAt | date("m/d/Y h:i:s A") }}</td>
<td>{{ item.purchasedFrom ? item.purchasedFrom : 'N/a' }}</td>
<td>{{ item.purchasedAt | date("m/d/Y h:i:s A") }}</td>
</tr>
</tbody>
</table>

View File

@ -25,7 +25,7 @@
</nav>
<!-- main content -->
<div id="main-content" class="container">
<div id="main-content" class="container fluid">
{% block content %}{% endblock %}
</div>
</body>