[RFC|Merged] notification box

[EXreaction]

I will look into it, thanks

[EXreaction]

If you're a githubber, you can download it from Github... There is a Pull Request for it by EXreaction, you can follow that PR to his branch and you could download that branch and demo it locally for yourself that way.

As for rounded corners, they would look like this. Any opinions from people here?

Screen Shot 2012-12-28 at 8.11.09 PM.png

Can you think of any way of making the date field more distinct from the title? Nils suggested it https://github.com/phpbb/phpbb3/pull/99 ... n_r2997648

[MattF]

Can you pull the date out of the href anchor tag, so it it just inherits the style's regular text color, which is different from linked text colors?

[MattF]

Also, it might be good to put this in front of the date: »

ie: Blah blah blah
» Mon Dec 24, 2012 6:23 pm

[EXreaction]

Is there any way to position it from the bottom of the element? So if there is extra space it stays on the bottom, but if not it has some amount of padding from the text above it?

[Jessica.]

Also, it might be good to put this in front of the date: »

ie: Blah blah blah
» Mon Dec 24, 2012 6:23 pm

+1 to this

[MattF]

Is there any way to position it from the bottom of the element? So if there is extra space it stays on the bottom, but if not it has some amount of padding from the text above it?

The best you could probably do is add a little top-padding to the date <p> tag (both overall_header and ucp_notifications), so that there will always be some space between the text and the date, even though it won't necessarily always be bottom aligned.

I would suggest padding-top: 8px; if you do that. That will make it appear to be bottom aligned in most cases. It definitely helps it stand apart from the title too.

See:

screen2.jpg (52.19 KiB) Viewed 8876 times

[imkingdavid]

I have no input on the current discussion, but I just wanted to say that based on that screenshot, that looks awesome. So nice job everyone involved.

One thing I want to add though, is that I don't think we should remove the link to the private messages page. We don't necessarily need the unread count, but at least retaining the link is a good idea because people are used to being able to have one-click access to the PM inbox page. As it is in the PR, from what I can tell, you have to click into the UCP link and then the Private Messages tab (which afaik defaults to the compose page, unless a certain PR was merged, I can't remember) and finally the Inbox link.

[EXreaction]

VSE+, I didn't like just adding padding because when the message is more than two lines it starts adding too much space I think. There isn't any way to do this with position?

imkingdavid, I think it would be nice if we made this identical flyout menu for Private Messages, but I guess we should just use something like [ 0 Messages ] and have it a simple link for now.

[MattF]

VSE+, I didn't like just adding padding because when the message is more than two lines it starts adding too much space I think. There isn't any way to do this with position?

Nope.

The first issue using position is with left-alignment and the avatars--you need to know if there will be an avatar or not, and use different left position numbers depending on that.

Second, in the event of three or more lines of text (it's possible), then you could get overlapping text if you use position to fix the date to the bottom.

Third, you need to know the heights of the enclosing div element ahead of time too, and those have to be fixed in the CSS--but since the content can vary, the enclosing div is actually variable, so we can't always know the height of the elements involved. You could use min-height, but then you run into issues with old IE and lack of support for min-height, and even then, you still get overlap issues with three or more lines.

So you can either have a defined padding (as I have tried), no padding (the current way), or you could get kinda silly with it and add in some PHP logic to determine if it will exceed two lines and then add or remove the padding based on the conditions. Of course even this would not be a good idea since we are not using mono-spaced fonts, so the number of characters until you reach three lines varies depending on what those characters are.

So really, it's either padded or non-padded.