style user selection by bootstrap
This commit is contained in:
jelhan
parent
f0895f94c4
commit
3a09883d5e
2 changed files with 124 additions and 103 deletions
|
|
@ -1,3 +1,10 @@
|
|||
/* bootstrap overwrites */
|
||||
table tr td .form-group {
|
||||
/* remove bootstrap default margin-bottom for form elements in table */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* elements */
|
||||
body {
|
||||
background-color: #D3D3D3;
|
||||
}
|
||||
|
|
@ -17,29 +24,30 @@ body {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.index .start,
|
||||
.index .have-a-try {
|
||||
/* page: poll */
|
||||
#poll .index .start,
|
||||
#poll .index .have-a-try {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.meta-data .description {
|
||||
#poll .meta-data .description {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.meta-data .creationDate {
|
||||
#poll .meta-data .creationDate {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.share-link .link {
|
||||
#poll .share-link .link {
|
||||
color: #556B2F;
|
||||
}
|
||||
|
||||
.share-link .notice {
|
||||
#poll .share-link .notice {
|
||||
font-size: 90%;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
#poll .table-scroll {
|
||||
/* übernommen von .table-responsive von bootstrap, aber grundsätzlich */
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -50,26 +58,26 @@ body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.evaluation-header {
|
||||
#poll .evaluation-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody td .yes,
|
||||
tfoot td option[value="yes"] {
|
||||
#poll tbody td .yes,
|
||||
#poll tfoot td option[value="yes"] {
|
||||
color: green;
|
||||
}
|
||||
|
||||
tbody td .no,
|
||||
tfoot td option[value="no"]{
|
||||
#poll tbody td .no,
|
||||
#poll tfoot td option[value="no"]{
|
||||
color: red;
|
||||
}
|
||||
|
||||
tbody td .maybe,
|
||||
tfoot td option[value="maybe"] {
|
||||
#poll tbody td .maybe,
|
||||
#poll tfoot td option[value="maybe"] {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
/* loading page */
|
||||
/* page: loading */
|
||||
#loading {
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
|
|
|||
189
index.html
189
index.html
|
|
@ -115,110 +115,123 @@
|
|||
|
||||
<!-- poll template -->
|
||||
<script type="text/x-handlebars" id="poll">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-5">
|
||||
<div class="box meta-data">
|
||||
<h2 class="title">{{title}}</h2>
|
||||
<p class="description">{{description}}</p>
|
||||
<p class="creationDate">created on {{creationDate}}</p>
|
||||
<div id="poll">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-5">
|
||||
<div class="box meta-data">
|
||||
<h2 class="title">{{title}}</h2>
|
||||
<p class="description">{{description}}</p>
|
||||
<p class="creationDate">created on {{creationDate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-5 col-lg-offset-2">
|
||||
<div class="box share-link">
|
||||
<p>Share the link and invite other people to participate in your poll.</p>
|
||||
<p class="link"><a {{bind-attr href=pollUrl}}>{{pollUrl}}</a></p>
|
||||
<p class="notice">Everyone who knows the link could read the data.
|
||||
If your poll consists of private data you may only share the
|
||||
link via encrypted channels like PGP encrypted email or instant
|
||||
messaging with OTR.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-5 col-lg-offset-2">
|
||||
<div class="box share-link">
|
||||
<p>Share the link and invite other people to participate in your poll.</p>
|
||||
<p class="link"><a {{bind-attr href=pollUrl}}>{{pollUrl}}</a></p>
|
||||
<p class="notice">Everyone who knows the link could read the data.
|
||||
If your poll consists of private data you may only share the
|
||||
link via encrypted channels like PGP encrypted email or instant
|
||||
messaging with OTR.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="table-scroll">
|
||||
<table class="user-selections-table table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
{{#each option in options}}
|
||||
<th>
|
||||
{{#if isFindADate}}
|
||||
{{formattedDate option.title 'll'}}
|
||||
{{/if}}
|
||||
|
||||
{{#if isMakeAPoll}}
|
||||
{{option.title}}
|
||||
{{/if}}
|
||||
</th>
|
||||
{{/each}}
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class='newUser'>
|
||||
<td>
|
||||
{{input value=view.newUserName placeholder="Enter your name..."}}
|
||||
</td>
|
||||
{{#each newUserSelection in view.newUserSelections}}
|
||||
<td>
|
||||
{{#if isFreeText}}
|
||||
{{input value=newUserSelection.value}}
|
||||
{{else}}
|
||||
{{view Ember.Select
|
||||
contentBinding="answers"
|
||||
optionValuePath="content.label"
|
||||
optionLabelPath="content.label"
|
||||
prompt="choose an answer"
|
||||
valueBinding="newUserSelection.value"}}
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/each}}
|
||||
<td>
|
||||
<button {{action "addNewUser" target="view" class="btn btn-default"}}> save </button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{{#each user in users}}
|
||||
<div class="box">
|
||||
<div class="table-scroll">
|
||||
<table class="user-selections-table table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{user.name}}</td>
|
||||
{{#each selection in user.selections}}
|
||||
<td>
|
||||
{{#if isFreeText}}
|
||||
{{selection.value}}
|
||||
{{else}}
|
||||
<span {{bind-attr class="selection.value"}}>{{selection.value}}</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
<th> </th>
|
||||
{{#each option in options}}
|
||||
<th>
|
||||
{{#if isFindADate}}
|
||||
{{formattedDate option.title 'll'}}
|
||||
{{/if}}
|
||||
|
||||
{{#if isMakeAPoll}}
|
||||
{{option.title}}
|
||||
{{/if}}
|
||||
</th>
|
||||
{{/each}}
|
||||
<td> </td>
|
||||
<th> </th>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</thead>
|
||||
|
||||
{{#unless isFreeText}}
|
||||
<tr class='evaluation evaluation-header'>
|
||||
<td {{bind-attr colspan=colspan}}>Evaluation</td>
|
||||
</tr>
|
||||
|
||||
{{#each answer in evaluation}}
|
||||
<tr class='evaluation'>
|
||||
<tbody>
|
||||
<tr class='newUser'>
|
||||
<form role="form">
|
||||
<td>
|
||||
{{answer.label}}
|
||||
<div class="form-group">
|
||||
{{input value=view.newUserName placeholder="Enter your name..." class="form-control"}}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{{#each option in answer.options}}
|
||||
{{#each newUserSelection in view.newUserSelections}}
|
||||
<td>
|
||||
{{option}}
|
||||
{{#if isFreeText}}
|
||||
<div class="form-group">
|
||||
{{input value=newUserSelection.value class="form-control"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div >
|
||||
{{view Ember.Select
|
||||
contentBinding="answers"
|
||||
optionValuePath="content.label"
|
||||
optionLabelPath="content.label"
|
||||
prompt="choose an answer"
|
||||
valueBinding="newUserSelection.value"
|
||||
class="form-control"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/each}}
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<button {{action "addNewUser" target="view"}} class="btn btn-default"> save </button>
|
||||
</div>
|
||||
</td>
|
||||
</form>
|
||||
</tr>
|
||||
|
||||
{{#each user in users}}
|
||||
<tr>
|
||||
<td>{{user.name}}</td>
|
||||
{{#each selection in user.selections}}
|
||||
<td>
|
||||
{{#if isFreeText}}
|
||||
{{selection.value}}
|
||||
{{else}}
|
||||
<span {{bind-attr class="selection.value"}}>{{selection.value}}</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/each}}
|
||||
<td> </td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
{{/unless}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{#unless isFreeText}}
|
||||
<tr class='evaluation evaluation-header'>
|
||||
<td {{bind-attr colspan=colspan}}>Evaluation</td>
|
||||
</tr>
|
||||
|
||||
{{#each answer in evaluation}}
|
||||
<tr class='evaluation'>
|
||||
<td>
|
||||
{{answer.label}}
|
||||
</td>
|
||||
|
||||
{{#each option in answer.options}}
|
||||
<td>
|
||||
{{option}}
|
||||
</td>
|
||||
{{/each}}
|
||||
|
||||
<td> </td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
{{/unless}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue