estum / growlyflash

Growl-styled flash messages for Ruby on Rails and Bootstrap
MIT License
58 stars 34 forks source link

Issue in centering the alert #13

Closed Dinuz closed 9 years ago

Dinuz commented 9 years ago

@estum

First of all thanks so much for this great gem.

I noticed that the plugin works fine with different screen size, using the bootstrap responsive functionalities.

Unfortunately the only issue that I have found is related with the horizontal centering of the alert when the width of the screen size become smaller (in my case happen around 400px). In that condition, the calculation for the left-margin are wrong, and always kind of short (the alert instead of been centered is just displaced on the right side of the screen).

I have a proposal to avoid this type of issue (ant it can work for the horizontal and eventually the vertical centering of the alert in the screen). To me this make kind of sense, in this way the user always have centered the message (anyway, either in fixed or in absolute position, it is out of the flow of the page and not breaks the layout - it works a bit as a modal).

Using the following library: https://github.com/tysonmatanich/viewportSize

we can easily integrate a viewportsize functionality in the code, and doing something like I do with modal object:

function modal_on_show(modal_element) {
    modal_element.on('show', function(event) {
        if(event.target === this){
            $('body').css({'overflow-y' : 'hidden'});
            var modal = $(this);

            var width = viewportSize.getWidth();
            var height = viewportSize.getHeight();

            modal.css('margin-top', ((height - modal.outerHeight()) / 2))
           .css('margin-left', ((width - modal.outerWidth()) / 2))
           .css('left', 0+'px')
           .css('top', 0+'px');

          return this;
        }
    });
}

What do you think? we can just translate this idea in coffee if you prefer.

Best Dinuz

estum commented 9 years ago

@Dinuz Thanks for that information. In my projects I just set fixed width for alerts on mobile devices, but your solution looks more universal, I would like to try it.

Dinuz commented 9 years ago

@estum This sounds great! Thanks for the fast answer:) Do you need some help?

Sent from my iPhone

On Dec 20, 2014, at 11:04 AM, Tõnis Simo notifications@github.com wrote:

@Dinuz Thanks for that information. In my projects I just set fixed width for alerts on mobile devices, but your solution looks more universal, I would like to try it.

— Reply to this email directly or view it on GitHub.