ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Redesign projector template.

Browse Source
This commit is contained in:
Emanuel Schuetze 2016-01-13 00:07:53 +01:00
parent bc17baa2b9
commit 09b88fb4a6
5 changed files with 122 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openslides/core/signals.py
View File

@ -136,29 +136,13 @@ def setup_general_config(sender, **kwargs):
group=ugettext_lazy('Projector')) group=ugettext_lazy('Projector'))
yield ConfigVariable( yield ConfigVariable(
name='projector_backgroundcolor1', name='projector_backgroundcolor',
default_value='#444444', default_value='#317796',
label=ugettext_lazy('Background color of projector header'), label=ugettext_lazy('Background color of projector header'),
help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'), help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'),
weight=160, weight=160,
group=ugettext_lazy('Projector')) group=ugettext_lazy('Projector'))
yield ConfigVariable(
name='projector_backgroundcolor2',
default_value='#222222',
label=ugettext_lazy('Second (optional) background color for linear color gradient'),
help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'),
weight=165,
group=ugettext_lazy('Projector'))
yield ConfigVariable(
name='projector_fontcolor',
default_value='#F5F5F5',
label=ugettext_lazy('Font color of projector header'),
help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'),
weight=170,
group=ugettext_lazy('Projector'))
yield ConfigVariable( yield ConfigVariable(
name='projector_default_countdown', name='projector_default_countdown',
default_value=60, default_value=60,

126
openslides/core/static/css/projector.css
View File

@ -7,6 +7,8 @@ body{
font-size: 20px !important; font-size: 20px !important;
line-height: 24px !important; line-height: 24px !important;
overflow: hidden; overflow: hidden;
font-family: "Open Sans",Helvetica,Arial,sans-serif;
color: #222;
} }
/*** HEADER ***/ /*** HEADER ***/
@ -17,7 +19,7 @@ body{
} }
#logo { #logo {
position: relative; position: relative;
left: 75px; left: 50px;
top: 4px; top: 4px;
height: 60px; height: 60px;
margin-right: 35px; margin-right: 35px;
@ -25,10 +27,11 @@ body{
} }
#eventdata { #eventdata {
position: relative; position: relative;
left: 75px; left: 30px;
top: 12px; top: 12px;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
color: #F5F5F5;
} }
#eventdata .title { #eventdata .title {
font-size: 26px; font-size: 26px;
@ -40,58 +43,90 @@ body{
} }
#eventdata .description { #eventdata .description {
font-size: 18px; font-size: 18px;
opacity: 0.5; opacity: 0.8;
} }
#currentTime { #currentTime {
border:0 solid #000000; border: 0 solid #000000;
font-size:24px; font-size: 24px;
position:absolute; position: absolute;
text-align:right; text-align: right;
top:110px; top: 25px;
right:40px; right: 50px;
padding-left:30px; padding-left: 30px;
color: #fff;
}
#footer {
position: fixed;
bottom: 0;
height: 35px;
color: #F5F5F5;
opacity: 0.8;
width: 100%;
font-size: 16px;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
overflow: hidden;
text-align: right;
} }
/*** CONTENT with base style elements ***/ /*** CONTENT with base style elements ***/
.content { .content {
position: absolute; position: absolute;
left: 75px; left: 50px;
top: 150px; top: 150px;
right: 40px; right: 50px;
z-index: -1; z-index: -1;
line-height: normal; line-height: 28px;
} }
.scrollcontent { .scrollcontent {
transition-property: margin, font-size; transition-property: margin, font-size;
transition-duration: 1s; transition-duration: 1s;
} }
h1, h2, h3, h4, h5, h6 {
font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
font-weight: normal;
}
h1 { h1 {
font-size: 2.25em; font-size: 2.25em;
margin-bottom: 40px;
line-height: 1.1em; line-height: 1.1em;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
} }
h1.title_only { h2 {
text-align: center; font-size: 28px;
font-size: 2.75em;
line-height: 1.3em;
border: 0px;
padding: 40px;
margin-left: -35px; /* see #content position 'left' - 'right' for real centering */
}
h1 small {
font-size: 0.55em;
margin-top: 15px; margin-top: 15px;
display: block; display: block;
color: #9a9898;
} }
h3 { h3 {
font-size: 1.2em; color: #222;
margin-bottom: 2px
} }
#sidebar { #title {
width: 255px; width: calc(100% - 230px);
border-bottom: 5px solid #d3d3d3;
margin-bottom: 40px;
}
#title h1 {
margin-bottom: 0;
padding-bottom: 0;
}
#title h2 {
margin-top: 10px;
margin-bottom: 5px;
}
#sidebox {
width: 260px;
float: right; float: right;
margin: 0 0 20px 10px; margin: 44px -50px 20px 10px;
right: 0;
background: #d3d3d3;
border-radius: 7px 0 0 7px;
padding: 3px 7px 10px 19px;
}
#sidebox h3 {
margin-top: 10px;
margin-bottom: 0px;
} }
ul, ol { ul, ol {
margin: 0 0 10px 2em; margin: 0 0 10px 2em;
@ -99,16 +134,10 @@ ul, ol {
li { li {
line-height: normal; line-height: normal;
} }
.well h4 { .result {
margin: 20px 0 2px 0;
}
.well h4.first {
margin-top: 0;
}
.well .result {
line-height: 30px; line-height: 30px;
} }
.well .result hr { .result hr {
border-top: 1px solid; border-top: 1px solid;
margin: 5px 0; margin: 5px 0;
width: 10em; width: 10em;
@ -133,29 +162,32 @@ hr {
/*** Overlay ***/ /*** Overlay ***/
.countdown { .countdown {
min-width: 260px;
position: fixed; position: fixed;
margin: 0; margin: 0;
top: 0; top: 90px;
right: 0px; right: 0px;
padding: 19px 20px 5px 19px; padding: 23px 47px 0px 19px;
min-height: 72px; min-height: 72px;
font-size: 4em; font-size: 3.7em;
font-weight: bold; font-weight: bold;
text-align: center; text-align: right;
border-radius: 0.2em 0 0 0.2em; border-radius: 7px 0 0 7px;
z-index: 200; z-index: 200;
font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
} }
.countdown .description { .countdown .description {
font-weight: normal; font-weight: normal;
font-size: 0.2em; font-size: 18px;
margin-top: 20px; margin-top: 20px;
padding-right: 5px;
} }
.countdown.negative { .countdown.negative {
color: #CC0000; color: #CC0000;
} }
.message_background { .message_background {
background-color: #777777; background-color: #777777;
opacity: 0.6; opacity: 0.8;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -164,12 +196,14 @@ hr {
z-index: 300; z-index: 300;
} }
.message { .message {
font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
font-weight: normal;
position: fixed; position: fixed;
top: 35%; top: 35%;
left: 10%; left: 10%;
width: 80%; width: 80%;
text-align: center; text-align: center;
border-radius: 0.5em; border-radius: 0.2em;
background: #FFFFFF; background: #FFFFFF;
font-size: 2.75em; font-size: 2.75em;
padding: 0.2em 0; padding: 0.2em 0;

BIN
openslides/core/static/img/logo-projector.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

34
openslides/core/static/templates/projector.html
View File

@ -8,25 +8,12 @@
<link rel="icon" href="/static/img/favicon.png"> <link rel="icon" href="/static/img/favicon.png">
<script src="static/js/openslides-libs.js"></script> <script src="static/js/openslides-libs.js"></script>
<style type="text/css" ng-if="config('projector_backgroundcolor2')"> <style type="text/css">
#header { #header, #footer {
background-image: -moz-linear-gradient(top, {{ config('projector_backgroundcolor1') }}, {{ config('projector_backgroundcolor2') }}); background-color: {{ config('projector_backgroundcolor') }};
background-image: -ms-linear-gradient(top, {{ config('projector_backgroundcolor1') }}, {{ config('projector_backgroundcolor2') }});
background-image: -webkit-gradient(linear, 0 0, 0 100%, from({{ config('projector_backgroundcolor1') }}), to({{ config('projector_backgroundcolor2') }}));
background-image: -webkit-linear-gradient(top, {{ config('projector_backgroundcolor1') }}, {{ config('projector_backgroundcolor2') }});
background-image: -o-linear-gradient(top, {{ config('projector_backgroundcolor1') }}, {{ config('projector_backgroundcolor2') }});
background-image: linear-gradient(top, {{ config('projector_backgroundcolor1') }}, {{ config('projector_backgroundcolor2') }});
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='{{ config('projector_backgroundcolor1') }}', encColorstr='{{ config('projector_backgroundcolor2') }}')"; /* IE 8+ */
} }
</style> h1 {
<style type="text/css" ng-if="!config('projector_backgroundcolor2')"> color: {{ config('projector_backgroundcolor') }};
#header {
background-color: {{ config('projector_backgroundcolor1') }};
}
</style>
<style type="text/css" ng-if="config('projector_fontcolor')">
#eventdata {
color: {{ config('projector_fontcolor') }};
} }
</style> </style>
@ -55,4 +42,15 @@
</div> </div>
</div> </div>
<div id="footer">
<span ng-if="config('general_event_date')">
{{ config('general_event_date') }}
</span>
<span ng-if="config('general_event_date') && config('general_event_location')">
|
</span>
<span ng-if="config('general_event_location')">
{{ config('general_event_location') }}
</span>
</div>
<script src="/angular_js/projector/"></script> <script src="/angular_js/projector/"></script>

28
openslides/motions/static/templates/motions/slide_motion.html
View File

@ -1,12 +1,30 @@
<div ng-controller="SlideMotionCtrl" class="content scrollcontent"> <div ng-controller="SlideMotionCtrl" class="content scrollcontent">
<h1>{{ motion.getTitle() }}</h1>
<div ng-bind-html="motion.getText()"></div>
<h2 ng-if="motion.getReason()" translate>Reason</h2> <div id="sidebox">
<div ng-bind-html="motion.getReason()"></div> <!-- State -->
<h3 translate>State</h3>
{{ motion.state.name }}
<h2 ng-if="motion.submitters" translate>Submitters</h2> <!-- Submitters -->
<h3 ng-if="motion.submitters.length > 0" translate>Submitters</h3>
<div ng-repeat="submitter in motion.submitters"> <div ng-repeat="submitter in motion.submitters">
{{ submitter.get_full_name() }}<br> {{ submitter.get_full_name() }}<br>
</div> </div>
</div>
<!-- Title -->
<div id="title">
<h1>{{ motion.getTitle() }}</h1>
<h2>
<translate>Motion</translate> {{ motion.identifier }}
<span ng-if="motion.versions.length > 1" >| Version {{ motion.active_version }}</span>
</h2>
</div>
<!-- Text -->
<div ng-bind-html="motion.getText()"></div>
<!-- Reason -->
<h2 ng-if="motion.getReason()" translate>Reason</h2>
<div ng-bind-html="motion.getReason()"></div>
</div> </div>