🎨 (fab) update fab button z index to overlap bulma select dropdown icon
This commit is contained in:
@@ -6,7 +6,8 @@
|
|||||||
:class="getClass"
|
:class="getClass"
|
||||||
:style="buttonStyle"
|
:style="buttonStyle"
|
||||||
:to="to"
|
:to="to"
|
||||||
@click.native="valid">
|
@click.native="valid"
|
||||||
|
>
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<slot>
|
<slot>
|
||||||
<awe-icon icon="plus" />
|
<awe-icon icon="plus" />
|
||||||
@@ -22,7 +23,8 @@
|
|||||||
class="button is-primary is-large is-fab"
|
class="button is-primary is-large is-fab"
|
||||||
:class="getClass"
|
:class="getClass"
|
||||||
:style="buttonStyle"
|
:style="buttonStyle"
|
||||||
@click="valid">
|
@click="valid"
|
||||||
|
>
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<slot>
|
<slot>
|
||||||
<awe-icon icon="plus" />
|
<awe-icon icon="plus" />
|
||||||
@@ -59,14 +61,17 @@ export default class Home extends Vue {
|
|||||||
const main = document.getElementById('main')
|
const main = document.getElementById('main')
|
||||||
const fabElm = document.getElementById(`fab-${this.uniqueId}`)
|
const fabElm = document.getElementById(`fab-${this.uniqueId}`)
|
||||||
if (main && fabElm) {
|
if (main && fabElm) {
|
||||||
document.addEventListener('scroll', throttle((evt) => {
|
document.addEventListener(
|
||||||
|
'scroll',
|
||||||
|
throttle((evt) => {
|
||||||
this.showFull = main.getBoundingClientRect().top > 0
|
this.showFull = main.getBoundingClientRect().top > 0
|
||||||
if (this.showFull) {
|
if (this.showFull) {
|
||||||
fabElm.classList.remove('small')
|
fabElm.classList.remove('small')
|
||||||
} else {
|
} else {
|
||||||
fabElm.classList.add('small')
|
fabElm.classList.add('small')
|
||||||
}
|
}
|
||||||
}, 150))
|
}, 150)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,7 +124,7 @@ $padding-fab: 24px;
|
|||||||
bottom: $padding-fab;
|
bottom: $padding-fab;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: $padding-fab;
|
right: $padding-fab;
|
||||||
z-index: 2;
|
z-index: 5;
|
||||||
border: 2px solid $white;
|
border: 2px solid $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,10 +25,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
registrationOptions: {},
|
registrationOptions: {},
|
||||||
ready() {
|
ready() {
|
||||||
notif.success('Application mise à jour !')
|
notif.success('Application mise à jour !')
|
||||||
console.log(
|
console.log('App is being served from cache by a service worker.')
|
||||||
'App is being served from cache by a service worker.\n' +
|
|
||||||
'For more details, visit https://goo.gl/AFskqB'
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
cached() {
|
cached() {
|
||||||
console.log('Content has been cached for offline use.')
|
console.log('Content has been cached for offline use.')
|
||||||
@@ -54,6 +51,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
},
|
},
|
||||||
updated() {
|
updated() {
|
||||||
console.log('New content is available; please refresh.')
|
console.log('New content is available; please refresh.')
|
||||||
|
location.reload(true)
|
||||||
},
|
},
|
||||||
offline() {
|
offline() {
|
||||||
console.log(
|
console.log(
|
||||||
@@ -64,12 +62,4 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
console.error('Error during service worker registration:', error)
|
console.error('Error during service worker registration:', error)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let refreshing: any | undefined
|
|
||||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
||||||
if (refreshing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
window.location.reload()
|
|
||||||
refreshing = true
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user