• 232 CoolPoll - анимация вывода итогов опросов • 
Веб китовая разработка на основе WebKit графики
При создании темы о модах для двигателя форумов phpBB ветки до версии 3.0.14 название темы должно начинаться с названия мода на английском, без указания версии, затем тире, затем короткое название мода на русском с маленькой буквы. Создание тем не о модах в данном подфоруме запрещено. Посторонние темы о двиге и посторонних проблемах для ветки до версии 3.0.14 в соседнем подфоруме.

    232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Александр Лешванов 24 апр 2017, 05:41

ИЗМЕНЕНИЕ ВИДА ВЫВОДА РЕЗУЛЬТАТОВ ОПРОСОВ (Красивые результаты опроса от Татьяна5).
CoolPollv.1.0.2 - анимация вывода опросов
Веб китовая разработка на основе WebKit графики от Татьяна5/ Вид вывода результатов опросов можно заменить не только в темах, но и в блоке вывода рандомных опросов на главной странице форума.

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP
Монитор: 1152 x 864 1152 x 864

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 05:46

CoolPoll v. 1.0.1
Проверялось на Opera 12, Opera 15, Google Chrome 28, Firefox 22 - тени, градиенты и анимация поддерживаются
Спасибо Smayliks что предоставил первоначальный код
Цвета:
0-19% - синий
20-39% - зеленый
40-59% - желтый
60-79% - оранжевый
80-100% - красный
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}&nbsp;</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;
}
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 05:54

Для большей "разноцветности" - пересчет значений процентов в опросах
(пункт с наибольшим количеством голосов - 100%, остальные считаются от него)
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;
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Александр Лешванов 24 апр 2017, 05:54

Красотень...

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 05:56

Для папок ЛС
(мод 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;
}
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 05:59

Еще один вариант анимации с "наполнением" полосок результатов опросов. Пример
(Дополнение к моду)
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;
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 06:06

CoolPoll v.1.0.2
Пересчет значений процентов
Анимация "наполнения"
Изменен внешний вид
Поддержка subsilver2
Обновление - удалить версию 1.0.1 и все дополнения к ней, установить 1.0.2
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  232 CoolPoll - анимация вывода итогов опросов

Сообщение Разместил Татьяна5 24 апр 2017, 06:18

prosilver
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP
Следующая страница

Вернуться в 450 модов движка форумов phpBB (до версии 3.0.14)



 • Блок вывода аналогичных по названию других тем нашего форума • 

HTML5 Validated Счетчик ИКС Яндекс.Метрика