More css adjustments. Implements backdrop scape for Help Tooltip (Ref. #30). Adds missing i18n translations to Term Edition form on help tooltip. Adds missing title row on Taxonomy edition page.
This commit is contained in:
Mateus Machado Luna
parent
5b4153fc30
commit
9dd7183fa4
|
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="page-container primary-page">
|
||||
<b-tabs v-model="activeTab">
|
||||
|
||||
<tainacan-title />
|
||||
<b-tabs v-model="activeTab">
|
||||
<b-tab-item :label="$i18n.get('category')">
|
||||
<b-tag
|
||||
v-if="category != null && category != undefined"
|
||||
:type="'is-' + getStatusColor(category.status)"
|
||||
v-text="category.status"/>
|
||||
<form
|
||||
v-if="category != null && category != undefined"
|
||||
class="tainacan-form"
|
||||
|
|
@ -294,20 +290,6 @@
|
|||
});
|
||||
|
||||
},
|
||||
getStatusColor(status) {
|
||||
switch(status) {
|
||||
case 'publish':
|
||||
return 'success';
|
||||
case 'draft':
|
||||
return 'info';
|
||||
case 'private':
|
||||
return 'warning';
|
||||
case 'trash':
|
||||
return 'danger';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
createNewCategory() {
|
||||
// Puts loading on Draft Category creation
|
||||
this.isLoadingCategory = true;
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
{{ $i18n.get('label_name') }}
|
||||
<span class="required-term-asterisk">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('terms', 'name')"
|
||||
:message="$i18n.getHelperMessage('terms', 'name')"/>
|
||||
:title="$i18n.get('label_name')"
|
||||
:message="$i18n.get('info_help_term_name')"/>
|
||||
</label>
|
||||
<b-input
|
||||
:class="{'has-content': editForm.name != undefined && editForm.name != ''}"
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
<label class="label">
|
||||
{{ $i18n.get('label_description') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('terms', 'description')"
|
||||
:message="$i18n.getHelperMessage('terms', 'description')"/>
|
||||
:title="$i18n.get('label_description')"
|
||||
:message="$i18n.get('info_help_term_description')"/>
|
||||
</label>
|
||||
<b-input
|
||||
:class="{'has-content': editForm.description != undefined && editForm.description != ''}"
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@
|
|||
@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="help-tooltip"
|
||||
:class="{ 'opened': isOpened }">
|
||||
:class="{ 'opened': isOpened }"
|
||||
class="help-tooltip">
|
||||
<div class="help-tooltip-header">
|
||||
<h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"/></a>
|
||||
</div>
|
||||
<div class="help-tooltip-body">
|
||||
<p>{{ (message != '' && message != undefined) ? message : $i18n.get('info_no_description_provided') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
@ -43,51 +47,61 @@ export default {
|
|||
|
||||
a.help-button .icon {
|
||||
i, i::before { font-size: 0.9em !important; }
|
||||
color: $gray;
|
||||
&:hover {
|
||||
color: $primary !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-tooltip.opened {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.help-tooltip {
|
||||
color: #000;
|
||||
background-color: #e8f9f5;
|
||||
border: 1px solid #338591;
|
||||
border-radius: 10px;
|
||||
z-index: 99999999999999999999;
|
||||
color: $secondary;
|
||||
background-color: $primary-light;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin: 0px 0px 0px -37px;
|
||||
position: absolute;
|
||||
z-index: 999999999999999;
|
||||
bottom: 100%;
|
||||
bottom: calc(100% - 6px);
|
||||
left: 0%;
|
||||
min-width: 250px;
|
||||
display: block;
|
||||
transition: margin-bottom 0.3s ease, opacity 0.4s ease;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease, margin-bottom 0.3s ease;
|
||||
|
||||
&.opened {
|
||||
margin-bottom: 14px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.help-tooltip-header {
|
||||
padding: 0.8em 0.8em 0.6em 0.8em;
|
||||
border-bottom: 1px solid #909293;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 0.8em 0.8em 0em 0.8em;
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.icon {
|
||||
color: #909293 !important;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
position: absolute;
|
||||
&:hover {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,28 +110,21 @@ export default {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
left: 28px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
&:after {
|
||||
border-color: #e8f9f5 transparent transparent transparent;
|
||||
border-right-width: 20px;
|
||||
border-top-width: 16px;
|
||||
border-left-width: 20px;
|
||||
}
|
||||
&:before {
|
||||
border-color: #338591 transparent transparent transparent;
|
||||
border-right-width: 20px;
|
||||
border-top-width: 16px;
|
||||
border-left-width: 20px;
|
||||
bottom: -20px;
|
||||
border-color: $primary-light transparent transparent transparent;
|
||||
border-right-width: 18px;
|
||||
border-top-width: 12px;
|
||||
border-left-width: 18px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $primary-lighter: #e6f6f8;
|
|||
$primary-dark: #55A0AF;
|
||||
$primary-darker: darken($primary-dark, 5%);
|
||||
|
||||
$success: #25a088;
|
||||
$success: #25a189;
|
||||
$success-invert: findColorInvert($success);
|
||||
|
||||
$separator-color: #2b98a4;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ html {
|
|||
|
||||
// Input components used in forms are gray in Tainacan
|
||||
.tainacan-form {
|
||||
color: black;
|
||||
color: $tainacan-input-color;
|
||||
.form-submit {
|
||||
justify-content: space-between !important;
|
||||
padding: 1em 1.2em 0.4em 1.2em;
|
||||
|
|
@ -140,7 +140,7 @@ html {
|
|||
padding: 2px 30px !important;
|
||||
}
|
||||
.button.is-outlined {
|
||||
color: $tertiary;
|
||||
color: #150e38;
|
||||
}
|
||||
&.has-only-save {
|
||||
justify-content: end !important;
|
||||
|
|
@ -252,6 +252,7 @@ html {
|
|||
}
|
||||
.button.is-small {
|
||||
height: 26px !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
.button:not(.is-small):not(.is-medium):not(.is-large) {
|
||||
height: 30px !important;
|
||||
|
|
|
|||
|
|
@ -235,6 +235,8 @@ return [
|
|||
'info_there_is_no_filter' => __( 'There is no filter here yet.', 'tainacan' ),
|
||||
'info_changes' => __( 'Changes', 'tainacan' ),
|
||||
'info_possible_external_sources' => __( 'Possible external sources: CSV, Instagram, Youtube, etc.', 'tainacan' ),
|
||||
'info_help_term_name' => __( 'The name of the Term.', 'tainacan' ),
|
||||
'info_help_term_description' => __( 'The description of the Term.', 'tainacan' ),
|
||||
|
||||
// Tainacan Field Types
|
||||
'tainacan-text' => __( 'Text', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue