Does your Response Flash get in the way?

[Russell]

Hi there,

A mild annoyance: Sometimes the response flash covers other text on
the screen and, when you are doing lots of testing, you are
continually clicking it to make it go away.

My suggestion is to replace web2py_ajax.html line 36:

jQuery('.flash').click(function() { jQuery(this).fadeOut('slow');
return false; });

with:

jQuery('.flash').hide().fadeIn(2000).animate({opacity: 1.0},
2000).animate({ opacity: 'hide' }, 2000);

This makes the response.flash fade in and then fade out. No clicking
required.

Thanks
Russell

[mdipierro]

The problem with that is that if the user is distracted, the message
fades out before he/she can read it.

[Sebastian Brandt]

Thnaks Russel for pointing that out. I think this is very nice.
Of course the message will be unread if the user is distracted, but
after the message is generated after user input in most cases I guess,
that should be no problem in my opinion.

Sebastian

[Thadeus Burgess]

Instead of putting a timer on response.flash, I moved its location to another location on the site that does conflict with any text.

-Thadeus

[Jonathan Lundell]

On Nov 5, 2009, at 8:52 AM, Thadeus Burgess wrote:

Instead of putting a timer on response.flash, I moved its location to another location on the site that does conflict with any text.

I like Gmail's approach to flash messages. They're not obtrusive, but they're still prominent enough to be noticed. And because they're relatively small, Google can reserve a portion of the page for them (which is otherwise white space), with the result that showing a flash message doesn't obscure other content, nor does it change the page layout. 

When I first registered at web2pyslices, I found the fade-out flash somewhat unhelpful, in that I didn't notice it until it was too late.

OTOH, web2pyslices has a dedicated area in the UI header for the flash message, which is nice.

Another thing I'd look at is to use color in the flash messages to indicate the message category. Notices of failed operations should look different from the routine "welcome back" message, IMO.

[mr.freeze]

I have increased the stay time to 8 seconds.

[Russell]

It does seem that a nice solution would be to position or shrink the
flash message on the default layout so that it is unlikely to cover
text. But it maybe we are trying to do too much with the flash
message? There are some messages that only deserve a quick 'flash' -
like 'logged in'. But there are some messages that are more important
that need to stick around. Perhaps we need two styles in the
layout...response.flash and response.notice?

[Jonathan Lundell]

I think that'd be good, or perhaps more of an API. One way to do it
would be to attach different styles to the flash, perhaps.

For my own applications, I'd like to distinguish errors from
information notices with color. Also, if an error requires that the
user do something to correct it (that is, the landing page isn't
really what the user was after), I'd be inclined to leave it up (no
fade-out), while purely informational or greeting messages that don't
require user action would fade.

[mdipierro]

well, you can do

response.flash=DIV("message",_class="error")

and handle both class "flash" and class "error" via css.

[villas]

Yes IMO the current flash is too obtrusive. I eventually got to like
the slightly quirky left pop-up menu, but the over-size flash still
grates every time. Just making it narrower would help. Yep, I know
we can alter it ourselves :-) Thanks, David

[mdipierro]

If you can send me some possible css to make it better, I will
consider changing it. The only requirement is that it should be semi
transparent and color neutral.

Massimo

[Jonathan Lundell]

On Nov 5, 2009, at 1:39 PM, mdipierro wrote:

>
> well, you can do
>
> response.flash=DIV("message",_class="error")
>
> and handle both class "flash" and class "error" via css.

That works fine if your flash html is a simple div (as it is in the
standard layout), but it doesn't work so well if you're trying to do
more with it.

Gmail's flash display, for example, puts its flash message in a
rounded-corner box (generated via a table). You can do that too using
the technique you show, but you really need a wrapper function once
the html gets more complex than a simple div (or the like).

BTW, with this method, does the <div> end up getting escaped?

[mdipierro]

no

[mdipierro]

you can do

def error(text):
return TABLE(TR(TD(text)),_class='error')

response.flash=error("what the ...!")

[Jonathan Lundell]

On Nov 5, 2009, at 8:27 PM, mdipierro wrote:

>
> you can do
>
> def error(text):
> return TABLE(TR(TD(text)),_class='error')
>
> response.flash=error("what the ...!")

Right, that's the kind of thing I was thinking of, albeit with a more
elaborate table. Then you can use a CSS selector like:

div.flash table.error { ... }

Thanks.

[mdipierro]

I like the apple notifications (like current flash but smaller,
darker, on the top right corner).

[Janath]

How can I change the location of response.flash. It overlaps with my menu items...

Thank you,

Janath

[pbreit]

It's controlled with CSS in the web2py.css file. Look for "div.flash".

With the new bootstrap support, I put this in my layout.html:

    {{if response.flash:}}

    <div class="alert">

      <button class="close" data-dismiss="alert">×</button>

      {{=response.flash}}

    </div>

    {{pass}}

Right below: <div class="container">

[Annet]

I have been struggling with the flash messages as well. At the moment I have a separate view flash.html:

{{if response.flash:}}
  <div class=" alert {{if alert:}}{{=alert}}{{else:}}{{alert-info}}{{pass}}">
    <a class="close" data-dismiss="alert">x</a>
    {{=response.flash}}
  </div> <!-- /alert -->
{{pass}}

In this view I use Bootstrap's alerts to style the flash messages. 'alert-info' is the one I use most, in case I need another alert set it in the function:

def index():
    ...
    if form.process().accepted:
        ...
        alert='alert-success'
    elif form.errors:
        alert='alert-error'
    else:
        ...
   return dict(alert=alert, ...)

In my views I simply include {{include 'flash.html'}}

This works for now, to come up with a more sophisticated way to set the alerts is on my to do list.


Annet

[Andreas Wienes]

Is Annet's solution still the best way handling flash messages?

[Derek]

It depends on what your complaint with flash is...

[Paul Ellis]

Hi Thadeus,

How did you move the flash messages?