Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 fix: Improved styling of highlight code blocks #72

Merged
merged 3 commits into from
Mar 18, 2022

Conversation

BeeBombshell
Copy link
Contributor

Fixes #62

Changes:

This PR resolves the styling issue previously faced while using the highlight function to create code blocks.

Screenshot of the change:

image

@jwflory jwflory self-assigned this Mar 16, 2022
@jwflory jwflory added the T: bug Something isn't working label Mar 16, 2022
Copy link
Member

@jwflory jwflory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @BeeBombshell, thanks for opening the Pull Request!

I checked this in on the Inventory theme example site and the Open Source Inventory. In both cases, I did not get the expected results.

In the Inventory theme example site, the line numbers match, but there is still a lot of space between each line:

Screenshot of Code and Syntax Highlighting section, which shows the highlighted sections aligned, but there are still newlines between each line.

In the Open Source Inventory site, the same effect (see my branch):

Screenshot from Maitainer's Guide, which shows the highlighted sections aligned, but there are still newlines between each line.

Could you narrow down the root cause for the whitespace showing up? Then this will satisfy #62.

@jwflory jwflory assigned BeeBombshell and unassigned jwflory Mar 16, 2022
@BeeBombshell
Copy link
Contributor Author

Hi @jwflory, as I mentioned earlier, there is no in-built highlight parameter to change the line spacing of the code... However, I made some changes in the style.css file which seem to fix the issue, and the outcome is as follows:

css changes

Copy link
Member

@jwflory jwflory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @BeeBombshell, the fix looks good 👍🏻 One request. Could you add a comment above the CSS addition with a link to the original issue, #62? For these CSS changes, it helps to add a short informational comment on why we are making a change the way we are.

Once the comment is in place, I am ready to merge this one 👍🏻

Copy link
Member

@jwflory jwflory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks @BeeBombshell! ✅ Merging this one in. 🌊

@jwflory jwflory merged commit bb7e2ff into unicef:main Mar 18, 2022
jwflory added a commit to unicef/coach that referenced this pull request Mar 18, 2022
This brings in the following changes:

