~bhavesh-goyal093/postorius/dashboard
» Revision
284
: src/postorius/templates/postorius/user_dashboard.html
« back to all changes in this revision
Viewing changes to src/postorius/templates/postorius/user_dashboard.html
- browse files at revision 284
- compare with another revision
- download diff
- download tarball
- view history from revision 284
- Committer: Bhavesh Goyal
- Date: 2015-07-20 22:57:02 UTC
- Revision ID: bhavesh.goyal093@gmail.com-20150720225702-0uw8krqq00oz5jhf
Add Static CSS files for Dashboard
- files added:
- src/postorius/static/postorius/css/dashboard.css
- files modified:
- src/postorius/templates/postorius/user_dashboard.html
added
removed
src/postorius/templates/postorius/user_dashboard.html
1
1
<!DOCTYPE html>
2
2
{% load i18n %}{% load staticfiles %}
3
{# extends postorius_base_template #}
4
3
{% load url from future %}
5
4
{% load i18n %}
6
5
<html><head>
9
8
<link rel="stylesheet" href="{% static 'postorius/css/bootstrap-multiselect.css' %}">
10
9
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
11
10
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
11
<link rel="stylesheet" href="{% static 'postorius/css/dashboard.css' %}">
12
12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
13
13
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
14
14
<script src="{% static 'postorius/js/libs/chartist.min.js' %}"></script>
15
15
<script src="{% static 'postorius/js/libs/bootstrap-multiselect.js' %}"></script>
16
16
<script src="{% static 'postorius/js/script.js' %}"></script>
17
17
18
<style>
19
/* Imports */
20
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
21
22
@font-face {
23
font-family: "Brandon Grotesque Bold";
24
src: url("{% static 'postorius/fonts/brandon_grotesque_bold.ttf' %}") format("truetype");
25
}
26
@font-face {
27
font-family: "Brandon Grotesque Light";
28
src: url("{% static 'postorius/fonts/brandon_grotesque_light.ttf' %}") format("truetype");
29
}
30
::-webkit-scrollbar-track {
31
border-radius: 0px;
32
background-color: #FFFFFF;
33
}
34
::-webkit-scrollbar {
35
width: 10px;
36
background-color: #FFFFFF;
37
}
38
::-webkit-scrollbar-thumb {
39
border-radius: 0px;
40
background-color: #0A1123;
41
}
42
::-moz-scrollbar-track {
43
border-radius: 0px;
44
background-color: #FFFFFF;
45
}
46
::-moz-scrollbar {
47
width: 10px;
48
background-color: #FFFFFF;
49
}
50
::-moz-scrollbar-thumb {
51
border-radius: 0px;
52
background-color: #0A1123;
53
}
54
::scrollbar-track {
55
border-radius: 0px;
56
background-color: #FFFFFF;
57
}
58
::scrollbar {
59
width: 10px;
60
background-color: #FFFFFF;
61
}
62
::scrollbar-thumb {
63
border-radius: 0px;
64
background-color: #0A1123;
65
}
66
@-webkit-keyframes dashoffset-seven{
67
0% {stroke-dashoffset: 7px;}
68
100% {stroke-dashoffset: 0px;}
69
}
70
@-moz-keyframes dashoffset-seven{
71
0% {stroke-dashoffset: 7px;}
72
100% {stroke-dashoffset: 0px;}
73
}
74
@keyframes dashoffset-seven{
75
0% {stroke-dashoffset: 7px;}
76
100% {stroke-dashoffset: 0px;}
77
}
78
79
@-webkit-keyframes width-pulse {
80
0% {stroke-width: 2px;}
81
50% {stroke-width: 4px;}
82
100% {stroke-width: 2px;}
83
}
84
@-moz-keyframes width-pulse {
85
0% {stroke-width: 2px;}
86
50% {stroke-width: 4px;}
87
100% {stroke-width: 2px;}
88
}
89
@keyframes width-pulse {
90
0% {stroke-width: 2px;}
91
50% {stroke-width: 4px;}
92
100% {stroke-width: 2px;}
93
}
94
h3 {
95
font-family: "Brandon Grotesque Light", sans-serif;
96
font-weight: 500;
97
}
98
99
html, body {
100
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
101
height:100%;
102
font-weight: 500;
103
}
104
105
106
/* Chart CSS */
107
.ctooltip {
108
position: absolute;
109
z-index: 1;
110
padding: 5px;
111
background: rgba(0, 0, 0, 0.3);
112
opacity: 1;
113
border-radius: 3px;
114
text-align: center;
115
pointer-events: none;
116
color: white;
117
transition: opacity .1s ease-out;
118
}
119
.ctooltip.ctooltip-hidden {
120
opacity: 0;
121
}
122
.ct-chart .ct-series.ct-series-b .ct-line{
123
stroke: #FF5D56;
124
stroke-width: 3px;
125
stroke-dasharray: 6px 3px;
126
-webkit-animation: dashoffset-seven 350ms infinite linear;
127
-moz-animation: dashoffset-seven 350ms infinite linear;
128
}
129
.ct-chart .ct-series.ct-series-b .ct-point {
130
stroke: #FF5D56;
131
}
132
.ct-chart .ct-series.ct-series-a .ct-line {
133
stroke: #F1C40F;
134
stroke-width: 2px;
135
opacity: 0.7;
136
-webkit-animation: width-pulse 2s infinite;
137
-moz-animation: width-pulse 2s infinite;
138
}
139
.ct-chart .ct-series.ct-series-a .ct-point {
140
stroke: #F1C40F;
141
}
142
143
144
/* Button Styling And Animations */
145
.btn, button {
146
border-radius:0px;
147
-webkit-transition: .2s all;
148
-moz-transition: .2s all;
149
transition: .2s all;
150
}
151
.btn_-1 {
152
border:1px solid #00BCD4;
153
color: #00BCD4;
154
}
155
.btn_0 {
156
border:1px solid #0097A7;
157
color: #0097A7;
158
}
159
.btn_1 {
160
border:1px solid #303F9F;
161
color: #303F9F;
162
}
163
.btn_-2 {
164
border:1px solid #3a3a3a;
165
color: #3a3a3a;
166
}
167
.btn_1:hover, .btn_1:focus {
168
border:1px solid #303F9F;
169
background-color: #303F9F;
170
color: #fff;
171
}
172
.btn_0:hover, .btn_0:focus {
173
border:1px solid #0097A7;
174
background-color: #0097A7;
175
color: #fff;
176
}
177
.btn_-1:hover, .btn_-1:focus {
178
border:1px solid #00BCD4;
179
background-color: #00BCD4;
180
color: #fff;
181
}
182
.btn_-2:hover, .btn_-2:focus {
183
background-color: #3a3a3a;
184
border:1px solid #3a3a3a;
185
color: #fff;
186
}
187
188
/* Tasks Widget Styling */
189
.bg-color_-1 {
190
background-color:#EFFAFE !important;
191
}
192
.bg-color_0 {
193
background-color:#DBE7FD !important;
194
}
195
.bg-color_1 {
196
background-color:#9F84ED !important;
197
}
198
.bg-color_-2 {
199
background-color:#FFFFFF !important;
200
}
201
.parent-active {
202
background-color:#EEEEEE;
203
}
204
.panel-heading-listv {
205
padding:1.7em;
206
background: #FFFFFF !important;
207
}
208
.panel-heading, .panel-default {
209
border-radius: 0px !important;
210
}
211
.panel-tw {
212
border-radius:0px !important;
213
border:1px solid #0097A7;
214
background-color:#FFFFFF;
215
}
216
.panel-title a {
217
font-size:1em;
218
}
219
.toggle-accordian:hover,
220
.toggle-accordian:active,
221
.toggle-accordian:focus {
222
text-decoration: none;
223
color:#3a3a3a;
224
font-size:1em;
225
}
226
227
.panel-title ul li:first-child {
228
color:#3a3a3a;
229
font-size:1em;
230
}
231
232
#task-container, #list-container-well {
233
overflow-y: auto;
234
margin-left: auto;
235
padding-left:0px;
236
padding-right:0px;
237
margin-right:auto;
238
position:relative;
239
border-radius:0px;
240
height:72%;
241
}
242
@media (max-width: 1366px){
243
#task-container {
244
height:72%;
245
font-size:0.5em;
246
}
247
#task-container .panel-title li{
248
font-size:0.83em;
249
}
250
#task-container #text-priority {
251
display:none;
252
}
253
#task-container #holoid a{
254
font-size:0.83em;
255
}
256
#actions_link{
257
font-size:0.85em;
258
}
259
.activities td {
260
font-size: 0.9em;
261
}
262
#members-expand li a, #members-expand span,
263
#members-expand a{
264
font-size:0.85em;
265
}
266
#reorder > .btn-grp span , #reorder li a{
267
font-size:0.9em;
268
}
269
.i-tasks {
270
font-size:0.8em;
271
}
272
#list-container-well {
273
height:24em;
274
}
275
}
276
277
#list-container{
278
display:none;
279
}
280
#task-container::-webkit-scrollbar-track {
281
border-radius: 0px;
282
background-color: #F5F5F5;
283
}
284
#task-container::-webkit-scrollbar {
285
width: 8px;
286
background-color: #F5F5F5;
287
}
288
#task-container::-webkit-scrollbar-thumb {
289
border-radius: 0px;
290
background-color: #777;
291
}
292
#listi_container::-webkit-scrollbar-track {
293
border-radius: 0px;
294
background-color: #F5F5F5;
295
}
296
#listi_container::-webkit-scrollbar {
297
width: 6px;
298
background-color: #F5F5F5;
299
}
300
#listi_container::-webkit-scrollbar-thumb {
301
border-radius: 0px;
302
background-color: #777;
303
}
304
.made-on {
305
color:#34373C;
306
font-size:0.96em;
307
}
308
#holoid > a {
309
border-radius:0px !important;
310
}
311
.fa-plus-circle {
312
float:right;
313
position:relative;
314
margin-top:1%;
315
font-size:2.7em;
316
vertical-align:middle;
317
display:inline-block;
318
-webkit-transition: 0.3s all;
319
-moz-transition: 0.3s all;
320
transition: 0.3s all;
321
color: #08C;
322
}
323
.fa-plus-circle:hover {
324
float:right;
325
display:inline-block;
326
-webkit-transition: 0.3s all;
327
-moz-transition: 0.3s all;
328
transition: 0.3s all;
329
-webkit-transform: rotate(90deg);
330
-moz-transform: rotate(90deg);
331
transform: rotate(90deg);
332
color: #3F51B5;
333
}
334
.i-tasks:before {
335
background:white;
336
padding: 5px;
337
border: 1px solid;
338
color:#FFC107;
339
}
340
.fa-bars,
341
.fa-gear{
342
-webkit-transition: 0.3s all;
343
-moz-transition: 0.3s all;
344
transition: 0.3s all;
345
}
346
.fa-bars:hover,
347
.fa-gear:hover{
348
color: #000;
349
-webkit-transition: 0.3s all;
350
-moz-transition: 0.3s all;
351
transition: 0.3s all;
352
-webkit-transform: rotate(90deg);
353
-moz-transform: rotate(90deg);
354
transform: rotate(90deg);
355
}
356
.task-table > tbody > tr:first-child > td{
357
border-top: none !important;
358
}
359
.table > tbody > tr:last-child > td {
360
padding-bottom: 0px !important;
361
margin-bottom:0px !important;
362
}
363
.panel_tasks .panel-collapse .panel-body{
364
padding-bottom:0px !important;
365
}
366
.role-nav li.active > a {
367
border-bottom:2px solid #000;
368
background-color: inherit;
369
}
370
.role-nav li > a {
371
border-radius:0px;
372
color: #3a3a3a;
373
}
374
#list-moderators .row, #list-owners .row, #list-subscribers .row{
375
margin:inherit;
376
}
377
#list-moderators .col-xs-6, #list-owners .col-xs-6, #list-subscribers .col-xs-12{
378
padding:0.5em;
379
}
380
#refresh {
381
margin: 100px auto ;
382
display:block;
383
position: relative;
384
box-shadow:
385
1px 1px #53A7EA,
386
2px 2px #53A7EA,
387
3px 3px #53A7EA;
388
-webkit-transition: all 0.1s ease-in;
389
-moz-transition: all 0.1s ease-in;
390
transition: all 0.1s ease-in;
391
border: none;
392
padding: 10px;
393
background: #08C;
394
color: white;
395
font-weight: bold;
396
text-decoration: none;
397
font-size: 18px;
398
font-family: Arial;
399
width: 6.85em;
400
height: 3.25em;
401
}
402
403
#refresh:active {
404
box-shadow: none;
405
top: 3px;
406
left: 3px;
407
}
408
#id_mtask_description {
409
resize: vertical;
410
}
411
/* List Index Widget Styling*/
412
#li-widget-wrapper{
413
position:relative;
414
margin:auto;
415
display: inline-block;
416
white-space:nowrap;
417
float:right;
418
width:37%;
419
height:70%;
420
border:1px solid;
421
}
422
/* Events Widget Styling */
423
#events-widget{
424
width:17%;
425
float:left;
426
display:inline-block;
427
height:99%;
428
margin-top:8%;
429
border:1px solid;
430
margin-left:2%;
431
margin-right:7%;
432
}
433
@media (max-width: 90em){
434
#events-widget{
435
display:none !important;
436
position:relative;
437
margin:auto;
438
float:right;
439
width:37%;
440
height:70%;
441
}
442
.primary-widgets-wrapper{
443
width:100% !important;
444
}
445
#view_bot{
446
display:none !important;
447
}
448
}
449
/* Nav Styling */
450
.nav li a{
451
-webkit-transition: .2s all;
452
-moz-transition: .2s all;
453
transition: .2s all;
454
}
455
456
#id_query_field {
457
padding: 7px;
458
border: none;
459
border-bottom: solid 2px #E4F1FE;
460
-webkit-transition: border 0.3s;
461
-moz-transition: border 0.3s;
462
transition: border 0.3s;
463
}
464
#id_query_field:focus,
465
#id_query_field.focus {
466
border-bottom: solid 2px #1ABC9C;
467
}
468
.navbar {
469
background-color: #0A1123;
470
}
471
.nav-icon {
472
color: #ffffff;
473
}
474
.checkbox-wrapper {
475
margin-left: 2em;
476
display:inline-block;
477
}
478
.checkbox-inline input[type=checkbox]{
479
position: relative;
480
color:#1ABC9C;
481
font-size:1.64em;
482
}
483
.checkbox-inline >input[type=checkbox]::before {
484
position: absolute;
485
background-color: #0A1123;
486
height: 100%;
487
width: 100%;
488
font-family: FontAwesome;
489
content:"\f096";
490
491
}
492
.checkbox-inline >input[type=checkbox]:checked::before {
493
font-family: FontAwesome;
494
display: inline-block;
495
content:"\f046";
496
}
497
.check-label {
498
margin-left: 1em;
499
margin-right: 1em;
500
border-bottom:2px solid #1ABC9C;
501
color: #E4F1FE;
502
}
503
.navbar > .container-fluid > .navbar-header a{
504
color: #E4F1FE;
505
}
506
.navbar .navbar-nav > li > a{
507
color: #FFFFFF !important;
508
}
509
.navbar .navbar-nav > li > a:hover{
510
color: #E4F1FE !important;
511
}
512
#view_bot {
513
display:inline-block;
514
}
515
</style>
516
18
</head>
19
517
20
<body>
518
21
<nav class="navbar navbar-inverse navbar-fixed-top">
519
22
<div class="container-fluid">
553
56
<span class="fa fa-chevron-circle-down fa-lg fa-fw "></span>Change View
554
57
</a>
555
58
<ul class="dropdown-menu widget-chooser-menu" role="menu">
556
<li><a id="view-li" href="#">{% trans "List Index" %}<span style="display:none;" id="listi-view-check" class="active fa fa-fw fa-check"></span>
59
<li><a id="view-li" href="javascript:void(0)">{% trans "List Index" %}<span style="display:none;" id="listi-view-check" class="active fa fa-fw fa-check"></span>
557
60
</a></li>
558
61
<li class="divider"></li>
559
<li><a id="view-events" href="#">{% trans "Events" %}<span style="display:none;" id="events-view-check" class="fa fa-fw fa-check"></span>
62
<li><a id="view-events" href="javascript:void(0)">{% trans "Events" %}<span style="display:none;" id="events-view-check" class="fa fa-fw fa-check"></span>
560
63
</a></li>
561
64
</ul>
562
65
</li>
593
96
<div class="col-xs-12"><h3 class="text-center">To-Do List</h3></div>
594
97
<div class="col-xs-12">
595
98
<ul class="nav nav-tabs nav-justified" id="switcher" role="tablist">
596
<li class="active" ><a id="task-view" href="#">Task Basis</a></li>
99
<li class="active" ><a id="task-view" href="javascript:void(0)">Task Basis</a></li>
597
100
{% if tasks|length_is:"0" %}
598
<li><a href="#">List Basis</a></li>
101
<li><a href="javascript:void(0)">List Basis</a></li>
599
102
{% else %}
600
<li><a id="list-view" href="#">List Basis</a></li>
103
<li><a id="list-view" href="javascript:void(0)">List Basis</a></li>
601
104
{% endif %}
602
105
</ul>
603
106
</div>
Loggerhead is a web-based interface for Breezy
Version: 2.0.1