Bottom navigation for mobile added #150
Conversation
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||||||
|
@MHamzaBham there are a couple of suggestions from qodo auto code review including syntax error. Could you please look into those? |
![qodo-merge-pro[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
public/assets/css/custom.css
Outdated
| transform: scale(1); | ||
| } | ||
|
|
||
| .transaction-add-button:hover { | ||
| transform: scale(1.1); | ||
| transition: 0.3s ease-in-out; | ||
| } |
There was a problem hiding this comment.
Suggestion: Improve animation smoothness
| .transaction-add-button{ | |
| transform: scale(1); | |
| } | |
| .transaction-add-button:hover { | |
| transform: scale(1.1); | |
| transition: 0.3s ease-in-out; | |
| } | |
| .transaction-add-button{ | |
| transform: scale(1); | |
| transition: 0.3s ease-in-out; | |
| } | |
| .transaction-add-button:hover { | |
| transform: scale(1.1); | |
| } |
Made the suggested changes |
| @@ -1,5 +1,5 @@ | |||
| {{-- Success Toast --}} | |||
| <div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000"> | |||
| <div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000" style="z-index: 1040;"> | |||
There was a problem hiding this comment.
Cannot we use Bootstrap class for z-index?
Refer https://getbootstrap.com/docs/5.3/utilities/z-index/
|
|
||
| <a href="#" data-bs-toggle="modal" data-bs-target="#transactionModal" onclick="openModalForAdd()" | ||
| class="bg-primary shadow text-white rounded-circle d-flex align-items-center justify-content-center transaction-add-button" | ||
| style="width: 40px; height: 40px;"> |
There was a problem hiding this comment.
If custom styling is required it is better to create a class in app css file and use that class here.
| <form method="POST" action="{{ route('logout') }}"> | ||
| @csrf | ||
| <a class="nav-link dropdown-item" | ||
| onclick="event.preventDefault(); this.closest('form').submit();"> |
There was a problem hiding this comment.
Although very small, it is always better to move it to separate javascript function which could be reused if needed.
PR Type
Enhancement
Description
Added a bottom navigation bar for mobile view.
Introduced hover effects for transaction add button.
Integrated a modal for adding/editing transactions.
Adjusted z-index for success toast for better visibility.
Changes walkthrough 📝
custom.css
Added hover effects for transaction add buttonpublic/assets/css/custom.css
.transaction-add-button..transaction-add-button.dashboard.blade.php
Integrated modal for transaction add/edit functionalityresources/views/dashboard.blade.php
divwithid="modalDiv".navigation.blade.php
Added mobile bottom navigation barresources/views/layouts/navigation.blade.php
success-toast.blade.php
Adjusted z-index for success toastresources/views/partials/success-toast.blade.php