Redesign projector template.

openslides/core/signals.py

@@ -136,29 +136,13 @@ def setup_general_config(sender, **kwargs):
         group=ugettext_lazy('Projector'))
 
     yield ConfigVariable(
-        name='projector_backgroundcolor1',
+        name='projector_backgroundcolor',
-        default_value='#444444',
+        default_value='#317796',
         label=ugettext_lazy('Background color of projector header'),
         help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'),
         weight=160,
         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(
         name='projector_default_countdown',
         default_value=60,

openslides/core/static/css/projector.css

@@ -7,6 +7,8 @@ body{
     font-size: 20px !important;
     line-height: 24px !important;
     overflow: hidden;
+    font-family: "Open Sans",Helvetica,Arial,sans-serif;
+    color: #222;
 }
 
 /*** HEADER ***/
@@ -17,7 +19,7 @@ body{
 }
 #logo {
     position: relative;
-    left: 75px;
+    left: 50px;
     top: 4px;
     height: 60px;
     margin-right: 35px;
@@ -25,10 +27,11 @@ body{
 }
 #eventdata {
     position: relative;
-    left: 75px;
+    left: 30px;
     top: 12px;
     height: 50px;
     overflow: hidden;
+    color: #F5F5F5;
 }
 #eventdata .title {
     font-size: 26px;
@@ -40,58 +43,90 @@ body{
 }
 #eventdata .description {
     font-size: 18px;
-    opacity: 0.5;
+    opacity: 0.8;
 }
 #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 {
     position: absolute;
-    left: 75px;
+    left: 50px;
     top: 150px;
-    right: 40px;
+    right: 50px;
     z-index: -1;
-    line-height: normal;
+    line-height: 28px;
 }
 .scrollcontent {
     transition-property: margin, font-size;
     transition-duration: 1s;
 }
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
+    font-weight: normal;
+}
+
 h1 {
     font-size: 2.25em;
-    margin-bottom: 40px;
     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;
     display: block;
+    color: #9a9898;
 }
 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;
-    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 {
     margin: 0 0 10px 2em;
@@ -99,16 +134,10 @@ ul, ol {
 li {
     line-height: normal;
 }
-.well h4 {
+.result {
-    margin: 20px 0 2px 0;
-}
-.well h4.first {
-    margin-top: 0;
-}
-.well .result {
     line-height: 30px;
 }
-.well .result hr {
+.result hr {
     border-top: 1px solid;
     margin: 5px 0;
     width: 10em;
@@ -133,29 +162,32 @@ hr {
 
 /*** Overlay ***/
 .countdown {
+    min-width: 260px;
     position: fixed;
     margin: 0;
-    top: 0;
+    top: 90px;
     right: 0px;
-    padding: 19px 20px 5px 19px;
+    padding: 23px 47px 0px 19px;
     min-height: 72px;
-    font-size: 4em;
+    font-size: 3.7em;
     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;
+    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
 }
 .countdown .description {
     font-weight: normal;
-    font-size: 0.2em;
+    font-size: 18px;
     margin-top: 20px;
+    padding-right: 5px;
 }
 .countdown.negative {
     color: #CC0000;
 }
 .message_background {
     background-color: #777777;
-    opacity: 0.6;
+    opacity: 0.8;
     position: absolute;
     top: 0;
     left: 0;
@@ -164,12 +196,14 @@ hr {
     z-index: 300;
 }
 .message {
+    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
+    font-weight: normal;
     position: fixed;
     top: 35%;
     left: 10%;
     width: 80%;
     text-align: center;
-    border-radius: 0.5em;
+    border-radius: 0.2em;
     background: #FFFFFF;
     font-size: 2.75em;
     padding: 0.2em 0;

openslides/core/static/templates/projector.html

@@ -8,25 +8,12 @@
 <link rel="icon" href="/static/img/favicon.png">
 <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>
 
@@ -55,4 +42,15 @@
   </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>

openslides/motions/static/templates/motions/slide_motion.html

@@ -1,12 +1,30 @@
 <div ng-controller="SlideMotionCtrl" class="content scrollcontent">
-  <h1>{{ motion.getTitle() }}</h1>
+
+  <div id="sidebox">
+    <!-- State -->
+    <h3 translate>State</h3>
+    {{ motion.state.name }}
+
+    <!-- Submitters -->
+    <h3 ng-if="motion.submitters.length > 0" translate>Submitters</h3>
+    <div ng-repeat="submitter in motion.submitters">
+      {{ submitter.get_full_name() }}<br>
+    </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>
-
-  <h2 ng-if="motion.submitters" translate>Submitters</h2>
-  <div ng-repeat="submitter in motion.submitters">
-    {{ submitter.get_full_name() }}<br>
-  </div>
 </div>