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

[nusman]

Здравствуйте уважаемые, подскажите пожалуйста есть ли такое (Красивые результаты опроса) расширение на версию 3.1.3 ? Или может в планах создать?

[Alecto]

есть вот такое
https://www.phpbb.com/community/viewtop ... &t=2284596
но они скорее не "красивые" а "расширенные" по своей функциональности.
а что такое "красивые" - нипанятна, вот девушки красивые - все сразу ясно и понятно... а опросы в просилвере, они и так отлично выглядят и прекрасно работают.

PS rxu, я очень нежно ответил )))

[nusman]

Вообще то это тема так называется: "Красивые результаты опроса (css3) - 3.1" И скрины там были гораздо симпатичнее, чем те на которые вы отсылаете...

[rxu]

я очень нежно ответил )))

Продолжайте в том же духе, одобряю.

[xisp]

"Красивые результаты опроса (css3) - 3.1"

Может, 3.0? Для 3.1 их никто не делал.

[Anvar]

xisp, Так и тема в соответствующем форуме.

Мысль по опросам имеет место быть, не только девушкам быть красивыми :-D

[Heldar]

И скрины там были гораздо симпатичнее

А можно ссылку о чём речь идёт? А то вот ссылка Alecto мне понравилась, а сравнить не счем.

[Anvar]

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

[Romnik]

Для 3.3.15 и соответственно для 3.1 и 3.2

viewtopic_body.html

Замените свой блок на этот:

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

<!-- IF S_HAS_POLL -->
	<form method="post" action="{S_POLL_ACTION}" data-ajax="vote_poll" data-refresh="true" class="topic_poll">

	<div class="panel">
		<div class="inner">

		<div class="content">
			<h2 class="poll-title"><!-- EVENT viewtopic_body_poll_question_prepend -->{POLL_QUESTION}<!-- EVENT viewtopic_body_poll_question_append --></h2>
			<p class="author">{L_POLL_LENGTH}<!-- IF S_CAN_VOTE and L_POLL_LENGTH --><br /><!-- ENDIF --><!-- IF S_CAN_VOTE --><span class="poll_max_votes">{L_MAX_VOTES}</span><!-- ENDIF --></p>

			<fieldset class="polls">
			<!-- BEGIN poll_option -->
				<!-- EVENT viewtopic_body_poll_option_before -->
				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF --><!-- IF poll_option.POLL_OPTION_MOST_VOTES --> most-votes<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF --> data-alt-text="{L_POLL_VOTED_OPTION}" data-poll-option-id="{poll_option.POLL_OPTION_ID}">
					<dt><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
					<!-- IF S_CAN_VOTE --><dd style="width: auto;" class="poll_option_select"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
					<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>
					<dd class="resultbar"><div class="meter"><div class="poll_animation{poll_option.POLL_OPTION_PCT} <!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT}; max-width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}&nbsp;</div></div></dd>
					<dd class="poll_option_percent<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd>
				</dl>
				<!-- EVENT viewtopic_body_poll_option_after -->
			<!-- END poll_option -->

				<dl class="poll_total_votes<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->">
					<dt>&nbsp;</dt>
					<dd class="resultbar">{L_TOTAL_VOTES}{L_COLON} <span class="poll_total_vote_cnt">{TOTAL_VOTES}</span></dd>
				</dl>

			<!-- IF S_CAN_VOTE -->
				<dl style="border-top: none;" class="poll_vote">
					<dt>&nbsp;</dt>
					<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
				</dl>
			<!-- ENDIF -->

			<!-- IF not S_DISPLAY_RESULTS -->
				<dl style="border-top: none;" class="poll_view_results">
					<dt>&nbsp;</dt>
					<dd class="resultbar"><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></dd>
				</dl>
			<!-- ENDIF -->
			</fieldset>
			<div class="vote-submitted hidden">{L_VOTE_SUBMITTED}</div>
		</div>

		</div>
		{S_FORM_TOKEN}
		{S_HIDDEN_FIELDS}
	</div>

	</form>
	<hr />
<!-- ENDIF -->

colours.css

Найти:

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

.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
	border-right-color: transparent;
}

После вставить:

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

    .pollbar1 {
    	background-color: #4069D1; /* 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);
    }
     
    @keyframes move {
      from { background-position: 0 0; }
      to   { background-position: 100px 50px; }
    }
     
    @-webkit-keyframes move {
    	0% {background-position: 0 0;}
    	100% {background-position: 100px 50px;}
    }
     
    .meter {
       background-color: #E0E3E0;
       height: 15px;
       padding: 1px !important;
       margin: 0;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
       -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
       -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
       box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
    }
     
    .meter > div {
    	position: relative;
    	height: 100%;
    	padding: 0 !important;
    	border: none;
    	border-top-right-radius: 3px;
    	border-bottom-right-radius: 3px;
    	border-top-left-radius: 3px;
    	border-bottom-left-radius: 3px;
    	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;
    }

Наслаждайтесь!

Демо https://club-granta.ru/viewtopic.php?f=4&t=68

[rxu]

Romnik, ну Вы и темы поднимаете, 11-летней давности

[Romnik]

rxu, Вернулся в PHPBB начал с классики. 8 лет форумами не занимался. Портировать надо мои старые наработки. Пока просто ручной мод выложил.

[Romnik]

Забыл добавить:

colours.css

Найти и удалить:

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

.pollbar1 {
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

.rtl .pollbar1 {
	border-left-color: #74162C;
}

.pollbar2 {
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

.rtl .pollbar2 {
	border-left-color: #8C1C38;
}

.pollbar3 {
	background-color: #D11A4E;
	border-bottom-color: #AA2346;
	border-right-color: #AA2346;
}

.rtl .pollbar3 {
	border-left-color: #AA2346;
}

.pollbar4 {
	background-color: #E41653;
	border-bottom-color: #BE1E4A;
	border-right-color: #BE1E4A;
}

.rtl .pollbar4 {
	border-left-color: #BE1E4A;
}

.pollbar5 {
	background-color: #F81157;
	border-bottom-color: #D11A4E;
	border-right-color: #D11A4E;
}

.rtl .pollbar5 {
	border-left-color: #D11A4E;
}