Updates Buefy and Bulma do 0.9.0 and fixes some breakin changes

This commit is contained in:
mateuswetah 2020-08-17 10:54:15 -03:00
parent 55e472c8f0
commit 05596ccd10
13 changed files with 122 additions and 90 deletions

31
package-lock.json generated
View File

@ -2362,11 +2362,11 @@
} }
}, },
"buefy": { "buefy": {
"version": "0.8.18", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.18.tgz", "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.0.tgz",
"integrity": "sha512-7Fem39I1beQm8Xi+1OFtyy6JksnmANc4h+pQ420JhY04tyefGyuQc7EiZ6GUcbCezu1WxTsdvSv0Kz/JB8aZNw==", "integrity": "sha512-RGe2/LG+IBtWn6pzCpAZm/Qf9q2ckcv8amlTJjKmvuCiC3JjtJjJvu4tMcrapncJOgKPufpHGxep738MypnPwA==",
"requires": { "requires": {
"bulma": "0.7.5" "bulma": "0.9.0"
} }
}, },
"buffer": { "buffer": {
@ -2405,9 +2405,9 @@
"dev": true "dev": true
}, },
"bulma": { "bulma": {
"version": "0.7.5", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz", "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
"integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==" "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
}, },
"bytes": { "bytes": {
"version": "3.0.0", "version": "3.0.0",
@ -3494,9 +3494,9 @@
"dev": true "dev": true
}, },
"elliptic": { "elliptic": {
"version": "6.5.2", "version": "6.5.3",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
"integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
"dev": true, "dev": true,
"requires": { "requires": {
"bn.js": "^4.4.0", "bn.js": "^4.4.0",
@ -10204,10 +10204,13 @@
"dev": true "dev": true
}, },
"serialize-javascript": { "serialize-javascript": {
"version": "3.0.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
"integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==", "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
"dev": true "dev": true,
"requires": {
"randombytes": "^2.1.0"
}
}, },
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",

View File

@ -8,8 +8,8 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",
"buefy": "^0.8.18", "buefy": "^0.9.0",
"bulma": "^0.7.5", "bulma": "^0.9.0",
"css-vars-ponyfill": "^2.3.1", "css-vars-ponyfill": "^2.3.1",
"mdi": "^2.2.43", "mdi": "^2.2.43",
"moment": "^2.25.3", "moment": "^2.25.3",

View File

@ -159,6 +159,7 @@
.numeric-filter-container { .numeric-filter-container {
display: flex; display: flex;
height: auto; height: auto;
align-items: stretch;
@media screen and (min-width: 769px) and (max-width: 1500px) { @media screen and (min-width: 769px) and (max-width: 1500px) {
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -89,13 +89,13 @@
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 1.5em; padding-bottom: 0.75em;
} }
.collapse-trigger { .collapse-trigger {
margin-left: -5px; margin-left: -7px;
.icon { .icon {
margin-right: 12px; margin-right: 5px;
} }
.collapse-label { .collapse-label {
display: inline-block; display: inline-block;
@ -205,6 +205,7 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.dropdown-trigger input { .dropdown-trigger input {
font-size: 0.75em !important; font-size: 0.75em !important;
line-height: 1.75em;
} }
.datepicker-header { .datepicker-header {

View File

@ -52,72 +52,74 @@
:data="mapperMetadata" :data="mapperMetadata"
:loading="isMapperMetadataLoading"> :loading="isMapperMetadataLoading">
<template slot-scope="props"> <b-table-column
<b-table-column v-slot="props"
field="label" field="label"
:label="$i18n.get('label_mapper_metadata')"> :label="$i18n.get('label_mapper_metadata')">
{{ props.row.label }} {{ props.row.label }}
</b-table-column> </b-table-column>
<b-table-column
v-slot="props"
field="slug"
:label="$i18n.get('metadatum')">
<b-select
:name="'mappers-metadatum-select-' + props.row.slug"
v-model="props.row.selected"
@input="onSelectMetadatumForMapperMetadata">
<option
value="">
{{ $i18n.get('instruction_select_a_metadatum') }}
</option>
<option
v-for="(metadatum, index) in activeMetadatumList"
:key="index"
:value="metadatum.id"
:disabled="isMetadatumSelected(metadatum.id)">
{{ metadatum.name }}
</option>
</b-select>
</b-table-column>
<b-table-column
v-slot="props"
field="isCustom"
label="">
<a
:style="{ visibility:
props.row.isCustom
? 'visible' : 'hidden'
}"
@click.prevent="editMetadatumCustomMapper(props.row)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
:style="{ visibility:
props.row.isCustom
? 'visible' : 'hidden'
}"
@click.prevent="removeMetadatumCustomMapper(props.row)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</b-table-column>
<b-table-column
field="slug"
:label="$i18n.get('metadatum')">
<b-select
:name="'mappers-metadatum-select-' + props.row.slug"
v-model="props.row.selected"
@input="onSelectMetadatumForMapperMetadata">
<option
value="">
{{ $i18n.get('instruction_select_a_metadatum') }}
</option>
<option
v-for="(metadatum, index) in activeMetadatumList"
:key="index"
:value="metadatum.id"
:disabled="isMetadatumSelected(metadatum.id)">
{{ metadatum.name }}
</option>
</b-select>
</b-table-column>
<b-table-column
field="isCustom"
label="">
<a
:style="{ visibility:
props.row.isCustom
? 'visible' : 'hidden'
}"
@click.prevent="editMetadatumCustomMapper(props.row)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
:style="{ visibility:
props.row.isCustom
? 'visible' : 'hidden'
}"
@click.prevent="removeMetadatumCustomMapper(props.row)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</b-table-column>
</template>
</b-table> </b-table>
</section> </section>
<section <section

View File

@ -222,7 +222,7 @@
<!-- Change OrderBy Select and Order Button--> <!-- Change OrderBy Select and Order Button-->
<div class="search-control-item"> <div class="search-control-item">
<b-field> <b-field>
<label class="label">{{ $i18n.get('label_sort') }}</label> <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrder" @input="onChangeOrder"
@ -1499,6 +1499,7 @@
.label { .label {
color: var(--tainacan-label-color); color: var(--tainacan-label-color);
font-size: 0.875em; font-size: 0.875em;
line-height: 1.75em;
font-weight: normal; font-weight: normal;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;

View File

@ -100,18 +100,38 @@
.taginput.is-expanded { .taginput.is-expanded {
width: 100%; width: 100%;
} }
.input:focus,
.textarea:focus,
.taginput .taginput-container.is-focusable:focus,
.select select:focus,
.is-focused.input,
.is-focused.textarea,
.taginput .is-focused.taginput-container.is-focusable,
.select select.is-focused,
.input:active,
.textarea:active,
.taginput .taginput-container.is-focusable:active,
.select select:active,
.is-active.input,
.is-active.textarea,
.taginput .is-active.taginput-container.is-focusable,
.select select.is-active {
box-shadow: none;
}
.taginput-container { .taginput-container {
padding: 0px !important; padding: 0px !important;
background-color: transparent !important; background-color: transparent !important;
&:focus, &:active { &:focus, &:active {
border: none !important; border: 1px solid transparent !important;
} }
.input { .input {
margin-bottom: 0px !important; margin-bottom: 0px !important;
text-overflow: ellipsis; text-overflow: ellipsis;
background-color: var(--tainacan-input-background-color); background-color: var(--tainacan-input-background-color);
&:hover {
border: none !important;
}
} }
.input.has-selected, .input:focus, .input:active { .input.has-selected, .input:focus, .input:active {
background-color: var(--tainacan-input-background-color); background-color: var(--tainacan-input-background-color);

View File

@ -108,6 +108,7 @@
color: var(--tainacan-secondary); color: var(--tainacan-secondary);
border: none; border: none;
align-items: inherit; align-items: inherit;
min-width: 1.75em;
} }
.pagination-link:active { .pagination-link:active {
box-shadow: none; box-shadow: none;

View File

@ -1,5 +1,6 @@
.select { .select {
padding-top: 0px !important; padding-top: 0px !important;
border-radius: 1px;
&, &,
&:not(.is-multiple) { &:not(.is-multiple) {
@ -15,7 +16,7 @@
font-weight: normal; font-weight: normal;
font-size: 0.875em !important; font-size: 0.875em !important;
font-family: var(--tainacan-font-family, inherit); font-family: var(--tainacan-font-family, inherit);
line-height: 1.5em; line-height: 1.75em !important;
height: auto !important; height: auto !important;
padding: calc(0.375em - 1px) 20px calc(0.375em - 1px) 10px !important; padding: calc(0.375em - 1px) 20px calc(0.375em - 1px) 10px !important;
margin-top: 0px !important; margin-top: 0px !important;

View File

@ -89,7 +89,7 @@ $black-invert: findColorInvert($black);
$foreground-color: $black; $foreground-color: $black;
$background-color: $white; $background-color: $white;
@import "../../../../node_modules/bulma/sass/utilities/derived-variables.sass"; @import "../../../../node_modules/bulma/sass/utilities/derived-variables.scss";
// Setup $colors to use as bulma classes // Setup $colors to use as bulma classes
$colors: ( $colors: (

View File

@ -1334,6 +1334,7 @@
.label { .label {
color: var(--tainacan-label-color); color: var(--tainacan-label-color);
font-size: 0.875em; font-size: 0.875em;
line-height: 1.75em;
font-weight: normal; font-weight: normal;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;

View File

@ -1,5 +1,5 @@
@import "../../../../node_modules/bulma/sass/utilities/_all.sass" @import "../../../../node_modules/bulma/sass/utilities/_all.sass"
@import "../../../../node_modules/bulma/sass/base/helpers.sass" @import "../../../../node_modules/bulma/sass/helpers/_all.sass"
@import "../../../../node_modules/bulma/sass/form/_all.sass" @import "../../../../node_modules/bulma/sass/form/_all.sass"
@import "../../../../node_modules/bulma/sass/components/pagination.sass" @import "../../../../node_modules/bulma/sass/components/pagination.sass"
@import "../../../../node_modules/bulma/sass/elements/icon.sass" @import "../../../../node_modules/bulma/sass/elements/icon.sass"

View File

@ -156,6 +156,7 @@ export default {
@media screen and (min-width: 1366px) { @media screen and (min-width: 1366px) {
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
height: auto !important; height: auto !important;
align-items: stretch;
} }
} }