Style touchups

Create utility classes for buttons and form fields
De-emphasise page heading
Hide header and footer in print layout
This commit is contained in:
RunasSudo 2024-04-04 21:02:29 +11:00
parent c3f0f3022b
commit b9f02d13d7
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
19 changed files with 101 additions and 83 deletions

View File

@ -19,18 +19,18 @@
{% block title %}CGT adjustments{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
CGT adjustments
</h1>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('cgt_adjustment_new') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<a href="{{ url_for('cgt_adjustment_new') }}" class="btn-primary pl-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
New CGT adjustment
</a>
<a href="{{ url_for('cgt_adjustment_multinew') }}" class="inline-flex items-center gap-x-1.5 pl-2 pr-3 py-1 text-emerald-700 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50">
<a href="{{ url_for('cgt_adjustment_multinew') }}" class="btn-secondary pl-2 text-emerald-700 ring-emerald-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>

View File

@ -20,7 +20,7 @@
{% block content %}
<div class="max-w-lg mx-auto px-4">
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
{{ 'Edit' if adjustment else 'New' }} CGT adjustment
</h1>
@ -30,38 +30,38 @@
<label for="acquisition_date" class="block text-gray-900 pr-4">Acquisition date</label>
<div>
<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="acquisition_date" id="acquisition_date" value="{{ adjustment.acquisition_date.strftime('%Y-%m-%d') if adjustment else request.args.get('acquisition_date', '') }}">
<input type="date" class="bordered-field" name="acquisition_date" id="acquisition_date" value="{{ adjustment.acquisition_date.strftime('%Y-%m-%d') if adjustment else request.args.get('acquisition_date', '') }}">
</div>
<label for="account" class="block text-gray-900 pr-4">Account</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ adjustment.account if adjustment else request.args.get('account', '') }}">
<input type="text" class="bordered-field" name="account" id="account" value="{{ adjustment.account if adjustment else request.args.get('account', '') }}">
</div>
<label for="asset" class="block text-gray-900 pr-4">Asset</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="asset" id="asset" value="{{ adjustment.asset().quantity_string() if adjustment else request.args.get('asset', '') }}">
<input type="text" class="bordered-field" name="asset" id="asset" value="{{ adjustment.asset().quantity_string() if adjustment else request.args.get('asset', '') }}">
</div>
<h2 class="col-span-2 text-xl text-gray-900 font-semibold pt-4">CGT adjustment</h2>
<label for="dt" class="block text-gray-900 pr-4">Adjustment date</label>
<div>
<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ adjustment.dt.strftime('%Y-%m-%d') if adjustment else '' }}">
<input type="date" class="bordered-field" name="dt" id="dt" value="{{ adjustment.dt.strftime('%Y-%m-%d') if adjustment else '' }}">
</div>
<label for="description" class="block text-gray-900 pr-4">Description</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ adjustment.description if adjustment else '' }}">
<input type="text" class="bordered-field" name="description" id="description" value="{{ adjustment.description if adjustment else '' }}">
</div>
<label for="cost_adjustment" class="block text-gray-900 pr-4">Cost adjustment</label>
<div class="relative shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ adjustment.cost_adjustment_amount().quantity_string() if adjustment else '' }}" placeholder="0.00">
<input type="number" class="bordered-field pl-7" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ adjustment.cost_adjustment_amount().quantity_string() if adjustment else '' }}" placeholder="0.00">
</div>
</div>
<div class="text-end">
<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
<button type="submit" class="btn-primary">Save</button>
</div>
</form>
</div>

View File

