google / docsy

A set of Hugo doc templates for launching open source content.
https://docsy.dev
Apache License 2.0
2.52k stars 881 forks source link

Feature Request: Allow customization of font+spacing in User Feedback widget #679

Open willtsai opened 2 years ago

willtsai commented 2 years ago

In the configuration for the User Feedback Widget, I would like to have the ability to customize the font size and spacing of the text. Attached is a screenshot example where the ability to reduce the font size and add a larger top margin for the widget text would allow for some separation between the core content on the page and the User Feedback widget near the page footer.

image

narrenfrei commented 2 years ago

I don't think, that a manually correction of the space is really the best way. In my opinion, we should try that the space between "real content" and the feedback widget is correct by default.

Could you share links to a correct space and also to a page with too small space?

narrenfrei commented 2 years ago

I took a look on this page of your Dapr Docs: https://docs.dapr.io/getting-started/

There is already too little space after the Button "First step: Install the Dapr CLI >>" now. So you have to increase the margin-bottom of this button and not the margin-top of the feedback widget. For example, by giving the button the class mb-4.

willtsai commented 2 years ago

The tight margins on the buttons is something I can look into for sure (might actually be the intentional shortcoded button design). However, I still feel that in a lot of pages, the spacing in between the page content and Feedback wizard is too small. I think this is especially pronounced for pages that end with a shorter paragraph, like the one below.

I don't think that going through page by page to audit and add more spacing where necessary per page is the way I'd like to address this, so in my mind there are two options without needing to edit each page individually:

  1. Have the ability to configure the margins/spacing for the Feedback wizard itself (I prefer this because then the extra margin space for core content will only be added when it's needed, i.e. when Feedback wizard is introduces)
  2. Configure overall website page margins to add a little more spacing at the bottom margin to accommodate footer type content like Feedback wizard (need to investigate how to do this, but I prefer this less as I'd be modifying core content to accommodate Feedback wizard, which then needs to be remembered to be undone should someone choose to remove the Feedback wizard in the future)

Thanks for looking into this, -Will

https://docs.dapr.io/contributing/contributing-overview/ image

narrenfrei commented 2 years ago

If really a option for page individually more margin is needed, I'd prefer to add a parameter to add HTML classes to the feedback widget or complete page. (If we don't have such an option already.) So styling can be done by CSS.

But before I add such an option, I would like to get the OK from @LisaFC (or someone else from the "Core-Team"), wether my suggestion is in the sense of the project.

LisaFC commented 2 years ago

Hmm, interesting. I wonder is the default spacing between the main text and the Feedback Widget just too tight in general - I'm not sure if we thought about it that much when we added it - so might be something to just change as the default rather than make configurable (without making it so far down that users miss it without scrolling)? Or maybe add a line before it?

willtsai commented 2 years ago

I agree with changing it as the default rather than make it configurable. I would suggest adding two lines before it just to ensure that there is additional separation so as to not make the widget look like an additional paragraph and part of the core content.

narrenfrei commented 2 years ago

I would add margin-top: 2rem to the div of the feedback.

But as this div has only the class d-print-none, I would also add an class to the div like td-feedback.

I've also recognized that thee feedback has inline CSS, which should packed into the global stylesheet.

@LisaFC OK?