709924470
diff --git a/‎static/css/animate.min.css‎
Lines changed: 7 additions & 0 deletions b/‎static/css/animate.min.css‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎templates/index.html‎
Lines changed: 12 additions & 10 deletions b/‎templates/index.html‎
Lines changed: 12 additions & 10 deletions
@@ -7,6 +7,7 @@
         <!--Import materialize.css-->
         <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
         <link type="text/css" rel="stylesheet" href="static/css/materialize.min.css"  media="screen,projection"/>
+        <link type="text/css" rel="stylesheet" href="static/css/animate.min.css"  media="screen,projection"/>
     </head>
     <body onload="loaded()">
         <script type="text/javascript" src="static/js/materialize.min.js"></script>
@@ -37,30 +38,31 @@
             }
             function onUpdate(jsonObject){
                 M.Toast.dismissAll();
-                M.toast({html: '<span style="width:5em;height:5em;"> '+
+                M.toast({html: '<span style="width:5em;height:5em;z-index:5;"> '+
                                     '<img src="' + jsonObject.picUrl + '" style="width:5em;height:5em;"> '+
                                 '</span> '+
-                                '<div style="padding-left:1em;" class="valign-wrapper center-align"> '+
-                                    '<font style="padding-right:1em;padding-bottom:0.5em;line-height: 60%;"> '+
-                                        '<h5 style="margin: 0;"> '+
-                                            jsonObject.name + ' - ' + jsonObject.artists+
-                                        '</h4> '+
-                                        '<br/> '+
-                                        jsonObject.album_name+
+                                '<div style="padding-left:1em;padding-right:1em;z-index:3;width:100%;max-width:100%;" class="valign-wrapper truncate"> '+
+                                    '<font style="line-height: 1.5em;" class="animate__animated animate__fadeInRight animate__fast truncate"> '+
+                                        '<font class="teal-text accent-4" id="artists" style="font-weight: 500;">' + jsonObject.artists + '</font><br/>' + 
+                                        '<h5 style="margin: 0;" class="truncate"> '+
+                                            jsonObject.name + 
+                                        '</h5> '+
                                     '</font> '+
                                 '<div>',
-                        classes: 'blue-grey darken-4 z-depth-3 blue-text text-lighten-5 right', displayLength: 300000});
+                        classes: 'blue-grey darken-4 z-depth-3 blue-text text-lighten-5', displayLength: 600000});
             }
         </script>
         <style>
             #toast-container {
                 margin-right: 0; 
-                max-width: 30%; 
+                width: 20%; 
+                max-width: 20%;
             }
 
             #toast-container > div.toast {
                 padding:0; 
                 margin:0;
+                font-weight: 300;
             }
         </style>
     </body>