Templates improvements

Author: Tania Allard

session5/CFG_app/templates/header.html

@@ -26,7 +26,6 @@
 	text-align: center;
 	width: 100%;
 	margin: auto;
-	padding: 20px;
 }
 
 

session5/CFG_app/templates/index.html

@@ -8,7 +8,7 @@
 						<h4> What API do you want to query today?</h4>
 					</div>
 
-					<div class="card-content">
+					<div class="card-content icons">
 						<ul class="nav nav-pills" role="tablist">
 							<li>
 								<a href="{{ url_for('twitter_handler') }}">

session5/CFG_app/templates/partials/albums.html

@@ -5,7 +5,7 @@
   <div class="col-md-4 col-sm-4">
     <div class="card card-profile">
       <div class="card-image">
-         <a href="{{album.uri"}}
+         <a href="{{album.uri}}">
              <img class="img" src="{{album.images[0].url}}" alt="{{artist.name}}" />
           </a>
       </div>
@@ -15,7 +15,8 @@
 
       <div class="card-content text-center">
           <p class="'card-category"> {{album.artists | join(',')}} </p>
-          <p class="card-description"> {{ album.genres | join(', ')}} </p>
+          <p class="card-description">Genre: {{ album.genres | join(', ')}} |
+          Type: {{album.album_type}}</p>
            <a href="{{album.uri}}"> Check in Spotify </a>
       </div>
     </div>
@@ -27,15 +28,12 @@
       <div class='card-body content-info'>
         <h5>{{artist.name}}</h5>
           <p class="'card-category"> {{album.artists | join(',')}} </p>
-          <p class="card-description">{{ artist.genres | join(', ')}}</p>
+          <p class="card-description">Genre: {{ album.genres | join(', ')}} |
+          Type: {{album.album_type}}</p>
           <a href="{{album.uri}}"> Check in Spotify </a>
       </div>
     </div>
   </div>
   {% endif %}
   {% endfor %}
 </div>
-
-
-
-

session5/CFG_app/templates/partials/playlists.html

@@ -0,0 +1,38 @@
+<div class="row">
+  {% for list in data %}
+  <!--If the search returned an image for the list-->
+  {% if list.images %}
+  <div class="col-md-4 col-sm-4">
+    <div class="card card-profile">
+      <div class="card-image">
+         <a href="{{list.uri}}">
+             <img class="img" src="{{list.images[0].url}}" alt="{{list.name}}" />
+          </a>
+      </div>
+      <div class="card-title text-center text-primary">
+        {{list.name}}
+      </div>
+
+      <div class="card-content text-center">
+          <p class="card-description">Public: {{ list.public }} |
+          Owner: {list.owner.name}}</p>
+           <a href="{{list.uri}}"> Check in Spotify </a>
+      </div>
+    </div>
+  </div>
+  {% else %}
+  <!--If no images were returned for the list-->
+  <div class="col-sm-4">
+    <div class="card">
+      <div class='card-body content-info'>
+        <h5>{{list.name}}</h5>
+          <p class="'card-category"> {{list.lists | join(',')}} </p>
+          <p class="card-description">Genre: {{ list.genres | join(', ')}} |
+          Type: {{list.list_type}}</p>
+          <a href="{{list.uri}}"> Check in Spotify </a>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+  {% endfor %}
+</div>

session5/CFG_app/templates/partials/search_albums.html

@@ -9,7 +9,7 @@
   </div>
     {% endif %}
     <div class="card-block">
-      <h4 class="title text-danger">{{ album.name }} </h4>
+      <h4 class="title text-primary">{{ album.name }} </h4>
       <p class="card-text">{{ album.artists | join(', ')}}</p>
     </div>
   </div>

session5/CFG_app/templates/partials/search_artist.html

@@ -10,7 +10,7 @@
   </div>
     {% endif %}
     <div class="card-block">
-      <h4 class="title text-danger">{{ artist.name }} </h4>
+      <h4 class="title text-primary">{{ artist.name }} </h4>
       <p class="card-text">{{ artist.genres | join(', ')}}</p>
     </div>
   </div>

session5/CFG_app/templates/spotify.html

@@ -1,7 +1,7 @@
 {% include "header.html" %}
 <div class="wrapper">
 
-<div class="container">
+<div class="container" style="top: 100px; position:relative;">
 	<div class="row">
 		<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
 			<div class="card card-signup">

session5/CFG_app/templates/spotify_show.html

@@ -14,10 +14,10 @@ <h1 class="text-center">Results from search: {{query}}</h1>
     {% elif search_type == ["album"] %}
     {% include 'partials/search_albums.html' %}
 
-    {% elif search_type == "playlist" %}
+    {% elif search_type == ["playlist"] %}
     {% include 'partials/search_play.html' %}
 
-    {% elif search_type == "track" %}
+    {% elif search_type == ["track"] %}
     {% include 'partials/search_track.html' %}
 
     {% endif %}

session5/CFG_app/templates/tweets_show.html

@@ -14,7 +14,8 @@
         <div class="card card-signup">
 
           <div class="header header-primary text-center">
-            <h4> Results from search: {{search_string}}</h4>
+            <h4> Results from search:
+              <p class='text-primary'>{{search_string}}</p></h4>
           </div>
 
           <!-- START TABLE -->
@@ -30,7 +31,7 @@ <h4> Results from search: {{search_string}}</h4>
               displaying specific content of each tweet -->
                 {% for tweet in tweets %}
                 <tr>
-                  <td>  {{ tweet.user.name }}</td>
+                  <td> {{ tweet.user.name }}</td>
                   <td> @{{ tweet.user.screen_name }} </td>
                   <td> {{ tweet.text }} </td>
                 </tr>