Refactor of Scoped CSS

[EliasMasche]

Initial PR of the process for Scoped CSS

[linkdotnet]

This might be "dangerous" as it now targets every "img" whereas it was scoped to the component before. so probably you want something like actions-img or so?

[EliasMasche]

Understood, gonna check that issue

[linkdotnet]

Currently the bUnit tests are red, as you "renamed" the CSS selectors

[EliasMasche]

Currently the bUnit tests are red, as you "renamed" the CSS selectors

So I rename it back to the original or update the bUnit tests?

[linkdotnet]

Currently the bUnit tests are red, as you "renamed" the CSS selectors

So I rename it back to the original or update the bUnit tests?

I would do the latter

[EliasMasche]

Removed the empty razor css files and added one that I missed.

An issue that remains is at home, the introduction hasn't show up yet of IntroductionCard.razor.css into home.css
and the CSS of PreviewImage.razor.css into components.css not being functional either

src/LinkDotNet.Blog.Web/wwwroot/css/home.css

[linkdotnet]

Removed the empty razor css files and added one that I missed.

An issue that remains is at home, the introduction hasn't show up yet of IntroductionCard.razor.css into home.css and the CSS of PreviewImage.razor.css into components.css not being functional either

src/LinkDotNet.Blog.Web/wwwroot/css/home.css

Hmm that might be because of --profile-background. Even though it should work. If you open your devtools and check the value of --profile-background is there something useful?

[linkdotnet]

There are some smaller tests that refer to the "old" structure:

 var items = cut.FindAll(".profile-keypoints li");

[EliasMasche]

Removed the empty razor css files and added one that I missed.
An issue that remains is at home, the introduction hasn't show up yet of IntroductionCard.razor.css into home.css and the CSS of PreviewImage.razor.css into components.css not being functional either
src/LinkDotNet.Blog.Web/wwwroot/css/home.css

Hmm that might be because of --profile-background. Even though it should work. If you open your devtools and check the value of --profile-background is there something useful?

Based on dev tools the profiles images are loaded correctly but don't show up on the page

How it works: -profile-picture, -profile-image, .introduction-container, .introduction-background. This is my first time seeing this, and I am super new to dealing with CSS, I feel I am missing something.

Another bug is with PreviewImageRazor for blogposts that takes over the entire space and locks

The css is img that I renamed to comp-img the code is PreviewImage.razor in the HTML code uses the img tag how to rename properly or refactor for taking into account the proper CSS code

@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
{
    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
}
else
{
    <picture>
        <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
        <img src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
    </picture>
}

[EliasMasche]

There are some smaller tests that refer to the "old" structure:

 var items = cut.FindAll(".profile-keypoints li");

Do you need me to update them and search for other CSS renames too?

[EliasMasche]

Another bug is with PreviewImageRazor for blogposts that takes over the entire space and locks

The css is img that I renamed to comp-img the code is PreviewImage.razor in the HTML code uses the img tag how to rename properly or refactor for taking into account the proper CSS code

@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
{
    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
}
else
{
    <picture>
        <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
        <img src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
    </picture>
}

About this portion of the issue with PreviewImage.razor I did progress adding

