evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Testing settings form with vue.js

Browse Source
This commit is contained in:
RemixDev 2020-04-13 20:20:58 +02:00
parent 8b52af374c
commit edcbe29be9
2 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/css/style.css
View File

@ -42,21 +42,6 @@ main#main_content{
display: flex; display: flex;
} }
/* Tracks preview */
.preview_controls {
opacity: 0;
display: block;
background: rgba(0, 0, 0, .5);
width: 56px;
height: 56px;
text-align: center;
line-height: 56px;
position: absolute;
border-radius: 5px;
top: 0;
right: 0;
}
/* Middle section */ /* Middle section */
div#middle_section { div#middle_section {
background-color: var(--main-background); background-color: var(--main-background);
@ -131,15 +116,6 @@ div#middle_section {
#open_login_prompt{ #open_login_prompt{
margin: 8px 0px; margin: 8px 0px;
} }
#login_input_arl{
width: 100%;
border: 0px solid black;
line-height: 36px;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
color: var(--primary-text);
}
#settings_btn_copyArl{ #settings_btn_copyArl{
min-width: 24px; min-width: 24px;
width: 48px; width: 48px;
@ -393,3 +369,13 @@ button[disabled]{
color: var(--main-text); color: var(--main-text);
opacity: 0.75; opacity: 0.75;
} }
input[type="text"], input[type="password"]{
width: 100%;
border: 0px solid black;
line-height: 36px;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
color: var(--primary-text);
margin-bottom: 8px;
}

48
public/index.html
View File

@ -147,12 +147,17 @@ <h1>No Playlists found</h1>
</div> </div>
</div> </div>
</div> </div>
<div id="home_tab" class="main_tabcontent"> <div id="home_tab" class="main_tabcontent">
<h1>Home</h1> <h1>Home</h1>
</div> </div>
<div id="charts_tab" class="main_tabcontent"><h1>Charts</h1></div> <div id="charts_tab" class="main_tabcontent"><h1>Charts</h1></div>
<div id="favorites_tab" class="main_tabcontent"><h1>Favorites</h1></div> <div id="favorites_tab" class="main_tabcontent"><h1>Favorites</h1></div>
<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div> <div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div>
<div id="settings_tab" class="main_tabcontent"> <div id="settings_tab" class="main_tabcontent">
<h1>Settings</h1> <h1>Settings</h1>
<div id="logged_in_info"> <div id="logged_in_info">
@ -167,10 +172,43 @@ <h1>Settings</h1>
</div> </div>
<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p> <p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p> <p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
<div id="settings_generic_tab">
<div class="input_group">
<p>Download Path</p>
<input type="text" v-model="settings.downloadLocation">
</div> </div>
<div class="input_group">
<p>Trackname template</p>
<input type="text" v-model="settings.tracknameTemplate">
</div>
<div class="input_group">
<p>Album track template</p>
<input type="text" v-model="settings.albumTracknameTemplate">
</div>
<div class="input_group">
<p>Playlsit track template</p>
<input type="text" v-model="settings.playlistTracknameTemplate">
</div>
<div class="input_group" v-if="settings.createPlaylistFolder">
<p>Playlsit folder template</p>
<input type="text" v-model="settings.playlistNameTemplate">
</div>
<div class="input_group" v-if="settings.createArtistFolder">
<p>Artist folder template</p>
<input type="text" v-model="settings.artistNameTemplate">
</div>
<div class="input_group" v-if="settings.createAlbumFolder">
<p>Album folder template</p>
<input type="text" v-model="settings.albumNameTemplate">
</div>
</div>
</div>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div> <div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
</div></section> </div></section>
</div> </div>
<div id="download_tab_container"> <div id="download_tab_container">
<div id="download_tab_bar"> <div id="download_tab_bar">
<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i> <i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i>
@ -178,15 +216,11 @@ <h1>Settings</h1>
</div> </div>
<div id="download_tab"> <div id="download_tab">
<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i> <i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
<div id="download_list" class=""> <div id="download_list" class=""></div>
</div>
</div>
</div>
</div>
</div>
</main> </main>
<audio id="preview-track">
<source id="preview-track_source" src="" type="audio/mpeg">
</audio>
</body> </body>
<script type="text/javascript" src="/public/js/socket.io.js"></script> <script type="text/javascript" src="/public/js/socket.io.js"></script>
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>