vaadin 響應式即時看板

撈取公司MES的生產資料 將資料圖表化 顯示即時看板
要花時間想前端又要做後端 好累阿……

網頁端

手機端

這邊CSS使用 width-range 來去監聽寬度的變化 來去改變 panel的 width height

.responsive {

    &[width-range~="0-300px"] {
      .panel{
        margin-top:10px;
        width: 100%!important;
        height: 100%;
      }
    }
    &[width-range~="301-800px"] {
      .panel{
        margin-top:10px;
        width: 100%!important;
        height: 100%;
      }
    }
    &[width-range~="801px-"] {
      .panel{
        margin-top:10px;
        margin-left:10px;
        width: 49%!important;
        height: 330px;

      }
    }

  }