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

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

@ -4,6 +4,7 @@
:class="{'has-search-results': searchResultsVisible}"
ref="multiselectRoot"
>
<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">
@ -15,7 +16,7 @@
</slot>
</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>

11
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,13 +27,11 @@
border-color: $grey-light !important;
}
.input-loader-wrapper {
.input {
display: flex;
max-width: 100%;
width: 100%;
align-items: center;
.input {
border: none !important;
background: transparent;
height: auto;
@ -38,9 +40,8 @@
font-style: normal !important;
}
}
}
&.has-multiple .input-loader-wrapper {
&.has-multiple .input {
max-width: 250px;
input {