Merge pull request #63 from adipai/ui-branch

UI improvements and fixes
adipai · Oct 19, 2023 · 415b511 · 415b511
2 parents eb492e8 + 75020ea
commit 415b511
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git a/src/recommenderapp/static/Popcorn-icon.png b/src/recommenderapp/static/Popcorn-icon.png
diff --git a/src/recommenderapp/static/script.js b/src/recommenderapp/static/script.js
@@ -231,6 +231,8 @@ $(document).ready(function () {
         setTimeout(function () {
           $("#emailSentSuccess").fadeOut("slow");
         }, 2000);
+        $('#area1').attr('placeholder', 'Email'); 
+        $('#emailField').val('');
       },
       error: function (error) {
         $("#loaderSuccess").attr("class", "d-none");

diff --git a/src/recommenderapp/static/stylesheet.css b/src/recommenderapp/static/stylesheet.css
@@ -6,6 +6,12 @@
 
 .table {
   color: white !important;
+  width: 60% !important;
+  margin-bottom: 0rem !important;
+}
+
+.tipHeader {
+  text-align: center;
 }
 
 .highlighted-section {
@@ -28,7 +34,7 @@ body {
 
 :root {
   --borderSize: 0.5vw;
-  --baseSize: 5rem;
+  --baseSize: 2rem;
   --icon: "🙂";
 }
 * {

diff --git a/src/recommenderapp/templates/landing_page.html b/src/recommenderapp/templates/landing_page.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}">
-    <title>PopcornPicks🍿</title>
+    <title>PopcornPicks</title>
+    <link rel="icon" href="{{ url_for('static', filename='Popcorn-icon.png') }}" />
     <script src="{{ url_for('static', filename='script.js') }}"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/src/recommenderapp/templates/search_page.html b/src/recommenderapp/templates/search_page.html
@@ -3,7 +3,8 @@
   <head>
     <!-- Include stylesheets and scripts -->
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}">
-    <title>PopcornPicks🍿</title>
+    <title>PopcornPicks</title>
+    <link rel="icon" href="{{ url_for('static', filename='Popcorn-icon.png') }}" />
     <script src="{{ url_for('static', filename='script.js') }}"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width device-width, initial-scale=1" />
@@ -25,22 +26,25 @@
       <div class="heading1">
         <!-- Heading for picking a movie -->
         <h2><center>🎬 Pick a Movie! 🎬</center></h2>
+        <h6 class="tipHeader">✨Tip: Select Upto 5 movies to get a tailored watchlist✨</h6>
       </div>
 
 
       <div class="row" style="margin-top: 25px;">
         <div class="col-md-6">
           <!-- Left Column (Selected Movie(s) and Search) -->
           <div class="row">
-            <div class="col-md-10">
-              <!-- Selected Movie(s) section -->
-              <h2>Selected Movie(s):</h2>
-              <input class="form-control mr-sm-2" type="search" placeholder="Search for a Movie" aria-label="Search" id="searchBox" />
-              <ul class="list-group" id="selectedMovies"></ul>
-            </div>
-            <div class="col-md-2">
-              <!-- Predict button -->
-              <input type="button" class="btn btn-primary" name="predict" id="predict" value="Predict" style="margin-top: 47.5px;" />
+            <h3>Selected Movie(s):</h3>
+            <div class="d-flex justify-content-between">
+              <div class="col-md-9">
+                <!-- Selected Movie(s) section -->
+                <input class="form-control mr-sm-2" type="search" placeholder="Search for a Movie" aria-label="Search" id="searchBox" />
+                <ul class="list-group" id="selectedMovies"></ul>
+              </div>
+              <div class="col-md-2">
+                <!-- Predict button -->
+                <input type="button" class="btn btn-primary" name="predict" id="predict" value="Predict" />
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/recommenderapp/templates/success.html b/src/recommenderapp/templates/success.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>What movies do you like?</title>
+    <title>PopcornPicks</title>
+    <link rel="icon" href="{{ url_for('static', filename='Popcorn-icon.png') }}" />
     <link
       rel="stylesheet"
       type="text/css"