sebclem/ClaptrapBot
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 1 Wiki Activity

Add mobile layout

Browse Source
This commit is contained in:
Sebastien 2018-09-12 10:28:55 +03:00
parent 5d0e20cc70
commit bd71848e2a
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/main/resources/templates/music.html
View File

@ -20,32 +20,32 @@
<div class="section no-pad-bot main" id="index-banner"> <div class="section no-pad-bot main" id="index-banner">
<div class="row"> <div class="row">
<div class="col s8"> <div class="col l8 s12 m12">
<div class="row center" > <div class="row center" >
<img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/> <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
</div> </div>
<h4 class="center" id="music_text"></h4> <h4 class="center" id="music_text"></h4>
<div class="row center" style="margin-bottom: 0px"> <div class="row center" style="margin-bottom: 0px">
<div class="progress col s6 offset-s3 z-depth-3"> <div class="progress col l6 offset-l3 m10 offset-m1 s10 offset-s1 z-depth-3">
<div class="determinate" id="music_progress" style="width: 0%"></div> <div class="determinate" id="music_progress" style="width: 0%"></div>
</div> </div>
</div> </div>
<div class="row center"> <div class="row center">
<div class="col s2 offset-s3 left-align" style="padding: 0px" id="current_time">0:00</div> <div class="col l2 offset-l3 m2 offset-m1 s2 offset-s1 left-align" style="padding: 0px" id="current_time">0:00</div>
<div class="col s2 offset-s2 right-align " style="padding: 0px" id="total_time">0:00</div> <div class="col l2 offset-l2 m2 offset-m6 s2 offset-s6 right-align " style="padding: 0px" id="total_time">0:00</div>
</div> </div>
<div class="row center"> <div class="row center">
<div class="col s2 offset-s3 center"> <div class="col l2 offset-l3 m4 s4 center">
<a class="btn-large red darken-4 z-depth-3 waves-effect waves-light" id="btn_stop"> <a class="btn-large red darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
<i class="material-icons medium">stop</i> <i class="material-icons medium">stop</i>
</a> </a>
</div> </div>
<div class="col s2 center"> <div class="col l2 m4 s4 center">
<a class="btn-large green darken-4 z-depth-3 waves-effect waves-light" id="btn_play"> <a class="btn-large green darken-4 z-depth-3 waves-effect waves-light" id="btn_play">
<i class="material-icons medium">play_arrow</i> <i class="material-icons medium">play_arrow</i>
</a> </a>
</div> </div>
<div class="col s2 center"> <div class="col l2 m4 s4 center">
<a class="btn-large light-blue darken-4 z-depth-3 waves-effect waves-light" id="btn_next"> <a class="btn-large light-blue darken-4 z-depth-3 waves-effect waves-light" id="btn_next">
<i class="material-icons">skip_next</i> <i class="material-icons">skip_next</i>
</a> </a>
@ -53,7 +53,7 @@
</div> </div>
<div class="row center"> <div class="row center">
<div class="col offset-s5 s2 center"> <div class="col offset-l5 l2 m2 offset-m5 s2 offset-s5 center">
<a class="btn black z-depth-3 waves-effect waves-light modal-trigger" href="#modal_current_info" id="btn_info"> <a class="btn black z-depth-3 waves-effect waves-light modal-trigger" href="#modal_current_info" id="btn_info">
<i class="material-icons">info</i> <i class="material-icons">info</i>
</a> </a>
@ -62,7 +62,7 @@
</div> </div>
<div class="row center"> <div class="row center">
<div class="col offset-s5 s2 center"> <div class="col offset-l5 l2 m4 offset-m4 s4 offset-s4 center">
<a class="btn-large red accent-4 z-depth-3 waves-effect waves-light" id="btn_disconnect"> <a class="btn-large red accent-4 z-depth-3 waves-effect waves-light" id="btn_disconnect">
<i class="material-icons">call_end</i> <i class="material-icons">call_end</i>
</a> </a>
@ -70,17 +70,17 @@
</div> </div>
</div> </div>
<div class="col s4" > <div class="col l4 m12 s12" >
<table> <table>
<thead> <thead>
<tr> <tr>
<th style="padding: 0px;"> <th style="padding: 0px;">
<div class="row center valign-wrapper" style="margin: 0px"> <div class="row center valign-wrapper" style="margin: 0px">
<div class="col s3 center blue-grey-text text-darken-3"><h5><b>Playlist</b></h5></div> <div class="col l3 m5 s5 center blue-grey-text text-darken-3"><h5><b>Playlist</b></h5></div>
<div class="col s3 center" style="padding-right: 0px; padding-left: 0px"> <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
<a class="waves-effect waves-light btn modal-trigger red darken-4" id="flush_btn"><i class="material-icons">delete_sweep</i></a> <a class="waves-effect waves-light btn modal-trigger red darken-4" id="flush_btn"><i class="material-icons">delete_sweep</i></a>
</div> </div>
<div class="col s3 center" style="padding-right: 0px; padding-left: 0px"> <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
<!-- Modal Trigger --> <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger green darken-4" id="add_btn" href="#modalAdd"><i class="material-icons">add_circle_outline</i></a> <a class="waves-effect waves-light btn modal-trigger green darken-4" id="add_btn" href="#modalAdd"><i class="material-icons">add_circle_outline</i></a>
@ -88,17 +88,17 @@
<div id="modalAdd" class="modal disabled"> <div id="modalAdd" class="modal disabled">
<div class="modal-content" style="padding-bottom: 0px"> <div class="modal-content" style="padding-bottom: 0px">
<div class="row" style="margin-bottom: 0px"> <div class="row" style="margin-bottom: 0px">
<h3 class="col s12"> Add Music</h3> <h3 class="col l12 m12 s12"> Add Music</h3>
<form class="col s12"> <form class="col l12 m12 s12">
<div class="row" style="margin-bottom: 0px"> <div class="row" style="margin-bottom: 0px">
<div class="input-field col s12" style="padding-left: 0px; padding-right: 0px"> <div class="input-field col l12 m12 s12" style="padding-left: 0px; padding-right: 0px">
<!--<i class="material-icons prefix">link</i>--> <!--<i class="material-icons prefix">link</i>-->
<input id="input_link" type="text" class="validate"/> <input id="input_link" type="text" class="validate"/>
<label for="input_link">Link</label> <label for="input_link">Link</label>
</div> </div>
</div> </div>
<div class="row" style="margin-bottom: 0px"> <div class="row" style="margin-bottom: 0px">
<div class="col s12 center"> <div class="col l12 m12 s12 center">
Playlist Limit Playlist Limit
</div> </div>
</div> </div>
@ -117,7 +117,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col s3 center " style="padding-left: 0px"> <div class="col l3 m2 s2 center " style="padding-left: 0px">
<div class="row switch blue-grey-text text-darken-3" style="margin-bottom: 0px"> <div class="row switch blue-grey-text text-darken-3" style="margin-bottom: 0px">
AutoFlow AutoFlow
</div> </div>
@ -193,8 +193,8 @@
<div id="modalChanels" class="modal"> <div id="modalChanels" class="modal">
<div class="modal-content" style="padding-bottom: 0px"> <div class="modal-content" style="padding-bottom: 0px">
<div class="row" style="margin-bottom: 0px"> <div class="row" style="margin-bottom: 0px">
<h3 class="col s12 center">Vocal Channels</h3> <h3 class="col l12 m12 s12 center">Vocal Channels</h3>
<div class="col offset-s4 s4 center"> <div class="col offset-l4 l4 m4 offset-m4 s8 offset-s2 center">
<form id="channelForm" action="#" class="left-align"> <form id="channelForm" action="#" class="left-align">
</form> </form>
</div> </div>
@ -211,7 +211,7 @@
<div id="modal_loading" class="modal valign-wrapper"> <div id="modal_loading" class="modal valign-wrapper">
<div class="modal-content" > <div class="modal-content" >
<div class="row center"> <div class="row center">
<h3 class="col s12 center">Please wait</h3> <h3 class="col l12 m12 s12 center">Please wait</h3>
</div> </div>
<div class="row center" > <div class="row center" >
<div class="preloader-wrapper big active"> <div class="preloader-wrapper big active">