仪表板桌面布局响应？

Question

为不同的设备构建 icCube 仪表板是通过布局处理的。这很好用。但是当涉及到桌面仪表板时，屏幕尺寸和分辨率范围很广，您只能制作一种桌面布局。

例如，如果我在办公室，我的 workbench 上有一个 15" 笔记本电脑用于阅读，它连接到一个 27" 显示器。在我的显示器上，我 space 拥有比笔记本电脑屏幕上更多的小部件。为不同的屏幕尺寸/屏幕分辨率创建单独的布局或制作响应式仪表板会很好。

我很好奇是否有处理不同屏幕尺寸/屏幕分辨率的解决方案。

Answer 1

我们还没有找到解决我们问题的响应式布局。我们对想法持开放态度，但在 10 英寸和 27 英寸显示器上拥有与 'works' 相同的仪表板并不简单。

目前您在 icCube 中有几个选项：

创建固定布局（这是我们更喜欢的选项之一）
创建随屏幕大小缩放的布局
创建具有多种布局的报告（这适用于平板电脑、手机、打印）。尚未针对不同的屏幕尺寸。

事实上，您可能会创建一组不同的报告。

_希望对您有所帮助。

Answer 2

简单的仪表板网格布局

<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;
}

为页眉和页脚元素创建样式和结构； grid-area 之前声明

<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>

仪表板桌面布局响应？

Dashboard desktop lay-out responsive?

iccube-reporting