Small nits #58
Small nits #58
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements UI refinements across the application, including tag sorting functionality, improved component reusability, and navigation enhancements.
Key changes:
- Added tag sorting logic with special handling for the "everything" tag in TagList component
- Refactored ResourceCard to use the TagList component for better code reuse
- Updated navigation breakpoints from
lgtoxland added GitHub link to navbar
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| resources/js/Components/TagList.vue | Added computed sorting logic to prioritize "everything" tag, converted visibleTags to computed property, and added ellipsis indicator for truncated tag lists |
| resources/js/Components/Resources/ResourceCard.vue | Replaced inline tag rendering with TagList component for topics, adjusted spacing and added visual separators between metadata sections |
| resources/js/Components/Navigation/Navbar.vue | Changed responsive breakpoints from lg to xl, added GitHub link button to both desktop and mobile navigation, reorganized dark mode toggle placement |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (aLower === 'everything') return -1; | ||
| if (bLower === 'everything') return 1; |
There was a problem hiding this comment.
The sort function only handles the special case where one tag is "everything" but doesn't sort the remaining tags alphabetically. When neither tag is "everything", the function returns 0, which means the relative order is unchanged. This results in an incomplete sort where "everything" is moved to the front, but all other tags remain in their original order.
Consider updating the sort logic to alphabetically sort all tags that aren't "everything".
| if (aLower === 'everything') return -1; | |
| if (bLower === 'everything') return 1; | |
| if (aLower === 'everything' && bLower !== 'everything') return -1; | |
| if (bLower === 'everything' && aLower !== 'everything') return 1; | |
| if (aLower < bLower) return -1; | |
| if (aLower > bLower) return 1; |
| <a | ||
| href="https://github.com/AllanKoder/ComputerScienceResources.com" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary" | ||
| > | ||
| <Icon | ||
| icon="mdi:github" | ||
| class="size-6" | ||
| /> | ||
| </a> |
There was a problem hiding this comment.
Inconsistent indentation detected in the GitHub link button and its child Icon element. The opening tag and Icon element should be indented consistently with the surrounding code. The closing tag on line 91 should also align with the opening tag's indentation level.
| <button | ||
| @click="toggleDark" | ||
| type="button" | ||
| class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary" | ||
| @click="toggleDark" | ||
| type="button" | ||
| class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary" | ||
| > | ||
| <Icon | ||
| <Icon | ||
| v-if="!isDark" | ||
| icon="mdi:weather-night" | ||
| class="size-6" | ||
| /> | ||
| <Icon | ||
| /> | ||
| <Icon | ||
| v-else | ||
| icon="mdi:white-balance-sunny" | ||
| class="size-6" | ||
| /> | ||
| </button> | ||
| /> | ||
| </button> |
There was a problem hiding this comment.
Inconsistent indentation detected in the dark mode button and its child Icon elements. The button attributes, Icon elements, and closing tag should be indented consistently with the surrounding code structure.
| <div class="hidden lg:flex lg:items-center lg:ms-6"> | ||
| <div class="hidden xl:flex xl:items-center xl:ms-6"> | ||
|
|
||
|
|
There was a problem hiding this comment.
There are two consecutive blank lines here that should be reduced to a single blank line for consistency with standard code formatting practices.
No description provided.