CoolPoll
v.1.0.2 - анимация вывода опросовВеб китовая разработка на основе WebKit графики от Татьяна5/ Вид вывода результатов опросов можно заменить не только в темах, но и в блоке вывода рандомных опросов на главной странице форума.
CoolPoll
v.1.0.2 - анимация вывода опросовCoolPoll v. 1.0.1
Smayliks
что предоставил первоначальный кодstyles/prosilver/template/viewtopic_body.html
<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar">
<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="meter">
{poll_option.POLL_OPTION_RESULT}</div></dd>
{poll_option.POLL_OPTION_RESULT} </div></div></dd>
styles/prosilver/theme/colours.css
.rtl .pollbar5 {
border-left-color: #D11A4E;
}
/* CoolPoll (http://phpbb.tttz.ru)
-----------------------------v.1.0.1--- */
.pollbar1 {
background-color: #0000ff; /* blue */
background-image: linear-gradient(
135deg, rgba(0, 0, 128, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 128, 0.2) 50%,
rgba(0, 0, 128, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar2 {
background-color: #2BC253; /* green */
background-image: linear-gradient(
135deg,
rgba(84, 240, 84, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(84, 240, 84, 0.2) 50%,
rgba(84, 240, 84, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar3 {
background-color: #FFD800; /* yellow */
background-image: linear-gradient(
135deg,
rgba(216, 177, 0, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(216, 177, 0, 0.2) 50%,
rgba(216, 177, 0, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar4 {
background-color: #f1a165; /* orange */
background-image: linear-gradient(
135deg,
rgba(243, 109, 10, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(243, 109, 10, 0.2) 50%,
rgba(243, 109, 10, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar5 {
background-color: #f0a3a3; /* red */
background-image: linear-gradient(
135deg, rgba(244, 35, 35, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(244, 35, 35, 0.2) 50%,
rgba(244, 35, 35, 0.2) 75%,
transparent 75%,
transparent);
}
@-webkit-keyframes move {
0% {background-position: 0 0;}
100% {background-position: 100px 50px;}
}
@keyframes move {
from { background-position: 0 0; }
to { background-position: 100px 50px; }
}
.meter{
height: 15px;
position: relative;
margin: 0;
padding: 0 !important;
background: #7DA0D3;
border-radius: 25px;
box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
}
.meter > div {
position: relative;
height: 100%;
padding: 0 !important;
border: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
animation: move 3s linear 0s normal none infinite ;
-webkit-animation: move 3s linear infinite;
background-size: 50px 50px;
}
viewtopic.php
unset($poll_bbcode);
$max_pool_option = 0;
foreach ($poll_info as $poll_option)
{
$max_pool_option = ($poll_option['poll_option_total'] > $max_pool_option) ? $poll_option['poll_option_total'] : $max_pool_option;
}
$option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $poll_total : 0;
//$option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $poll_total : 0;
$option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $max_pool_option : 0;
Polls on index
)includes/poll_block.php
foreach($poll_data as $pd)
$max_pool_option = 0;
foreach ($poll_data as $pd)
{
$max_pool_option = ($pd['poll_option_total'] > $max_pool_option) ? $pd['poll_option_total'] : $max_pool_option;
}
$option_pct = ($poll_total_votes > 0) ? $pd['poll_option_total'] / $poll_total_votes : 0;
//$option_pct = ($poll_total_votes > 0) ? $pd['poll_option_total'] / $poll_total_votes : 0;
$option_pct = ($poll_total_votes > 0) ? $pd['poll_option_total'] / $max_pool_option : 0;
CoolPoll
v. 1.0.1 должен быть установлен)styles/prosilver/template/ucp_pm_message_header.html
<!-- IF FOLDER_STATUS and FOLDER_MAX_MESSAGES neq 0 --><p>{FOLDER_STATUS}</p><!-- ENDIF -->
<!-- IF FOLDER_STATUS and FOLDER_MAX_MESSAGES neq 0 --><p>{FOLDER_STATUS}</p>
<div class="meter">
<div style="width:{FOLDER_PERCENT}%;" class="<!-- IF FOLDER_PERCENT < 20 -->pollbar1<!-- ELSEIF FOLDER_PERCENT < 40 -->pollbar2<!-- ELSEIF FOLDER_PERCENT < 60 -->pollbar3<!-- ELSEIF FOLDER_PERCENT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->"></div>
</div>
<!-- ENDIF -->
styles/prosilver/theme/cp.css
.pm-legend {
border-left-width: 10px;
border-left-style: solid;
border-right-width: 0;
margin-bottom: 3px;
padding-left: 3px;
}
#cp-main .meter {
margin-bottom: 8px;
width: 300px;
}
styles/prosilver/template/viewtopic_body.html
<!-- IF S_DISPLAY_RESULTS -->
<!-- IF S_DISPLAY_RESULTS -->
<style>
@-webkit-keyframes move{poll_option.POLL_OPTION_PCT} {
0% { width: 0;}
100% { width: {poll_option.POLL_OPTION_PERCENT}; }
}
@keyframes move{poll_option.POLL_OPTION_PCT} {
0% { width: 0; }
100% { width: {poll_option.POLL_OPTION_PERCENT}; }
}
div.poll_animation{poll_option.POLL_OPTION_PCT} {
-webkit-animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
}
</style>
<div class="meter"><div class="
poll_animation{poll_option.POLL_OPTION_PCT}
width:{poll_option.POLL_OPTION_PERCENT};
max-width:{poll_option.POLL_OPTION_PERCENT};
styles/prosilver/theme/colors.css
animation: move 3s linear 0s normal none infinite ;
-webkit-animation: move 3s linear infinite;
Вернуться в 450 модов движка форумов phpBB (до версии 3.0.14)