heimoshuiyu/msw-open-music
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

improve css, add class page search_toolbar

Browse Source
This commit is contained in:
黑墨水鱼
2021-05-24 12:43:26 +08:00
parent 96ea49e086
commit 7c190261d3
2 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/index.js
View File

@@ -15,6 +15,7 @@ const component_search_folders = {
} }
}, },
template: ` template: `
<div class="page">
<div class="search_toolbar"> <div class="search_toolbar">
<input type="text" v-model="search_foldernames" placeholder="Enter folder name" /> <input type="text" v-model="search_foldernames" placeholder="Enter folder name" />
<button @click="first_search_folders">Search Folders</Button> <button @click="first_search_folders">Search Folders</Button>
@@ -58,6 +59,7 @@ const component_search_folders = {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
`, `,
mounted() { mounted() {
if (this.$route.query.folder_id) { if (this.$route.query.folder_id) {
@@ -154,7 +156,8 @@ const component_manage= {
} }
}, },
template: ` template: `
<div> <div class="page">
<div class="description">
<h4>关于本站</h4> <h4>关于本站</h4>
<p>本站是 MSW Project 的一个应用，希望以个人之力分享被隐藏在历史中的音乐。</p> <p>本站是 MSW Project 的一个应用，希望以个人之力分享被隐藏在历史中的音乐。</p>
<p>自己是V家厨，喜欢的p主包括 wonder-k, buzzG, *luna 等，但却因为种种原因淹没在主流音乐APP的曲库中。本站的初衷是为了让那些知名度低的 VOCALOID / ACG / 东方曲，能够被更多有缘人听到，同时有一个跨平台的工具，能够在低网速的条件下享受硬盘中的无损音乐。</p> <p>自己是V家厨，喜欢的p主包括 wonder-k, buzzG, *luna 等，但却因为种种原因淹没在主流音乐APP的曲库中。本站的初衷是为了让那些知名度低的 VOCALOID / ACG / 东方曲，能够被更多有缘人听到，同时有一个跨平台的工具，能够在低网速的条件下享受硬盘中的无损音乐。</p>
@@ -162,6 +165,7 @@ const component_manage= {
<input type="text" v-model="feedback" :disabled="submit_disabled" :placeholder="feedback_placeholder"/> <input type="text" v-model="feedback" :disabled="submit_disabled" :placeholder="feedback_placeholder"/>
<button @click="submit_feedback" :disabled="submit_disabled">{{ feedback_status }}</button> <button @click="submit_feedback" :disabled="submit_disabled">{{ feedback_status }}</button>
<label v-if="is_err">{{ err_msg }}</label> <label v-if="is_err">{{ err_msg }}</label>
</div>
<component-token :token="token" @set_token="$emit('set_token', $event)"></component-token> <component-token :token="token" @set_token="$emit('set_token', $event)"></component-token>
<component-manage-database :token="token"></component-manage-database> <component-manage-database :token="token"></component-manage-database>
</div> </div>
@@ -442,12 +446,14 @@ const component_search_files = {
emits: ['play_audio'], emits: ['play_audio'],
props: ['token'], props: ['token'],
template: ` template: `
<div> <div class="page">
<div class="search_toolbar">
<input type="text" name="filename" v-model="search_filenames" placeholder="Enter filename" /> <input type="text" name="filename" v-model="search_filenames" placeholder="Enter filename" />
<button @click="first_search_files">Search</button> <button @click="first_search_files">Search</button>
<button @click="last_page">Last Page</button> <button @click="last_page">Last Page</button>
<span>{{ offset }}~{{ offset + files.length }}</span> <span>{{ offset }}~{{ offset + files.length }}</span>
<button @click="next_page">Next Page</button> <button @click="next_page">Next Page</button>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -512,7 +518,10 @@ const component_get_random_files = {
} }
}, },
template: ` template: `
<button @click="get_random_files">Refresh</button> <div class="page">
<div class="search_toolbar">
<button @click="get_random_files">Refresh</button>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -528,6 +537,7 @@ const component_get_random_files = {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
`, `,
mounted() { mounted() {
this.get_random_files() this.get_random_files()

12
web/style.css
View File

@@ -47,3 +47,15 @@ td.clickable {
div.clickable { div.clickable {
cursor: pointer; cursor: pointer;
} }
div.page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.search_toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}