Add colors modifier to choose the color of the item tag.

Recent changes since Sep last year haven't been released to NPM yet.
Could you please do that? I'd like to use the 'no-headers' class...
Thanks! 🙂

HI @Wikiki

I've noticed that you use GPLv3 license, but Bulma uses MIT. As far as I known, GPLv3 forces all the code on which the GPL part is used to become GPL. Maybe this reduces the use of the extensions as it can impose some restrictions to adopting extensions on private software scenarios.

Other option would be switch to LGPLv3, as it forces only your code as GPL, but allow all other parts to be anything else.

This would apply to all Bulma extensions.

Best regards

bulma 0.6.2 and fontawesome v5.0.11

source

<div class="timeline-marker is-icon is-success">
  <i class="fas fa-plus"></i>
</div>

result

Add the possibility to use html content as item tag (for example: user picture)

Dear,

Using bulma css + this great timeline, i'm using the timeline in , when large text is populated there is no automatic line return, it expand on right without horizontal scroll.
Any idea ?

Regards

At the time of writing, there's a 3.0.0 on npmjs but there's no such release in GitHub.

Are there breaking backwards compat changes?

I'm using vue.js and have no clue how to use this plugin. Please tell us

<div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-title">January 2021</div>
    <div class="timeline-content">
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
</code>

Thank you for all these amazing bulma extensions btw, huge work!

Variabalize borders and sizes

Fixed by #62

"is-centered-desktop" for example, to center the timeline only on desktop and above and have it aligned left on mobile devices.

Hi @Wikiki. I have noticed (on the extension website) that the timeline-marker element with icon is awry displayed after the latest update (see screenshot below):

I use the Opera 46.0 browser. Hope it'll help.

I'm using those packages:

{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.0",
    "bulma": "^0.9.4",
    "bulma-switch": "^2.0.4",
    "bulma-timeline": "^3.0.5"
  },
  "devDependencies": {
    "nuxt": "^3.0.0-rc.12",
    "sass": "^1.55.0",
    "sass-loader": "^10.3.1"
  }
}

with this configuration:

export default defineNuxtConfig({
    css: [
        "bulma",
        "bulma-switch",
        "bulma-timeline",
        "~/assets/styles/main.css",
        "@fortawesome/fontawesome-free/css/all.min.css",
    ],
});

So I expect that executing npm run dev start compilation of bulma.sass, bulma-switch.sass and bulma-timeline.sass and injecting build output. But compiler give me this error:

 ERROR  [sass] Undefined variable.                                                                                                                                                          12:18:12
  ╷
2 │ $timeline-marker-color: $grey-lighter !default
  │                         ^^^^^^^^^^^^^
  ╵
  node_modules/bulma-timeline/src/sass/index.sass 2:25  root stylesheet

I've see that in package.json of bulma-timeline package there's "bulma": "^0.9.3" and the var undeclared is $grey-lighter that is declared in the https://github.com/jgthms/bulma/blob/0.9.3/sass/utilities/derived-variables.sass file from that bulma dist.

I'm missing something in my toolchain?

Edit 1: I've already use rm -rf .nuxt .output dist node_modules and npm cache clean --force before install.

The NPM package seems to have been updated on Nov 3, 2017. However, the commits from Nov 1, 2017 which include a fix for the left half of timeline going out of alignment when .is-centered is used, are not in the NPM package.

Please update the package. :)

Is there any undocumented support for a horizontal timeline, rather than a vertical timeline?

very slight but enough to trigger the OCD

duplicate of Wikiki/bulma-extensions#78

If a header is too long, it stays centered on the axe of the timeline, and so the left part of the header goes out of the window.

Windows 10/ Chrome

example:

this one was given .timeline-item.is-success

and again given .timeline-item.is-primary

Assuming I've created some custom colors like so:

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
@import "~bulma/sass/utilities/derived-variables";

$revenue: #19B99A;
...others

$revenue-invert: findColorInvert($revenue);
...others

$addColors: (
    "revenue":($revenue, $revenue-invert),
    ...others
);

$colors: map-merge($colors, $addColors);

@import "~bulma/bulma";
@import "~bulma-timeline";

Is there any way to get the timeline (and other extensions, like tooltips) to pick up my custom colors, so I can do things like timeline-item is-revenue?

The custom colors work across the rest of Bulma, but it seems they aren't picked up by the extensions.

Any thoughts? Thanks!

Edit: It seems if I import the sass file directly then my custom colors are picked up: @import "~bulma-timeline/dist/css/bulma-timeline"; Is this the correct way to do it? Should I be importing this file or the index.sass file from the src directory? FWIW this is in a React/Django project with Webpack. Please do let me know if there's any info I can clarify for you. Thanks!

Hi, I only saw .sass files in this release, I noticed an older release had a .css file in the dist folder.
I'm not sure if it's an accident or on purpose - just to let you know!

Thanks, great work!

The right elements only on a is-centered timeline have their timeline-marker a little too on the right.
I think a position left of -43em (instead of -35em) renders better.

The left blocks of the timeline stay on the left of the window and are not stick to the timeline.

You can reproduce it by removing the code section next to the example in the doc.

Just displaying "...", breaking the timeline to show up a period of time undescribed on purpose.

Thank you for all these amazing bulma extensions btw, huge work!

Hi @Wikiki

I don't know where to ask for this, so I'm asking here.

Could you keep a repository with all extensions and a version number for easy integration with other projects as well easy modifications tracking?

I've created a repo using yours as submodules (https://github.com/giflw/bulma-extensions-all). You can use it as you wish. If you want, I can give pull access to it. But would be nice to have the all extensions repo under your username.

Best regards

I bumped the version of bulma-timeline in my project to 1.0.0, but something seems a little off. For instance, I don't see this change in the release: #13 In package.json, the version is indeed 1.0.0 but main points at index.js:

  ...

  "main": "index.js",
  "name": "bulma-timeline",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Wikiki/bulma-timeline.git"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "version": "1.0.0"
}

I may have done something weird but I wanted to flag it just in case.