Add search card #10
Add search card #10
Conversation
Angi-Kinas
force-pushed
the
search-card
branch
2 times, most recently
from
e77b9d9 to
e9c3434
Compare
add metadata quality indicator
fix rebase issues, add transaltions.
button styles, make button and image style more flexible with classes, use favorite-heart component in search card, use primary button in dataset page
login and add favorite, show favorite card and search card
Angi-Kinas
force-pushed
the
search-card
branch
from
9a7510a to
fa97ee0
Compare
check css background color instead of class name
There was a problem hiding this comment.
Thanks @Angi-Kinas. The search page is starting to look nice:-)
Some small things I noticed testing:
- I wasn't able to select the card with the keyboard
- The cursor pointer for the card is missing
- A click on a keyword does not execute a search on the term
apps/datahub/src/app/common/button-primary/button-primary.component.ts
Outdated
Show resolved
Hide resolved
apps/datahub/src/app/common/button-primary/button-primary.component.ts
Outdated
Show resolved
Hide resolved
...ahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html
Outdated
Show resolved
Hide resolved
| <p class="leading-relaxed text-sm text-gray-700 clamp-3"> | ||
| {{ record.abstract }} | ||
| </p> | ||
| <div class="flex flex-col h-[72px] justify-between shrink-0"> |
There was a problem hiding this comment.
Maybe the flex-col in the <a> is sufficient as the vertical gap between all the elements of the card seems to be the same (12px btw).
There was a problem hiding this comment.
Do you mean the height? Because if I don't set it, the cards will have different heights like so:
It's because some "Producteur" names are longer than others...
There was a problem hiding this comment.
I guess you are right, that you need flex-col on different levels. I think we'll need to limit the size of Localisation and Producteur anyhow though, as very long names can still break the layout. What do you think of truncateing them to one line and displaying the tooltip for each entry instead of displaying the abstract tooltip for the entire card?
Limiting all entries of the card should also enable us to make the vertical margins/gaps between them as consistent as possible.
...ahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html
Outdated
Show resolved
Hide resolved
...ahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html
Outdated
Show resolved
Hide resolved
...ahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html
Outdated
Show resolved
Hide resolved
- change name of ButtonPrimary - change classname - change some styles in search-card - make keywords click work - make key tab work on cards
| @@ -1,10 +1,11 @@ | |||
| <div class="relative"> | |||
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-[30px]"> | |||
| <div class="flex justify-center flex-wrap gap-6"> | |||
There was a problem hiding this comment.
Watch out, this will also display 1 or 2 results centered, while I think we'd expect them to show up bound to the left. Maybe use justify-start? What's the reason to change to flex here?
There was a problem hiding this comment.
Yes you are right, I saw that the last result was centered alone. I could set a width on the parent component and center this parent component and then use justify-start for the cards, as you said. But not sure if this will look nice on all screen sizes.
The reason for changing this was the responsive behaviour. Somehow the cards got stacked on top of each other before wrapping to the next line. I can change it back though. WDYT?
There was a problem hiding this comment.
Ah right, I guess flex is indeed the better way to handle responsiveness here since/if we don't want to reduce the card width. I think we'll also need to use a mel-container-lg lg:mx-auto in the parent component (search-results.component) to center the content and potentially adapt the mel-container-lg width to the mockups to fit three cards.
There was a problem hiding this comment.
After thinking about it again, I think it's better user experience to use the grid layout and make the cards themselves responsive, instead of giving them a fixed width. This allows to use the available space no matter what size the screen has (except for very wide ones maybe). I've reworked this in 2622de3.
and do not use a fixed width => use grid display for search
by setting default to mel-primary-button
|
I've added a couple of commits, mainly reworking the card to be responsive, allowing to display them in Also fixed the mel button, when not having a Everything looks good to me now. Thanks again for the work @Angi-Kinas ! I'll let you have a last look at my changes and merge if you are fine with them. |
This PR implements the search card on the search page.
It uses the previously created favorite logic to add/ remove datasets to favorites if logged in.