norlab/paperbuzz_viz_test

paperbuzz_viz_test's Issues

CSS can cause conflicts when embedded

Hi @norlab, I came to this repo from @jalperin's, and noticed something in the implementation that one of my PKP colleagues is building for OJS now.

In this screenshot you can see some CSS code (.title) effecting the styles of non-paperbuzz elements on a page where papebuzz is embedded.

Several of the selectors could probably be more tightly scoped to prevent style bleed:

https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L1
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L11-L12
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L18
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L23
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L27
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L108
https://github.com/norlab/paperbuzz_viz_test/blob/master/css/paperbuzzviz.css#L112

The use of a prefix for most classes , as you've done (.paperbuzz-*), is usually good enough. But if you have elements which you can't change the class name of, maybe because it's built in a dependency, I'd encourage you to use a wrapper. Something like:

.paperbuzz .bar {
  ...
}

The icomoon font is another potential source of conflicts. I think the risk here is lower but since icomoon is a popular service, it's definitely possible that you'd conflict with another font named icomoon. I believe the icomoon app lets you define the font family name when generating the files, so it might be worth naming it paperbuzz just to be safe.

All just suggestions. Nice work. 👍

Mini Viz Icons and Counts

The goal is to create a mini-viz (see js code lines 65-124) that has similar components to the viz for an individual author on impactstory (see the small box labeled "Timeline" here).

I am having difficulty adding the logos and counts to the current mini-viz. My attempt to create this is found on lines 116-121, but something isn't quite right (obviously needs to offset for each logo - but I can't even get a single logo to appear).