План рабочего стола приборной панели отзывчив? - PullRequest
Новая
       18

План рабочего стола приборной панели отзывчив?

2 голосов
/ 28 мая 2019

Создание инструментальных панелей icCube для различных устройств осуществляется через макеты. Это хорошо работает. Но когда дело доходит до настольных панелей управления, существует широкий диапазон размеров и разрешений экрана, и вы можете сделать только один макет рабочего стола.

Например, у меня есть 15-дюймовый ноутбук для чтения, который подключен к 27-дюймовому монитору на моем рабочем месте, если я нахожусь в офисе. На моем мониторе гораздо больше места, чтобы иметь больше виджетов, чем на экране моего ноутбука. Было бы неплохо создать отдельную компоновку для разных размеров экрана / разрешений экрана или создать адаптивную панель инструментов.

Мне любопытно, есть ли решения для работы с экранами разного размера / разрешения экрана.

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Простая схема сетки приборной панели 

<div class="grid-container">
  <header class="header"></header>
  <aside class="sidenav"></aside>
  <main class="main"></main>
  <footer class="footer"></footer>
</div>

Нужно применить CSS 

/* Simple dashboard grid CSS */

/* Assign grid instructions to our parent grid container */
.grid-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
    "sidenav header"
    "sidenav main"
    "sidenav footer";
  height: 100vh;
}

/* Give every child element its grid name */
.header {
  grid-area: header;
  background-color: #648ca6;
}

.sidenav {
  grid-area: sidenav;
  background-color: #394263;
}

.main {
  grid-area: main;
  background-color: #8fd4d9;
}

.footer {
  grid-area: footer;
  background-color: #648ca6;
}

Создать стили и структуру для наших элементов верхнего и нижнего колонтитула; область сетки, объявленная ранее 

<style>
  .header, .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: #648ca6;
  }
</style>

<header class="header">
  <div class="header__search">Search...</div>
  <div class="header__avatar">Your face</div>
</header>

<footer class="footer">
  <div class="footer__copyright">&copy; 2019</div>
  <div class="footer__signature">Sample</div>
</footer>
0 голосов
/ 29 мая 2019

Мы еще не нашли адаптивный макет, который решал наши вопросы.Мы открыты для идей, но непросто иметь одну и ту же панель мониторинга, которая «работает» как на 10-дюймовом, так и на 27-дюймовом мониторе.

Пока у вас есть несколько вариантов в icCube:

  • Создание фиксированного макета (это один из вариантов, который мы предпочитаем)
  • Создание макета, масштабируемого по размеру экрана
  • Создание отчета с несколькими макетами (этодля планшетов, телефонов, полиграфии).Еще не для разных размеров экрана.

И действительно, вы можете создать набор разных отчетов.

_Надеюсь, это поможет.

...