tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removes backdrop from helptip. Now it's activated by hover.

This commit is contained in:
Mateus Machado Luna 2018-05-04 10:34:00 -03:00
parent 9dd7183fa4
commit 7a3e4cce62
4 changed files with 21 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/admin/components/edition/collection-edition-form.vue
View File

@ -683,8 +683,7 @@ export default {
display: inherit;
padding: 0;
margin: 0;
margin-left: -8px;
margin-top: 3px;
margin-top: 1px;
}
}
.thumbnail-buttons-row {

3
src/admin/components/edition/item-edition-form.vue
View File

@ -655,8 +655,7 @@ export default {
display: inherit;
padding: 0;
margin: 0;
margin-left: -8px;
margin-top: 3px;
margin-top: 1px;
}
}
.thumbnail-buttons-row {

2
src/admin/components/edition/term-edition-form.vue
View File

@ -263,7 +263,7 @@
.icon {
display: inherit;
padding: 0;
margin: 3px 0 0 -8px;
margin-top: 1px;
}
}
.thumbnail-buttons-row {

65
src/admin/components/other/help-button.vue
View File

@ -1,19 +1,12 @@
<template>
<span class="help-wrapper">
<a
class="help-button"
@click="isOpened = !isOpened"><b-icon
size="is-small"
icon="help-circle-outline"/></a>
<div
@click="isOpened = false"
class="help-backdrop"
:class="{ 'opened': isOpened }" />
<div
:class="{ 'opened': isOpened }"
class="help-tooltip">
<a class="help-button">
<b-icon
size="is-small"
icon="help-circle-outline"/></a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"/></a>
<h5>{{ title }}</h5>
</div>
<div class="help-tooltip-body">
<p>{{ (message != '' && message != undefined) ? message : $i18n.get('info_no_description_provided') }}</p>
@ -25,11 +18,6 @@
<script>
export default {
name: 'HelpButton',
data() {
return {
isOpened: false
}
},
props: {
title: '',
message: ''
@ -49,47 +37,29 @@ export default {
i, i::before { font-size: 0.9em !important; }
}
.help-backdrop {
background-color: transparent;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999999999999999999;
display: none;
visibility: hidden;
opacity: 0;
&.opened {
visibility: visible;
display: block;
}
.help-wrapper:hover .help-tooltip {
margin-bottom: 12px;
margin-left: -37px;
visibility: visible;
opacity: 1;
}
.help-tooltip {
z-index: 99999999999999999999;
color: $secondary;
background-color: $primary-light;
border: none;
display: block;
border-radius: 5px;
margin: 0px 0px 0px -37px;
min-width: 250px;
min-width: 250px;
transition: margin-bottom 0.2s ease, opacity 0.3s ease;
position: absolute;
bottom: calc(100% - 6px);
left: 0%;
min-width: 250px;
display: block;
transition: margin-bottom 0.3s ease, opacity 0.4s ease;
left: 0%;
margin-bottom: -27px;
visibility: hidden;
opacity: 0;
&.opened {
margin-bottom: 14px;
visibility: visible;
opacity: 1;
}
.help-tooltip-header {
padding: 0.8em 0.8em 0em 0.8em;
@ -127,5 +97,6 @@ export default {
bottom: -15px;
}
}
</style>