Motion template fixes

- Fix missing workflows in Motion create form.
- redesign motion meta box
- use table format for motion voting results
This commit is contained in:
Emanuel Schuetze 2016-01-13 12:42:40 +01:00
parent e471b84b27
commit 2f8c894104
4 changed files with 108 additions and 69 deletions

View File

@ -264,11 +264,28 @@ img {
float: right; float: right;
} }
.col1 .meta { .col1 .meta .title {
width: 100%;
cursor: pointer;
height: 30px;
color: #fff;
background: #317796;
padding: 5px 20px 0 20px;
}
.col1 .meta .title .name {
float: left;
font-size: 14px;
}
.col1 .meta .title .icon {
float: right;
}
.col1 .meta .detail {
padding: 0 20px 10px 20px; padding: 0 20px 10px 20px;
width: auto; width: 100%;
min-height: 30px; min-height: 30px;
background: #bed4de; background: #d3d3d3;
color: #444;
} }
.col1 .meta h3 { .col1 .meta h3 {
@ -304,17 +321,15 @@ img {
width: 70px; width: 70px;
} }
#content .col2 h4 { #content .col2 h4, .col1 .meta h3 {
font-size: 22px; font-size: 22px;
line-height: 24px; line-height: 24px;
font-family: 'Roboto Condensed Light'; font-family: 'Roboto Condensed Light';
font-weight: 300; font-weight: 300;
}
#content .col2 a h4 {
color: #444; color: #444;
} }
#content .col2 a:hover h4 { #content .col2 a:hover h4 {
text-decoration: none; text-decoration: none;
} }
@ -380,7 +395,6 @@ img {
text-align: center; text-align: center;
padding-top: 7px; padding-top: 7px;
font-size: 24px; font-size: 24px;
opacity: 0.5;
} }
.col2 .projector_full .title a, .col2 .projector_full .title a:hover { .col2 .projector_full .title a, .col2 .projector_full .title a:hover {
@ -388,6 +402,9 @@ img {
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.meta .title:hover, .col2 .projector_full .title:hover {
color: #d3d3d3;
}
.col2 .projector_full .details { .col2 .projector_full .details {
clear: both; clear: both;
@ -659,8 +676,19 @@ img {
.result_label { .result_label {
margin-top: 5px; margin-top: 5px;
} }
tr.total td { .pollresults table {
font-weight: bold; margin-bottom: 0;
}
.pollresults table td{
border: none !important;
padding: 5px 2px !important;
vertical-align: middle !important;
}
.pollresults table .icon {
color: #636363;
}
.pollresults table tr.total td {
border-top: 1px solid #444 !important;
} }
/* Chatbox */ /* Chatbox */

View File

@ -157,11 +157,11 @@
<div class="projector_full" ng-if="isProjectorSidebar"> <div class="projector_full" ng-if="isProjectorSidebar">
<div class="title" ng-click="showProjectorSidebar(false)"> <div class="title" ng-click="showProjectorSidebar(false)">
<div class="name"> <div class="name">
<i class="fa fa-caret-square-o-right"></i> <i class="fa fa-video-camera"></i>
<translate>Projector</translate> <translate>Projector</translate>
</div> </div>
<div class="icon"> <div class="icon">
<i class="fa fa-video-camera"></i> <i class="fa fa-angle-right"></i>
</div> </div>
</div> </div>
<div ng-include src="'static/templates/core/projector-controls.html'"></div> <div ng-include src="'static/templates/core/projector-controls.html'"></div>

View File

@ -42,6 +42,9 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
}, },
users: function(User) { users: function(User) {
return User.findAll(); return User.findAll();
},
workflows: function(Workflow) {
return Workflow.findAll();
} }
} }
}) })

View File

