Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(client): use portal-vue for tooltips

Browse source
This commit is contained in:
Valentin Kaelin 2022-02-16 23:51:06 +01:00
parent ab8cfd0695
commit 239bcfb82e
5 changed files with 4646 additions and 17011 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21635
client/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
client/package.json
View file

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.2", "axios": "^0.21.2",
"portal-vue": "^2.1.7",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-content-loader": "^0.2.3", "vue-content-loader": "^0.2.3",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",

1
client/src/App.vue
View file

@ -3,6 +3,7 @@
<SVGContainer /> <SVGContainer />
<NotificationsContainer /> <NotificationsContainer />
<RunesContainer /> <RunesContainer />
<portal-target name="tooltip-destination" />
<component :is="layout"> <component :is="layout">
<router-view /> <router-view />
</component> </component>

18
client/src/components/Common/Tooltip.vue
View file

@ -13,14 +13,16 @@
</div> </div>
<!-- tooltip content --> <!-- tooltip content -->
<div <portal v-if="isOpen" to="tooltip-destination">
v-show="isOpen" <div
ref="content" v-show="isOpen"
class="bg-blue-1000 fixed z-50 py-2 rounded-md shadow" ref="content"
:style="{ ...position }" class="bg-blue-1000 fixed z-50 py-2 rounded-md shadow"
> :style="{ ...position }"
<slot></slot> >
</div> <slot></slot>
</div>
</portal>
</div> </div>
</template> </template>

2
client/src/main.js
View file

@ -2,6 +2,7 @@ import Vue from 'vue'
import VueAxios from './plugins/axios' import VueAxios from './plugins/axios'
import VueMeta from 'vue-meta' import VueMeta from 'vue-meta'
import { VuePlausible } from 'vue-plausible' import { VuePlausible } from 'vue-plausible'
import PortalVue from 'portal-vue'
import '@/assets/css/main.css' import '@/assets/css/main.css'
@ -19,6 +20,7 @@ Vue.use(VuePlausible, {
}) })
Vue.$plausible.enableAutoPageviews() Vue.$plausible.enableAutoPageviews()
Vue.use(VueMeta) Vue.use(VueMeta)
Vue.use(PortalVue)
Vue.filter('capitalize', (value) => { Vue.filter('capitalize', (value) => {
return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase() return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()