Skip to content

Commit 86d1fb8

Browse files
ArisoturaArisotura
committed
Autorefreshing notification list.
1 parent 913b0a8 commit 86d1fb8

File tree

5 files changed

+130
-112
lines changed

5 files changed

+130
-112
lines changed

‎ajaxcallbacks.php

+5
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,11 @@ function checkForImage(&$image, $external, $file)
198198
$blah = FetchResult("select views from {misc}");
199199
die(number_format($blah));
200200
}
201+
else if ($action == 'no') // notification list
202+
{
203+
$notif = getNotifications();
204+
die(json_encode($notif));
205+
}
201206

202207
die(__("Unknown action."));
203208
?>

‎css/common.css

+13-104
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* AcmlmBoard XD - Shared elements */
22

3+
@import url('mobile.css');
4+
35
.newMarker
46
{
57
width: 2.5em!important;
@@ -50,90 +52,6 @@ body
5052
padding-right: 2px;
5153
}
5254

53-
/* mobile shit */
54-
55-
#mobile-crumbs
56-
{
57-
margin: 0 0 1em;
58-
}
59-
60-
#mobile-crumbs th
61-
{
62-
text-align: left!important;
63-
}
64-
65-
#mobile-crumbs a
66-
{
67-
display: inline-block;
68-
padding-top: 1em;
69-
padding-bottom: 1em;
70-
}
71-
72-
#mobile-crumbs button
73-
{
74-
line-height: 2em;
75-
font-weight: bold;
76-
height: 3em;
77-
width: 3em;
78-
}
79-
80-
#mobile-crumbs button.notifs
81-
{
82-
background: #c00;
83-
color: white;
84-
border-color: #f44;
85-
}
86-
87-
#mobile-sidebar-container
88-
{
89-
position: absolute;
90-
top: 0;
91-
left: 0;
92-
width: 100%;
93-
height: 100%;
94-
max-width: 100%;
95-
max-height: 100%;
96-
z-index: 99998;
97-
}
98-
99-
#mobile-sidebar-deactivate
100-
{
101-
position: absolute;
102-
top: 0;
103-
left: 0;
104-
right: 14em;
105-
height: 100%;
106-
max-height: 100%;
107-
z-index: 99999;
108-
}
109-
110-
#mobile-sidebar
111-
{
112-
position: absolute;
113-
top: 0;
114-
right: 0;
115-
width: 14em;
116-
height: 100%;
117-
max-width: 90%;
118-
max-height: 100%;
119-
overflow: scroll;
120-
z-index: 99999;
121-
}
122-
123-
#mobile-sidebar td div
124-
{
125-
width: 13em;
126-
word-wrap: break-word;
127-
}
128-
129-
#mobile-sidebar td.link a
130-
{
131-
display: block;
132-
padding: 0.5em;
133-
}
134-
135-
.mobileNotif span.nobr { white-space: normal!important; }
136-
13755
/* force header and footer to be the smallest possible */
13856
#main-header, #main-footer
13957
{
@@ -169,14 +87,6 @@ a
16987
text-decoration: none;
17088
font-weight: bold;
17189
}
172-
a, a span
173-
{
174-
-o-transition: color .2s ease-in-out;
175-
-ms-transition: color .2s ease-in-out;
176-
transition: color .2s ease-in-out;
177-
-moz-transition: color .2s ease-in-out;
178-
-webkit-transition: color .2s ease-in-out;
179-
}
18090

18191
a img
18292
{
@@ -223,17 +133,9 @@ a:hover span
223133
display:inline-block;
224134
}
225135

226-
/* Name color table */
227-
.nc0x { color: #888888; } .nc1x { color: #888888; } .nc2x { color: #888888; }
228-
.nc00 { color: #97ACEF; } .nc10 { color: #F185C9; } .nc20 { color: #7C60B0; }
229-
.nc01 { color: #D8E8FE; } .nc11 { color: #FFB3F3; } .nc21 { color: #EEB9BA; }
230-
.nc02 { color: #AFFABE; } .nc12 { color: #C762F2; } .nc22 { color: #47B53C; }
231-
.nc03 { color: #FFEA95; } .nc13 { color: #C53A9E; } .nc23 { color: #F0C413; }
232-
.nc04 { color: #5555FF; } .nc14 { color: #FF5588; } .nc24 { color: #FF55FF; }
233-
.nc05 { color: #FF0000; } .nc15 { color: #FF0000; } .nc25 { color: #FF0000; }
234-
235136

236137
/* Widths */
138+
/* TODO REMOVE ME */
237139
.width100
238140
{
239141
width: 100%;
@@ -538,7 +440,7 @@ ul.dropdownMenu li > a
538440
to { -webkit-transform: scale(2,2); }
539441
}
540442

541-
#notifMenuButton #notifCount
443+
#notifMenuContainer #notifCount
542444
{
543445
color: white;
544446
text-shadow: none;
@@ -547,7 +449,7 @@ ul.dropdownMenu li > a
547449
display: inline-block;
548450
}
549451

550-
#notifMenuButton.hasNotifs #notifCount
452+
#notifMenuContainer.hasNotifs #notifCount
551453
{
552454
background: #c00;
553455
border: 1px solid #f44;
@@ -567,12 +469,19 @@ ul.dropdownMenu li > a
567469
-webkit-animation-timing-function: linear;
568470
}
569471

570-
#notifMenuButton.noNotif #notifCount
472+
#notifMenuContainer.noNotif #notifCount
571473
{
572474
background: #777;
573475
border: 1px solid #999;
574476
}
575477

478+
/* hide the dropdown arrow and notif menu if there are no notifications */
479+
#notifMenuContainer.noNotif #notifMenuButton i,
480+
#notifMenuContainer.noNotif ul.dropdownMenu
481+
{
482+
display: none;
483+
}
484+
576485
/* Breadcrumbs */
577486

578487
table.breadcrumbs, table.breadcrumbs > tbody > tr > th

‎css/mobile.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
#mobile-crumbs
3+
{
4+
margin: 0 0 1em;
5+
}
6+
7+
#mobile-crumbs th
8+
{
9+
text-align: left!important;
10+
}
11+
12+
#mobile-crumbs a
13+
{
14+
display: inline-block;
15+
padding-top: 1em;
16+
padding-bottom: 1em;
17+
}
18+
19+
#mobile-crumbs button
20+
{
21+
line-height: 2em;
22+
font-weight: bold;
23+
height: 3em;
24+
width: 3em;
25+
}
26+
27+
#mobile-crumbs button.notifs
28+
{
29+
background: #c00;
30+
color: white;
31+
border-color: #f44;
32+
}
33+
34+
#mobile-sidebar-container
35+
{
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
width: 100%;
40+
height: 100%;
41+
max-width: 100%;
42+
max-height: 100%;
43+
z-index: 99998;
44+
}
45+
46+
#mobile-sidebar-deactivate
47+
{
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
right: 14em;
52+
height: 100%;
53+
max-height: 100%;
54+
z-index: 99999;
55+
}
56+
57+
#mobile-sidebar
58+
{
59+
position: absolute;
60+
top: 0;
61+
right: 0;
62+
width: 14em;
63+
height: 100%;
64+
max-width: 90%;
65+
max-height: 100%;
66+
overflow: scroll;
67+
z-index: 99999;
68+
}
69+
70+
#mobile-sidebar td div
71+
{
72+
width: 13em;
73+
word-wrap: break-word;
74+
}
75+
76+
#mobile-sidebar td.link a
77+
{
78+
display: block;
79+
padding: 0.5em;
80+
}
81+
82+
.mobileNotif span.nobr { white-space: normal!important; }

‎js/tricks.js

+24-2
Original file line numberDiff line numberDiff line change
@@ -254,8 +254,7 @@ function startOnlineUsers()
254254

255255
function getOnlineUsers()
256256
{
257-
//$("#onlineUsers").load(boardroot+"ajaxcallbacks.php", "a=ou&f=" + onlineFID + "&salt=" + Date())
258-
//$("#viewCount").load(boardroot+"ajaxcallbacks.php", "a=vc&f=" + onlineFID + "&salt=" + Date())
257+
// view count
259258
$.get(boardroot+"ajaxcallbacks.php", "a=vc", function(data)
260259
{
261260
var viewCount = $("#viewCount");
@@ -265,6 +264,8 @@ function getOnlineUsers()
265264
viewCount.html(data);
266265
}
267266
});
267+
268+
// online users
268269
$.get(boardroot+"ajaxcallbacks.php", "a=ou&f=" + onlineFID, function(data)
269270
{
270271
var onlineUsers = $("#onlineUsers");
@@ -274,6 +275,27 @@ function getOnlineUsers()
274275
onlineUsers.html(data);
275276
}
276277
});
278+
279+
// notifications
280+
$.getJSON(boardroot+"ajaxcallbacks.php", "a=no", function(data)
281+
{
282+
var notiflist = '';
283+
for (var i=0; i < data.length; i++)
284+
notiflist += '<li>' + data[i].text + '<br><small>' + data[i].formattedDate + '</small>';
285+
286+
$('#notifList').html(notiflist);
287+
288+
if ($('#notifCount').html() != data.length)
289+
{
290+
$('#notifCount').html(data.length);
291+
292+
$('#notifMenuContainer').removeClass('noNotif hasNotifs');
293+
if (data.length)
294+
setTimeout(function(){$('#notifMenuContainer').addClass('hasNotifs');},20); // need to do it later so the CSS animation plays
295+
else
296+
$('#notifMenuContainer').addClass('noNotif');
297+
}
298+
});
277299
}
278300

279301

‎templates/pagelayout.tpl

+6-6
Original file line numberDiff line numberDiff line change
@@ -45,20 +45,20 @@
4545
{/foreach}
4646
</ul>
4747
</div>
48-
<div id="notifMenuContainer" class="dropdownContainer">
49-
{$numnotifs=count($notifications)}
50-
<div id="notifMenuButton" class="navButton {if $numnotifs}hasNotifs{else}noNotif{/if}">
48+
{$numnotifs=count($notifications)}
49+
<div id="notifMenuContainer" class="dropdownContainer {if $numnotifs}hasNotifs{else}noNotif{/if}">
50+
<div id="notifMenuButton" class="navButton">
5151
Notifications
5252
<span id="notifCount">{$numnotifs}</span>
53-
{if $numnotifs}<i class="icon-caret-down"></i>{/if}
53+
<i class="icon-caret-down"></i>
5454
</div>
55+
<ul id="notifList" class="dropdownMenu">
5556
{if $numnotifs}
56-
<ul class="dropdownMenu">
5757
{foreach $notifications as $notif}
5858
<li>{$notif.text}<br><small>{$notif.formattedDate}</small>
5959
{/foreach}
60-
</ul>
6160
{/if}
61+
</ul>
6262
</div>
6363
<span class="navButton">
6464
<a href="#" onclick="$('#logout').submit(); return false;">Log out</a>

0 commit comments

Comments
 (0)