From 2bb8f731f8e5c64cbbf342adbdd7957de473cf18 Mon Sep 17 00:00:00 2001 From: Johannes Mey <johannes.mey@tu-dresden.de> Date: Sun, 9 Oct 2022 18:38:59 +0200 Subject: [PATCH] improve dashboard --- dashboard/src/App.css | 45 ++++++++++++++++--------------------------- dashboard/src/App.js | 4 ++-- 2 files changed, 19 insertions(+), 30 deletions(-) diff --git a/dashboard/src/App.css b/dashboard/src/App.css index 2772633..d5f9e53 100644 --- a/dashboard/src/App.css +++ b/dashboard/src/App.css @@ -8,15 +8,9 @@ pointer-events: none; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - .App-header { background-color: #282c34; - min-height: 40px; /*100vmin*/ + min-height: 40px; display: flex; flex-direction: column; align-items: center; @@ -25,39 +19,34 @@ color: white; } +.ContextContainer { + width: 100vw; + overflow-x:scroll; + white-space: nowrap; + direction:rtl; +} + .CurrentContext { height: 50vh; width: 100vw; object-fit: contain; /*object-fit: scale-down;*/ - object-position: right; + object-position: center; } -.CurrentAst { - height: 50vh; +.AstContainer { width: 100vw; - object-fit: cover; - object-position: right; + overflow-x:scroll; + white-space: nowrap; + direction:rtl; } -.AstInTimeline { - max-width: 100%; - +.CurrentAst { + height: 50vh; + object-fit: cover; + object-position: bottom right; } .App-link { color: #61dafb; } - -.MG-Timeline { - max-width: 4000px !important; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/dashboard/src/App.js b/dashboard/src/App.js index 170d8c5..224e2b9 100644 --- a/dashboard/src/App.js +++ b/dashboard/src/App.js @@ -85,7 +85,7 @@ function App() { function CurrentASTState(props) { return ( - <div className="curent-state"> + <div className="AstContainer"> <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} /> </div> ) @@ -93,7 +93,7 @@ function CurrentASTState(props) { function CurrentContextState(props) { return ( - <div className="curent-state"> + <div className="ContextContainer"> <img className="CurrentContext" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} /> </div> ) -- GitLab