* 🆕 💄 layouts(shortcodes): Create table layout
  (unicef/inventory-hugo-theme#70)
* 🆕 ✨ layouts(shortcodes): Add embed-pdf shortcode
  (unicef/inventory-hugo-theme#56)
* 🐛 layouts(default): Add condition to show "RA Section" when content is available
  (unicef/inventory-hugo-theme#68)
* 💄 assets(css): Make Table of Contents more appealing and responsive
  (unicef/inventory-hugo-theme#73)
* 🐛 assets(css): Fix styling of highlight code blocks
  (unicef/inventory-hugo-theme#72)

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>
jwflory added a commit to unicef/inventory that referenced this pull request May 9, 2022
This incorporates several of the new contributions made by Outreachy
applicants during the community contribution period of the internship:

* @Neha9849
* @mmldco
* @Yavnikaa
* @BeeBombshell
* @AbihaFatima

The following changes are now incorporated into O.S. Inventory site:

* unicef/inventory-hugo-theme#56 Added embed-pdf shortcode
* unicef/inventory-hugo-theme#68 Add condition to only show "RA Section" when there's content available
* unicef/inventory-hugo-theme#73 Make Table of Contents more appealing and responsive
* unicef/inventory-hugo-theme#72 Improved styling of highlight code blocks
* unicef/inventory-hugo-theme#83 Added shortcodes for CAUTION and IMPORTANT admonition
* unicef/inventory-hugo-theme#94 Highlight the background color of buttons while hovering

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>
jwflory added a commit to unicef/inventory that referenced this pull request May 9, 2022
This incorporates several of the new contributions made by Outreachy
applicants during the community contribution period of the internship:

* @Neha9849
* @mmldco
* @Yavnikaa
* @BeeBombshell
* @AbihaFatima

The following changes are now incorporated into O.S. Inventory site:

* unicef/inventory-hugo-theme#56 Added embed-pdf shortcode
* unicef/inventory-hugo-theme#68 Add condition to only show "RA Section" when there's content available
* unicef/inventory-hugo-theme#73 Make Table of Contents more appealing and responsive
* unicef/inventory-hugo-theme#72 Improved styling of highlight code blocks
* unicef/inventory-hugo-theme#83 Added shortcodes for CAUTION and IMPORTANT admonition
* unicef/inventory-hugo-theme#94 Highlight the background color of buttons while hovering

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>
Neha9849 added a commit to Neha9849/inventory-hugo-theme that referenced this pull request Jun 1, 2022
fixing the pdf view

minor fix

Update exampleSite/content/installation/elements/_index.en.md

Co-authored-by: Justin W. Flory <jflory7@gmail.com>

:lipstick: layouts(navigation): Use consistent color on all pages (unicef#58)

This commit fixes a bug where the UNICEF Blue was hard-coded into the
navigation bar, and changes that hard-coded value to use the primary
color set by the site maintainer in the Hugo config file (`params.`
`primary_color`).

Additionally, I changed the color for the translations options to use a
white color, since it is hard to read when the primary color is a darker
color.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:new: :lipstick: layouts: Add dpg-report layout (see unicef/coach#1) (unicef#44)

This commit creates a new custom layout for DPG report cards in the
UNICEF Inventory theme. DPG report cards are at-a-glance views of a
Venture Fund company's progress in meeting the DPG Standard.

More context about this change is in unicef/coach#1. This commit should
be merged once the idea is validated and the early prototyping phase is
complete.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:new: :lipstick: layouts(shortcodes): Create table layout (unicef#70)

Shortcode for a table used in unicef/inventory#125.

:new: :sparkles: layouts(shortcodes): Add embed-pdf shortcode (unicef#56)

I have added a demo of this shortcode on the `installation/elements` page. For using this Shortcode, we have to pass the name of the pdf into the shortcode as shown in the demo. The pdfs should be stored in the `static/pdfs` folder.

Fixes unicef#33.

Co-authored-by: Justin W. Flory <jflory@unicef.org>

:bug: layouts(default): Add condition to show "RA Section" when content is available (unicef#68)

Fixes unicef#30.

* Add hugo condition to only show "RA Section" when there's content available
* Modify hugo conditions to check for available content before displaying the ra section
* Fix duplication of 'RA' section bug introduce by commit e4a8438
* Refactor hugo condition reposible for fixing the bugs in both issue unicef#30 and commit e4a8438
* Undo code refactoring introduced by commit 3f534dd

Co-authored-by: Zab <zab@marmalade.co.ke>

:lipstick: assets(css): Make Table of Contents more appealing and responsive  (unicef#73)

* Complete the stated task
* Make table of contents more appealing and responsive
* Update template title
* Update layouts/partials/head.html

Commit emoji: https://gitmoji.dev/

Co-authored-by: Justin W. Flory <jflory@unicef.org>

🐛 assets(css): Fix styling of highlight code blocks (unicef#72)

* 🐛 fix: Improved styling of highlight code blocks
* Reduced whitespace between codelines using css
* 📝 docs: Added comment for CSS changes

:recycle: layouts(dpg-report): Reuse download-pdf partial (unicef#74)

The PDF download button logic was moved into a partial after this layout
was created. This refactors to use the partial and maintain less code.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:bug: :wrench: config: Removed Duplicate Home Link in Footer (unicef#80)

Fixes unicef#57.

In Footer partial, we have this:

```html
 <li><a class="nav-link text-white" href="{{ site.BaseURL | relLangURL }}">HOME</a></li>
        {{ range site.Menus.main }}
          {{if ne .Name "pages"}}
            <li class="nav-item">
              <a class="nav-link text-white text-uppercase" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
            </li>
          {{ end }}
        {{ end }}
```

In all other upstreams, we don't have Home in the Menu array but we do have it in the exampleSite. This is what causes the duplication in exampleSite. So, I have removed it from the config file of the example site.

:bug: :memo: README: Fix link for example site config (unicef#82)

An example configuration used to be bundled at the top of the repo, but
now it is included as part of the example site used in building this
theme. This commit fixes the broken link in the README.

Closes unicef#79.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:bug: :wrench: ci: Fix GH Pages push with string comparison operator

This commit changes the string comparison operator for the git user name
in the deploy script used in continuous integration. Currently the check
is checking if the string is not empty, then it overrides what was set.
We actually wanted the inverse.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:new: :memo: .github: Add contributing guidelines (unicef#86)

* 🆕 📝 .github: Add contributing guidelines

This commit adds new contributing guidelines for the UNICEF Inventory
theme. It includes four main topics:

1. Contribution process (a.k.a. governance)
2. Conventions & courtesies
3. Structure & components
4. How to create a developer environment

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

* Address @Idadelveloper feedback in PR unicef#86; s/tickets/issues/

This commit makes a few changes, mostly coming from Ida's feedback in
Pull Request unicef#86:

1. Add a note about creating a git feature branch after being assigned
   an issue.
2. Add a note to tag an issue number in the commit message(s) of a Pull
   Request.
3. Change all mentions of "ticket" to "issue" to be more clear.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

💄 Admonitions: Standardize appearance and add new shortcodes (unicef#83)

* 💄 fix: Added CAUTION admonition shortcode (closes unicef#66)
* 💄 fix: Added IMPORTANT admonition shortcode (closes unicef#64)
* 💄 fix: Added admonition icons and updated docs

* Revert IDE changes to French localized file.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

* Remove extraneous changes to index page

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

Co-authored-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

:lipstick: css: Highlight buttons on hovering (unicef#94)

Fixes unicef#90.

Type of Change:

- Code
- User Interface

📝 docs: Added table shortcode in elements page (unicef#96)

Fixes unicef#71.

This PR adds table shortcodes to the existing tables along with the documentation to the elements page.

added inventory layouts

 Added layouts of inventory
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T: bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Code blocks have too much spacing between lines
2 participants