diff --git a/dashboard/src/App.css b/dashboard/src/App.css index 2772633288d4886cd9c1d8cd09ea27bbd27a6717..d5f9e532ad8fde1d173c5fda50389597dcc9f4e9 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 170d8c51460aa56e6247ea25bc64ed6f9706898d..224e2b93ac36c4715457ef363c739d8cdf0036fd 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> )