.img-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.comp-img {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

For PreviewImageUrl works as before using <div class="img-container"> and class="comp-img"

    <div class="img-container">
        <img class="comp-img" src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" /> 
    </div>

For PreviewImageUrlFallback is not working as in PreviewImageUrl.

    <div class="img-container">
        <picture>
            <source srcset="@PreviewImageUrl" type="@GetMimeType()" />
            <img class="comp-img" src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
        </picture>
    </div>

but for some reason now stopped working haha the PreviewImageUrl too

[linkdotnet]

There are some smaller tests that refer to the "old" structure:

 var items = cut.FindAll(".profile-keypoints li");

Do you need me to update them and search for other CSS renames too?

We have to make the tests work in one way or another. In this regard, the selector has to be aligned to the new "prefix" added.

[linkdotnet]

I have to checkout the branch later locally. I tried inside GitHub Codespaces and I got some 404 for the images. Not sure if this is because of GitHub Codespace or it showcases the underlying issue on why the images aren't showing up.

[linkdotnet]

@EliasMasche I took the opportunity to push to your PR. Hope you don't mind.

[EliasMasche]

@EliasMasche I took the opportunity to push to your PR. Hope you don't mind.

Yeah, no problem. the only issue that remains is the home/introduction CSS, right?

[linkdotnet]

@EliasMasche I took the opportunity to push to your PR. Hope you don't mind.

Yeah, no problem. the only issue that remains is the home/introduction CSS, right?

Technically, yes. So of course everything should work as before, but overall I would like to go a step further, otherwise we just moved the CSS from one file to another.

Ideally:

1. We can refactor many of the custom CSS classes to bootstrap 5 utility classes
2. Consolidate the rest. There is much overlap in the content of those classes which can be moved together.
3. Have then only one basic.css (well and the icon.css) to reduce the initial browser load.

[linkdotnet]

Just a small heads-up, for me the profile picture loads just fine, but the ShortBlogPost is a bit "different":

[linkdotnet]

The navbar items seem a bit closer than they were before and lost their "bold" font.

[linkdotnet]

Should also be fixed. Now the interesting part starts: Consolidating :D
That is where I see the real value in the PR and ticket

[EliasMasche]

Roger that.

I checked your commits. I pulled into my local branch, and the CSS works now, but I am getting a 404 for the images.
Reason: strict-origin-when-cross-origin

@EliasMasche I took the opportunity to push to your PR. Hope you don't mind.

Yeah, no problem. the only issue that remains is the home/introduction CSS, right?

Technically, yes. So of course everything should work as before, but overall I would like to go a step further, otherwise we just moved the CSS from one file to another.

Ideally:

1. We can refactor many of the custom CSS classes to bootstrap 5 utility classes

2. Consolidate the rest. There is much overlap in the content of those classes which can be moved together.

3. Have then only one `basic.css` (well and the `icon.css`) to reduce the initial browser load.

The end goal is to put all CSS into basics.css, refactor and reduce the custom CSS classes with bootstrap 5 utility classes.

That is where I see the real value in the PR and ticket

Good thing this time I put the PR as draft as it is more of a proposal and WIP.

[linkdotnet]

Interesting. By any chance, do you have a chrome based browser to cross-check if it happens there as well?
If so, if you go to "my website": steven-giesel.com - do you see the image? The difference is that the image on my website is hosted on a Blob storage and not as part of the application.

Good thing this time I put the PR as draft as it is more of a proposal and WIP.

No worries - that is part of the process. Issues/PR's are async in nature and therefore are more likely to have misunderstandings and whatnot.

[EliasMasche]

Yeah, same issue coming from Edge Browser,

What it dislikes is that it comes from the same application but a different domain or locally triggering CORS if I use it from another website/domain, or blob storage works fine.

[EliasMasche]

Hello there, sorry ( but may not be sorry) for the disappearance. I got relocated to a new team, a new project with an impossible deadline, so I wasn't able to work.

So now I pushed a new commit, redoing the rename of a class of CSS as it wasn't necessary, I believed they had the same name, I put them all inside basics.css

A question about the bootstrap, this sentence: We can refactor many of the custom CSS classes to Bootstrap 5 utility classes

Where can I find more information, or is it referring to the internal CSS classes of Bootstrap 5

[linkdotnet]

Hey hey - don't worry. OSS has to make space for other priorities so I totally get that and there is no need to apologize.

Where can I find more information, or is it referring to the internal CSS classes of Bootstrap 5

Sometimes I added stuff like padding: 4px or so. Which "should" be bootstrap utility classes like "p-1" (see: https://getbootstrap.com/docs/5.0/utilities/spacing/)

Or grid/flex layout can be solely described via Bootstrap's utility classes. There was often no need to create custom CSS.

[EliasMasche]

I started making some changes to Bootstrap. What is the plan?

Besides, in this commit based on bootstrap, there are two ways to keep the custom class or use an inline. Checking through the repo, this is the only instance, so I guess using an inline CSS is fine
10e8472 (#413)

And I am already triggering some fails in tests because the HTML classes are missing in the razor files. For the moment, I am working on replacing them with Bootstrap but keeping the custom classes in basics.css for fallback. I will compare if the appearance is working as well as the old one, and once I am done, I will remove those custom classes.

[linkdotnet]

I started making some changes to Bootstrap. What is the plan?

I am not sure if I understand correct? What do you mean by that?

Besides, in this commit based on bootstrap, there are two ways to keep the custom class or use an inline. Checking through the repo, this is the only instance, so I guess using an inline CSS is fine
10e8472 (#413

If we keep stuff then still as classes. That is fine. If we see a chance to remove the custom CSS, that would be great, if not - then let's keep it as it is.

For the moment, I am working on replacing them with Bootstrap but keeping the custom classes in basics.css for fallback

Why would we need them as fallback? Sure, the tests have to be adopted and that is unfortunately a bit of a shortcoming on the current test-setup that it uses too much the concrete CSS classes. But that is a whole different story :D so for now it might be the best, to change failing ones to the new classes to it still targets the same object.

[EliasMasche]

I am not sure if I understand correct? What do you mean by that?

You replied this question in the second, I was asking or trying to ask if I should refactor until it is done or not possible to do it.

Why would we need them as fallback? Sure, the tests have to be adopted and that is unfortunately a bit of a shortcoming on the current test-setup that it uses too much the concrete CSS classes. But that is a whole different story :D so for now it might be the best, to change failing ones to the new classes to it still targets the same object.

Sorry, what I mean is I still keep the old custom CSS classes for the time being for testing if the new HTML bootstrap CSS classes are working properly. Once I finish, I will do the cleaning. I am keeping a list of the custom CSS classes and commenting as I progress with the refactor

[EliasMasche]

I did some progress overall, trying to match or mimic the appearance from custom CSS classes with Bootstrap 5 and with that able to reduce LoS in basic.css, the .blog-card class still not able to achieve progress or at least fully replace it but did at minor places, the rest took time.

There is this new warning:

Error: /Users/runner/work/Blog/Blog/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor(42,20): error S1144: Remove the unused private property 'IntroductionStyle'. (https://rules.sonarsource.com/csharp/RSPEC-1144) [/Users/runner/work/Blog/Blog/src/LinkDotNet.Blog.Web/LinkDotNet.Blog.Web.csproj]

• Is it free to remove safely without any collateral damage?
• Is it fine that I check the rest of the HTML classes based on Bootstrap 4 and update them to 5? I think I found some that are using the semantics of 4

About the tests, how is gonna be the progress going to be?

[linkdotnet]

Sorry for the late answer - I try to find some time next week for this and give you a proper answer to your questions

[EliasMasche]

No problemo, as you once wrote, there is time for open-source, sometimes must side step for other priorities.

At least I know still alive the process ^^

[EliasMasche]

It seems that I closed the PR by accident when I replied because I don't remember doing it.

I pushed new commits based last version, refactoring the razor.css files and relocating what is not possible to refactor to Bootstrap 5 utility classes. I feel there could be reduced even more, but I am not experienced with CSS.

A summary of what css it keeps:

• ShortBlogPost.razor: the entire CSS got relocated to basics.css
• Profile.razor: it kept profile-keypoints and minor ones
• IntroductionCard.razor: I use a mix of inline style for background-image and custom CSS to not trigger CORS while using local assets. There is a minor difference between the old razor.css and now, where the background image has been cut up. For example, in the older the background image shows the rocks and mouth of a cat, while this one is cut earlier
• TabbedNavigation: still has its custom CSS
• SearchInput: Reduced CSS, a minor difference is that the circle bar is thinner or darker, or both
• ReadingIndicator: keeps the custom CSS because it ReadingIndicator.razor.js depends on it

[linkdotnet]

For example this is why some of the tests are failing.
There is a test looking for .skill-tag inside tests.
So we have two options:

1. Add again .skill-tag here without the backing razor.css (kind of just as a marker)
2. Or replace skill-tag with d-inline-block me-2 my-2 px-2 py-1 rounded bg-light`

I would go for the first approach - as it makes the tests more readable

[EliasMasche]

I prefer first approach too, gonna check the unit tests for others more.

[linkdotnet]

Also checked out your version locally - it is in a good shape. There are some noticeable differences (some we have to flatten out) to the current state.

[EliasMasche]

Roger that, if you find some differences, tell me so I can fix them, I noted some of the differences that I listed them probably are more

[EliasMasche]

I got to work and reverted the changes in some CSS classes to remove the regressions in the visual aspect UI, including the ones for tests.

I found 3 regressions on the UI, two in the AboutMe and one in the NavMenu.razor

1. Missing spacing between the Menus on NavMenu.razor, ( they abandoned this place and relocated to the Table )

2. The UI button of Skills relocated from the right to the top of the text item of AddProfileShortItem.razor

3. Double Border Box inside the Skill. I thought it might be a missing CSS element in SkillTag.razor, but that didn't work either. I checked the skill-table, and it's not there either.

About the yellow ?, where is about the new spacing for Add Skill and Add Talk buttons, feels better IMO, but is different from the old version, where it was touching. To keep or remove the spacing.

And about the location of the + button AddProfileShortItem.razor feels weird, that is under and not at the right, a small inconsistency with the top behavior and UI from removing a listed item.

[EliasMasche]

Returning to this issue, I notice a different behavior from CSS when it is relocated from *.razor.css to basics.css regarding the three visual difference points.
#413 (comment)

I created this new branch to test. The only changes were moving all razor CSS to basics.css as is, and they get replicated these 3 different behaviors at the UI from CSS

https://github.com/EliasMasche/Blog/tree/refact

With the padding or spacing of NavBarMenu buttons to look closer at the old appearance, is using --bs-navbar-nav-link-padding-x: 1.0rem; at :root

[linkdotnet]

Hey @EliasMasche thanks for the hard work and reminding me to answer. I am currently overwhelmed with other tasks and can't really put much time into this. feel free to continue, but it might take a while until I can answer properly

[linkdotnet]

Hey @EliasMasche - sorry for the long pause. Given all the "issues" we discovered with the approach of moving it into central files - is it really worth the effort if it might break left and right?

[EliasMasche]

Hello there, @linkdotnet is fine, I wasn't able to check much either through the month because I was dealing with the curves that life has been throwing me.

About the question of worth, I think it is fine as is and will not break anymore; only these three issues remain:

About 1. and 2. tried to fix, but weren't able to identify which CSS code or line is breaking the appearance. A detail of issue 2. is that the code is double-drawing the box, so probably rewrite or revamp with a new appearance

3. I was able to fix or remake the old behavior with spaced navmenu --bs-navbar-nav-link-padding-x: 1.0rem; at :root

The rest of CSS code got relocated to the central CSS basics.css without any other issues so far.

This week I was gonna resume and verify what I could do or remake the CSS, but I didn't know what or how to progress

[EliasMasche]

Hello there, I have been able to make some progress to replicate/fix the old appearance or behavior of CSS code with the *.razor.css files

• For the issue of double line with profile-keypoints adding display: flex; under .profile-keypoints li

• For the spacing adding style="--bs-navbar-nav-link-padding-x: 1rem;" on <div class="container-fluid"> on NavMenu.razor

• For the double border or different color, I identified that it happens only when ShowAdminActions is @true, meaning when you are logged in, for readers or visits, it will show as normal, showcased in the pics and here, for example, I disable padding with the inspector of the browser, the padding and the outer radius is gone.

I feel there is an inherent issue or missing CSS code for the proper adjustment of the behavior when logged.

[linkdotnet]

I think if we have to explicitly overwrite the bootstrap style, we are better off setting it into a custom class with higher specificity. Otherwise a minor update of bootstrap and the solution breaks

[EliasMasche]

Placing at#navbarSupportedContent and .nav-link the custom class for handling the padding is gonna be enough for avoiding that situation of breaking at updates?

#navbarSupportedContent .nav-link {
	padding-left: 1rem;
	padding-right: 1rem;
}

[linkdotnet]

Padding-left and right would be "px-3" so you could just add that.

[linkdotnet]

Aka: We can stay in the bootstrap world

[linkdotnet]

@EliasMasche if something isn't visually working, we can also rollback part of the changes have the *.razor.css - that is no problem.

ALso if you feel that things is somewhat ready, you can press the button ;)

[EliasMasche]

@linkdotnet, the remaining behavior visually that differs is at the box padding of the SkillTag, I believe, but only when you are logged in.

Logged out, visits work properly. Do I rollback that CSS code, or keep it as is, and everything else is ready, so I press that button

[linkdotnet]

Okay - I would prefer if we rollback the changes then.
Also there seems to be a merge conflict from a different feature (multiple blog authors). Afterwards I'll have a final look and we can get that bad boy into master!

[EliasMasche]

Reverted to the razor.css file. Regarding the merge conflict, I leave it in your hands, or I will check.