@ -20,7 +20,7 @@
{% block content %}
<div class="max-w-lg mx-auto px-4">
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
Multiple CGT adjustments
</h1>
@ -30,11 +30,11 @@
<label for="account" class="block text-gray-900 pr-4">Account</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ account or '' }}">
<input type="text" class="bordered-field" name="account" id="account" value="{{ account or '' }}">
</div>
<label for="commodity" class="block text-gray-900 pr-4">Commodity</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="commodity" id="commodity" value="{{ commodity or '' }}">
<input type="text" class="bordered-field" name="commodity" id="commodity" value="{{ commodity or '' }}">
</div>
<div class="rounded-md bg-blue-50 p-4 col-span-2">
@ -54,23 +54,23 @@
<label for="dt" class="block text-gray-900 pr-4">Adjustment date</label>
<div>
<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ dt or '' }}">
<input type="date" class="bordered-field" name="dt" id="dt" value="{{ dt or '' }}">
</div>
<label for="description" class="block text-gray-900 pr-4">Description</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ description or '' }}">
<input type="text" class="bordered-field" name="description" id="description" value="{{ description or '' }}">
</div>
<label for="cost_adjustment" class="block text-gray-900 pr-4">Total cost adjustment</label>
<div class="relative shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ cost_adjustment or '' }}" placeholder="0.00">
<input type="number" class="bordered-field pl-7" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ cost_adjustment or '' }}" placeholder="0.00">
</div>
</div>
<div class="text-end">
<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
<button type="submit" class="btn-primary">Save</button>
</div>
</form>
</div>

View File

@ -19,7 +19,7 @@
{% block title %}CGT assets{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
CGT assets
</h1>

View File

@ -1,3 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.bordered-field {
@apply block w-full border-0 py-1 text-gray-900 placeholder:text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600;
}
.btn-primary {
@apply inline-flex items-center gap-x-1.5 bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700;
}
.btn-secondary {
@apply inline-flex items-center gap-x-1.5 px-3 py-1 text-gray-800 shadow-sm ring-1 ring-inset ring-gray-400 hover:bg-gray-50;
}
.checkbox-primary {
@apply h-4 w-4 border-gray-300 text-emerald-600 shadow-sm focus:ring-emerald-600 -mt-0.5;
}
.page-heading {
@apply text-xl sm:text-base font-medium text-gray-700 print:text-xl print:text-gray-900;
}
}

View File

