Simplified mobile layout (removed images/visualizer)

ohjay · Oct 29, 2015 · e87310a · e87310a
1 parent e045b8c
commit e87310a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 56 deletions.
diff --git a/aight.ttf b/aight.ttf
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,3 @@
-@font-face {
-    font-family: aight;
-    src: local("aight"),
-         local("aight"),
-         url(aight.ttf);
-    font-weight: bold;
-}
-
 @keyframes blink {
     0% { opacity:1; }
     50% { opacity:0; }
@@ -40,14 +32,6 @@ div#mp3_player > canvas {
     float: left; 
 }
 
-h1 {
-    font-family: 'aight';
-    color: #ead06c;
-    font-size: 65px;
-    text-align: center;
-    font-weight: normal;
-}
-
 p, #final-word {
     font-family: 'Roboto Condensed';
     color: #ead06c;

diff --git a/index.html b/index.html
@@ -8,18 +8,20 @@
     <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
 </head>
 <body style="background-color: #000000">
+    <!-- [ BEGIN MAIN BODY ] -->
     <div id="mp3_player">
         <div id="audio_box"></div>
         <canvas id="analyzer_render"></canvas>
     </div>
 
     <!-- Images -->
-    <img id="drake" src = "images/drake-black-background(newest).png" alt="Drake" height="280"/>
-    <img id="cole" src = "images/j-cole-black-background(new).png" alt="Cole" height="340"/>
-    <img id="kanye" src = "images/kanye-black-background.png" alt="Kanye" height="380"/>
-    <img id="kendrick" src = "images/kendrick-black-background(new).png" alt="Kendrick" height="260"/>
+    <img id="drake" src="images/drake-black-background(newest).png" alt="Drake" height="280"/>
+    <img id="cole" src="images/j-cole-black-background(new).png" alt="Cole" height="340"/>
+    <img id="kanye" src="images/kanye-black-background.png" alt="Kanye" height="380"/>
+    <img id="kendrick" src="images/kendrick-black-background(new).png" alt="Kendrick" height="260"/>
 
     <p>
+        <span id="for-mobile"></span>
         <span id="directive">Hey, welcome to the Rap App! To play some sick beats, click START.</span>
         <div id="final-word">[ <i>Say something, please!</i> ]</div>
         <div style="text-align: center">
@@ -32,8 +34,10 @@
     	<button type="button">Start</button>
     </div>
 
+    <!-- [ END MAIN BODY ] -->
     <!-- Scripts -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="js/script.js"></script>
     <script>
         // Song paths
         var freestyleMP3 = 'rap_app_instrumentals/freestyle_rap.mp3',

diff --git a/js/rhyme_lookup.js b/js/rhyme_lookup.js
@@ -40,7 +40,8 @@ var fromTrie = function(pronFields) {
 }
 
 /*
- * Like fromTrie, except an "s" will automatically be appended to the resulting rhyme.
+ * Like fromTrie, but with the additional guarantee 
+ * that an 's' will automatically be appended to the resulting rhyme.
  */
 var pluralFromTrie = function(pronFields) {
     var rhyme = fromTrie(pronFields);
@@ -72,7 +73,7 @@ var lookup = function(word) {
         if (approximation == null && word.slice(-1) === "s") { // plurality case
             approximation = wordTrie.getApproximation(singular.split(''));
             if (approximation == null) {
-                return ["grandmother clock"];
+                return ["grandmother clocks"];
             } else {
                 return pluralFromTrie(mobypron[approximation].split(/\/+/));
             }

diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,18 @@
+/* Just some mobile overrides. */
+if ($(window).width() <= 1000) {
+    $("img").remove();
+    $("#mp3_player").remove();
+    $("#for-mobile").html("<br><br><br><br><br><br><br><br><br><br>");
+    $("p").css({'font-size': '32px'});
+    $("#final-word").css({'font-size': '32px'});
+}
+
+$(window).resize(function() {
+    if ($(window).width() <= 800) {
+        $("img").remove();
+        $("#mp3_player").remove();
+        $("#for-mobile").html("<br><br><br><br><br><br><br><br><br><br>");
+        $("p").css({'font-size': '32px'});
+        $("#final-word").css({'font-size': '32px'});
+    }
+});
diff --git a/web_scraper.py b/web_scraper.py
@@ -2,40 +2,6 @@
 import requests
 import re
 
-# http://stackoverflow.com/questions/24873773/web-scraping-rap-lyrics-on-rap-genius-w-python
-
-# from urllib.parse import urljoin
-# from urllib2 import urlopen
-
-# BASE_URL = "http://www.azlyrics.com"
-
-# def get_song_links(artist_url):
-#     html = urlopen(artist_url).read()
-#     soup = BeautifulSoup(html, "lxml")
-#     songs = soup.find("div", "album")
-#     song_links = [BASE_URL + link.get('href') for link in songs.findAll("a")]
-#     return song_links
-
-# def get_song_lyrics(song_link):
-#   html = urlopen(artist_url).read()
-#     soup = BeautifulSoup(html, "lxml")
-
-# BASE_URL = "http://genius.com"
-
-# def get_song_lyrics(artist):
-#   """Returns all the song lyrics of a certain artist.
-#   """
-#   artist_url = BASE_URL + "/artists/ " + artist + "/"
-#   response = requests.get(artist_url, headers={'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'})
-
-#   soup = BeautifulSoup(response.text, "lxml")
-#   for song_link in soup.select('ul.song_list > li > a'):
-#       link = urljoin(BASE_URL, song_link['href'])
-#       response = requests.get(link)
-#       soup = BeautifulSoup(response.text)
-#       lyrics = soup.find('div', class_='lyrics').text.strip()
-#   return lyrics
-
 BASE_URL = "http://www.lyrics.com"
 
 lyrics = {}