decide.nolog.cz/app/templates/poll.hbs
sappor0 c23ba1f6fb Using bootstrap 4 and related UI refresh (#205)
Changes at a glance:

- Switch from BS3 to BS4
- Polishing of some UI elements (low-hanging fruit for UX)
- Mobile-friendly layout.
2019-06-07 11:22:13 +02:00

128 lines
3.5 KiB
Handlebars

{{title model.title}}
<div id="poll">
<div class="row">
<div class="col-sm-6 col-lg-5">
<div class="box meta-data">
<h2 class="title">{{model.title}}</h2>
<p class="description">{{model.description}}</p>
<p class="dates">
<span class="creationDate">
{{t
"poll.created-date"
date=(moment-format model.creationDate "LLLL" locale=currentLocale)
}}
</span>
{{#if model.expirationDate}}
<br>
<span class="expirationDate">
{{t
"poll.expiration-date"
date=(moment-format model.expirationDate "LLLL" locale=currentLocale)
}}
</span>
{{/if}}
</p>
</div>
</div>
<div class="col-sm-6 col-lg-6 offset-lg-1">
<div class="box poll-link cr-poll-link">
<p>{{t "poll.share"}}</p>
<p class="link cr-poll-link__link">
<small>
<code class="cr-poll-link__url">{{pollUrl}}</code>
</small>
{{#copy-button
clipboardText=pollUrl
classNames="btn btn-secondary cr-poll-link__copy-btn btn-sm"
success=(action "linkAction" "copied")
error=(action "linkAction" "selected")
}}
{{t "poll.link.copy-label"}}&nbsp;
<span class="oi oi-clipboard" title={{t "poll.link.copy-label"}} aria-hidden="true"></span>
{{/copy-button}}
</p>
<small class="text-muted">
{{t "poll.share.notice"}}
</small>
</div>
</div>
</div>
{{#if showExpirationWarning}}
<div class="row">
<div class="col-xs-12">
{{#bs-alert type="warning" classNames="expiration-warning"}}
{{t
"poll.expiration-date-warning"
timeToNow=(moment-from-now model.expirationDate locale=currentLocale)
}}
{{/bs-alert}}
</div>
</div>
{{/if}}
<div class="box">
<ul class="nav nav-tabs" role="tablist">
{{#link-to
"poll.participation"
model
tagName="li"
activeClass="active"
class="participation nav-item"
}}
{{#link-to "poll.participation" model class="nav-link"}}
{{t "poll.tab-title.participation"}}
{{/link-to}}
{{/link-to}}
{{#link-to
"poll.evaluation"
model
tagName="li"
activeClass="active"
class="evaluation nav-item"
}}
{{#link-to "poll.evaluation" model class="nav-link"}}
{{t "poll.tab-title.evaluation"}}
{{/link-to}}
{{/link-to}}
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
{{outlet}}
</div>
</div>
</div>
</div>
{{#bs-modal
title=(t "poll.modal.timezoneDiffers.title")
open=mustChooseTimezone
footer=false
closeButton=false
keyboard=false
autoClose=false
id="modal-choose-timezone"
as |modal|
}}
{{#modal.body}}
<p>
{{t "poll.modal.timezoneDiffers.body"}}
</p>
{{/modal.body}}
{{#modal.footer}}
{{#bs-button
onClick=(action "useLocalTimezone")
class="use-local-timezone"
}}
{{t "poll.modal.timezoneDiffers.button.useLocalTimezone"}}
{{/bs-button}}
{{#bs-button
onClick=(action (mut timezoneChoosen) true)
classNames="use-poll-timezone"
}}
{{t "poll.modal.timezoneDiffers.button.usePollTimezone"}}
{{/bs-button}}
{{/modal.footer}}
{{/bs-modal}}