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}" :class="{'has-search-results': searchResultsVisible}"
ref="multiselectRoot" 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}"> <div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
<template v-if="Array.isArray(internalValue)"> <template v-if="Array.isArray(internalValue)">
<template v-for="(item, key) in internalValue"> <template v-for="(item, key) in internalValue">
@ -15,7 +16,7 @@
</slot> </slot>
</template> </template>
</template> </template>
<div class="input-loader-wrapper">
<input <input
type="text" type="text"
class="input" class="input"
@ -27,7 +28,6 @@
ref="searchInput" ref="searchInput"
@focus="() => showSearchResults = true" @focus="() => showSearchResults = true"
/> />
<span class="loader is-loading" v-if="loading || localLoading"></span>
</div> </div>
</div> </div>

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

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