CMS DataLife Engine - Система управления сайтами

Sign in to follow this  
mobirobi

Режим "нравится" "не нравится" в мобильной версии сайта

Recommended Posts

Здравствуйте, следующая проблема, нравится как реализовано в дефолтном шаблоне DLE режим "нравится" "не нравится".

 

Сделать это с полной версией сайта труда не составило, добавил в полной и краткой новости код

[rating-type-4]
					<div class="rate_like-dislike">
						<span class="ratingtypeplusminus ignore-select ratingplus">{likes}</span>
						[rating-plus]<span title="Нравится"><svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg></span>[/rating-plus]
						<span class="ratingtypeplusminus ratingminus ignore-select">{dislikes}</span>
						[rating-minus]<span title="Не нравится"><svg class="icon icon-dislike"><use xlink:href="#icon-dislike"></use></svg></span>[/rating-minus]
					</div>
					[/rating-type-4]

потом подключил svg в main.tpl

 

<script type="text/javascript">
        jQuery(function($){
            $.get("{THEME}/images/sprite.svg", function(data) {
              var div = document.createElement("div");
              div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
              document.body.insertBefore(div, document.body.childNodes[0]);
            });
        });
    </script>

и добавил стили в styles.css

 

		.rate_like > a, .rate_like-dislike {
			float: left;
			height: 22px; line-height: 22px;
			padding: 6px 12px;
			border: 1px solid #eaeaea;
			border-radius: 18px;
			text-decoration: none !important;
			font-weight: bold;
			color: #919191;
			-webkit-transition: all ease .2s; transition: all ease .2s;
		}
		.rate_like > a:hover { border-color: #3394e6; color: #3394e6; }
		.rate_like .icon { width: 16px; height: 15px; margin: -.2em .3em 0 0; }

		.rate_like-dislike > a {
			display: inline-block;
			width: 22px; height: 22px;
			text-align: center;
		}
		.rate_like-dislike > a .icon {
			width: 14px; height: 15px;
			fill: #787878;
			vertical-align: middle;
			margin: -.3em 0 0 0;
		}
		.rate_like-dislike > a:hover .icon { fill: #3394e6; }
		.rate_like-dislike .ratingplus { color: #88c54d; }
		.rate_like-dislike .ratingminus { color: #e45757; }
		.rate_like-dislike > span { cursor: default; margin: 0 .3em; }
.after_rate {margin: 2 0 0 0;}

а в  engine.css добавил

 

.ratingzero {
  color: #6c838e;
}

.ratingtypeplusminus {
  padding: 0px 5px;
}

.ratingtypeplus {
  color: #6c838e;
  padding: 0px 0px 0px 5px;
}

.ratingplus {
  color: green;
}

.ratingminus {
  color: red;
}

 

в полной версии все работает замечательно, ниже скриншот

3fd04152a043.jpg

то в мобильной версии при всех подобных манипуляциях со стандартным шаблоном DLE для смартфонов  smartphone получаю вот такое на четверть сайта, вместо аккуратной кнопки.

 

18b74d3058b9.jpg

 

Как сделать нормально? Возможно что-то упустил - хотя пересмотрел уже все - за основу взят шаблон Default в DLE. Странно что этот номер прошел с моей родной темой, а с дефолтной темой  smartphone нет. Спасибо.

 

 

Share this post


Link to post
Share on other sites
1 час назад, mobirobi сказал:

Как сделать нормально?

смотри стили, что-то не то, возможно дублируются

 

Share this post


Link to post
Share on other sites

да уже думал над этим, уже второй день подряд думаю, что не так... Взят код из шаблона Default поставлен в шаблон smartphone - с виду все правильно, на дубли проверял поиском, не находит ничего похожего, все подключено одинаково на родном шаблоне, он писался очень давно на <div> когда у ДЛЕ еще была табличная верстка в демонстрационных шаблонах (и мобильного трафика столько не было, как сейчас) - и на нём всё ОК. Вообще в версии  smartphone в ДЛЕ 13.2 - по умолчанию не работает половина функций которые напридумывали с версии этак с 10, если не раньше. Её толком не обновляют, хотя сейчас с мобильных устройств посетителей больше чем со стационарных компьютеров - почти у каждого есть смартфон, а то и 2 или планшет... За то в последней версии 3 новых дизайна для стационарного компа, по которым можно понять что и как должно работать, а как применить это к мобильной версии без особых знаний может быть сложновато)))

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this