Feature Suggestion: Improve Mobile Interface for Viewing Quotes

[sirnails]

Feature Suggestion: Improve Mobile Interface for Viewing Quotes

Overview: BloomQuote is a comprehensive event management and quotation software designed for florists. One of the screens in BloomQuote is a list of quotes created by the user. Currently, users need to scroll to the right to click the "View" button for a quote. This can be unintuitive, especially on mobile devices.

Problem Statement: When using BloomQuote on mobile devices, it can be cumbersome and unintuitive for users to scroll horizontally to find and click the "View" button associated with a quote. This can hinder user experience and efficiency.

Proposed Solution: Enhance the mobile interface by making the entire row in the list of quotes clickable. This means that users can simply tap anywhere on the row to view the details of the quote, improving the intuitiveness and ease of use.

Benefits:

• Improved User Experience: Users will find it easier and faster to access quote details on mobile devices.
• Increased Efficiency: Reduces the number of taps required to view quote details, streamlining the workflow.
• Consistency: Provides a consistent user experience across different devices and screen sizes.

Implementation Steps:

1. Modify HTML Structure:

   • Update the HTML for the quotes list to wrap each row in a clickable element, such as an <a> tag.

2. Update CSS:

   • Ensure the new clickable rows have appropriate styling to indicate they are interactive.
   • Remove the default text-decoration for the links and add hover effects for better user feedback.

3. Update JavaScript (Optional):

   • Add a click event listener to each row that redirects to the quote details page.
   • Ensure this works seamlessly with any existing JavaScript functionality.

Example Code:

<!-- Current table structure -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Wedding Date</th>
            <th>Bride Name</th>
            <th>Groom Name</th>
            <th>Total Cost</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($quote = $quotes->fetch_assoc()) { ?>
            <tr>
                <td><?php echo $quote['id']; ?></td>
                <td><?php echo $quote['wedding_date']; ?></td>
                <td><?php echo $quote['bride_name']; ?></td>
                <td><?php echo $quote['groom_name']; ?></td>
                <td>£<?php echo number_format($quote['total_cost'], 2); ?></td>
                <td>
                    <a href="index.php?action=show_quote&id=<?php echo $quote['id']; ?>" class="btn btn-info">View</a>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<!-- Proposed table structure -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Wedding Date</th>
            <th>Bride Name</th>
            <th>Groom Name</th>
            <th>Total Cost</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($quote = $quotes->fetch_assoc()) { ?>
            <tr onclick="window.location.href='index.php?action=show_quote&id=<?php echo $quote['id']; ?>'" style="cursor: pointer;">
                <td><?php echo $quote['id']; ?></td>
                <td><?php echo $quote['wedding_date']; ?></td>
                <td><?php echo $quote['bride_name']; ?></td>
                <td><?php echo $quote['groom_name']; ?></td>
                <td>£<?php echo number_format($quote['total_cost'], 2); ?></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

CSS:

/* Optional CSS for better visual feedback */
.table-striped tr:hover {
    background-color: #f2f2f2;
}

JavaScript:

// Optional JavaScript for handling row clicks
document.querySelectorAll('.table-striped tbody tr').forEach(row => {
    row.addEventListener('click', () => {
        window.location.href = row.getAttribute('data-href');
    });
});

Testing:

• Test the new feature on various mobile devices and screen sizes to ensure it works as expected.
• Ensure that the new clickable rows do not interfere with other functionalities.

By implementing these changes, BloomQuote will offer a more intuitive and efficient user experience on mobile devices, aligning with the overall goal of streamlining operations for florist businesses.

[sirnails]

feat: Improve mobile interface and hover effect for quote list

• Made entire row in the list of quotes clickable to enhance mobile usability.
• Retained the "View" button for users who prefer explicit action buttons.
• Added CSS to change cursor to pointer when hovering over rows to indicate clickability.
• Implemented a brightness filter on hover to improve visibility and consistency in both light and dark modes.
• Ensured smooth transition for hover effect with transition: filter 0.2s;.
• Adjusted JavaScript to handle row clicks, redirecting to the quote details page unless an anchor tag is clicked.

This update addresses the issue of cumbersome horizontal scrolling to find the "View" button on mobile devices, enhancing the user experience and efficiency for BloomQuote users. The hover effect adjustments ensure that the interface remains user-friendly and readable in both light and dark modes.