imacat/mia-accounting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 41 Wiki Activity

Replaced the separated toolbar for the desktop and mobile screen with the accounting-toolbar class that acts differently on different screen sizes.

Browse Source
This commit is contained in:
依瑪貓 2023-03-09 14:14:47 +08:00
parent 3582d960ca
commit 8819eabcd0
9 changed files with 111 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/accounting/static/css/style.css
View File

@ -29,7 +29,6 @@
}
.btn-group .btn .accounting-search-input {
min-height: calc(1em + .5rem + 2px);
padding: 0 0.5rem;
}
.btn-group .btn .accounting-search-label button {
border: none;
@ -45,30 +44,59 @@
background-color: #D3D3D4;
}
/** The toolbar for the mobile devices */
.accounting-mobile-toolbar {
/** The toolbar */
.accounting-toolbar {
display: flex;
}
.accounting-mobile-toolbar .accounting-toolbar-button {
height: 3.2rem;
width: 3.2rem;
border-radius: 50%;
margin-left: 1rem;
}
.accounting-mobile-toolbar > a.accounting-toolbar-button {
padding-top: 0.7rem;
}
.accounting-search-mobile-form {
width: 12rem;
margin-left: 1rem;
height: 2.8rem;
align-items: center;
margin-top: 0.3rem;
}
.accounting-search-mobile-form button {
.accounting-toolbar .input-group > .input-group-text {
padding: 0;
background-color: transparent;
border: 0;
color: inherit;
border: 0;
}
.accounting-toolbar .input-group > .input-group-text > button {
background-color: transparent;
color: inherit;
border: 0;
}
.accounting-toolbar form.btn > .form-control {
min-height: calc(1.5em + 2px);
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
@media(min-width: 768px) {
.accounting-toolbar > .btn, .accounting-toolbar > .btn-group > .btn {
border-radius: 0;
}
.accounting-toolbar > .btn:first-child, .accounting-toolbar > .btn-group:first-child > .btn {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.accounting-toolbar > .btn:last-child, .accounting-toolbar > .btn-group:last-child > .btn {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
.accounting-toolbar .btn.input-group {
width: 16rem;
}
}
@media(max-width:767px) {
.accounting-toolbar > .btn:not(form), .accounting-toolbar > .btn-group > .btn {
height: 3.2rem;
width: 3.2rem;
border-radius: 50%;
margin-left: 1rem;
}
.accounting-toolbar > a.btn, .accounting-toolbar > .btn-group > a.btn {
padding-top: 0.7rem;
}
.accounting-toolbar > form.btn {
width: 12rem;
height: 2.6rem;
border-radius: 0.375rem;
margin-top: 0.3rem;
margin-left: 1rem;
}
}
/** The card layout */

14
src/accounting/templates/accounting/report/balance-sheet.html
View File

@ -30,10 +30,8 @@ First written: 2023/3/7
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_currency_chooser = true,
<div class="mb-3 accounting-toolbar">
{% with use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
@ -41,14 +39,6 @@ First written: 2023/3/7
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}

100
src/accounting/templates/accounting/report/include/toolbar-buttons.html
View File

@ -19,60 +19,56 @@ toolbar-buttons.html: The toolbar buttons on the report
Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2023/3/8
#}
{% if use_add_new %}
{% if accounting_can_edit() %}
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle accounting-toolbar-button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-plus"></i>
<span class="d-none d-md-inline">{{ A_("New") }}</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_EXPENSE)|accounting_append_next }}">
{{ A_("Cash Expense") }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_INCOME)|accounting_append_next }}">
{{ A_("Cash Income") }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.TRANSFER)|accounting_append_next }}">
{{ A_("Transfer") }}
</a>
</li>
</ul>
</div>
{% endif %}
{% endif %}
{% if use_report_chooser %}
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-book"></i>
<span class="d-none d-md-inline">{{ report.report_chooser.current_report }}</span>
{% if accounting_can_edit() %}
<div class="btn-group d-none d-md-flex" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-plus"></i>
<span class="d-none d-md-inline">{{ A_("New") }}</span>
</button>
<ul class="dropdown-menu" aria-label="{{ A_("Report") }}">
{% for report in report.report_chooser %}
<li>
<a class="dropdown-item {% if report.is_active %} active {% endif %}" href="{{ report.url }}">
<i class="{{ report.fa_icon }}"></i>
{{ report.title }}
</a>
</li>
{% endfor %}
<ul class="dropdown-menu">
<li>
<span class="dropdown-item {% if report.report_chooser.is_search %} active {% endif %} accounting-clickable" data-bs-toggle="modal" data-bs-target="#accounting-search-modal">
<i class="fa-solid fa-magnifying-glass"></i>
{{ A_("Search") }}
</span>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_EXPENSE)|accounting_append_next }}">
{{ A_("Cash Expense") }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_INCOME)|accounting_append_next }}">
{{ A_("Cash Income") }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.TRANSFER)|accounting_append_next }}">
{{ A_("Transfer") }}
</a>
</li>
</ul>
</div>
{% endif %}
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-book"></i>
<span class="d-none d-md-inline">{{ report.report_chooser.current_report }}</span>
</button>
<ul class="dropdown-menu" aria-label="{{ A_("Report") }}">
{% for report in report.report_chooser %}
<li>
<a class="dropdown-item {% if report.is_active %} active {% endif %}" href="{{ report.url }}">
<i class="{{ report.fa_icon }}"></i>
{{ report.title }}
</a>
</li>
{% endfor %}
<li>
<span class="dropdown-item {% if report.report_chooser.is_search %} active {% endif %} accounting-clickable" data-bs-toggle="modal" data-bs-target="#accounting-search-modal">
<i class="fa-solid fa-magnifying-glass"></i>
{{ A_("Search") }}
</span>
</li>
</ul>
</div>
{% if use_currency_chooser %}
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-money-bill-wave"></i>
<span class="d-none d-md-inline">{{ report.currency.name|title }}</span>
</button>
@ -89,7 +85,7 @@ First written: 2023/3/8
{% endif %}
{% if use_account_chooser %}
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-clipboard"></i>
<span class="d-none d-md-inline">{{ report.account.title|title }}</span>
</button>
@ -105,19 +101,19 @@ First written: 2023/3/8
</div>
{% endif %}
{% if use_period_chooser %}
<button class="btn btn-primary accounting-toolbar-button" type="button" data-bs-toggle="modal" data-bs-target="#accounting-period-chooser-modal">
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#accounting-period-chooser-modal">
<i class="fa-solid fa-calendar-day"></i>
<span class="d-none d-md-inline">{{ report.period.desc|title }}</span>
</button>
{% endif %}
<a class="btn btn-primary accounting-toolbar-button" role="button" href="{{ report.csv_uri }}">
<a class="btn btn-primary" role="button" href="{{ report.csv_uri }}">
<i class="fa-solid fa-download"></i>
<span class="d-none d-md-inline">{{ A_("Download") }}</span>
</a>
{% if use_search %}
<form class="btn btn-primary d-flex input-group accounting-search-{{ search_platform }}-form" action="{{ url_for("accounting.report.search") }}" method="get" role="search" aria-label="{{ search_aria_label }}">
<input id="accounting-search-{{ search_platform }}" class="form-control form-control-sm accounting-search-input" type="search" name="q" value="{{ request.args.q }}" placeholder=" " required="required">
<label for="accounting-search-{{ search_platform }}" class="accounting-search-label">
<form class="btn btn-primary d-flex input-group" action="{{ url_for("accounting.report.search") }}" method="get" role="search" aria-labelledby="accounting-search-label">
<input id="accounting-search" class="form-control form-control-sm accounting-search-input" type="search" name="q" value="{{ request.args.q }}" placeholder=" " required="required">
<label id="accounting-search-label" for="accounting-search" class="input-group-text accounting-search-label">
<button type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
<span class="d-none d-md-inline">{{ A_("Search") }}</span>

