added collapse and right form, also for val and new title

JoshuaHuber · Jun 7, 2017 · 5e636de · 5e636de
1 parent 873536a
commit 5e636de
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>AI Music</title>
+	<title>ai Music</title>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 	<link rel="icon" href="favicon.ico">
@@ -18,32 +18,32 @@
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>
 			</button>
-			<a class="navbar-brand" href="#">AI Music</a>
-			<form id="js-userSubmit" class="navbar-form navbar-left">
+			<a class="navbar-brand" href="#">ai Music</a>
+		</div>
+		<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
+			<form id="js-userSubmit" class="navbar-form navbar-right">
 				<label for="query"></label>
 				<div class="form-group">
 					<input id="js-userInput" class="speech-input form-control" type="text" name="" x-webkit-speech placeholder="Artist Name">
 				</div>
 				<button type="submit" class="btn btn-default">Search</button>
-				<button id="mic" type="button" class="btn btn-default">
+				<button id="mic" type="button" class="btn btn-default micBtn">
 					<span class="micFA fa fa-microphone" aria-hidden="true"></span>
 				</button>
 			</form>
-			<div id="moveTo"></div>
-		</div>
-	</div><!-- /.navbar-collapse -->
+		</div><!-- /.navbar-collapse -->
 	</div><!-- /.container-fluid -->
 	</nav>
 	<div class="container-fluid alert alert-info alert-dismissible info" role="alert">
 		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 		<strong>Voice Recognition:</strong>
-		To use voice recognition click the record button. <strong> You must use Chrome Browser and allow mic.</strong>
+		To use voice recognition click the record button. <strong> You must use <a target="_blank" href="https://www.google.com/chrome/index.html" >Google Chrome</a> and allow mic.</strong>
 		<br>
 		<strong>Voice Comands: </strong> "Play (artist)" - "next song" - "last song" - "pause" - "play"
 	</div>
 	<div class="container-fluid">
 		<div class="alert-warning info noSongs hide">No Songs Found</div>
-		<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/926246" width="100%" height="465" scrolling="no" frameborder="no"></iframe>
+		<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/926246" width="100%" height="500" scrolling="no" frameborder="no"></iframe>
 	</div>
 	<script src="js/annyang.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

diff --git a/js/app.js b/js/app.js
@@ -1,6 +1,7 @@
 $(document).ready(init);
 function init(){
     getUserInput();
+    closeNav();
     SC.initialize({
       client_id: soundCloudClientID
     });
@@ -10,17 +11,20 @@ var iframeElement   = document.querySelector('iframe');
 var iframeElementID = iframeElement.id;
 var widget1         = SC.Widget(iframeElement);
 var widget2         = SC.Widget(iframeElementID);
-var state = true;
 // get input from user...
 function getUserInput() {
     $("#js-userSubmit").submit(function(event) {
+        $('.noSongs').addClass('hide');
         event.preventDefault();
         var userInput = $("#js-userInput").val();
         if(userInput.length > 1){
             getSoundCloud(userInput);
+        } else {
+            $('#js-userInput').attr('placeholder', "Please Enter An Artist")
         }
     })
 }
+//------------------------- SoundCloud start ---------------------------------
 function getSoundCloud(userInput){
     SC.get('/users', {
         q: userInput
@@ -38,6 +42,9 @@ function getSoundCloud(userInput){
         }
     });
 }
+//------------------------- SoundCloud end ---------------------------------
+//------------------------- annyang start ---------------------------------
+var state = true;
 function loadSoundCloud(userUrl){
     widget1.load(userUrl, {auto_play: true, limit: 10});
 }
@@ -85,3 +92,19 @@ if (annyang) {
          }
     });
 }
+//------------------------- annyang end ---------------------------------
+//------------------------- closeNav ---------------------------------
+function closeNav(){
+    $(document).click(function (event) {
+        var clickover = $(event.target);
+        var hamburger = $('.navbar-toggle');
+        var navBarwindow = $('.navbar-collapse');
+        var opened = navBarwindow.hasClass('in');
+        var ul = $('.scroll-nav');
+        if (opened === true && !clickover.hasClass("navbar-form") && !clickover.hasClass("in") &&
+            !clickover.hasClass("form-control") && !clickover.hasClass("micFA") && !clickover.hasClass('micBtn')) {
+            $(hamburger).click();
+        }
+    });
+}
+//------------------------- closeNav Ends ---------------------------------
diff --git a/styles/styles.css b/styles/styles.css
@@ -24,9 +24,18 @@ p {
 }
 .info {
 	margin-bottom: 10px;
-	padding: 10px;
-
+	padding: 10px 0px 10px 10px;
 }
 .alert {
 	margin-bottom: 10px;
 }
+.navbar-form {
+	border: none;
+	padding-right: 0;
+}
+@media (max-width: 767px) {
+	.navbar-form {
+		padding-right: 15px;
+
+  	}
+}