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
commit
0d64f293bf
  1. 65
      static/css/styles.css
  2. 6
      templates/dashboard.html
  3. 60
      templates/partials/document_upload.html
  4. 31
      templates/partials/invoice_search.html

65
static/css/styles.css

@ -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;

6
templates/dashboard.html

@ -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>
@ -17,4 +15,4 @@
</div>
<!-- Add more dashboard items as needed -->
</div>
{{end}}
{{end}}

60
templates/partials/document_upload.html

@ -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}}

31
templates/partials/invoice_search.html

@ -1,21 +1,18 @@
{{define "invoice_search"}}
<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" />
<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" />
<div id="loading-indicator" class="htmx-indicator">
<span>Searching...</span>
<div class="loading-indicator"></div>
<div id="loading-indicator" class="htmx-indicator">
<span>Searching...</span>
<div class="loading-indicator"></div>
</div>
</div>
<br />
<div id="invoice-search-results" class="fade-me-out">
<!-- This is where the invoice details will be loaded -->
</div>
</div>
<br />
<div id="invoice-search-results" class="fade-me-out">
<!-- This is where the invoice details will be loaded -->
</div>
{{end}}
{{end}}
Loading…
Cancel
Save