@ -41,9 +41,17 @@
</div> </div>
<div class="meta"> <div class="meta">
<i class="fa toggle-icon pointer" ng-click="isMeta = !isMeta" <div class="title" ng-click="isMeta = !isMeta">
ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i> <div class="name">
<div class="row" uib-collapse="isMeta"> <i class="fa fa-info-circle"></i>
<translate>Meta information</translate>
</div>
<div class="icon">
<i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
</div>
</div>
<div class="detail" uib-collapse="isMeta">
<div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<!-- submitters --> <!-- submitters -->
<h3 translate>Submitters</h3> <h3 translate>Submitters</h3>
@ -163,60 +171,59 @@
</form> </form>
</div> </div>
<div ng-show="!poll.isEditMode" class="pollresults"> <div ng-show="!poll.isEditMode" class="pollresults">
<table class="table">
<!-- yes --> <!-- yes -->
<div class="result_label"> <tr>
<i class="fa fa-thumbs-up"></i> <td class="icon">
<translate>Yes</translate>: <i class="fa fa-thumbs-up fa-2x"></i>
</div> <td>
<span class="result_label"><translate>Yes</translate>:</span>
<span class="result_value">{{ poll.yes }} {{ poll.getYesPercent() }}</span>
<div ng-if="poll.getYesPercent(true)"> <div ng-if="poll.getYesPercent(true)">
<uib-progressbar value="poll.getYesPercent(true)" type="success"></uib-progressbar> <uib-progressbar value="poll.getYesPercent(true)" type="success"></uib-progressbar>
</div> </div>
<div class="result_value">{{ poll.yes }} {{ poll.getYesPercent() }}</div>
<!-- no --> <!-- no -->
<div class="result_label"> <tr>
<i class="fa fa-thumbs-down"></i> <td class="icon">
<translate>No</translate>: <i class="fa fa-thumbs-down fa-2x"></i>
</div> <td>
<span class="result_label"><translate>No</translate>:</span>
<span class="result_value">{{ poll.no }} {{ poll.getNoPercent() }}</span>
<div ng-if="poll.getNoPercent(true)"> <div ng-if="poll.getNoPercent(true)">
<uib-progressbar value="poll.getNoPercent(true)" type="danger"></uib-progressbar> <uib-progressbar value="poll.getNoPercent(true)" type="danger"></uib-progressbar>
</div> </div>
<div class="result_value">{{ poll.no }} {{ poll.getNoPercent() }}</div>
<!-- abstain --> <!-- abstain -->
<div class="result_label"> <tr>
<b>&empty;</b> <td class="icon">
<translate>Abstain</translate>: <strong style="font-size: 26px">&empty;</strong>
</div> <td>
<span class="result_label"><translate>Abstain</translate>:</span>
<span class="result_value">{{ poll.abstain }} {{ poll.getAbstainPercent() }}</span>
<div ng-if="poll.getAbstainPercent(true)"> <div ng-if="poll.getAbstainPercent(true)">
<uib-progressbar value="poll.getAbstainPercent(true)" type="warning"></uib-progressbar> <uib-progressbar value="poll.getAbstainPercent(true)" type="warning"></uib-progressbar>
</div> </div>
<div class="result_value">{{ poll.abstain }} {{ poll.getAbstainPercent() }}</div>
<hr class="smallhr" ng-if="poll.votesvalid || poll.votesinvalid">
<!-- valid votes --> <!-- valid votes -->
<div ng-if="poll.votesvalid"> <tr>
<div class="result_label"> <td class="icon">
<i class="fa fa-check"></i> <i class="fa fa-check fa-lg"></i>
<translate>Valid votes</translate>: <td>
</div> <span class="result_label"><translate>Valid votes</translate>:</span>
<div class="result_value">{{ poll.votesvalid }} {{ poll.getVotesValidPercent() }}</div> <span class="result_value">{{ poll.votesvalid }} {{ poll.getVotesValidPercent() }}</span>
</div>
<!-- invalid votes --> <!-- invalid votes -->
<div ng-if="poll.votesinvalid"> <tr>
<div class="result_label"> <td class="icon">
<i class="fa fa-ban"></i> <i class="fa fa-ban fa-lg"></i>
<translate>Invalid votes</translate>: <td>
</div> <span class="result_label"><translate>Invalid votes</translate>:</span>
<div class="result_value">{{ poll.votesinvalid }} {{ poll.getVotesInvalidPercent() }}</div> <span class="result_value">{{ poll.votesinvalid }} {{ poll.getVotesInvalidPercent() }}</span>
</div>
<hr class="smallhr" ng-if="poll.votescast">
<!-- votes cast --> <!-- votes cast -->
<div ng-if="poll.votescast"> <tr class="total">
<div class="result_label"> <td class="icon">
<b>&sum;</b> <strong style="font-size: 16px">&sum;</strong>
<translate>Votes cast</translate>: <td>
</div> <span class="result_label"><translate>Votes cast</translate>:</span>
<div class="result_value">{{ poll.votescast }} {{ poll.getVotesCastPercent() }}</div> <span class="result_value">{{ poll.votescast }} {{ poll.getVotesCastPercent() }}</span>
</div> </table>
</div>
</ol> </ol>
<button ng-if="motion.isAllowed('create_poll')" ng-click="create_poll()" class="btn btn-default btn-sm"> <button ng-if="motion.isAllowed('create_poll')" ng-click="create_poll()" class="btn btn-default btn-sm">
<i class="fa fa-bar-chart fa-lg"></i> <i class="fa fa-bar-chart fa-lg"></i>
@ -225,6 +232,7 @@
</div> </div>
<div class="col-sm-1"></div> <div class="col-sm-1"></div>
</div> </div>
</div>
</div> </div>
<div class="details"> <div class="details">