Styling
This commit is contained in:
parent
f01f4926eb
commit
e8cfb840fe
|
@ -3,7 +3,7 @@
|
|||
.bd-onlinePh {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10% 0;
|
||||
margin: 10px 0;
|
||||
|
||||
h3 {
|
||||
color: #fff;
|
||||
|
|
|
@ -164,11 +164,11 @@
|
|||
.bd-fancySearch {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
transform: translateY(80px) translateX(-140px);
|
||||
transition: all .5s ease-in-out;
|
||||
// transform: translateY(80px) translateX(-140px);
|
||||
// transition: all .5s ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: 'Search by name, description or tag...';
|
||||
// content: 'Search by name, description or tag...';
|
||||
color: #f6f6f7;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
|
@ -184,6 +184,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
.bd-textInput {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-textInput {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
|
|
@ -26,8 +26,8 @@
|
|||
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
|
||||
</div>
|
||||
<div v-if="!local" class="bd-onlinePh">
|
||||
<div class="bd-fancySearch" :class="{'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||
<input type="text" class="bd-textInput" @keydown.enter="searchInput" @keyup.stop/>
|
||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop/>
|
||||
</div>
|
||||
<h2 v-if="loadingOnline">Loading</h2>
|
||||
<RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
|
||||
|
@ -74,6 +74,7 @@
|
|||
await this.ThemeManager.refreshThemes();
|
||||
},
|
||||
async refreshOnline() {
|
||||
if (this.loadingOnline) return;
|
||||
this.loadingOnline = true;
|
||||
try {
|
||||
const getThemes = await BdWebApi.themes.get();
|
||||
|
@ -112,8 +113,8 @@
|
|||
});
|
||||
},
|
||||
searchInput(e) {
|
||||
this.loadingOnline = true;
|
||||
setTimeout(this.refreshOnline, 1000);
|
||||
if (this.loadingOnline) return;
|
||||
this.refreshOnline();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue