8 Commits
main ... ui

Author SHA1 Message Date
4f433e7bf9 Merge upstream ui with expand changes 2022-04-09 12:36:05 -05:00
2fd0107197 Make layout expand to fill height of body 2022-04-09 12:35:36 -05:00
35d7cd817f Merge branch 'main' into ui 2022-04-09 12:05:01 -05:00
af3d940cec inital dragable working 2022-04-09 12:04:02 -05:00
2c059a655e begain working on themeing 2022-04-09 11:56:23 -05:00
59ce598023 added app bar 2022-04-09 11:33:41 -05:00
43e067d5f0 Merge branch 'main' into ui 2022-04-09 11:02:05 -05:00
fc31598dbb working on vueify 2022-04-09 11:00:05 -05:00
6 changed files with 69 additions and 19 deletions

View File

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

View File

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

View File

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

15
src/components/Editor.vue Normal file
View File

@@ -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>

View File

@@ -4,12 +4,24 @@ import { DraggablePlugin } from '@braks/revue-draggable'
import { createAuth0 } from '@auth0/auth0-vue'
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/contrib/auto-render.min'
const app = createApp(App)
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'dark',
},
}) // Replaces new Vuetify(...)
app.use(vuetify)
app.use(
createAuth0({
@@ -21,5 +33,5 @@ app.use(
app.use(router)
app.use(DraggablePlugin)
app.use(DraggablePlugin);
app.mount('#app')

View File

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