Дизайн сцен 2

[TransMatrix]

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

Сейчас сижу, прикидываю как бороться: то-ли разные сцены для разных устройств, то-ли в сцене динамически подстраиваться под размер экрана...

[nick7zmail]

Для телефона использую интерфейс только /menu.html, сцены - для всего остального...можете попробовать на основе дашборда интерфейс набросать...он по идее автоматически перестраиваться должен...

[profx5016]

Приветствую всех участников! Помогите разобраться, что не так. На главной сцене сделал кнопки.
https://www.dropbox.com/s/haitixi4s4litoc/1.JPG?dl=0
По задумке, каждая кнопка должна подсвечиваться, когда активная.

В элемнте general css добавил стили для кнопок:

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

.button-style{
    display:inline-block;
    box-sizing:border-box;
    text-align:center;
    width:93px;
    height:93px;
    color:#fff;
    padding:2px;
    margin:2px 0px 0px 0px;
    cursor:pointer;
    border:3px solid rgba(138,43,226,1);
    -webkit-transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    -moz-border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px;
    border-radius:10px 10px 10px 10px;
    background-color:rgba(0,0,0,0.4);
  }

  .button-style.s2{
    background-color:rgba(138,43,226,0.5);
  }

.button-style:hover {
  background-color: rgba(138, 43, 226, 0.5);
}

.button-style a {
text-decoration: none;
margin: 0;
padding: 0;
text-transform: uppercase;
font-family:italic;
font-weight: 600;
font-size:14px;
}

.button-style a:hover {
color: #fff;
}
 

Cоздал элемент panel-newmenu, в нем прописал кнопки:

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

<div class="button-style"><a href="#tab1"><i class="fa fa-list fa-4x" aria-hidden="true"></i>заметки</a></div>
<div class="button-style"><a href="#tab2"><i class="fa fa-android fa-4x" aria-hidden="true"></i>Алиса</a></div>
<div class="button-style"><a href="#tab3"><i class="fa fa-question fa-4x" aria-hidden="true"></i>UNKNOWN</a></div>
<div class="button-style"><a href="#tab4"><i class="fa fa-tint fa-4x" aria-hidden="true"></i>Погода</a></div>
<div class="button-style"><a href="#tab5"><i class="fa fa-laptop fa-4x" aria-hidden="true"></i>система</a></div>
 

В "дополнительный код JavaScript", добавил код (его написал уважаемый Рони с форума javascript.ru, за что ему отдельное спасибо!):

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

window.addEventListener('DOMContentLoaded', function() {
         var button = document.querySelectorAll('.button-style');
         [].forEach.call(button, function(but) {
               but.addEventListener('click', function() {
                   [].forEach.call( button, function(el) {
                          el == but ? el.classList.add("s2"):
                          el.classList.remove('s2');
                   });

               });
           });
         });
 

Но ничего не происходит... Если создать отдельный html документ и открыть в браузере - все работает. В сцене - не работает. Помогите разобраться, в чем затык, что не так? Спасибо!

[Kas-11]

Подскажите пожалуйста.
Как убрать фон у лампочки на сцене?

Сделал кнопку с лампочкой на планировке. При выключенном состоянии лампочка белая при включенном желтая, а как фон подсветки убрать?

[nick7zmail]

В этой теме есть ответ...но я хз где он...

UPD: А, вот он viewtopic.php?t=2588&p=31207#p31207 ...еле нашел)) Пора начинать собирать полезные ссылки.

[lanket]

Подскажите пожалуйста.
Как убрать фон у лампочки на сцене?

Сделал кнопку с лампочкой на планировке. При выключенном состоянии лампочка белая при включенном желтая, а как фон подсветки убрать?

Может костыльно, но я конвертил в gif с альфаканалом.

Отправлено с моего Redmi Note 3 через Tapatalk

[Kas-11]

Может костыльно, но я конвертил в gif с альфаканалом.

Я скачал две иконки лампочки, которые мне понравились, одна белого цвета вторая желтого. (размером в 2 раз меньше чем стандартные).
Установил их на сцену. При включенном состоянии у меня показывает желтая картинка с лампочкой при выключенном состоянии белая.
Фон остался прежнего размера и тоже цвет меняет. Как убрать его не пойму.

[nick7zmail]

Блин...я ж вам 2 сообщения назад написал, как сделать.

Отправлено с моего Xperia Z через Tapatalk

[vshuka911]

а кто подскажет иконку для батарейки?

[nick7zmail]

http://www.iconarchive.com/tag/battery
Ещё можно при помощи шрифта font-awesome сделать...были примеры уже.