15
src/accounting/templates/accounting/report/income-expenses.html
View File

@ -30,10 +30,8 @@ First written: 2023/3/5
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_currency_chooser = true,
<div class="mb-3 accounting-toolbar">
{% with use_currency_chooser = true,
use_account_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
@ -42,15 +40,6 @@ First written: 2023/3/5
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_currency_chooser = true,
use_account_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}

14
src/accounting/templates/accounting/report/income-statement.html
View File

@ -30,10 +30,8 @@ First written: 2023/3/7
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_currency_chooser = true,
<div class="mb-3 accounting-toolbar">
{% with use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
@ -41,14 +39,6 @@ First written: 2023/3/7
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}

13
src/accounting/templates/accounting/report/journal.html
View File

@ -30,23 +30,14 @@ First written: 2023/3/4
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_period_chooser = true %}
<div class="mb-3 accounting-toolbar">
{% with use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}

15
src/accounting/templates/accounting/report/ledger.html
View File

@ -30,10 +30,8 @@ First written: 2023/3/5
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_currency_chooser = true,
<div class="mb-3 accounting-toolbar">
{% with use_currency_chooser = true,
use_account_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
@ -42,15 +40,6 @@ First written: 2023/3/5
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_currency_chooser = true,
use_account_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}

17
src/accounting/templates/accounting/report/search.html
View File

@ -29,27 +29,14 @@ First written: 2023/3/8
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_search = true,
search_platform = "desktop",
search_aria_label = A_("Search for Desktop") %}
<div class="mb-3 accounting-toolbar">
{% with use_search = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_search = true,
search_platform = "mobile",
search_aria_label = A_("Search for Mobile") %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/search-modal.html" %}
{% if report.has_data %}

14
src/accounting/templates/accounting/report/trial-balance.html
View File

@ -30,10 +30,8 @@ First written: 2023/3/5
{% block content %}
<div class="btn-group mb-2 d-none d-md-inline-flex">
{% with use_add_new = true,
use_report_chooser = true,
use_currency_chooser = true,
<div class="mb-3 accounting-toolbar">
{% with use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
@ -41,14 +39,6 @@ First written: 2023/3/5
{% include "accounting/report/include/add-txn-material-fab.html" %}
<div class="mb-3 d-md-none accounting-mobile-toolbar">
{% with use_report_chooser = true,
use_currency_chooser = true,
use_period_chooser = true %}
{% include "accounting/report/include/toolbar-buttons.html" %}
{% endwith %}
</div>
{% include "accounting/report/include/period-chooser.html" %}
{% include "accounting/report/include/search-modal.html" %}