Compare commits

...

8 Commits
main ... ui

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body style="display: flex; height: 100%; min-height: 100vh; flex-direction: column">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

@ -1,4 +1,10 @@
import 'vuetify/styles' import 'vuetify/styles'
import { createVuetify } from 'vuetify' import { createVuetify } from 'vuetify'
export default createVuetify() export default createVuetify({
theme: {
defaultTheme: 'dark'
}
}
)

@ -1,20 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import Home from './components/Home.vue' import { MathStatement } from "./support/parse";
// This starter template is using Vue 3 <script setup> SFCs import { MathPage } from "./support/page";
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup (window as any).Stmt = MathStatement;
import HelloWorld from './components/HelloWorld.vue' (window as any).Pg = MathPage;
import { MathStatement } from './support/parse'
import { MathPage } from './support/page'
(window as any).Stmt = MathStatement
;(window as any).Pg = MathPage
</script> </script>
<template> <template>
<div id="nav"> <v-app>
<router-link to="/">Home</router-link> | <v-app-bar height="30" elevation="0">
<router-link to="/scratch">Scratch Testing</router-link> <div id="nav">
</div> <router-link class="links" to="/">Home</router-link> |
<router-view/> <router-link class="links" to="/scratch">Scratch Testing</router-link> |
<router-link class="links" to="/editor">Editor</router-link>
</div>
</v-app-bar>
<div style="margin-top: 30px"> <!-- Account for the navbar height -->
<router-view/>
</div>
</v-app>
</template> </template>
<style> <style>
@ -23,8 +28,14 @@ import { MathPage } from './support/page'
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; display: flex;
margin-top: 60px; flex-direction: column;
flex: 1;
}
.links {
color: #fff;
}
.links:visited {
color: #fff;
} }
</style> </style>

@ -0,0 +1,15 @@
<script setup>
</script>
<template>
<v-navigation-drawer width="100" permanent>
</v-navigation-drawer>
<Draggable>
<div class="box">I use a wrapper</div>
</Draggable>
</template>
<style>
</style>

@ -4,12 +4,24 @@ import { DraggablePlugin } from '@braks/revue-draggable'
import { createAuth0 } from '@auth0/auth0-vue' import { createAuth0 } from '@auth0/auth0-vue'
import router from './router' import router from './router'
import 'vuetify/styles' // Global CSS has to be imported
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
import 'katex/dist/contrib/auto-render.min' import 'katex/dist/contrib/auto-render.min'
const app = createApp(App) const app = createApp(App)
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'dark',
},
}) // Replaces new Vuetify(...)
app.use(vuetify)
app.use( app.use(
createAuth0({ createAuth0({
@ -21,5 +33,5 @@ app.use(
app.use(router) app.use(router)
app.use(DraggablePlugin) app.use(DraggablePlugin);
app.mount('#app') app.mount('#app')

@ -12,6 +12,12 @@ const routes = [
name: 'Scratch', name: 'Scratch',
component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'), component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
}, },
{
path: '/editor',
name: 'Editor',
component: () => import(/* webpackChunkName: "scratch" */ './components/Editor.vue'),
},
] ]
const router = createRouter({ const router = createRouter({

Loading…
Cancel
Save