This commit introduces significant user interface and experience improvements across the Lawn Care Log, Calendar, and Lawn Tips sections, focusing on consistent button styling, improved layout, and clearer navigation.
**Key Changes:**
* **Lawn Care Event Models:**
* Added `NotApplicable` to `MowingPattern` enum with `[Display(Name = "N/A")]` for better logging flexibility.
* **Lawn Care Log (`Views/LawnCareEvents/Index.cshtml`):**
* **Centered Page Title & Actions:** Wrapped `<h1>` and primary action buttons (`Create New Event`, `View Calendar`) in a `div` with `text-center` for better alignment.
* **Improved Search Bar Layout:** Encapsulated the search input and buttons in an `input-group` within a flex container (`d-flex justify-content-end`) with fixed width and auto margins, ensuring it's centered as a block but right-aligned internally.
* **Convert Table Actions to Buttons:** Replaced "Edit | Details | Delete" links in the main log table with `btn-sm btn-outline-primary/info/danger` styled buttons, wrapped in `d-flex flex-wrap gap-2` for consistent spacing and responsive behavior.
* Renamed "Back to Full List" to "Reset Filter" for clarity and changed its style to `btn-primary`.
* **Lawn Care Calendar (`Views/LawnCareEvents/Calendar.cshtml`):**
* **Centralized Title & Button:** Implemented a flexbox container (`d-flex justify-content-between align-items-center`) for the calendar's page title and the "Create New Event" button, ensuring they are on the same line and properly spaced.
* **Restored JavaScript Integrity:** Re-structured the top-level HTML to ensure the calendar's internal JavaScript (`#prevMonth`, `#nextMonth`, `#currentMonthYear`) remains unaffected by the page title/button layout changes.
* **Lawn Care Tips (`Views/LawnCareTip/Index.cshtml`):**
* **Consolidated Actions:** Converted "Edit | Details | Delete" links in the tips table into Bootstrap buttons (`btn-sm btn-outline-primary/info/danger`).
* **Improved Action Column Layout:** Applied new `.col-actions` CSS to the action column (`<th>` and `<td>`) to give it a fixed width and use `white-space: nowrap` to prevent action buttons from wrapping.
* **Content Column Wrapping:** Added `.col-content` CSS to the content column to limit its max-width and allow `word-wrap`.
* Changed "Create New" to "Create New Tip" with `btn-primary` styling for consistency.
* **Removed Details Link from Tips:** (Implied by diff) The Details link for `LawnCareTip` was removed from the table view, aligning with a common pattern where simple tip content might be fully displayed or only Edit/Delete actions are prioritized in the index.
* **Global Styling (`wwwroot/css/site.css`):**
* Added `col-content` and `col-actions` CSS classes to manage table column widths and wrapping behavior for cleaner table layouts.
These changes significantly improve the aesthetic consistency and usability of the application's main views.
48 lines
1.3 KiB
Text
48 lines
1.3 KiB
Text
@model IEnumerable<turf_tasker.Models.LawnCareTip>
|
|
|
|
@{
|
|
ViewData["Title"] = "Index";
|
|
}
|
|
|
|
<h1>Index</h1>
|
|
|
|
<p>
|
|
<a asp-action="Create" class="btn btn-primary">Create New Tip</a>
|
|
</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
@Html.DisplayNameFor(model => model.Title)
|
|
</th>
|
|
<th>
|
|
@Html.DisplayNameFor(model => model.Category)
|
|
</th>
|
|
<th>
|
|
@Html.DisplayNameFor(model => model.Content)
|
|
</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var item in Model) {
|
|
<tr>
|
|
<td>
|
|
@Html.DisplayFor(modelItem => item.Title)
|
|
</td>
|
|
<td>
|
|
@Html.DisplayFor(modelItem => item.Category)
|
|
</td>
|
|
<td>
|
|
@Html.DisplayFor(modelItem => item.Content)
|
|
</td>
|
|
<td class="col-actions">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary">Edit</a>
|
|
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-outline-danger">Delete</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|