Merged components #20
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RosieHall
approved these changes
Sep 20, 2023
There was a problem hiding this comment.
Looks good to me but we need to keep in mind to restore new styles back in to work with @AdamN2424 changes, and to overwrite old MushroomCard.vue with @EmilyClare4 ResultCard.vue
Comment on lines
5
to
+7
| @layer components { | ||
| .tag-button { | ||
| @apply flex-grow tablet:flex-nowrap bg-emerald-500 hover:bg-emerald-700 text-white text-base font-semibold rounded-lg tablet:rounded-none px-2 py-1 min-w-[90px] tablet:min-w-[60px]; | ||
| .button { | ||
| @apply flex-1 text-white text-sm rounded-lg px-2 py-1; |
There was a problem hiding this comment.
I will need re-apply my new styles to ensure they work with the data properly
Comment on lines
+42
to
+119
| <style scoped> | ||
| .mushroom-card { | ||
| border: 1px solid #ccc; | ||
| border-radius: 8px; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| display: flex; | ||
| cursor: pointer; | ||
| transition: box-shadow 0.3s; | ||
| max-width: 300px; | ||
| } | ||
|
|
||
| .mushroom-card:hover { | ||
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .mushroom-image { | ||
| width: 100px; | ||
| height: 100px; | ||
| object-fit: cover; | ||
| border-radius: 4px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .mushroom-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .mushroom-name { | ||
| font-size: 18px; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .latin-name { | ||
| font-size: 14px; | ||
| color: #555; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .edibility-tag { | ||
| font-size: 14px; | ||
| background-color: #10fa08; | ||
| color: #333; | ||
| padding: 4px 8px; | ||
| border-radius: 4px; | ||
| align-self: flex-end; | ||
| } | ||
| </style> | ||
|
|
||
| <!-- please leave this here for now, I'm still working on it--> | ||
|
|
||
| <!--<template> | ||
| <div class="mushroom-card" @click="navigateToDetail"> | ||
| <img :src="mushroom.imageUrl" alt="Mushroom" class="mushroom-image" /> | ||
| <div class="mushroom-info"> | ||
| <h3 class="mushroom-name">{{ mushroom.commonName }}</h3> | ||
| <p class="latin-name">{{ mushroom.latinName }}</p> | ||
| <div class="edibility-tag">{{ mushroom.edibility }}</div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'MushroomCard', | ||
| props: { | ||
| mushroom: Object // data passed from parent | ||
| }, | ||
| methods: { | ||
| navigateToDetail() { | ||
| // someth like: | ||
| //this.$router.push({ name: 'mushroom-detail', params: { id: this.mushroom.id } }); | ||
| } | ||
| } | ||
| }; | ||
| </script>--> |
There was a problem hiding this comment.
Will leave this for now but we will overwrite this when merging @EmilyClare4 result-cards
Comment on lines
22
to
+30
| <!--Edibility Quick Filter--> | ||
| <div class="tablet:bg-white desktop:bg-white rounded-lg w-11/12 desktop:w-3/4 desktop:p-2 absolute left-0 right-0 mx-auto mt-6 tablet:-mt-6 desktop:-mt-5 tablet:shadow-md desktop:shadow-md"> | ||
| <div class="flex flex-wrap gap-1 desktop:gap-0 tablet:gap-0 p-2 desktop:p-0 tablet:p-2 w-full"> | ||
| <button class="tag-button">Edible</button> | ||
| <button class="tag-button">Gourmet</button> | ||
| <button class="tag-button">Poisonous</button> | ||
| <button class="tag-button">Psychoactive</button> | ||
| <button class="tag-button">Lookalike</button> | ||
| <div class="flex flex-wrap gap-2 desktop:gap-0 tablet:gap-0 p-2 desktop:p-0 tablet:p-2 w-full"> | ||
| <button class="button bg-blue-500" @click="toggleTag('edible')">Edible</button> | ||
| <button class="button bg-orange-500" @click="toggleTag('gourmet')">Gourmet</button> | ||
| <button class="button bg-red-500" @click="toggleTag('poisonous')">Poisonous</button> | ||
| <button class="button bg-purple-500" @click="toggleTag('psychoactive')">Psychoactive</button> | ||
| <button class="button bg-yellow-500" @click="toggleTag('lookalike')">Lookalike</button> | ||
| </div> |
There was a problem hiding this comment.
@AdamN2424 We will need to ensure new tag-button styles in tailwind.css work with toggleTag and reapply them
There was a problem hiding this comment.
Yeah, I reverted that because it was added after I got those tag filters working. We will have to adjust it but the current style is fine for the prototype so let's prioritize getting the carousels working with the filters before messing with those styles.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have merged the backend functionality that currently works with Rosie's most up-to-date UI.
Index.vue is quite bare right now as the functions that weren't working with this UI have been removed (the old index.vue with all backend functionality is in pages/prototype-ui.
We really need to focus on making those other functions work with the new UI (mainly the carousels for now). The results are currently displaying an old version of the mushroom cards so that will also need to be updated.