[proSilver] Красивые результаты опроса (css3).

[angst66]

Было бы неплохо по этому же принципу сделать индикатор папок лс

[владимир1983]

PM Box Progress Bars

[angst66]

Я про сабжевую красоту.

[Татьяна5]

Для папок ЛС
(мод 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;
}

[angst66]

Вот

Безымянный0.png

Безымянный.png

Безымянный1.png

[romeo_piter]

В Опере линейка длинная, в ишаке, лисе и хроме всё ок

[Татьяна5]

romeo_piter
У меня все нормально отображается. Кеш.

[romeo_piter]

Нет, похоже версия оперы, хотя странно.
Кэш броузеров чистил.
Поставил последнюю - всё нормально.

[Пчелкин]

Поставил последнюю - всё нормально.

Все верно...Опера тока в последней версии начала поддерживать вебкитовые навороты...

[Romnik]

Ну и мой вклад, чтобы отступы сверху и снизу были одинаковые:

Код: Выделить всё

#cp-main .meter {
    margin: -6px 0 8px 0;
    width: 300px;
}

1.gif

[angst66]

С папками всё понятно, 50 писем, это 100%. А вот с опросами не очень. Казалось бы сумма всех голосов должна быть 100%. Если за одно голоса прибавляются,% повышается, за другой вариант % понижается. Но на деле получается не совсем красиво, после определенного числа голосов шкала заполняется полностью, пишется 100%, а голоса еще могут добавлятся и добавлятся... Вот пример, увидел на главной у Пчёлкина:

Безымянный.png

[Татьяна5]

angst66, это доработка (максимум проголосовавших за 1 пункт опроса 100%, остальное считается от него). Кому-то понятней с ней, кому-то без нее. Мод работает независимо от этой доработки

[angst66]

Посмотрел у себя, сто процентов это сумма всех голосов, значит ошибка у человека локальная...

Добавлено спустя 1 минуту 34 секунды:
Понятно.

[Татьяна5]

Еще один вариант анимации с "наполнением" полосок результатов опросов. Пример
(Дополнение к моду)

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;

[владимир1983]

Татьяна5 может вынесем варианты реализации в первый пост?