@ -28,9 +28,9 @@
{% block body %}
<div class="min-h-full">
{# Navigation bar #}
<nav class="border-b border-gray-200 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-12 justify-between">
<nav class="border-b border-gray-200 bg-white print:hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="flex h-12 justify-between ml-[-0.25rem]"> {# Adjust margin by -0.25rem to align navbar text with body text #}
<div class="flex">
<div class="flex flex-shrink-0">
<a href="{{ url_for('index') }}" class="border-transparent text-gray-900 hover:border-emerald-500 hover:text-emerald-700 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium">
@ -57,14 +57,14 @@
<div class="py-8">
<main>
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
{% block content %}{% endblock %}
</div>
</main>
</div>
{% if config['DEBUG'] %}
<footer>
<footer class="print:hidden">
<div class="mt-6 mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<div class="border-t border-gray-200 py-4 text-center text-sm text-gray-500 sm:text-left">
Queries executed in {{ dbtime() }} msec. Page generated in __EXECUTION_TIME__ msec.

View File

@ -19,14 +19,14 @@
{% block title %}Chart of accounts{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Chart of accounts
</h1>
<form method="POST">
<div class="my-2 py-2 flex gap-x-2 items-baseline bg-white sticky top-0">
<div>
<select class="mt-2 block w-full border-0 py-1 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600" name="kind">
<select class="mt-2 bordered-field pl-3 pr-10" name="kind">
{% for plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %}
<optgroup label="{{ plugin_name }}">
{% for account_kind in plugin_account_kinds %}
@ -37,7 +37,7 @@
</select>
</div>
<div>
<button formaction="{{ url_for('account_add_kind') }}" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700" type="submit">Add type</button>
<button formaction="{{ url_for('account_add_kind') }}" class="btn-primary" type="submit">Add type</button>
</div>
</div>
@ -52,7 +52,7 @@
<tbody>
{% for account in accounts %}
<tr class="border-t border-gray-300">
<td class="py-0.5 text-gray-900 align-baseline"><input class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600 -mt-0.5" type="checkbox" name="sel-account" value="{{ account }}"></td>
<td class="py-0.5 text-gray-900 align-baseline"><input class="checkbox-primary" type="checkbox" name="sel-account" value="{{ account }}"></td>
<td class="py-0.5 text-gray-900 align-baseline">{{ account }}</td>
<td class="py-0.5 text-gray-900 align-baseline">
{% if account in account_configurations %}

View File

@ -19,17 +19,17 @@
{% block title %}General ledger{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
General ledger
</h1>
<div class="my-4 flex">
{% if commodity_detail %}
<a href="{{ url_for('general_ledger') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('general_ledger') }}" class="btn-secondary">
Hide commodity detail
</a>
{% else %}
<a href="{{ url_for('general_ledger', commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('general_ledger', commodity_detail=1) }}" class="btn-secondary">
Show commodity detail
</a>
{% endif %}

View File

@ -19,12 +19,12 @@
{% block title %}Balance assertions{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Balance assertions
</h1>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('balance_assertions_new') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<a href="{{ url_for('balance_assertions_new') }}" class="btn-primary pl-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>

View File

@ -20,7 +20,7 @@
{% block content %}
<div class="max-w-lg mx-auto px-4">
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
{{ 'Edit' if assertion else 'New' }} balance assertion
</h1>
@ -28,15 +28,15 @@
<div class="grid grid-cols-[max-content_1fr] space-y-2 mb-4 items-baseline">
<label for="dt" class="block text-gray-900 pr-4">Date</label>
<div>
<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ assertion.dt.strftime('%Y-%m-%d') if assertion else '' }}">
<input type="date" class="bordered-field" name="dt" id="dt" value="{{ assertion.dt.strftime('%Y-%m-%d') if assertion else '' }}">
</div>
<label for="description" class="block text-gray-900 pr-4">Description</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ assertion.description if assertion else '' }}">
<input type="text" class="bordered-field" name="description" id="description" value="{{ assertion.description if assertion else '' }}">
</div>
<label for="account" class="block text-gray-900 pr-4">Account</label>
<div>
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ assertion.account if assertion else '' }}">
<input type="text" class="bordered-field" name="account" id="account" value="{{ assertion.account if assertion else '' }}">
</div>
<label for="amount" class="block text-gray-900 pr-4">Balance</label>
<div class="relative shadow-sm">
@ -44,7 +44,7 @@
<span class="text-gray-500">$</span>
</div>
{# TODO: Display existing credit assertion as credit, not as negative debit #}
<input type="number" class="block w-full border-0 py-1 pl-7 pr-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ assertion.balance().quantity_string() if assertion else '' }}" placeholder="0.00">
<input type="number" class="bordered-field pl-7 pr-16" name="amount" step="0.01" value="{{ assertion.balance().quantity_string() if assertion else '' }}" placeholder="0.00">
<div class="absolute inset-y-0 right-0 flex items-center">
<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign">
<option value="dr">Dr</option>
@ -55,7 +55,7 @@
</div>
<div class="text-end">
<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
<button type="submit" class="btn-primary">Save</button>
</div>
</form>
</div>

View File

@ -19,23 +19,23 @@
{% block title %}Journal{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Journal
</h1>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
New transaction
</a>
{% if commodity_detail %}
<a href="{{ url_for('journal') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('journal') }}" class="btn-secondary">
Hide commodity detail
</a>
{% else %}
<a href="{{ url_for('journal', commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('journal', commodity_detail=1) }}" class="btn-secondary">
Show commodity detail
</a>
{% endif %}

View File

@ -19,7 +19,7 @@
{% block title %}{{ 'Edit' if transaction and transaction.id else 'New' }} transaction{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
{{ 'Edit' if transaction and transaction.id else 'New' }} transaction
</h1>
@ -36,10 +36,10 @@
<tbody>
<tr>
<td class="pt-2 pb-1 pr-1">
<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}">
<input type="date" class="bordered-field" name="dt" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}">
</td>
<td class="pt-2 pb-1 px-1" colspan="2">
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" value="{{ transaction.description if transaction else '' }}">
<input type="text" class="bordered-field" name="description" value="{{ transaction.description if transaction else '' }}">
</td>
<td></td>
<td></td>
@ -58,7 +58,7 @@
<option value="cr"{% if posting.quantity < 0 %} selected{% endif %}>Cr</option>
</select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" value="{{ posting.account }}">
<input type="text" class="bordered-field pl-16" name="account" value="{{ posting.account }}">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@ -73,7 +73,7 @@
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ posting.amount().quantity_string() }}" oninput="changeAmount(this)">
<input type="number" class="bordered-field pl-7" name="amount" step="0.01" value="{{ posting.amount().quantity_string() }}" oninput="changeAmount(this)">
</div>
</td>
<td class="amount-cr py-1 pl-1"></td>
@ -84,7 +84,7 @@
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" oninput="changeAmount(this)">
<input type="number" class="bordered-field pl-7" name="amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" oninput="changeAmount(this)">
</div>
</td>
{% endif %}
@ -103,7 +103,7 @@
<option value="cr">Cr</option>
</select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
<input type="text" class="bordered-field pl-16" name="account">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@ -117,7 +117,7 @@
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
</div>
</td>
<td class="amount-cr py-1 pl-1"></td>
@ -134,7 +134,7 @@
<option value="cr" selected>Cr</option>
</select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
<input type="text" class="bordered-field pl-16" name="account">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@ -149,7 +149,7 @@
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
</div>
</td>
</tr>
@ -159,9 +159,9 @@
<div class="flex justify-end mt-4 space-x-2">
{% if transaction and transaction.id %}
<button type="submit" name="action" value="delete" class="px-3 py-1 text-red-600 ring-1 ring-inset ring-red-500 hover:bg-gray-50" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button>
<button type="submit" name="action" value="delete" class="btn-secondary text-red-600 ring-red-500" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button>
{% endif %}
<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
<button type="submit" class="btn-primary">Save</button>
</div>
<input type="hidden" name="referrer" value="{{ request.referrer or '' }}">
@ -198,7 +198,7 @@
'<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">' +
'<span class="text-gray-500">$</span>' +
'</div>' +
'<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">' +
'<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">' +
'</div>';
// Add new posting row
@ -214,7 +214,7 @@
(sign === 'dr' ? '<option value="dr" selected>Dr</option><option value="cr">Cr</option>' : '<option value="dr">Dr</option><option value="cr" selected>Cr</option>') +
'</select>' +
'</div>' +
'<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">' +
'<input type="text" class="bordered-field pl-16" name="account">' +
'</div>' +
'<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">' +
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">' +

