npatterson
/
servicetrade-toolbox-wmv
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity
Browse Source

added stub of document upload section and fixed some styling that didn't match between dark and light

cli-archive
nic 1 year ago
parent
7ec48af15d
commit
0d64f293bf
4 changed files with 140 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      static/css/styles.css
  2. 4
      templates/dashboard.html
  3. 60
      templates/partials/document_upload.html
  4. 13
      templates/partials/invoice_search.html

65
static/css/styles.css
View File

@ -106,7 +106,7 @@ html {
}
.content {
background-color: white;
background-color: #f9fafb;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@ -188,6 +188,50 @@ html {
/* similar to focus:shadow-outline */
}
/* Inline input group for horizontal layout */
.inline-input-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
/* Spacing between inputs */
}
.inline-input-group .input-group {
flex: 1;
/* Distribute space evenly */
min-width: 150px;
/* Minimum width for smaller screens */
}
.card-input {
width: 100%;
/* Adjust size as needed */
padding: 0.25rem 0.5rem;
/* Smaller padding */
border: 1px solid #cbd5e0;
/* Light border */
border-radius: 0.375rem;
/* Slightly rounded corners */
background-color: #ffffff;
/* White background */
color: #4a5568;
/* Text color matching theme */
font-size: 0.875rem;
/* Slightly smaller font size */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Subtle shadow */
transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.card-input:focus {
outline: none;
border-color: #4299e1;
/* Focused blue border */
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
/* Blue shadow */
}
/* Form Footer */
.form-footer {
display: flex;
@ -611,6 +655,7 @@ html {
.content {
background-color: #2e2e42;
/* Dark content background */
border: none;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@ -679,6 +724,24 @@ html {
/* Blue focus */
}
.card-input {
background-color: #2e2e42;
/* Dark background */
border: 1px solid #4b5563;
/* Darker border */
color: #e5e7eb;
/* Light text color */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
/* Stronger shadow */
}
.card-input:focus {
border-color: #4299e1;
/* Focused blue border */
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
/* Blue shadow */
}
/* Form Footer */
.form-footer {
display: flex;

4
templates/dashboard.html
View File

@ -4,12 +4,10 @@
<div class="dashboard-grid">
<div class="dashboard-item">
<h3>Invoices</h3>
{{template "invoice_search" .}}
</div>
<div class="dashboard-item">
<h3>Manage Jobs</h3>
<a href="/jobs" hx-get="/jobs" hx-target="#content">View Jobs</a>
{{template "document_upload" .}}
</div>
<div class="dashboard-item">
<h3>Manage Companies</h3>

60
templates/partials/document_upload.html
View File

@ -0,0 +1,60 @@
{{define "document_upload"}}
<h2>Document Uploads</h2>
<div class="content">
<h3 class="submenu-header">Filter Jobs</h3>
<form id="filter-form" class="submenu-grid" hx-post="/filter-jobs" hx-target="#job-results" hx-swap="innerHTML">
<!-- Inline Group: Job Name and Company -->
<div class="inline-input-group">
<div class="input-group">
<label for="job_name">Job Name</label>
<input id="job_name" name="job_name" class="card-input" type="text" placeholder="Enter Job Name">
</div>
<div class="input-group">
<label for="company">Company</label>
<input id="company" name="company" class="card-input" type="text" placeholder="Enter Company Name">
</div>
</div>
<!-- Inline Group: Status and Tags -->
<div class="inline-input-group">
<div class="input-group">
<label for="status">Status</label>
<select id="status" name="status" class="card-input">
<option value="">Select Status</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>
</div>
<div class="input-group">
<label for="tags">Tags</label>
<input id="tags" name="tags" class="card-input" type="text" placeholder="Enter Tags">
</div>
<div class="input-group">
<label for="schedule_from">Schedule From</label>
<input id="schedule_from" name="schedule_from" class="card-input" type="date">
</div>
<div class="input-group">
<label for="schedule_to">Schedule To</label>
<input id="schedule_to" name="schedule_to" class="card-input" type="date">
</div>
</div>
<!-- Inline Group: Date Range -->
<div class="inline-input-group">
</div>
<!-- Action Buttons -->
<div class="form-footer">
<button type="submit" class="btn-primary">Search</button>
<button type="reset" class="warning-button">Reset</button>
</div>
</form>
<!-- Results -->
<div id="job-results" class="submenu-container">
<!-- Search results will be dynamically loaded here -->
</div>
</div>
{{end}}

13
templates/partials/invoice_search.html
View File

@ -1,13 +1,9 @@
{{define "invoice_search"}}
<h2>Invoices</h2>
<div class="content">
<div id="search-container">
<input
type="text"
name="search"
placeholder="Enter invoice number or id"
hx-get="/invoices"
hx-trigger="keyup changed delay:500ms"
hx-target="#invoice-search-results"
hx-indicator="#loading-indicator" />
<input type="text" name="search" placeholder="Enter invoice number or id" hx-get="/invoices"
hx-trigger="keyup changed delay:500ms" hx-target="#invoice-search-results" hx-indicator="#loading-indicator" />
<div id="loading-indicator" class="htmx-indicator">
<span>Searching...</span>
@ -18,4 +14,5 @@
<div id="invoice-search-results" class="fade-me-out">
<!-- This is where the invoice details will be loaded -->
</div>
</div>
{{end}}
Write Preview
Loading…
Cancel
Save