Help regarding the issue i raised

[prerna singh <ps...@gmail.com>]

Hello everyone,
I am Prerna Singh from India, an outreachy applicant for May to August 2020.
I was stuck with this issue which I raised #CAMEL-14686

Please help me regarding this.
Thank you

Re: Help regarding the issue i raised

[Zoran Regvart <zo...@regvart.com>]

Hi Prerna,
awesome, I think you're on the right track. What you're looking for to
change is in the category.css[1]. If you're running with the local
preview[2] the CSS doesn't rebuild and refresh on the website. To see
the changes you need to re-run the Antora build. I usually do this
from the root of the git repository:

$ (cd antora-ui-camel && yarn build) && yarn antora --require ./menu.js site.yml

(I'll add that to the README)

That takes a bit of time, so waiting on that to build doesn't allow me
to do quick iterations. So I don't do that frequently, probably only
when testing the changes before committing and creating a pull
request.

What I do to iterate faster is that I use the browser tooling, make
changes there and then bring them over to the CSS files.

Here is some really good documentation on how to get started in Chrome:

https://developers.google.com/web/tools/chrome-devtools/css

Or in Firefox (which I use):

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

Take note not to reload or navigate away from the page whose CSS
you're editing as the changes you make get lost.

For the task at hand I think for any sizing to apply the CSS display
needs to change to some form of inline-block, or grid/flex layout. I
find it easiest to just experiment in the browser tooling and find a
combination that works well. As I've said on the issue, the difficulty
with making the category links all the same width is that I don't
think we can set the width to a fixed value (say 10rem), as we might
have categories that need more width than that, depending on the
length of the category name.

Also please take care that you test your changes, the same category
CSS is used in the list on the left side of the blog post, at the
bottom of each blog post when presented in a list, and when listing
posts within a category. So perhaps it would make sense to scope (via
a CSS selector) only when the anchor (A) tag with the class `category`
is nested within a list item (LI), which I think is only the case when
used on the left side.

Oh, one thing that you might not be aware of, the website has a strict
content security policy[3], so you can't really use the browser tools
on the website itself, the security settings won't allow adding inline
CSS, so best work from the preview locally.

zoran

[1] https://github.com/apache/camel-website/blob/master/antora-ui-camel/src/css/category.css
[2] https://github.com/apache/camel-website/#preview-website-locally
[3] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy

On Mon, Mar 9, 2020 at 8:58 PM prerna singh <ps...@gmail.com> wrote:
>
> Hi Zoran,
> I was trying to understand the codebase. I thought it could be nice if they
> all were of same size,
> What i tried was something following:-
> antora-ui-camel -> src -> css
>
> after this i tried changing something in blog,css and category.css but
> nothing seemed to work or maybe i was not able to do it with my present
> knowledge of css. Also i was kind of thinking to  the make the letters
> change the color to something other than white when they are hovered upon
> (the blog category list items). as of now they have this thing :-
> a.category:hover {
>   color: var(--color-white);
> }
>
> Needed some guidance in this.
> Thank you
>
> On Tue, Mar 10, 2020 at 1:03 AM Zoran Regvart <zo...@regvart.com> wrote:
>
> > Hi Prerna,
> > perhaps you can elaborate on what have you tried and what did not work?
> >
> > zoran
> >
> > On Mon, Mar 9, 2020 at 5:59 PM prerna singh <ps...@gmail.com>
> > wrote:
> > >
> > > Hello everyone,
> > > I am Prerna Singh from India, an outreachy applicant for May to August
> > 2020.
> > > I was stuck with this issue which I raised #CAMEL-14686
> > >
> > > Please help me regarding this.
> > > Thank you
> >
> >
> >
> > --
> > Zoran Regvart
> >



-- 
Zoran Regvart

Re: Help regarding the issue i raised

[prerna singh <ps...@gmail.com>]

Hi Zoran,
I was trying to understand the codebase. I thought it could be nice if they
all were of same size,
What i tried was something following:-
antora-ui-camel -> src -> css

after this i tried changing something in blog,css and category.css but
nothing seemed to work or maybe i was not able to do it with my present
knowledge of css. Also i was kind of thinking to  the make the letters
change the color to something other than white when they are hovered upon
(the blog category list items). as of now they have this thing :-
a.category:hover {
  color: var(--color-white);
}

Needed some guidance in this.
Thank you

On Tue, Mar 10, 2020 at 1:03 AM Zoran Regvart <zo...@regvart.com> wrote:

> Hi Prerna,
> perhaps you can elaborate on what have you tried and what did not work?
>
> zoran
>
> On Mon, Mar 9, 2020 at 5:59 PM prerna singh <ps...@gmail.com>
> wrote:
> >
> > Hello everyone,
> > I am Prerna Singh from India, an outreachy applicant for May to August
> 2020.
> > I was stuck with this issue which I raised #CAMEL-14686
> >
> > Please help me regarding this.
> > Thank you
>
>
>
> --
> Zoran Regvart
>

Re: Help regarding the issue i raised

[Zoran Regvart <zo...@regvart.com>]

Hi Prerna,
perhaps you can elaborate on what have you tried and what did not work?

zoran

On Mon, Mar 9, 2020 at 5:59 PM prerna singh <ps...@gmail.com> wrote:
>
> Hello everyone,
> I am Prerna Singh from India, an outreachy applicant for May to August 2020.
> I was stuck with this issue which I raised #CAMEL-14686
>
> Please help me regarding this.
> Thank you



-- 
Zoran Regvart