Upgrade materialize

src/main/resources/static/js/music.js

@@ -41,12 +41,6 @@ $(document).ready(function() {
             dismissible: false
         });
 
-        $('.button-collapse-1').sideNav({
-            menuWidth: 400, // Default is 300
-            edge: 'right', // Choose the horizontal origin
-            closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
-            draggable: true // Choose whether you can drag to open on touch screens,
-        });
 
         $('.dropdown-button').dropdown({
             inDuration: 300,
@@ -202,6 +196,7 @@ function getPlayList() {
                     template.html(content);
 
                     $('#playlist_list').append(template);
+                    $('.collapsible').collapsible();
 
                 });
                 $(".btn_dell_playlist").click(function () {
@@ -270,7 +265,8 @@ function updateModal(data){
     $('#modal_title').text("Title: "+ data.info.audioTrackInfo.title);
     $('#modal_author').text("Author: "+ data.info.audioTrackInfo.author);
     $('#modal_lenght').text("Duration: "+ msToTime(data.info.audioTrackInfo.length));
-    $('#modal_url').text("URL: "+ data.info.audioTrackInfo.uri);
+    $('#modal_url').html("<div>URL:  <a target=\"_blank\"  href=\""+ data.info.audioTrackInfo.uri + "\">" + data.info.audioTrackInfo.uri + "</a></div>");
+    //
     $('#modal_submit').text("Submitted by: "+ data.info.user);
 
 

src/main/resources/static/js/navabar.js

@@ -1,5 +1,5 @@
 var nav_bar_account_link;
-var connected_link = "<a class=\"dropdown-account\" data-activates=\"dropdown_connected\"><i class=\"material-icons green-text\">account_box</i></a>";
+var connected_link = "<a class=\"dropdown-account dropdown-trigger\" data-target=\"dropdown_connected\"><i class=\"material-icons green-text\">account_box</i></a>";
 var disconnected_link = "<a class=\"waves-effect waves-light modal-trigger\" href=\"#modal_connection\"><i class=\"material-icons red-text\">account_box</i></a>";
 var input_name;
 var input_psw;
@@ -8,8 +8,10 @@ var btn_disconnect;
 var nav_name;
 
 
+
+
 $(document).ready(function() {
-    $('.button-navbar-mobile').sideNav({
+    $('#nav-mobile').sidenav({
         menuWidth: 400, // Default is 300
         edge: 'right', // Choose the horizontal origin
         closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
@@ -27,7 +29,7 @@ $(document).ready(function() {
     btn_submit = $("#btn-submit-connect");
     btn_disconnect = $(".nav-disconnect");
     nav_name = $("#nav-name");
-
+    navListeners();
     if(Cookies.get('token') === undefined){
         disconnected()
     }
@@ -35,7 +37,7 @@ $(document).ready(function() {
         connected();
     }
 
-    navListeners();
+
 });
 
 
@@ -60,7 +62,7 @@ function connected(){
     nav_bar_account_link.html(connected_link);
     $('.dropdown-account').dropdown({
             constrainWidth: false, // Does not change width of dropdown to that of the activator
-            belowOrigin: true, // Displays dropdown below the button
+            coverTrigger: false, // Displays dropdown below the button
             alignment: 'left', // Displays dropdown with edge aligned to the left of button
             stopPropagation: false // Stops event propagation
         }

src/main/resources/static/js/register.js

@@ -3,13 +3,7 @@ var ok_passwrd = false;
 $(document).ready(function() {
     var baseUrl = window.location.protocol + "//" +window.location.host + window.location.pathname;
     console.log(baseUrl);
-    $('.button-collapse-1').sideNav({
+    
-        menuWidth: 400, // Default is 300
-        edge: 'right', // Choose the horizontal origin
-        closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
-        draggable: true // Choose whether you can drag to open on touch screens,
-    });
-
     var sendBtn = $('#sendBtn');
 
 

src/main/resources/templates/header.html

@@ -17,42 +17,49 @@
         <ul class="right hide-on-med-and-down">
 
             <li class="" th:classappend="(${page} == 'home')? 'active' : ''">
-                <a class="waves-effect waves-light sidenav-trigger" href="/" data-target="slide-out">Home</a>
+                <a class="waves-effect waves-light" href="/">Home</a>
             </li>
             <li class="" th:classappend="(${page} == 'music')? 'active' : ''">
                 <a class="waves-effect waves-light" href="/music">Music Control</a>
             </li>
             <li id="nav-bar-account">
-                <a class="dropdown-account" data-activates="dropdown1"><i class="material-icons">account_box</i></a>
+                <a class="dropdown-account dropdown-trigger" data-target="dropdown_connected"><i class="material-icons">account_box</i></a>
             </li>
 
         </ul>
 
-        <ul id="nav-mobile" class="side-nav">
-            <li class="center" th:classappend="(${page} == 'home')? 'active' : ''">
-                <a class="waves-effect waves-light sidenav-trigger" href="/" data-target="slide-out">Home</a>
-            </li>
-            <li class="center" th:classappend="(${page} == 'music')? 'active' : ''">
-                <a class="waves-effect waves-light" href="/music">Music Control</a>
-            </li>
 
-            <li><div class="divider"></div></li>
+        <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-            <li><a class="center nav-change-guild">Change Guild</a></li>
-            <li>
-                <a class="center tooltipped" data-position="left" data-delay="50" data-tooltip="Under Development!">My Account</a>
-            </li>
-            <li>
-                <a class="center tooltipped" data-position="left" data-delay="50" data-tooltip="Under Development!">My Playlists</a>
-            </li>
-            <li class="divider"></li>
-
-            <li><a class="center red-text nav-disconnect" style="font-weight: bold">Disconnect</a></li>
-
-        </ul>
-        <a href="#" data-activates="nav-mobile" class="button-navbar-mobile button-collapse"><i class="material-icons">menu</i></a>
     </div>
     </nav>
 
+    <ul id="nav-mobile" class="sidenav">
+        <li class="center" th:classappend="(${page} == 'home')? 'active' : ''">
+            <a class="waves-effect waves-light sidenav-trigger" href="/" data-target="slide-out">Home</a>
+        </li>
+        <li class="center" th:classappend="(${page} == 'music')? 'active' : ''">
+            <a class="waves-effect waves-light" href="/music">Music Control</a>
+        </li>
+
+        <li><div class="divider"></div></li>
+        <li><a class="center nav-change-guild">Change Guild</a></li>
+        <li>
+            <a class="center tooltipped" data-position="left" data-delay="50" data-tooltip="Under Development!">My Account</a>
+        </li>
+        <li>
+            <a class="center tooltipped" data-position="left" data-delay="50" data-tooltip="Under Development!">My Playlists</a>
+        </li>
+        <li class="divider"></li>
+
+        <li><a class="center red-text nav-disconnect" style="font-weight: bold">Disconnect</a></li>
+
+    </ul>
+
+
+
+
+
+
     <!-- Dropdown connected -->
     <ul id="dropdown_connected" class="dropdown-content ">
         <li>
@@ -88,14 +95,16 @@
                         <div class="input-field col s6 offset-s3">
                             <i class="material-icons prefix">account_box</i>
                             <input name="username" id="user_input" type="text" class="validate"/>
-                            <label for="user_input" data-error="User not registered!">User Name</label>
+                            <label for="user_input" >User Name</label>
+                            <span class="helper-text" data-error="User not registered!"></span>
                         </div>
                     </div>
                     <div class="row">
                         <div class="input-field col s6 offset-s3">
                             <i class="material-icons prefix">security</i>
                             <input name="password" id="password_input" type="password" class="validate"/>
-                            <label for="password_input" data-error="Wrong password!">Password</label>
+                            <label for="password_input">Password</label>
+                            <span class="helper-text" data-error="Wrong password!"></span>
                         </div>
                     </div>
                     <div class="row" style="margin-bottom: 10px">
@@ -137,8 +146,10 @@
     </div>
 
     <p id="radioTemplateGuild" class="" style="visibility: hidden; display: none ">
-        <input name="guildRadio" class="with-gap" type="radio" value="@id" id="@id"/>
+        <label>
-        <label for="@id">@name</label>
+            <input name="guildRadio" class="with-gap" type="radio" value="@id" id="@id"/>
+            <span>@name</span>
+        </label>
     </p>
 
     <!--__________________________________________________________-->

src/main/resources/templates/index.html

@@ -29,7 +29,7 @@
     var needLogin = true;
 </script>
 <!--  Scripts-->
-<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
 <script th:src="@{/js/materialize.js}"></script>
 <script th:src="@{/js/navabar.js}"></script>
 <script th:src="@{/js/js.cookie.js}"></script>

src/main/resources/templates/loading.html

@@ -67,7 +67,7 @@
 </div>
 
 <!--  Scripts-->
-<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
 
 <script th:src="@{/js/materialize.js}"></script>
 <script th:src="@{/js/loading.js}"></script>

src/main/resources/templates/music.html

@@ -77,10 +77,10 @@
                     <th style="padding: 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 s3 center">
+                            <div class="col s3 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>
                             </div>
-                            <div class="col s3 center" style="padding-right: 0px">
+                            <div class="col s3 center" style="padding-right: 0px; padding-left: 0px">
                                 <!-- 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>
 
@@ -195,7 +195,7 @@
         <div class="row" style="margin-bottom: 0px">
             <h3 class="col s12 center">Vocal Channels</h3>
             <div class="col offset-s4 s4 center">
-                <form id="channelForm" action="#" class="">
+                <form id="channelForm" action="#" >
                 </form>
             </div>
         </div>
@@ -270,12 +270,15 @@
 
 
 <p id="radioTemplate" class="" style="visibility: hidden">
-    <input name="vocalRadio" class="with-gap" type="radio" value="@id" id="@id"/>
+    <label>
-    <label for="@id">@name</label>
+        <input name="vocalRadio" class="with-gap" type="radio" value="@id" id="@id"/>
+        <span for="@id">@name</span>
+    </label>
+
 </p>
 
 <!--  Scripts-->
-<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
 
 <script>
     var needLogin = true;

src/main/resources/templates/register.html

@@ -93,13 +93,14 @@
 
 
 
-    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
     <script th:src="@{/js/materialize.js}"></script>
     <script th:src="@{/js/register.js}"></script>
     <script th:src="@{/js/navabar.js}"></script>
     <script th:src="@{/js/js.cookie.js}"></script>
 
 
+
     <script th:inline="javascript">
         /*<![CDATA[*/