liquid_feedback_frontend

view app/main/_layout/default.html @ 1586:1c21a43ef121

Fixed unevenly distributes white space around initiative list
author bsw
date Tue Jan 26 19:15:35 2021 +0100 (2021-01-26)
parents 2373160319dc
children 9f55297a1a6a
line source
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
6 <title><!-- WEBMCP SLOTNODIV html_title --></title>
7 <link rel="stylesheet" type="text/css" media="screen" href="__BASEURL__/style/style.css" />
8 <link rel="stylesheet" type="text/css" media="screen" href="__BASEURL__/static/gregor.js/gregor.css" />
9 <!-- WEBMCP SLOTNODIV html_head -->
10 <script type="text/javascript">jsFail = true;</script>
11 <![if !IE]>
12 <script type="text/javascript">jsFail = false;</script>
13 <![endif]-->
14 <script type="text/javascript" src="__BASEURL__/static/mdl/material.js"></script>
15 <script type="text/javascript" src="__BASEURL__/static/js/jsprotect.js"></script>
16 <script type="text/javascript" src="__BASEURL__/static/js/partialload.js"></script>
17 <style>
18 @font-face {
19 font-family: "Roboto";
20 src: url("__BASEURL__/static/font/Roboto-Regular.ttf");
21 }
22 @font-face {
23 font-family: "Roboto Bold";
24 src: url("__BASEURL__/static/font/Roboto-Bold.ttf");
25 }
26 @font-face {
27 font-family: "Roboto Slab";
28 src: url("__BASEURL__/static/font/RobotoSlab-Regular.ttf");
29 }
30 @font-face {
31 font-family: 'Material Icons';
32 font-style: normal;
33 font-weight: 400;
34 src: url("__BASEURL__/static/font/material.woff2") format('woff2');
35 }
37 .material-icons {
38 font-family: 'Material Icons';
39 font-weight: normal;
40 font-style: normal;
41 font-size: 24px;
42 line-height: 1;
43 letter-spacing: normal;
44 text-transform: none;
45 display: inline-block;
46 white-space: nowrap;
47 word-wrap: normal;
48 direction: ltr;
49 -webkit-font-feature-settings: 'liga';
50 -webkit-font-smoothing: antialiased;
51 }
52 .material-icons.icon-green {
53 color: #4CAF50;
54 }
55 .material-icons.icon-yellow {
56 color: #FFEB3B;
57 }
58 .material-icons.icon-red {
59 color: #F44336;
60 }
61 .mapboxgl-popup-content {
62 max-width: 200px;
63 }
64 body {
65 font-family: "Roboto";
66 background: #fff;
67 }
68 strong {
69 font-family: "Roboto Bold";
70 }
71 .slot_error {
72 margin: 20px 20px 0 20px;
73 background: #fed;
74 padding: 20px;
75 }
76 .slot_notice {
77 margin: 20px 20px 0 20px;
78 background: #efd;
79 padding: 20px;
80 }
81 h1 {
82 font-size: 24px;
83 margin-bottom: 0px;
84 }
86 .mdl-layout__container {
87 max-width: 1600px;
88 height: auto;
89 background: #f7f7f7;
90 }
91 .mdl-layout__header-row {
92 padding-left: 20px !important;
93 padding-right: 10px !important;
94 }
95 .mdl-layout__content {
96 flex-shrink: 0;
97 width: 100%;
98 }
99 #lf-member-menu {
100 cursor: pointer;
101 }
102 .notifications {
103 display: block;
104 text-align: center;
105 }
106 .page-content {
107 xdisplay: flex;
108 width: 100%;
109 }
110 .map, .ui_field_location {
111 border: none;
112 width: 100%;
113 height: auto;
114 max-height: 80vh;
115 position: relative;
116 border-radius: 2px;
117 }
118 .map:before {
119 content: "";
120 display: block;
121 padding-top: 100%;
122 }
123 .map iframe {
124 position: absolute;
125 top: 0;
126 left: 0;
127 right: 0;
128 bottom: 0;
129 height: 100%;
130 }
131 .axto-logo {
132 width: 100%;
133 }
134 .mdl-card__title-text a.issue {
135 font-size: 18px;
136 line-height: 20px;
137 }
138 .mdl-list__item .initiative_name {
139 font-size: 18px;
140 line-height: normal;
141 }
142 .initiatives.mdl-list {
143 margin-top: 5px;
144 margin-bottom: 5px;
145 padding-bottom: 0px;
146 }
147 .initiatives .mdl-list__item--three-line {
148 min-height: 0;
149 padding-top: 0;
150 padding-bottom: 0;
151 }
152 .mdl-data-table__fullwidth {
153 width: 100%;
154 }
155 .mdl-textfield__fullwidth {
156 width: 100%;
157 }
159 .mdl-card {
160 min-height: 20px;
161 overflow: visible;
162 display: block;
163 margin-bottom: 16px;
164 border-radius: 5px;
165 }
167 .mdl-card__title {
168 border-radius: 5px 5px 0 0;
169 }
171 .mdl-card__fullwidth {
172 width: 100%;
173 }
174 .mdl-card__title {
175 display: block;
176 }
177 .mdl-card__title > h2,
178 .mdl-card__title > a {
179 display: inline-block;
180 vertical-align: top;
181 }
182 .mdl-card__subtitle-text {
183 display: block;
184 }
185 .mdl-card__content {
186 font-size: 1rem;
187 padding: 16px;
188 }
189 .mdl-card__content.mdl-card--no-bottom-pad {
190 padding-bottom: 0;
191 }
192 .mdl-card__actions.mdl-card--action-border,
193 .mdl-card__content.mdl-card--border {
194 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
195 }
196 .mdl-card__actions.mdl-card--notice,
197 .mdl-card__content.mdl-card--notice {
198 background: #fff9c4;
199 }
200 .mdl-card--has-fab {
201 position: relative;
202 }
203 .mdl-special-card {
204 background: #fff;
205 margin-bottom: 16px;
206 border-radius: 5px;
207 }
209 .mdl-navigation__head {
210 font-family: "Roboto Bold";
211 }
212 .mdl-list__item--three-line {
213 height: auto;
214 min-height: 88px;
215 }
216 .mdl-list__item--three-line .mdl-list__item-primary-content {
217 height: auto;
218 min-height: 52px;
219 }
220 .mdl-chip.clickable {
221 cursor: pointer;
222 }
223 .mdl-chip.unit,
224 .mdl-chip.area,
225 .mdl-chip.issue {
226 padding: 1px 6px;
227 line-height: 24px;
228 height: 24px;
229 vertical-align: bottom;
230 margin-right: 4px;
231 margin-bottom: 8px;
232 }
233 .mdl-chip.unit i,
234 .mdl-chip.area i,
235 .mdl-chip.issue i {
236 font-size: 18px;
237 color: #444;
238 }
239 .mdl-chip.unit {
240 xbackground: rgba(76,175,80,0.2);
241 }
242 .mdl-chip.area {
243 xbackground: rgba(76,175,80,0.2);
244 }
245 .mdl-chip.issue {
246 xbackground: rgba(76,175,80,0.2);
247 }
248 .mdl-menu {
249 z-index: -9999;
250 }
251 .mdl-menu__item {
252 padding: 0;
253 }
254 .mdl-menu__link {
255 display: block;
256 padding: 0 16px;
257 min-height: 48px;
258 text-decoration: none;
259 color: #444;
260 }
261 .mdl-tabs__tab-bar {
262 justify-content: flex-start;
263 }
264 .mdl-tabs__tab.is-active {
265 color: rgba(0,0,0, 0.87);
266 }
267 .mdl-data-table--condensed tbody tr {
268 height: 24px;
269 }
270 .mdl-data-table--condensed td {
271 padding-top: 0;
272 padding-bottom: 0;
273 height: 24px;
274 }
275 .mdl-button--underlined {
276 text-decoration: underline;
277 }
278 .right {
279 text-align: right;
280 }
281 .mdl-tabs__left {
282 display: inline-block;
283 width: auto;
284 }
285 .float-left {
286 float: left;
287 }
288 .float-right {
289 float: right;
290 }
291 .clear-left {
292 clear: left;
293 }
294 .clear-right {
295 clear: right;
296 }
297 .float-right .mdl-menu__container {
298 margin-right: 20px;
299 }
300 .inline {
301 display: inline-block;
302 }
303 .warning {
304 background-color: #fff9c4;
305 color: #212121;
306 padding: 16px;
307 border-radius: 2px;
308 }
309 .toolbar a {
310 color: #000;
311 display: inline-block;
312 border: 1px solid #ccc;
313 position: relative;
314 }
316 .toolbar a.wysihtml-command-active {
317 background: #000;
318 color: #fff;
320 }
322 .toolbar a span.crossed {
323 position: absolute;
324 top: 0;
325 left: 8px;
326 font-weight: bold;
327 font-size: 200%;
328 line-height: 80%;
329 }
330 .toolbar a span.head_level {
331 position: absolute;
332 right: 0;
333 bottom: 0;
334 }
336 textarea {
337 font-family: sans-serif;
338 font-weight: normal !important;
339 width: 100%;
340 height: 40ex;
341 }
342 .bargraph {
343 display: inline-block;
344 vertical-align: top;
345 height: 9px;
346 }
348 .bargraph div {
349 margin: 0;
350 padding: 0;
351 display: inline-block;
352 height: 9px;
353 }
354 .draft {
355 font-family: 'Roboto Slab';
356 font-weight: 300;
357 overflow: auto;
358 clear: left;
359 }
360 .draft img {
361 float: right;
362 margin-left: 1em;
363 }
365 .draft .landscape img {
366 width: 50%;
367 }
369 .draft .portrait img {
370 width: 33.333%;
371 }
372 .member_weight {
373 background: #070;
374 color: #fff;
375 border-radius: 8px;
376 padding: 0 3px;
377 }
378 .card-issue {
379 background: rgb(76,175,80);
380 }
381 .card-issue a {
382 color: #fff;
383 }
384 @media (max-width: 960px) {
385 .draft img {
386 float: none;
387 margin-left: 0;
388 }
389 .draft a.portrait,
390 .draft a.landscape {
391 width: 100%;
392 display: block;
393 text-align: center;
394 margin-bottom: 2ex;
395 }
396 .draft .landscape img {
397 width: 100%;
398 }
399 .draft .portrait img {
400 width: 66.666%;
401 }
402 }
404 .draft h1 {
405 font-size: 150%;
406 margin-bottom: 0;
407 }
408 .draft h2 {
409 font-size: 133%;
410 margin-bottom: 0;
411 }
412 .draft h3 {
413 font-size: 125%;
414 margin-bottom: 0;
415 }
416 .draft > a:first-child + h1,
417 .draft > h1:first-child,
418 .draft > h2:first-child,
419 .draft > h3:first-child {
420 margin-top: 0;
421 }
422 @media (max-width: 960px) {
423 .draft > a:first-child + h1 {
424 margin-top: 20px;
425 }
426 }
428 .folded {
429 position: relative;
430 }
431 .folded .suggestion-content {
432 max-height: 180px;
433 overflow: hidden;
434 position: relative;
435 }
436 .folded .suggestion-content:before {
437 content: "";
438 width: 100%;
439 height: 25%;
440 position: absolute;
441 left: 0;
442 bottom: 0;
443 background: linear-gradient(rgba(0,0,0,0), #fff);
444 }
445 .suggestion-less,
446 .suggestion-more {
447 display: none;
448 }
449 .folded .suggestion-more,
450 .unfolded .suggestion-less {
451 display: inline-block;
452 }
454 .diff .diff_removed {
455 text-decoration: line-through;
456 background: #f00;
457 }
459 .diff .diff_added {
460 text-decoration: underline;
461 background: #0f0;
462 }
464 .material-icons {
465 vertical-align: middle;
466 }
467 .material-icons-small {
468 font-size: 18px;
469 }
471 a.mdl-layout-title {
472 color: #fff;
473 text-decoration: none;
474 }
476 .what-can-i-do-here .mdl-card__content {
477 font-size: 18px;
478 }
480 .what-can-i-do-here .mdl-card__content ul {
481 font-size: 1rem;
482 }
484 .what-can-i-do-here ul {
485 margin-top: 0.5em;
486 margin-bottom: 0;
487 padding-left: 1.5em
488 }
492 .lf-filter .mdl-button {
493 padding-right: 4px;
494 }
496 .phase-current {
497 font-family: "Roboto Bold";
498 }
500 .phase-info {
501 padding-left: 27px;
502 margin-bottom: 1ex;
503 }
505 .clickable {
506 cursor: pointer;
507 }
509 .slot_title {
510 margin-left: 16px;
511 margin-top: 16px;
512 font-size: 18px;
513 }
515 .slot_title > a,
516 .slot_title > span {
517 display: inline-block;
518 padding: 0 4px 0 0;
520 }
522 .slot_title a.home {
523 margin: 0;
524 }
526 .home i {
527 font-size: 32px;
528 }
530 /* fix missing contrast */
531 .mdl-list__item--three-line .mdl-list__item-text-body,
532 .mdl-card__supporting-text,
533 .mdl-card__subtitle-text {
534 color: rgba(0,0,0, 0.75);
535 }
537 .mdl-textfield__label {
538 color: rgba(0,0,0, 0.5);
539 }
541 .mdl-list__item--three-line .mdl-list__item-text-body {
542 height: auto;
543 padding-bottom: 10px;
544 }
546 select {
547 font-family: 'Roboto','Helvetica','Arial',sans-serif;
548 background-color: transparent;
549 padding: 5px 0;
550 border: none;
551 border-bottom: 1px solid rgba(0,0,0, 0.12);
552 font-size: 1rem;
553 }
556 .initiative_list .mdl-list__item {
557 display: block;
558 }
559 .initiative_list .mdl-list__item-avatar {
560 float: left;
561 margin-right: 8px;
562 }
563 .initiative_list .mdl-list__item-avatar i {
564 padding-left: 8px;
565 }
566 .initiative_list .mdl-list__item-avatar.positive {
567 background: #4caf50;
568 }
569 .initiative_list .mdl-list__item-avatar.positive i {
570 padding-top: 8px;
571 vertical-align: top;
572 }
573 .initiative_list .mdl-list__item-avatar.negative {
574 background: #f44336;
575 }
576 .initiative_list .mdl-list__item-avatar.negative i {
577 padding-top: 10px;
578 vertical-align: top;
579 }
581 .initiative_pie {
582 float: left;
583 margin-right: 15px;
584 margin-bottom: 15px;
585 }
587 .initiative .result {
588 font-family: "Roboto Bold";
589 }
591 .admitted_info, .not_admitted_info {
592 margin-left: 15px;
593 }
595 .admitted_info table th,
596 .not_admitted_info table th {
597 text-align: left;
598 padding-right: 10px;
599 }
601 .admitted_info table td,
602 .not_admitted_info table td {
603 text-align: right;
604 padding-right: 5px;
605 }
607 .admitted
609 .event_info i {
610 font-size: 18px;
611 color: #444;
612 margin-right: 4px;
613 }
615 .ui_list_row label.mdl-radio {
616 display: inline;
617 }
619 .member_image_photo {
620 margin-top: 2ex;
621 margin-bottom: 2ex;
622 }
624 .contextlinks {
625 color: #fff;
626 xfont-size: 14px;
627 xmargin-bottom: 5px;
628 }
630 /*************************************************************************
631 * Voting
632 */
633 .main .section #voting_form .sectionRow:last-child {
634 border-radius: 0;
635 margin-bottom: 0;
636 }
637 #voting {
638 margin-top: 3ex;
639 position: relative;
640 margin-bottom: 2ex;
641 }
642 #voting .approval,
643 #voting .abstention,
644 #voting .disapproval {
645 border: 1px #ccc solid;
646 margin-bottom: 3ex;
647 padding: 1ex;
648 padding-bottom: 1ex;
649 border-radius: 2px;
650 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
651 }
652 #voting .movable {
653 cursor: pointer;
654 }
655 #voting .disapproval {
656 margin-bottom: 2ex;
657 }
658 #voting .approval {
659 background-color: #9f9;
660 }
661 #voting .approval .movable {
662 background-color: #dfd;
663 }
664 #voting .abstention {
665 background-color: #eee;
666 }
667 #voting .abstention .movable {
668 background-color: #fff;
669 }
670 #voting .disapproval {
671 background-color: #f88;
672 }
673 #voting .disapproval .movable {
674 background-color: #fbb;
675 }
676 #voting .movable {
677 position: relative;
678 border: 1px black solid;
679 margin-top: 1ex;
680 padding: 0;
681 border-radius: 2px;
682 min-height: 64px;
683 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
684 }
685 #voting .initiative_name {
686 display: inline-block;
687 margin: 5px;
688 font-family: "Roboto Bold";
689 }
691 #voting .voting_form_active .movable {
692 cursor: pointer;
693 vertical-align: middle;
694 cursor: move;
695 }
696 #voting .voting_form_active .clickable {
697 cursor: auto;
698 }
699 #voting .voting_form_active a.clickable {
700 cursor: pointer;
701 }
703 div.form .ui_field_label {
704 text-transform: uppercase;
705 font-size: 80%;
706 }
707 div.form .member_photo .member_image.member_image_photo {
708 margin-top: 0;
709 }
711 .trace_list {
712 margin-left: 10px;
713 list-style-type: none;
714 padding: 0;
715 line-height: 120%;
716 }
718 .trace_list .trace_list {
719 padding-left: 10px;
720 border-left: 1px solid #999;
721 }
723 .trace_list .trace_head {
724 margin-top: 10px;
725 padding: 3px 5px 3px 5px;
726 font-weight: 700;
727 }
729 .trace_list li {
730 margin-top: 5px;
731 margin-bottom: 5px;
732 }
734 .trace_list .trace_filter .trace_head {
735 background: #acf;
736 color: #000;
737 }
739 .trace_list .trace_request .trace_head,
740 .trace_list .trace_view .trace_head {
741 background: #000;
742 color: #fff;
743 }
745 .trace_list .trace_config .trace_head,
746 .trace_list .trace_view .trace_view .trace_head {
747 background: #ccc;
748 color: #000;
749 }
751 .trace_list .trace_head .time {
752 float: right;
753 font-weight: 500;
754 font-size: 90%;
755 line-height: 100%;
756 margin-top: 5px;
757 }
759 .trace_list .trace_sql {
760 color: #050;
761 }
763 .trace_list .trace_sql_time {
764 background: #070;
765 color: #fff;
766 padding: 0px 3px;
767 border-radius: 5px;
768 }
770 </style>
771 <!-- WEBMCP SLOTNODIV meta_navigation_style -->
773 </head>
774 <body style="">
775 <!-- WEBMCP SLOTNODIV meta_navigation -->
777 <div class="mdl-layout mdl-js-layout mdl-shadow--2dp mdl-layout--fixed-header">
778 <!-- WEBMCP SLOTNODIV header_bar -->
779 <main class="mdl-layout__content">
780 <!-- WEBMCP SLOTNODIV notificationx -->
781 <!-- WEBMCP SLOT notice -->
782 <!-- WEBMCP SLOT warning -->
783 <!-- WEBMCP SLOT error -->
784 <!-- WEBMCP SLOT motd -->
785 <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
786 <div class="page-content">
787 <!-- WEBMCP SLOT title -->
788 <!-- WEBMCP SLOT filter -->
789 <!-- WEBMCP SLOTNODIV default -->
790 <!-- WEBMCP SLOTNODIV extra -->
791 <!-- WEBMCP SLOTNODIV sidebar -->
792 </div>
793 </section>
794 <br />
795 <br />
796 <br />
797 <br />
798 <footer class="mdl-mini-footer">
799 <div class="mdl-mini-footer__left-section">
800 <ul class="mdl-mini-footer__link-list">
801 <!-- WEBMCP SLOTNODIV footer -->
802 </ul>
803 </div>
804 </footer>
805 <br /><br />
806 <div id="trace">
807 <!-- WEBMCP SLOTNODIV trace_button -->
808 <div id="trace_content" style="display: none;">
809 <div id="system_error"><!-- WEBMCP SLOT system_error --></div>
810 <h1>System trace (for computer programmers purposes)</h1>
811 <br />
812 <!-- WEBMCP SLOT trace -->
813 <div class="trace_close" onclick="document.getElementById('trace_show').style.display='block';document.getElementById('trace_content').style.display='none';">
814 close
815 </div>
816 </div>
817 </div>
818 </main>
819 </div>
821 <div class="head_outer">
822 <div class="head">
823 <div class="nav">
824 <!--WEBMCP SLOTNODIV navigation -->
825 </div>
827 </div>
828 </div>
830 <!-- WEBMCP SLOTNODIV dialog -->
832 <!-- WEBMCP SLOT tabs -->
834 <script>
835 /*
836 $(".trace_view > .trace_list").hide();
837 $(".trace_head").click(function() {
838 var el = this.nextSibling
839 if (el) $(el).toggle();
840 });
841 */
842 </script>
844 <!-- WEBMCP SLOTNODIV script -->
846 </body>
847 </html>

Impressum / About Us