This commit is contained in:
lalBi94 2023-03-06 17:09:06 +01:00
parent de2a768813
commit e857bb23ea
5 changed files with 123 additions and 87 deletions

View File

@ -6,13 +6,12 @@
<not-found /> <not-found />
</div> </div>
</div> </div>
<div if={!state.showNotFound} class="">
<div class="column column-60"> <div if={!state.showNotFound}>
<route each={page in state.pages} path={page.path}> <route each={page in state.pages} path={page.path}>
<main is={page.componentName} /> <main is={page.componentName} />
</route> </route>
</div> </div>
</div>
</router> </router>
</div> </div>
@ -29,7 +28,6 @@
Route, Route,
NotFound, NotFound,
Home: lazy(Loader, () => import( Home: lazy(Loader, () => import(
/* webpackPrefetch: true, webpackChunkName: 'pages/home' */
'./pages/home.riot' './pages/home.riot'
)), )),
}, },
@ -39,12 +37,10 @@
activePage: null activePage: null
}, },
onBeforeMount({ isServer }) { onBeforeMount({ isServer }) {
// create a stream on all routes to catch the not-found page
this.anyRouteStream = route('(.*)') this.anyRouteStream = route('(.*)')
this.anyRouteStream.on.value(this.onAnyRoute) this.anyRouteStream.on.value(this.onAnyRoute)
}, },
onAnyRoute(path) { onAnyRoute(path) {// show the not found page if none of the page paths are matched
// show the not found page if none of the page paths are matched
const activePage = pages.find(p => match(path.pathname, toRegexp(p.path))) const activePage = pages.find(p => match(path.pathname, toRegexp(p.path)))
this.update({ this.update({
@ -60,25 +56,9 @@
<style> <style>
:host { :host {
padding: 2rem 0; padding: 6%;
} background: #B8CBD0;
min-height: 100vh;
.menu {
margin: 1rem -1rem;
}
.menu a {
padding: 0 1rem;
color: black;
}
.menu a.active.active {
font-weight: bold;
text-decoration: none;
}
.menu a:hover, .menu a:focus, .menu a:active {
text-decoration: underline;
} }
</style> </style>
</app> </app>

View File

@ -0,0 +1,3 @@
<etablanalytics>
<p>eta</p>
</etablanalytics>

View File

@ -0,0 +1,3 @@
<generalytics>
<p>gen</p>
</generalytics>

View File

@ -1,12 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Parcoursup Analytic's</title> <title>Parcoursup Analytic's</title>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
</head> </head>
<body>
<body>
<style>
#root {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
</style>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

View File

@ -1,3 +1,42 @@
<home> <home>
<style>
#main-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10%;
}
#main-container
#left
generalytics {
margin-bottom: 5%;
}
#main-container
#left
generalytics, etablanalytics {
display: flex;
flex-direction: column;
width: 525px;
height: 300px;
padding: 20px;
box-shadow: 0px 0px 9px 1px black;
background: #7A90A4;
border-radius: 10px;
}
</style>
<div id="main-container">
<div id="right">
<selector /> <selector />
</div>
<div id="left">
<generalytics />
<etablanalytics />
</div>
</div>
</home> </home>