» »

Адаптивный вид материалов Statistik для uCoz

Адаптивный вид материалов Statistik для uCoz

Если вы решили открыть каталог новостей, то вот вам оригинальный вид материалов, где адаптивный на мобильные устройства настроен для вывода. Как заметили, что изображение идет по правую сторону, что теперь на уникальные шаблоны, будет отличным решение в просмотре разных новостных статей. Так не чем от других не отличается, разве все шрифтовые иконки взяты в обвод и к ним перекреплена цветовая палитра.

Где показывает рейтинг, виде звездочки, но только в цифрах будет, но и комментарий обязательно, чтоб видеть, актуален или нет. Так все очень понятно по формату сделан, что очень большое описание идет под заголовком. Но если смотреть с мобильного гаджета, то здесь большинство функций исчезнут, чтоб корректно все просматривалось.

Приступаем к установке:

HTML

Код
<div class="zornet_ru_sabtunim">
  <div class="zornet_ru_sabtunim_title">  
  <a href="$ENTRY_URL$"><i class="fa fa-fire"></i> $TITLE$</a>  
  </div>  
  <div class="vid_messagess">$MESSAGE$</div>
  <div class="zornet_ru_sabtunim_info">  
  <span class="info_reads"><i class="fa fa-eye fa-fw"></i> $READS$</span>
  <span class="info_comm"><i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$</span>
  <span class="info_rating"><i class="fa fa-star-half-o"></i> $RATING$</span>  
  </div>
  <div class="info_date"><i class="fa fa-clock-o"></i> $DATE$</div>
  <div class="info_cat"><a href="$CATEGORY_URL$"><i class="fa fa-folder-o"></i> $CATEGORY_NAME$</a></div>
  <div class="zornet_ru_sabtunim_image" style="background: url($IMG_URL1$) center 100% no-repeat;">  
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$"></a>  
  </div>
</div>

CSS

Код
@media screen and (min-width: 600px){  
.zornet_ru_sabtunim_image, .zornet_ru_sabtunim_title a {width: 50%;}
.zornet_ru_sabtunim {height:200px;}  
}  

@media screen and (max-width: 600px){  
.zornet_ru_sabtunim_image{margin-top:50px;width:100%;}
.vid_messagess{opacity:0;}
.zornet_ru_sabtunim{height:285px;}
.info_date {margin-top:50px;}
.info_cat a {margin-bottom:34px}  
}

.zornet_ru_sabtunim {
  position: relative;
  width: 98%;
  margin: 10px;
  background: #f5f0f0;
  border: 1px solid #9fa2a7;
  border-radius: 2px;
}
.zornet_ru_sabtunim_image {
  display:block;
  float: right;
  height:200px;
  top:0;
  left:0;
  overflow:hidden;
}
.zornet_ru_sabtunim_image img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height:200px;
}
.zornet_ru_sabtunim_title a {
  color: #4b5569;
  float:left;
  font-size: 14px;
  font-weight: 600;
  padding: 4px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zornet_ru_sabtunim_title:hover a {
  color: #03A9F4;
}
.zornet_ru_sabtunim_info {
  position:absolute;
  left:5px;
  bottom:10px;
}
.info_reads {
  color: #48556d;
  background:#fff;
  border: #676c75 1px solid;
  padding: 2px 8px;
  border-radius: 3px;
}  
.info_comm {
  color: #3c4861;
  background:#ffffff;
  border: #686e7b 1px solid;
  padding: 2px 8px;
  border-radius: 3px;
}  
.info_rating {
  color: #e2fcff;
  background: #535861;
  border: #4b5569 1px solid;
  padding: 2px 8px;
  border-radius: 3px;
}  
.vid_messagess {
  position:absolute;
  top: 27px;
  width: 47%;
  color: #4a4d50;
  padding:5px 10px;
  margin-bottom: 5px;
  height: 123px;
  overflow: hidden;
  text-align: justify;
  line-height: 140%;
}  
.info_cat a {
  position:absolute;
  right: 7px;
  bottom: 6px;
  color: #c8dff3;
  background: rgb(24, 53, 84);
  padding: 5px 7px;
}
.info_cat a:hover {
  color: #fff;
  background: #03A9F4;
  box-shadow: 0 6px 11px 0 rgba(62, 177, 244, 0.35);
}
.info_date {
  position:absolute;
  right: 0px;
  top: 0px;
  color: #f1eaea;
  background: rgba(49, 48, 48, 0.57);
  padding:5px 7.3px;
  border-bottom: #2bb572 2px solid;
  font-size: 12px;
}

Автор uCozz.pro
13.02.2018 Загрузок: 1 Просмотров: 689 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
maniacvn
maniacvn 13.02.2018 14:081
0
background-image убрал что бы вес уменьшить ?
Kosten
Kosten 13.02.2018 14:532
0
Нет, не весе дело, просто на некоторые изображение не корректно показывает. Также немного доработал, просто там адаптирован он изначально шел. Что на малом экране будет заголовок вылазить, а там по адаптивности нормально, но возможно ее переделаю.
Sonya
Sonya 10.03.2018 14:433
0
Парни как поменять местами картинку и текст (картинка справа, текст слева)? и сделать свой фон у вида?) Буду Очень благодарен!
maniacvn
maniacvn 10.03.2018 15:034
0
Как поменять местами? Ответ - отредактировать под себя стили.
maniacvn
maniacvn 10.03.2018 15:125
0
Сори за такой ответ но увы какой вопрос такой ответ если сделать все как вы хотите это будет уже другой вид,но спс за идею в следующий раз буду делать 2 варианта. 11a
rayven
rayven 19.03.2018 17:486
0
Всё норм. Ток вот ссылок на иконки нету info_*.
И класс _title не адаптивный, точнее на смартфонах он не переноситься на строку, а просто вылазит за экран. Хотя, всё это мелочи жизни. В любом случае, с меня лайк.
maniacvn
maniacvn 19.03.2018 17:567
0
что бы были иконки в css вставьте @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
rayven
rayven 19.03.2018 18:108
0
Цитата maniacvn ()
что бы были иконки в css вставьте @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Спасибо конечно, но мне проще 6 иконок подкинуть, чем импорт целой кучи 47a
rayven
rayven 19.03.2018 18:229
0
Спасибо за вид, разобрался. Подключать желательно сразу в виде материалов, а не в общем css. Хороший у вас набор иконок, прям на все случаи жизни. Зашёл - посмотрел.
maniacvn
maniacvn 19.03.2018 20:3310
0
Не у нас а у сервиса который предоставляет шрифтовые иконки.) А насчет спасибо то стараюсь. )
avatar