local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Make sure the loading spinner is always visible at the end of the page

Browse source
This commit is contained in:
kolaente 2021-01-14 22:19:28 +01:00
parent 526eee361f
commit 55b9b68258
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/input/multiselect.vue
View file

@ -4,18 +4,19 @@
:class="{'has-search-results': searchResultsVisible}"
ref="multiselectRoot"
>
<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
<template v-if="Array.isArray(internalValue)">
<template v-for="(item, key) in internalValue">
<slot name="tag" :item="item">
<div class="control" :class="{'is-loading': loading || localLoading}">
<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
<template v-if="Array.isArray(internalValue)">
<template v-for="(item, key) in internalValue">
<slot name="tag" :item="item">
<span :key="`item${key}`" class="tag ml-2 mt-2">
{{ label !== '' ? item[label] : item }}
<a @click="() => remove(item)" class="delete is-small"></a>
</span>
</slot>
</slot>
</template>
</template>
</template>
<div class="input-loader-wrapper">
<input
type="text"
class="input"
@ -27,7 +28,6 @@
ref="searchInput"
@focus="() => showSearchResults = true"
/>
<span class="loader is-loading" v-if="loading || localLoading"></span>
</div>
</div>

21
src/styles/components/base/multiselect.scss
View file

@ -2,6 +2,10 @@
width: 100%;
position: relative;
.control.is-loading::after {
top: .75rem;
}
&.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0;
border-color: $primary !important;
@ -23,24 +27,21 @@
border-color: $grey-light !important;
}
.input-loader-wrapper {
.input {
display: flex;
max-width: 100%;
width: 100%;
align-items: center;
border: none !important;
background: transparent;
height: auto;
.input {
border: none !important;
background: transparent;
height: auto;
&::placeholder {
font-style: normal !important;
}
&::placeholder {
font-style: normal !important;
}
}
&.has-multiple .input-loader-wrapper {
&.has-multiple .input {
max-width: 250px;
input {