View File

@ -35,14 +35,14 @@
{% if entry.__class__.__name__ == 'Section' %}
{{ render_section(entry) }}
{% elif entry.__class__.__name__ == 'Subtotal' %}
<tr{% if entry.bordered %} class="border-y border-gray-200"{% endif %}>
<tr{% if entry.bordered %} class="border-y border-gray-300"{% endif %}>
<th class="py-0.5 text-gray-900 font-semibold text-start">{{ entry.text }}</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">{{ entry.amount.format_accounting() }}</th>
</tr>
{% elif entry.__class__.__name__ == 'Spacer' %}
<tr><td colspan="2" class="py-0.5">&nbsp;</td></tr>
{% else %}
<tr{% if entry.bordered %} class="border-y border-gray-200"{% endif %}>
<tr{% if entry.bordered %} class="border-y border-gray-300"{% endif %}>
{% if entry.heading %}<th class="py-0.5 text-gray-900 font-semibold text-start">{% else %}<td class="py-0.5 text-gray-900 text-start">{% endif %}
{% if entry.link %}
<a href="{{ entry.link }}" class="hover:text-blue-700 hover:underline">{{ entry.text }}</a>
@ -59,7 +59,7 @@
{% endmacro %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
{{ report.title }}
</h1>

View File

@ -19,7 +19,7 @@
{% block title %}Import statement{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
Import statement
</h1>
@ -29,19 +29,19 @@
<input type="hidden" name="format" value="ofx1">
<div class="flex">
<div class="grow mr-2">
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
<input type="text" class="bordered-field" name="source-account" placeholder="Source account">
</div>
<div class="flex">
</div>
<div class="flex grow mr-2">
<label for="file_ofx1" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
<label for="file_ofx1" class="btn-primary bg-gray-600 hover:bg-gray-700">Browse</label>
<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx1" accept=".ofx">
</div>
<div class="mr-2">
<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
<button type="submit" name="action" value="preview" class="btn-secondary">Preview</button>
</div>
<div>
<button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
<button type="submit" name="action" value="import" class="btn-primary">Import</button>
</div>
</div>
</form>
@ -52,19 +52,19 @@
<input type="hidden" name="format" value="ofx2">
<div class="flex">
<div class="grow mr-2">
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
<input type="text" class="bordered-field" name="source-account" placeholder="Source account">
</div>
<div class="flex">
</div>
<div class="flex grow mr-2">
<label for="file_ofx2" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
<label for="file_ofx2" class="btn-primary bg-gray-600 hover:bg-gray-700">Browse</label>
<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx2" accept=".ofx">
</div>
<div class="mr-2">
<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
<button type="submit" name="action" value="preview" class="btn-secondary">Preview</button>
</div>
<div>
<button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
<button type="submit" name="action" value="import" class="btn-primary">Import</button>
</div>
</div>
</form>

View File

@ -19,7 +19,7 @@
{% block title %}Import statement preview{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
Import statement preview
</h1>

View File

@ -19,21 +19,21 @@
{% block title %}Statement lines{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Statement lines
</h1>
<form method="POST">
<div class="my-2 py-2 flex bg-white sticky top-0">
<div class="grow flex gap-x-2">
<button formaction="{{ url_for('statement_line_reconcile_transfer') }}" class="self-baseline px-3 py-1 text-emerald-700 ring-1 ring-inset ring-emerald-600 bg-white hover:bg-gray-50" type="submit">
<div class="grow flex gap-x-2 items-baseline">
<button formaction="{{ url_for('statement_line_reconcile_transfer') }}" class="btn-secondary text-emerald-700 ring-emerald-600" type="submit">
Reconcile selected as transfer
</button>
<a href="{{ url_for('statement_lines_import') }}" class="self-baseline px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('statement_lines_import') }}" class="btn-secondary">
Import statement
</a>
{% if request.args.get('unclassified', '0') != '1' %}
<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="self-baseline px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="btn-secondary">
Show only unclassified lines
</a>
{% endif %}
@ -83,7 +83,7 @@
<tbody>
{% for line in page.items %}
<tr data-line-id="{{ line.id }}">
<td class="py-0.5 pr-2 align-baseline"><input class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600 -mt-0.5" type="checkbox" name="sel-line-id" value="{{ line.id }}"></td>
<td class="py-0.5 pr-2 align-baseline"><input class="checkbox-primary" type="checkbox" name="sel-line-id" value="{{ line.id }}"></td>
<td class="py-0.5 pr-2 align-baseline text-gray-900"><a href="{{ url_for('statement_lines', account=line.source_account) }}" class="hover:text-blue-700 hover:underline">{{ line.source_account }}</a></td>
<td class="py-0.5 pr-2 align-baseline text-gray-900">{{ line.dt.strftime('%Y-%m-%d') }}</td>
<td class="py-0.5 pr-2 align-baseline text-gray-900">{{ line.description }}</td>

View File

@ -19,18 +19,18 @@
{% block title %}Account transactions{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Account transactions
</h1>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
New transaction
</a>
<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="btn-secondary">
Show commodity detail
</a>
</div>

View File

@ -19,18 +19,18 @@
{% block title %}Account transactions{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900">
<h1 class="page-heading">
Account transactions
</h1>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
New transaction
</a>
<a href="{{ url_for('account_transactions', account=account) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
<a href="{{ url_for('account_transactions', account=account) }}" class="btn-secondary">
Hide commodity detail
</a>
</div>

View File

@ -19,7 +19,7 @@
{% block title %}Trial balance{% endblock %}
{% block content %}
<h1 class="text-3xl text-gray-900 mb-4">
<h1 class="page-heading mb-4">
Trial balance
</h1>