diff options
| -rw-r--r-- | view/theme/testbubble/nav.tpl | 21 | ||||
| -rw-r--r-- | view/theme/testbubble/style.css | 135 |
2 files changed, 123 insertions, 33 deletions
diff --git a/view/theme/testbubble/nav.tpl b/view/theme/testbubble/nav.tpl index 80bcfbeb1..dc16d40eb 100644 --- a/view/theme/testbubble/nav.tpl +++ b/view/theme/testbubble/nav.tpl @@ -3,13 +3,16 @@ <span id="banner">$banner</span> - <div id="notifications"> - {{ if $nav.network }}<a id="net-update" class="nav-ajax-update" href="$nav.network.0" title="$nav.network.1"></a>{{ endif }} - {{ if $nav.home }}<a id="home-update" class="nav-ajax-update" href="$nav.home.0" title="$nav.home.1"></a>{{ endif }} - {{ if $nav.notifications }}<a id="intro-update" class="nav-ajax-update" href="$nav.notifications.0" title="$nav.notifications.1"></a>{{ endif }} - {{ if $nav.messages }}<a id="mail-update" class="nav-ajax-update" href="$nav.messages.0" title="$nav.messages.1"></a>{{ endif }} + <div id="notifications"> + {{ if $nav.network }}<a rel="#nav-notifications-menu" id="net-update" class="nav-ajax-update" href="$nav.network.0" title="$nav.network.1"></a>{{ endif }} + {{ if $nav.home }}<a rel="#nav-notifications-menu" id="home-update" class="nav-ajax-update" href="$nav.home.0" title="$nav.home.1"></a>{{ endif }} + {{ if $nav.notifications }}<a rel="#nav-notifications-menu" id="intro-update" class="nav-ajax-update" href="$nav.notifications.0" title="$nav.notifications.1"></a>{{ endif }} + {{ if $nav.messages }}<a rel="#nav-notifications-menu" id="mail-update" class="nav-ajax-update" href="$nav.messages.0" title="$nav.messages.1"></a>{{ endif }} + <ul id="nav-notifications-menu" class="menu-popup"> + <li class="empty">$emptynotifications</li> + </ul> </div> - + <div id="user-menu" > <a id="user-menu-label" onclick="openClose('user-menu-popup'); return false" href="$nav.home.0">$sitelocation</a> @@ -48,8 +51,8 @@ {{ if $nav.logout }}<li><a id="nav-logout-link" class="nav-commlink nav-sep $nav.logout.2" href="$nav.logout.0">$nav.logout.1</a></li> {{ endif }} </ul> </div> - - - </nav> +<ul id="nav-notifications-template" style="display:none;" rel="template"> + <li><a href="{0}">{2} <span class="notif-when">{3}</span></a></li> +</ul> diff --git a/view/theme/testbubble/style.css b/view/theme/testbubble/style.css index 03f50762b..5e31a2c8a 100644 --- a/view/theme/testbubble/style.css +++ b/view/theme/testbubble/style.css @@ -375,10 +375,10 @@ ul#user-menu-popup li a.nav-sep { border-top: 1px solid #989898; border-style:in padding-left: 11px; /*display: none;*/ } -#net-update { background-position: 0px 0px; } +#net-update { background-position: 0px -126px; } #mail-update { background-position: 0px -40px; } #intro-update { background-position: 0px -84px; } -#home-update { background-position: 0px -126px; } +#home-update { background-position: 0px 0px; } #lang-select-icon { cursor: pointer; @@ -845,15 +845,12 @@ profile-jot-banner-wrapper { border-bottom: 1px solid #dedede; margin-top: 20px; padding-right: 10px; + padding-left: 12px; + overflow: hidden; } .wall-item-outside-wrapper-end { clear: both;} -.wall-item-content-wrapper { - position: relative; - max-width: 100%; - word-wrap: break-word; -} - +.wall-item-content-wrapper { position: relative; max-width: 100%; } .wall-item-photo-menu { display: none;} .wall-item-photo-menu-button { display:none; @@ -1197,8 +1194,7 @@ div[id$="wrapper"] br { clear: left; } #profile-listing-new-link-wrapper { float: left; - display: inline-block; - clear: right; + display: inline; width: 130px; margin-left:5px; margin-top: 20px; @@ -1256,8 +1252,8 @@ div[id$="wrapper"] br { clear: left; } } .profile-match-wrapper { - width: 80%; - padding: 15px; + width: 82%; + padding: 5px; margin-bottom:10px; margin-left: 20px; background-color: #f6f6f6; @@ -1734,6 +1730,48 @@ margin-left: 0px; border: 1px solid #dddddd; } +/* ================= */ +/* = Notifications = */ +/* ================= */ + +/*#notification-show-hide-wrapper { + width: 160px; + -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf; + -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf; + box-shadow:inset 0px 1px 0px 0px #cfcfcf; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) ); + background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2'); + background-color:#bdbdbd; + -moz-border-radius:5px; + -webkit-border-radius:5px; + border-radius:5px; + padding: 5px 10px 5px 10px; + margin-right: 5px; + margin-top: 10px; + font-style: bold; + color: #efefef; + text-align: center; +} + +#notification-show-hide-wrapper:hover { + color: #efefef; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) ); + background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808'); + background-color:#b20202; +} + +#notification-show-hide-wrapper:active { + background-color: #b20202; + position:relative; + top:1px; +} + +#notification-show-hide-wrapper a { + color: #efefef; +}*/ + /* ============ */ /* = Contacts = */ /* ============ */ @@ -2028,7 +2066,7 @@ margin-left: 0px; border-radius:5px; padding: 5px 10px 5px 10px; color: #efefef; - font-size: 1em; + font-size: 1.2em; text-align: center; } @@ -2187,12 +2225,7 @@ margin-left: 0px; .settings-submit-wrapper, .profile-edit-submit-wrapper { margin: 30px 0px;} -.profile-listing { - float: left; - clear: left; - display: inline; - margin: 20px 20px 0px 0px; -} +.profile-listing { float: left; clear: both; margin: 20px 20px 0px 0px} #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; } @@ -2256,10 +2289,6 @@ margin-left: 0px; #group-edit-desc { margin: 10px 0xp; } #group-new-text {font-size: 1.1em;} -#prof-members-title,#prof-all-contcts-title { - margin-top: 10px; - margin-bottom: 5px; -} #group-members, #prof-members { width: 83%; @@ -2972,4 +3001,62 @@ a.active { color:#efefef; padding: 5px 10px 5px 10px; margin-right: 5px; -}
\ No newline at end of file +} + +/* notifications popup menu */ +.nav-notify { + display: none; + position: absolute; + font-size: 10px; + padding: 1px 3px; + top: 0px; + right: -10px; + min-width: 15px; + text-align: right; +} +.nav-notify.show { + display: block; +} +ul.menu-popup { + position: absolute; + display: none; + width: 10em; + margin: 0px; + padding: 0px; + list-style: none; + z-index: 100000; + top: 40px; +} +#nav-notifications-menu { + width: 320px; + max-height: 400px; + overflow-y: scroll; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) ); + background:-moz-linear-gradient( center top, #797979 5%, #898988 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988'); + background-color:#a2a2a2; + -moz-border-radius:0px 0px 5px 5px; + -webkit-border-radius:0px 0px 5px 5px; + border-radius:0px 0px 5px 5px; + border: 1px solid #9A9A9A; + border-top: none; + -moz-box-shadow: 5px 5px 10px #242424; + -webkit-box-shadow: 5px 5px 10px #242424; + box-shadow: 5px 5px 10px #242424; + +} +#nav-notifications-menu .contactname { font-weight: bold; font-size: 0.9em; } +#nav-notifications-menu img { float: left; margin-right: 5px; } +#nav-notifications-menu .notif-when { font-size: 0.8em; display: block; } +#nav-notifications-menu li { + padding: 7px 10px 7px 10px; + word-wrap:normal; + border-bottom: 1px solid #626262; +} + +#nav-notifications-menu li:hover { + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) ); + background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808'); + background-color:#b20202; +} |