557fb72081
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.
49 lines
No EOL
1.1 KiB
CSS
49 lines
No EOL
1.1 KiB
CSS
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
|
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
/* Custom Navbar Style */
|
|
.navbar-custom {
|
|
background-color: #28a745; /* A nice shade of green */
|
|
}
|
|
|
|
.navbar-custom .navbar-brand,
|
|
.navbar-custom .nav-link {
|
|
color: #ffffff; /* White text for good contrast */
|
|
}
|
|
|
|
.navbar-custom .nav-link:hover {
|
|
color: #d4d4d4; /* A light gray for hover effect */
|
|
}
|
|
|
|
/* For tables, to control column widths */
|
|
.table .col-content {
|
|
max-width: 400px; /* Adjust as needed */
|
|
word-wrap: break-word; /* Break long words */
|
|
white-space: normal; /* Allow text to wrap normally */
|
|
}
|
|
|
|
.table .col-actions {
|
|
width: 150px; /* Fixed width for action buttons, adjust as needed */
|
|
min-width: 120px; /* Ensure minimum space */
|
|
white-space: nowrap; /* Keep buttons on one line, prevent wrapping */
|
|
} |