nigelotoole / progress-tracker Goto Github PK

@NigelOToole First off, YOU ROCK!!! This is the cleanest, easiest to implement progress tracker I have ever seen.

I am including your library in the Webform module for Drupal 8.

Someone just created an issue noting that RTL is not supported.

I hoping that you would just need to tweak the progress bar's layout based on the [dir="rtl"] attribute.

To allow users to load the progress tracker via a CDN would you consider adding a compiled CSS to the repos.

Currently, the only work-around is to use CSS included in the /docs/styles.

@see https://cdn.jsdelivr.net/gh/NigelOToole/[email protected]/docs/styles/progress-tracker.css

As the active step of this component is only visually conveyed by the existence of the is-active class, consider adding support for aria-current="step" to communicate to assistive technologies the current step.

Explainer on aria-current

as an example:

<li aria-current="step" class="is-active"> ... </li>

( if not replacing the .is-active as the styling selector :) )

Thanks!

Getting an error when using node-sass with progress-tracker. Some details:

$ node --version
v14.18.3

$ node-sass --version

node-sass	7.0.1	(Wrapper)	[JavaScript]
libsass  	3.5.5	(Sass Compiler)	[C/C++]

Using a minimal test.scss file containing just one line:

@import "node_modules/progress-tracker/src/styles/progress-tracker.scss";

Error:
$node-sass test.scss

{
  "status": 1,
  "file": "/tmp/test/node_modules/progress-tracker/src/styles/progress-tracker/_progress-tracker-variables.scss",
  "line": 19,
  "column": 30,
  "message": "Invalid CSS after \"...hird: ceil(math\": expected expression (e.g. 1px, bold), was \".div($marker-size, \"",
  "formatted": "Error: Invalid CSS after \"...hird: ceil(math\": expected expression (e.g. 1px, bold), was \".div($marker-size, \"\n        on line 19 of node_modules/progress-tracker/src/styles/progress-tracker/_progress-tracker-variables.scss\n        from line 1 of node_modules/progress-tracker/src/styles/progress-tracker.scss\n        from line 1 of test.scss\n>> $marker-size-third: ceil(math.div($marker-size, 3));\n\n   -----------------------------^\n"
}

I think that it would be better to move the mixins in their own file.
This would facilitate the inclusion of just the mixins where they are needed and also in custom styles that a consumer can create.
Hope I made myself clear ;-)

Hi

Great work. It would be great to have this available to pull via Bower.

Kind regards,
Enoque

RTL is still not supported in the plugin .Can u please check it .The separate css file for RTL was commented. i uncommented it . Still not working

Hey there, I love this project! Not being extremely familiar with sass, I tried to do a basic tweak on the demo, adding background-color: gray; to the container class, and found that the entire flex-grow part became hidden.

I searched through the CSS and tweaked it in the console, but I was unable to get it to be visible again. What would be the best way to go around changing the background-color underneath via CSS (or SASS)? Currently I have a hacky solution involving rgba(255,255,255,.6) for example, but that also damages the progress tracker slightly.

In the 2.0 branch of the progress tracker, the 'app' directory containing a built version of progress-tracker.css was removed.

The progress tracker is being used by the Drupal Webform module and the Drupal community does not assume a site is using SASS. I can see that the docs directory includes progress-tracker.css without RTL support.

Would you be able to provide a compiled CSS to makes it easier for projects to use the progress tracker?

The two immediate options are to include RTL support in /docs/styles/progress-tracker.css or restore /progress-tracker/app/styles/progress-tracker.css with RTL.

I know the third option would be for me to build and include a copy of the progress-tracker.css in the Webform module. I feel this approach takes away from making sure you get the credit you deserve for solving a common problem by creating and maintaining this project.

seems rtl does not work, could you please support that?
thanks

I'm trying to make this work with Angular and I'm having a lot of trouble with how the stylesheets seem to be different depending on whether you are looking at the documentation page, or looking in various places in the repo. But that's besides the point. I notice that newer versions of this use a data-text attribute on the .progress-marker to put a very small amount of textual content in the circle.

This seems to have really limited the opportunity to put anything in the circle other than a single character.

Is there a way to get icons in there, at the very least? I'm attempting to put font awesome unicode in the data-text attribute, but the translation from a data-text to the stylesheet using that string to define the content of the .progress-marker::before is just not working.

I've tried different approaches to escaping the backslash, and just can't get it. Would you be able to do this another way? Also, what was the motivation behind doing the content of the circle through a data-text attribute as opposed to just letting the innerHTML of the .progress-marker be the content of the circle like here: https://molonglo.org.au/libraries/progress-tracker/#/ (is this a really old version of your documentation???)

just like jenkins pipeline parallels stage: