PageRenderTime 44ms CodeModel.GetById 15ms app.highlight 26ms RepoModel.GetById 1ms app.codeStats 0ms

/data/html/event-log.html

http://github.com/hbons/SparkleShare
HTML | 326 lines | 271 code | 53 blank | 2 comment | 0 complexity | 80465060245383a1b0490d2949bbce7c MD5 | raw file
  1<!doctype html>
  2<html>
  3    <head>
  4        <title>SparkleShare Event Log</title>
  5        <script type="text/javascript">
  6          <!-- $jquery -->
  7        </script>
  8
  9        <script type="text/javascript">
 10          $(document).ready(function () {
 11
 12              // Update the Today and Yesterday labels after midnight
 13              var midnight_interval = setInterval (function(){
 14                var date = new Date();
 15
 16                if ((date.getTime() / 1000) >= <!-- $midnight -->) {
 17                  $("#today").html($("#today").attr("name"));
 18                  $("#yesterday").html($("#yesterday").attr("name"));
 19
 20                  clearInterval(midnight_interval);
 21                }
 22              }, 60 * 1000);
 23
 24          
 25              $('.comments-section').each (function () {
 26                if ($(this).find ('.comments').children ().size () < 1) {
 27                  $(this).hide ();
 28                }
 29              });
 30
 31              $('.buddy-icon').each (function () {
 32                if ($(this).css('backgroundImage').indexOf ('@') != -1) {
 33                  $(this).css ('backgroundColor', '#fff');
 34                }
 35              });
 36
 37              // Show the form when 'Add note' is clicked
 38              $('.note').click(function () {
 39                 $(this).parent ().find ('.comments-section').show ();
 40              });
 41
 42              // Hide the 'Show all' link when there are less than 10 events
 43              $('.show').each (function () {
 44                var entries = $(this).parent ().find ('dl').children ().length;
 45
 46                if (entries <= 10) {
 47                  $(this).hide ();
 48                } else {
 49                  // Append the number of entries
 50                  $(this).html ('Show all ' + entries);
 51                }
 52              });
 53
 54              // When 'Show all' is clicked, show all collapsed events
 55              $('.show').click(function () {
 56                 $(this).parent ().find ('dl').children ().show ();
 57                 $(this).hide ();
 58              });
 59
 60              $("input").click(function () {
 61                 textarea = $(this).parent ().find ('textarea');
 62                 text = textarea.val ();
 63
 64                 if (text == '')
 65                     return;
 66
 67                 // Clear the textarea
 68                 textarea.val ('');
 69
 70                 table = $(this).parent ().find (".comments");
 71                 comments = table.html ();
 72
 73                 // Add the note to the html
 74                 comments += '<div class="comment-text">' +
 75                             '<p class="comment-author"' +
 76                             ' style="background-image: url(\'<!-- $user-avatar-url -->\');">' +
 77                             '<!-- $username --></p>' +
 78                             text +
 79                             '</div>';
 80
 81                 table.html (comments);
 82
 83                 // Feed the note to the backend
 84                 location = this.id + '~' + text;
 85              });
 86          });
 87        </script>
 88
 89        <style>
 90            * {
 91                box-sizing:         border-box;
 92                -webkit-box-sizing: border-box;
 93            }
 94
 95            body {
 96                background-color: #fff;
 97                color:            <!-- $body-color -->;
 98                font-size:        <!-- $body-font-size -->;
 99                font-family:      <!-- $body-font-family -->;
100                margin:           0;
101                padding:          18px;
102                -webkit-user-select: none;
103            }
104
105            small {
106                font-size: <!-- $small-font-size -->;
107                color:     <!-- $secondary-font-color -->;
108            }
109
110            .moved-arrow {
111                color: <!-- $secondary-font-color -->;
112            }
113
114            .comment-text {
115                font-size: 90%;
116                padding: 12px;
117                background-color: #FFF4DB;
118                margin-bottom: 2px;
119            }
120
121            .day-entry-header {
122                color: #aaa;
123                margin-left: auto;
124                margin-right: auto;
125                display: block;
126                text-align: center;
127                margin-bottom: 36px;
128                font-weight: bold;
129            }
130
131            .day-entry-content .event-entry:last-child {
132                border: none;
133            }
134                        
135            a {
136                color:           <!-- $a-color -->;
137                text-decoration: none;
138            }
139
140            a:hover {
141                color: <!-- $a-hover-color -->;
142            }
143
144            .event-timestamp {
145                float: left;
146                font-size: 80%;
147                color: <!-- $secondary-font-color -->;
148            }
149
150            .event-user-name {
151                float: left;
152                font-weight: bold;
153            }
154
155            .event-folder {
156                float: right;
157                color: <!-- $secondary-font-color -->;
158            }
159
160            .event-entry {
161                margin-bottom: 24px;
162                padding-bottom: 24px;
163                border-bottom: 1px  <!-- $secondary-font-color --> solid;
164                width: 95%;
165                margin-left: auto;
166                margin-right: auto;
167                padding-left: 72px;
168                padding-right: 12px;
169                background-repeat: no-repeat;
170                background-position: 12px top;
171                display:        block;
172            }
173
174            .action {
175                font-size: 80%;
176                margin-left: 15px;
177                float: right;
178                margin-bottom: 9px;
179                color: <!-- $a-color -->;
180            }
181
182            .action:hover {
183                color: <!-- $a-hover-color -->;
184                cursor: pointer;
185            }
186
187            .clearer {
188                clear: both;
189                backround-color: blue;
190                margin: 0;
191                padding: 0;
192                height: 0;
193            }
194
195            .separator {
196                clear: both;
197                border-bottom: 1px #ccc solid;
198                margin-top: 24px;
199                margin-bottom: 24px;
200            }
201
202            dl {
203                padding : 0;
204                margin:  0;
205                margin-bottom: 12px;
206                padding-top: 6px;
207                clear: both;
208            }
209            
210            dd {
211                display: none;
212                overflow:            hidden;
213                text-overflow:       ellipsis;
214                width:               90%;
215                padding:             0;
216                padding-top:         2px;
217                padding-bottom:      2px;
218                padding-left:        20px;
219                margin:              0;
220                margin-bottom:       1px;
221                background-repeat:   no-repeat;
222                background-position: center left;
223            }
224
225            dl dd:nth-child(-n+10) {
226                display: block;
227            }
228
229            .document {
230                text-overflow: ellipsis;
231                width: 100%;
232                white-space: nowrap;
233            }
234
235            .added {
236                background-image: url('<!-- $document-added-background-image -->');
237            }
238
239            .deleted {
240                background-image: url('<!-- $document-deleted-background-image -->');
241            }
242
243            .edited {
244                background-image: url('<!-- $document-edited-background-image -->');
245            }
246
247            .moved {
248                background-image: url('<!-- $document-moved-background-image -->');
249            }
250
251            .no-buddy-icon {
252                position: relative;
253                top: 0;
254                left: 0;
255                float:               left;
256                margin-right:        12px;
257                width:               48px;
258                background-image:    url('<!-- $no-buddy-icon-background-image -->');
259                background-repeat:   no-repeat;
260                background-position: top center; 
261            }
262
263            .buddy-icon {
264                width:            48px;
265                height:           48px;
266            }
267
268            .comments {
269                width: 100%;
270                font-size: 90%;
271                margin-bottom: 9px;
272            }
273
274            .comment-author {
275                font-size: 90%;
276                font-weight: bold;
277                margin: 0;
278                margin-bottom: 9px;
279                background-repeat: no-repeat;
280                background-position: bottom left;
281                background-size: 24px;
282                height: 24px;
283                padding-left: 30px;
284                line-height: 24px;
285            }
286
287            .comment-timestamp {
288                color: <!-- $secondary-font-color -->;
289                text-align: right;
290            }
291
292            .comment-button {
293                float:right;
294                margin-top: 6px;
295            }
296
297            .comment-textarea {
298                box-sizing:         border-box;
299                -webkit-box-sizing: border-box;
300                width:              100%;
301                height:             3em;
302                padding-bottom:     6px;
303            }
304
305            .comments-section {
306                box-sizing:         border-box;
307                -webkit-box-sizing: border-box;
308                width:              100%;
309            }
310
311            .comments-wrapper {
312                box-sizing:         border-box;
313                -webkit-box-sizing: border-box;
314                width:              100%;
315                margin-top: 12px;
316            }
317
318            .comment-text {
319                padding-bottom: 15px;
320            }
321        </style>
322    </head>
323    <body>
324        <!-- $event-log-content -->
325    </body>
326</html>