minor changes to modal

app/app.css

@@ -524,12 +524,14 @@ footer a:hover{
 .song-img {
   width: 210px;
   margin-left: 35px;
+  margin-bottom: 10px;
+  float: left;
 }
 #seeker-container {
-    width: calc(100% - 70px);
-    margin-left: 35px;
-    margin-right: 35px;
-    overflow: hidden;
+  width: calc(100% - 70px);
+  margin-left: 20px;
+  margin-right: 35px;
+  overflow: hidden;
 }
 .pl-container{
   color: #53e3a6;
@@ -604,6 +606,13 @@ footer a:hover{
 #s3 {
   opacity: 0.33333333333333;
 }
+.song-item{
+  float: left;
+}
+#add-song-button{
+  display: block;
+  margin: 0 auto;
+}
 @media (max-width: 992px) {
   /* some think */
   #s3 {
@@ -617,4 +626,4 @@ footer a:hover{
     visibility: hidden;
     height: 0;
   }
-}
+}

app/app.js

@@ -169,6 +169,8 @@ if (Meteor.isClient) {
                     }
                     console.log(ytArr);
                     $("#song-results p").click(function(){
+                        $("#search-info").hide();
+                        $("#add-info").show();
                         var title = $(this).text();
                         for(var i in ytArr){
                             if(ytArr[i].title === title){
@@ -230,6 +232,10 @@ if (Meteor.isClient) {
         },
         "click #add-songs": function(){
           $("#add-songs-modal").show();
+        },
+        "click #close-modal": function(){
+          $("#search-info").show();
+          $("#add-info").hide();
         }
     });
 
@@ -772,4 +778,4 @@ Router.route("/admin", {
 
 Router.route("/:type", {
     template: "room"
-});
+});

app/templates/room.html

@@ -3,20 +3,20 @@
         {{#if loaded}}
             <h1 class="room-name">{{{type}}}</h1>
             <div class="row">
-                <div class="col-md-4 col-sm-6 col-xs-12" id="s1">
+                <div class="song-item" id="s1">
                     <img class="song-img" id="song-img"/>
                     <h2 class="room-title">{{{title}}}</h2>
                     <h2 class="room-artist">{{{artist}}}</h2>
                 </div>
-                <div class="col-md-4 col-sm-6 col-xs-12" id="s2">
+                <div class="song-item" id="s2">
                     <img class="song-img" id="song-img-next"/>
-                    <h2 class="room-title">{{{title_next}}}</h2>
-                    <h2 class="room-artist">{{{artist_next}}}</h2>
+                    <!-- <h2 class="room-title">{{{title_next}}}</h2> -->
+                    <!-- <h2 class="room-artist">{{{artist_next}}}</h2> -->
                 </div>
-                <div class="col-md-4 col-sm-6 col-xs-12" id="s3">
+                <div class="song-item" id="s3">
                     <img class="song-img" id="song-img-after"/>
-                    <h2 class="room-title">{{{title_after}}}</h2>
-                    <h2 class="room-artist">{{{artist_after}}}</h2>
+                    <!-- <h2 class="room-title">{{{title_after}}}</h2> -->
+                    <!-- <h2 class="room-artist">{{{artist_after}}}</h2> -->
                 </div>
             </div>
             <div id="seeker-container">
@@ -37,6 +37,12 @@
                     <h4 class="modal-title">Search for a song</h4>
                   </div>
                   <div class="modal-body">
+                    <div id="search-info">
+                      <input type="text" id="song-input" class="song-input">
+                      <button type="button" id="search-song" class="button">Search</button>
+                      <div id="song-results"></div>
+                    </div>
+                    <div id="add-info" style="display:none">
                       <label for="type" class="song-input-label">Song Type</label>
                       <select name="type" id="type" class="song-input-select">
                           <option name="youtube" id="youtube">YouTube</option>
@@ -49,14 +55,11 @@
                       <label for="title" class="song-input-label">Song Title</label>
                       <input class="song-input" name="title" id="title" type="text" />
                       <button type="button" id="add-song-button" class="button">Add Song</button>
-                      <hr />
+                    </div>
                       <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->
-                      <input type="text" id="song-input" class="song-input">
-                      <button type="button" id="search-song" class="button">Search</button>
-                      <div id="song-results"></div>
                   </div>
                   <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   </div>
                 </div>