Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
bump theme + make example output button visible on mobile (#1281)
  • Loading branch information
jay-es committed Mar 27, 2023
1 parent 33ed062 commit ee84fa5
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 17 deletions.
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -12,7 +12,7 @@
},
"dependencies": {
"@vue/repl": "^1.3.2",
"@vue/theme": "^2.2.0",
"@vue/theme": "^2.2.1",
"dynamics.js": "^1.1.5",
"gsap": "^3.9.0",
"vitepress": "^1.0.0-alpha.60",
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

43 changes: 32 additions & 11 deletions src/examples/ExampleRepl.vue
Expand Up @@ -2,8 +2,12 @@
import { Repl, ReplStore } from '@vue/repl'
import '@vue/repl/style.css'
import { data } from './examples.data'
import { inject, watchEffect, version, Ref } from 'vue'
import { resolveSFCExample, resolveNoBuildExample, onHashChange } from './utils'
import { inject, watchEffect, version, Ref, onMounted, ref } from 'vue'
import {
resolveSFCExample,
resolveNoBuildExample,
onHashChange
} from './utils'
const store = new ReplStore({
defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
Expand Down Expand Up @@ -34,29 +38,46 @@ function updateExample() {
preferSFC.value ? 'App.vue' : 'index.html'
)
}
const heightProvider = ref<HTMLDivElement>()
onMounted(() => {
const set = () => {
heightProvider.value!.style.setProperty(
'--vh',
window.innerHeight + 'px'
)
}
set()
window.addEventListener('resize', set)
})
</script>

<template>
<Repl
:store="store"
:showImportMap="!preferSFC"
:showCompileOutput="false"
:clearConsole="false"
/>
<div ref="heightProvider">
<Repl
:store="store"
:showImportMap="!preferSFC"
:showCompileOutput="false"
:clearConsole="false"
/>
</div>
</template>

<style scoped>
<style>
.vue-repl {
max-width: 1105px;
border-right: 1px solid var(--vt-c-divider-light);
height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px));
height: calc(
var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px)
);
}
@media (max-width: 960px) {
.vue-repl {
border: none;
height: calc(
100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px
var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px) -
48px
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/examples/index.md
Expand Up @@ -3,7 +3,7 @@ page: true
title: Examples
aside: false
footer: false
returnToTop: false
outline: false
---

<script>
Expand Down

1 comment on commit ee84fa5

@vercel
Copy link

@vercel vercel bot commented on ee84fa5 Mar 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.