From 47443e7e4d2c76c61b79ecf95dd83a040347b3c9 Mon Sep 17 00:00:00 2001 From: Youen Toupin Date: Thu, 26 May 2022 19:32:40 +0200 Subject: [PATCH] font size relative to screen size added button to toggle fullscreen mode --- WebApp/src/app.ts | 2 +- WebApp/src/assets/icons/compress.png | Bin 0 -> 422 bytes WebApp/src/assets/icons/expand.png | Bin 0 -> 428 bytes WebApp/src/index.html | 18 +++++----- WebApp/src/layout.css | 8 +++++ WebApp/src/layout.tsx | 36 ++++++++++++++++++++ WebApp/src/pages/raw-data/raw-data-page.tsx | 2 ++ 7 files changed, 57 insertions(+), 9 deletions(-) create mode 100644 WebApp/src/assets/icons/compress.png create mode 100644 WebApp/src/assets/icons/expand.png diff --git a/WebApp/src/app.ts b/WebApp/src/app.ts index 05957ff..1b13344 100644 --- a/WebApp/src/app.ts +++ b/WebApp/src/app.ts @@ -6,7 +6,7 @@ import { DashboardPage } from 'pages/dashboard/dashboard-page'; require('../node_modules/bulma/css/bulma.css'); -m.route(document.body, "/raw", { +m.route(document.body, "/dashboard", { "/dashboard": { render: () => m(Layout, m(DashboardPage)) }, "/raw": { render: () => m(Layout, m(RawDataPage)) }, }); diff --git a/WebApp/src/assets/icons/compress.png b/WebApp/src/assets/icons/compress.png new file mode 100644 index 0000000000000000000000000000000000000000..037826a5afd95391060c16f662cf8de6d2f7c3ae GIT binary patch literal 422 zcmeAS@N?(olHy`uVBq!ia0vp^AAooh3p0@HdmVoaNJ#|vgt!7}RwfQ-XYYcXtd55I zvevnW4;=ab|G%Qm$rnI5&H|6fVg?4$>p;Ao@$o5-=L`&tCY~;iAr-gY-f`q=HV|li z=qRvVPSO1Xhul$RmQ5ditzGINo-4FGS8nTnom~?@HVXuwXxOZw^0bJ6!$YMVos926({s zA!+?-e*3lW1m~@ht*L+b);uz};>N=pV(-c;^0;sFwSPXakni80p!1~#I(e;&MPHkR zYvui0JoS~`@;8i|c4e)yaxijVX8&lll@Ti|4<@LQ35#8{YF%%t_|r`p4q|O59?3^O zQ0@MavT&Ksv8k-rcdf9y{jUA)f4>8mV82CxhnbV7nTeN~nzxyRk2%-dZdRTeyB|!p Xl>xG`56|BO1}cN6tDnm{r-UW|He$EX literal 0 HcmV?d00001 diff --git a/WebApp/src/assets/icons/expand.png b/WebApp/src/assets/icons/expand.png new file mode 100644 index 0000000000000000000000000000000000000000..56f39d21c0fd2f0e60e9cff181730f20dfb267cb GIT binary patch literal 428 zcmeAS@N?(olHy`uVBq!ia0vp^AAooh3p0@HdmVoaNJ#|vgt!7}RwfQ-XYYcXtd55I zvevnW4;=ab|G%Qm$rnI5&H|6fVg?4$>p;Ao@$o5-=L`&tR-P`7Ar-gY-ihUEa*$|! z$gj97m-AlfYoR-?+w~55mHeKVn)&d_{WF@?=VJ}dG)J+0KDg0Kg!!Ma#pZb~lg;&h zZ`<-$*l&%!@ZHVHr*oNii`@-`J{_8__caOf__wmz* zOo2Vof-z^>YioA09ki?SYfj+TpP;y*Km3`t%#-yGIe0L@9ub-LW`9`=UUqR=i}{6m zwq|n^PgEY;`Q?Vn+mHT#HG87tpCmsB4UG(G^|~qdQIiS71dzZVw$*&6LKidMG;lHd zH<5Qwin86Y9S1PLe(uv<9{W~Txki{Nuf9G}l~-(_ d1Rs1oEUp;l8rmJ|I2RbS44$rjF6*2UngB3buc80| literal 0 HcmV?d00001 diff --git a/WebApp/src/index.html b/WebApp/src/index.html index 9f252d1..92d064d 100644 --- a/WebApp/src/index.html +++ b/WebApp/src/index.html @@ -1,9 +1,11 @@ - - - - Ordinateur de bord - - -

Chargement...

- + + + + + Ordinateur de bord + + +

Chargement...

+ + \ No newline at end of file diff --git a/WebApp/src/layout.css b/WebApp/src/layout.css index fffb86a..093e8fa 100644 --- a/WebApp/src/layout.css +++ b/WebApp/src/layout.css @@ -1,3 +1,7 @@ +html.app-root { + font-size: 3.4vmin; +} + html, html > body { height: 100%; width: 100%; @@ -11,3 +15,7 @@ html > body { html > body > section { flex: 1; } + +img.img-icon { + height: 1em; +} \ No newline at end of file diff --git a/WebApp/src/layout.tsx b/WebApp/src/layout.tsx index 89e3bf6..56fed50 100644 --- a/WebApp/src/layout.tsx +++ b/WebApp/src/layout.tsx @@ -2,9 +2,44 @@ import m from 'mithril'; require("./layout.css"); +import ExpandIcon from 'assets/icons/expand.png'; +import CompressIcon from 'assets/icons/compress.png'; + export default class Layout { private menuActive = false; private drawCount = 0; + private isFullscreen = false; + + fullscreen(fullscreen: boolean) { + if(fullscreen) { + let elem = document.documentElement as any; + if (elem.requestFullscreen) { + elem.requestFullscreen(); + } else if (elem.webkitRequestFullscreen) { /* Safari */ + elem.webkitRequestFullscreen(); + } else if (elem.msRequestFullscreen) { /* IE11 */ + elem.msRequestFullscreen(); + } + } + else { + let doc = document as any; + if (doc.exitFullscreen) { + doc.exitFullscreen(); + } else if (doc.webkitExitFullscreen) { /* Safari */ + doc.webkitExitFullscreen(); + } else if (doc.msExitFullscreen) { /* IE11 */ + doc.msExitFullscreen(); + } + setTimeout(() => { + window.scrollTo(0, 0); + }, 500); + } + this.isFullscreen = fullscreen; + } + + toggleFullscreen() { + this.fullscreen(!this.isFullscreen); + } view(vnode: m.Vnode) { this.drawCount = this.drawCount + 1; @@ -13,6 +48,7 @@ export default class Layout {