Mobile UI/UX - Hide long New Button names and use plus icon only in mobile view, proper form group spacing in mobile as well

This commit is contained in:
johnnyq
2025-05-28 23:39:44 -04:00
parent 96fe566e08
commit db418ce662
17 changed files with 69 additions and 66 deletions

View File

@@ -32,7 +32,7 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<div class="card-header py-2">
<h3 class="card-title mt-2"><i class="fas fa-fw fa-redo-alt mr-2"></i>Recurring Expenses</h3>
<div class="card-tools">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createRecurringExpenseModal"><i class="fas fa-plus mr-2"></i>New Recurring Expense</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createRecurringExpenseModal"><i class="fas fa-plus"></i><span class="d-none d-lg-inline ml-2">New Recurring Expense</span></button>
</div>
</div>
@@ -94,19 +94,18 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
Next Date <?php if ($sort == 'recurring_expense_next_date') { echo $order_icon; } ?>
</a>
</th>
<th>
<a class="text-dark" href="?<?php echo $url_query_strings_sort; ?>&sort=vendor_name&order=<?php echo $disp; ?>">
Vendor <?php if ($sort == 'vendor_name') { echo $order_icon; } ?>
</a>
</th>
<th>
<a class="text-dark" href="?<?php echo $url_query_strings_sort; ?>&sort=category_name&order=<?php echo $disp; ?>">
Category <?php if ($sort == 'category_name') { echo $order_icon; } ?>
</a>
/
<a class="text-secondary" href="?<?php echo $url_query_strings_sort; ?>&sort=recurring_expense_description&order=<?php echo $disp; ?>">
Description <?php if ($sort == 'recurring_expense_description') { echo $order_icon; } ?>
</a>
</th>
<th>
<a class="text-dark" href="?<?php echo $url_query_strings_sort; ?>&sort=recurring_expense_description&order=<?php echo $disp; ?>">
Description <?php if ($sort == 'recurring_expense_description') { echo $order_icon; } ?>
<a class="text-dark" href="?<?php echo $url_query_strings_sort; ?>&sort=vendor_name&order=<?php echo $disp; ?>">
Vendor <?php if ($sort == 'vendor_name') { echo $order_icon; } ?>
</a>
</th>
<th class="text-right">
@@ -192,9 +191,11 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<?php echo $recurring_expense_next_date; ?>
</a>
</td>
<td>
<?php echo $category_name; ?>
<div class="text-secondary"><small><?php echo truncate($recurring_expense_description, 60); ?></small></div>
</td>
<td><?php echo $vendor_name; ?></td>
<td><?php echo $category_name; ?></td>
<td><?php echo truncate($recurring_expense_description, 50); ?></td>
<td class="text-bold text-right"><?php echo numfmt_format_currency($currency_format, $recurring_expense_amount, $recurring_expense_currency_code); ?></td>
<td><?php echo $recurring_expense_frequency_display; ?></td>
<td><?php echo $recurring_expense_last_sent_display; ?></td>