ipfamari
Участники
- Сообщения
- 37
- Реакции
- 3
- Баллы
- 305
Довольно банальная информация, но вдруг кому надо будет
CSS:
.pollResults li:nth-child(1) .bar {
background: #5D9DD4
}
.pollResults li:nth-child(2) .bar {
background: #7EB74A
}
.pollResults li:nth-child(3) .bar {
background: rgb(35, 168, 109)
}
.pollResults li:nth-child(4) .bar {
background: #BFA458
}
.pollResults li:nth-child(5) .bar {
background: #B54242
}
.pollResults li:nth-child(6) .bar {
background: #0ECEB3
}
.pollBlock .pollContent
{
max-width: 580px;
margin: 0 auto;
position: relative;
}
.pollBlock .pollNotes
{
font-size: 11px;
float: right;
}
.pollBlock .question
{
overflow: hidden;
zoom: 1;
padding: 5px;
border-bottom: 1px solid #252525;
}
.pollBlock .question .questionText
{
font-size: 16px;
display: inline-block;
}
.pollBlock .question .editLink
{
float: right;
opacity: .5;
transition: .3s;
}
.pollBlock .question .editLink:hover {
opacity: 1;
}
.pollBlock .question .editLink:before {
content: "\f040";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 14px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 5px;
}
.pollBlock .question .closeDate
{
clear: both;
font-size: 11px;
}
.pollBlock .pollOptions,
.pollBlock .pollResults
{
width: 100%;
table-layout: fixed;
display: table;
margin: 10px 5px;
}
.pollBlock .pollOption label
{
display: block;
padding: 5px 10px;
}
.pollBlock .pollOption label:hover input
{
background: rgb(32, 32, 32);
}
.pollBlock .buttons
{
text-align: right;
}
.pollBlock .buttons .button
{
min-width: 120px;
_width: 120px;
line-height: 30px;
}
.pollBlock .buttons .pollNotes
{
float: left;
text-align: left;
line-height: 1.28;
margin-right: 5px;
margin-top: 5px;
}
.pollBlock .pollResult
{
display: table-row;
}
.pollBlock .votedIconCell
{
width: 15px;
text-align: center;
}
.pollBlock .voted .optionText,
.pollBlock .voted .votedIconCell
{
font-weight: bold;
display: inline-block;
}
.pollBlock .pollResult .barCell
{
float: left;
width: 93%;
clear: both;
}
.pollResult .barContainer
{
height: 26px;
line-height: 26px;
display: inline-block;
zoom: 1;
vertical-align: middle;
width: 100%;
box-sizing: border-box;
background: rgb(35, 35, 35);
position: relative;
}
.pollResult .bar
{
background: rgb(35, 168, 109);
height: 100%;
display: block;
zoom: 1;
}
.pollBlock .optionText {
padding: 4px 0;
float: left;
}
.pollBlock .pollResult .count
{
position: absolute;
z-index: 1;
color: #f5f5f5;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.pollBlock .pollResult .percentage
{
float: right;
line-height: 22px;
}
.xenOverlay > .PollContainer > .section,
.xenOverlay > .PollContainer > .sectionMain
{
background: none;
margin: 0;
}
@media (max-width:480px)
{
.Responsive .pollBlock .pollResult .optionText
{
border-top: solid 1px rgb(32, 32, 32);
}
.Responsive .pollBlock .pollResult:first-child .optionText
{
border-top: none;
}
.Responsive .pollBlock .pollResult .optionText
{
display: block;
}
.Responsive .pollBlock .pollResult .barCell
{
padding: 0;
}
.Responsive .pollBlock .pollResult .barCell,
.Responsive .pollBlock .pollResult .count,
.Responsive .pollBlock .pollResult .percentage
{
display: inline-block;
font-size: 11px;
}
}
XML:
<xen:edithint template="polls.css" />
<div class="overlayScroll pollResultsOverlay">
<ol class="pollResults {xen:if '!{$poll.canViewResults}', noResults}">
<xen:foreach loop="$poll.responses" key="$pollResponseId" value="$response">
<li class="pollResult {xen:if $response.hasVoted, voted}">
<xen:if is="{$response.hasVoted}">
<div class="votedIconCell" title="{xen:phrase your_vote}">*</div>
<xen:else />
<div class="votedIconCell"></div>
</xen:if>
<h3 class="optionText" {xen:if $response.hasVoted, 'title="{xen:phrase your_vote}"'}>
{$response.response}
</h3>
<xen:if is="{$poll.canViewResults}">
<div class="barCell">
<span class="barContainer">
<xen:if is="{$response.response_vote_count}"><span class="bar" style="width: {xen:calc "100 * {$response.response_vote_count} / {$poll.voter_count}"}%"></span></xen:if>
<div class="count">
<xen:if is="{$poll.public_votes} AND {$response.response_vote_count}">
<a href="{xen:link threads/poll/results, $thread, 'poll_response_id={$pollResponseId}'}" class="concealed OverlayTrigger">{xen:phrase x_votes, 'count={xen:number $response.response_vote_count}'}</a>
<xen:else />
{xen:phrase x_votes, 'count={xen:number $response.response_vote_count}'}
</xen:if>
</div>
</span>
</div>
<div class="percentage">
<xen:if is="{$poll.voter_count}">
{xen:number {xen:calc "100 * {$response.response_vote_count} / {$poll.voter_count}"}, 1}%
<xen:else />
{xen:number 0, 1}%
</xen:if>
</div>
</xen:if>
</li>
</xen:foreach>
</ol>
<div class="buttons">
<xen:if hascontent="true">
<div class="pollNotes">
<xen:contentcheck>
<xen:if is="{$poll.max_votes} != 1">
<span class="multipleNote muted">{xen:phrase multiple_votes_allowed}</span>
</xen:if>
<xen:if is="!{$poll.canViewResults}">
<div class="noResultsNote muted">{xen:phrase results_only_viewable_after_voting}</div>
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
<xen:if is="{$poll.canVote}">
<a href="{xen:link threads/poll/vote, $thread}" class="button PollChangeVote nonOverlayOnly">{xen:phrase change_your_vote}</a>
</xen:if>
</div>
</div>
