Looks great - I might be wrong but I think @wilsonge said that there should be no fontawesome dependencies in the front end

Looks great - I might be wrong but I think @wilsonge said that there should be no fontawesome dependencies in the front end

@brianteeman thanks. Wasn't aware of no font-awesome dependency in the frontend. I will have to refactor the display of mime-type to something else. Perhaps included svg. Some else instead of that ugly image form 1995. :-)

Would be great to have an svg, as now also the alert icons are with svg. #30516

The structure looks good.

I have a question regarding the icon

The icon is used to indicate the mime type.

But... how does it get there? How or what and where is this mime being set?

I have tested this item ✅ successfully on b2fec88

That is much more better than before as well from the HTML-structural point of view as from readability

Only the taxonomy objects without styling looks a bit irritating

@paternax

Only the taxonomy objects without styling looks a bit irritating

I agree on that one. With current styling it draws too much attention. Do you have a suggestion how we can improve it?

Looks great - I might be wrong but I think @wilsonge said that there should be no fontawesome dependencies in the front end

your correct, but does that mean that we can't use fa in front-end? Or just that core function must work irregardless of icon- or fa- seamlessly.
@wilsonge can you clarify the intent please?

we would have quite a problem if fontawesome is not to be used in frontend

Just edit an article for example and Insert an another article through CMS Content => Article.
The modal contains 3 fontawesome icons.
fas fa-search
fas fa-angle down
fas fa-check

In the edit interface of the article also
fas fa-eye is used for toggle editor
fas fa-edit for modules edit
fas fa-times for Cancel
fas fa-code-branch for Versions
etc.

and also when inserting image
fas fa-upload
fas fa-folder
fa fa-search-minus
fas fa-search-plus
fas fa-info
fa fa-list

• the harcoded content for media which also use fontawesome.

I miss for sure a few others.

@hans2103 change the class name from __ to _ . It's very unusual to use 2.
our discussion with @wilsonge about icon handling is going to effect how this all plays out.

@hans2103 change the class name from __ to _ . It's very unusual to use 2.
our discussion with @wilsonge about icon handling is going to effect how this all plays out.

Using __ and -- comes from the BEM methodology and is implemented in com_finder with commit #20861
I'm just extending the use of it through all elements with classes in the search result.

Why reinvent the wheel while Google did a lot of research how to display a search result. The com_finder display of a search result dates back to 2011 and haven't been changed since.
(image of initial description has been replaced)
Two screenshots of new com_finder search results. One with mime icon and one without mime type icon. Mime type is dynamical.

updated the initial description of this commit so testers can directly see what to expect.

I have tested this item ✅ successfully on 89c6f72

It looks very good, much more clearer and more legible

and with that change I would like to ask @paternax to test this PR again. :-)

I have tested this item ? unsuccessfully on 22f2574


Spacing is not quite right. We need more space below each entry ( yellow ) and consistent spacing in file path ( red )

I have tested this item ? unsuccessfully on 22f2574

Spacing is not quite right. We need more space below each entry ( yellow ) and consistent spacing in file path ( red )

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.

it seems that you forgot to run the command npm run build:css

I have tested this item ✅ successfully on 22f2574

I can't confirm the results of NGREJ. It looks very good. I would only put a bit more space between the URL and the title and bit less space between the title and the introtext

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

Result of testing:

@N6REJ

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

That's a matter of taste I think. For me it's a bit awkward to see different spacing above and below the horizontal line. I've tried it on my test environment and resulted in equal spacing in the end.

Thank you @paternax and @N6REJ for testing.

I would only put a bit more space between the URL and the title and bit less space between the title and the introtext.

I've equalized spacing between elements. (Just like spacing between elements in Google result item are the same)

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

Haven't changed spacing between items.

Due to this new commit all tests have to be done again.

Played with the results though... when adding the following in your local css you can change the looks of the result items to cards.

li.result__item {
    background-color: hsl(0, 0%, 96%);
    border-radius: .5rem;
    padding: 1.5em;
    box-shadow: 0 0 0.125em 0.125em hsl(0, 0%, 36%);
}
li.result__item + .result__item {
    border: 0;
}

I have tested this item ✅ successfully on 0791571

I have tested this item ✅ successfully on 0791571

The search results have never looked better

RTC

@Hackwar
Is this PR OK for you?

Thanks!