aboutsummaryrefslogtreecommitdiff
path: root/views/default
diff options
context:
space:
mode:
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-09-30 11:47:05 +0000
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-09-30 11:47:05 +0000
commit96713356dc066fc039b445dcf92d874a47d871f0 (patch)
tree66eb775fcf92fa186ca5357165f4a1f4ba86f99a /views/default
parent6212bf32bd4738d7d85b232ffac964a4a18f1189 (diff)
downloadelgg-96713356dc066fc039b445dcf92d874a47d871f0.tar.gz
elgg-96713356dc066fc039b445dcf92d874a47d871f0.tar.bz2
Messages/error notification system updated with dismiss button, longer delay, and sticky/fixed position (at top of viewport).
git-svn-id: https://code.elgg.org/elgg/trunk@2150 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'views/default')
-rw-r--r--views/default/css.php44
-rw-r--r--views/default/messages/errors/list.php17
-rw-r--r--views/default/messages/messages/list.php18
3 files changed, 62 insertions, 17 deletions
diff --git a/views/default/css.php b/views/default/css.php
index 60bb2a441..712168834 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -4,6 +4,8 @@
* Elgg CSS
* The standard CSS file
*
+ * Updated 30Sept - new messages/notifcation system
+ *
* @package Elgg
* @subpackage Core
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
@@ -633,25 +635,51 @@ h6 { font-size: 0.8em; }
SYSTEM MESSSAGES
*************************************** */
.messages {
- border:1px solid #00cc00;
background:#ccffcc;
color:#000000;
padding:3px 10px 3px 10px;
- margin:20px 20px 0px 20px;
z-index: 9999;
- position:absolute;
+ /* border:1px solid #00cc00; */
+ /* margin:20px 20px 0px 20px; */
+ /* position:absolute; */
/* width:611px; */
- width:936px;
+ /* width:936px; */
+ margin:0;
+ position:fixed;
+ top:-60px;
+ width:969px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border:4px solid #00CC00;
}
.messages_error {
- border:1px solid #D3322A;
+ border:4px solid #D3322A;
background:#F7DAD8;
color:#000000;
padding:3px 10px 3px 10px;
- margin:20px 20px 0px 20px;
z-index: 9999;
- position:absolute;
- width:936px;
+ /* margin:20px 20px 0px 20px; */
+ /* position:absolute; */
+ /* width:936px; */
+ margin:0;
+ position:fixed;
+ top:-60px;
+ width:969px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+}
+.closeMessages {
+ float:right;
+ margin-top:17px;
+}
+.closeMessages a {
+ color:#666666;
+ cursor: pointer;
+ text-decoration: underline;
+ font-size: 80%;
+}
+.closeMessages a:hover {
+ color:black;
}
diff --git a/views/default/messages/errors/list.php b/views/default/messages/errors/list.php
index 6af962d73..b9784fb2b 100644
--- a/views/default/messages/errors/list.php
+++ b/views/default/messages/errors/list.php
@@ -19,13 +19,22 @@
?>
<!-- used to fade out the system messages after 3 seconds -->
<script>
- $(document).ready(function () {
- $('.messages_error').animate({opacity: 1.0}, 3000) //this holds the div without change for 3 seconds
- $('.messages_error').fadeOut('slow'); //fade it out
- });
+$(document).ready(function () {
+ $('.messages').animate({top:"3px", opacity: 1.0}, 1000);
+ $('.messages').animate({opacity: 1.0}, 6000);
+ $('.messages').fadeOut('slow');
+
+ $('span.closeMessages a').click(function () {
+ $(".messages").stop();
+ $('.messages').fadeOut('slow');
+ return false;
+ });
+
+});
</script>
<div class="messages_error">
+ <span class="closeMessages"><a href="#">dismiss message</a></span>
<?php
foreach($vars['object'] as $error) {
diff --git a/views/default/messages/messages/list.php b/views/default/messages/messages/list.php
index 2554112b6..02825b705 100644
--- a/views/default/messages/messages/list.php
+++ b/views/default/messages/messages/list.php
@@ -19,14 +19,22 @@
?>
<!-- used to fade out the system messages after 3 seconds -->
<script>
- $(document).ready(function () {
- $('.messages').animate({opacity: 1.0}, 3000) //this holds the div without change for 3 seconds
- $('.messages').fadeOut('slow'); //fade it out
- });
+$(document).ready(function () {
+ $('.messages').animate({top:"3px", opacity: 1.0}, 1000);
+ $('.messages').animate({opacity: 1.0}, 6000);
+ $('.messages').fadeOut('slow');
+
+ $('span.closeMessages a').click(function () {
+ $(".messages").stop();
+ $('.messages').fadeOut('slow');
+ return false;
+ });
+
+});
</script>
<div class="messages">
-
+ <span class="closeMessages"><a href="#">dismiss message</a></span>
<?php