Single button less than 200px becomes "tiny-format"

[jsmoriss]

I've been working on some CSS to align the buttons vertically by putting each button in it's own container. If the container for a single button is less than 200px wide, RRSSB formats it as "tiny".

Here's my temporary patch:

$ diff ~/svn/github/jsmoriss/rrssb/trunk/js/rrssb.js rrssb.js
135c135
<           if (containerWidth < 200) {

---
>           if ( containerWidth < $('li', self).length * 25 ) {

js.

[jsmoriss]

Actually, I think this may be better. ;-)

$ diff ~/svn/github/jsmoriss/rrssb/trunk/js/rrssb.js rrssb.js
126a127
>           var buttonCountSmall = $('li.small', self).length;
129c130
<           if (buttonWidth > 170 && $('li.small', self).length < 1) {
---
>           if (buttonWidth > 170 && buttonCountSmall < 1) {
135c136
<           if (containerWidth < 200) {
---
>           if ( containerWidth < buttonCountSmall * 20 ) {

js.

[dbox]

Mind pasting a screenshot of what you're doing?
On Fri, Jul 10, 2015 at 5:34 PM JS Morisset [email protected]
wrote:

Actually, I think this may be better. ;-)

$ diff ~/svn/github/jsmoriss/rrssb/trunk/js/rrssb.js rrssb.js
126a127

      var buttonCountSmall = $('li.small', self).length;

129c130

< if (buttonWidth > 170 && $('li.small', self).length < 1) {

      if (buttonWidth > 170 && buttonCountSmall < 1) {

135c136

< if (containerWidth < 200) {

      if ( containerWidth < buttonCountSmall * 20 ) {

js.

—
Reply to this email directly or view it on GitHub
#128 (comment).

[jsmoriss]

Without that change, any single button within a UL of 199px wide or less would turn into a tiny button. Obviously, a tiny button of 199px wide is a bit of a problem. ;-) With this change, the width must be less than "number of small buttons, multiplied by 20" pixels wide. So, if you have 10 buttons, they turn tiny when the container is 200px or less. If you have 1 button, the container must be 20px or less.

As an example, to create a floating sidebar like this, each button is in its own UL of 40px:

http://www.awesomescreenshot.com/088523cvde

js.

[dbox]

Gotcha. Yes. I have a note about this in 2.0. Thanks!!
On Sat, Jul 11, 2015 at 5:45 PM JS Morisset [email protected]
wrote:

Without that change, any single button within a UL of 199px wide or less
would turn into a tiny button. Obviously, a tiny button of 199px wide is a
bit of a problem. ;-) With this change, the width must be less than "number
of small buttons, multiplied by 20" pixels wide. So, if you have 10
buttons, they turn tiny when the container is 200px or less. If you have 1
button, the container must be 20px or less.

As an example, to create a floating sidebar like this, each button is in
its own UL of 40px:

http://www.awesomescreenshot.com/088523cvde

js.

—
Reply to this email directly or view it on GitHub
#128 (comment).

[jsmoriss]

No problem.

BTW, there will soon be an RRSSB plugin available for WordPress as an extension to WPSSO. WPSSO is a social optimization plugin that can provide the RRSSB buttons with correct URLs, titles, descriptions, images, etc. I should have it done in another week or so...

js.

[dbox]

@jsmoriss Great! We're trying to get 2.0 out the door as well here, so don't know if that will be helpful or not for you.

We just need to port the resizing functions over from 1.x to 2.0 and it should be pretty ready to go. It's a much nicer setup..

[jsmoriss]

FYI - I just released WPSSO RRSSB - an RRSSB plugin for WordPress. ;-)

https://wordpress.org/plugins/wpsso-rrssb/

js.

[dbox]

Nice! There will be a lot of happy people.

Maybe a little credit to this repo on the homepage would be nice 😉

[jsmoriss]

I was just thinking that - I was pushing to get this plugin out today and need to fill-out some of the details, like credit for the RRSSB css/js stuff. ;-)

js.

[dbox]

Cool. I'll get in in the readme soon.

[dbox]

Happy to accept a pull request if you have this fixed.

[jsmoriss]

Done. ;-)

js.

[dbox]

Great. Looking now. Thanks!

[Marc-pi]

@dbox, don't forget to update changelog/readme ;-)
great anyway

[dbox]

@Marc-pi which part?

[Marc-pi]

readme.md we are sticked to 1.8.0 ;-)

[dbox]

Ah yeah. Thanks. I think I"m just going to remove that entirely. It's all available under releases tab:

https://github.com/kni-labs/rrssb/releases

[Marc-pi]

yes, i use that page also, but i noticed that in package when reading the readme and other files