WIP responsive design

keitharm · keitharm · commit bb41ec9b20a3 · 2016-07-21T17:43:44.000-05:00
diff --git a/public/css/custom.css b/public/css/custom.css
@@ -30,12 +30,6 @@ html {
   padding-right: 8px;
 }
 
-@media screen and (max-width: 760px) {
-  #navbar {
-    display: none;
-  }
-}
-
 .nav ul .selected {
   font-weight: bold;
   color: #0CB863;
@@ -134,7 +128,6 @@ section.login .flash {
 
 section.register {
   margin: auto;
-  width: 600px;
   text-align: center;
 }
 section.register .title {
@@ -345,8 +338,9 @@ section.triplesec {
 }
 
 .recaptcha {
-  width: 50%;
-  margin: 0 auto 15px auto;
+  margin: auto;
+  display: table;
+  margin-bottom: 10px;
 }
 
 /* https://codepen.io/rdallaire/pen/apoyx */
@@ -410,3 +404,105 @@ input:read-only {
   background-color: #d1d1d1;
   color: #414141;
 }
+
+@media screen and (max-width: 900px) {
+  #navbar {
+    display: none;
+  }
+
+  section.triplesec {
+    width: 100%;
+    height: auto;
+    background-color: #F4F4F4;
+    clear: both;
+  }
+
+  section.triplesec div {
+    margin-bottom: 50px;
+  }
+
+  section.triplesec div p {
+    text-align: center;
+  }
+
+  .tripleTitle {
+    text-align: center;
+  }
+
+  .tripleInfo {
+    font-size: 14pt;
+  }
+
+  section.hero {
+    margin: auto;
+  }
+
+  section.hero #subtitle {
+    margin: auto;
+    width: 100%;
+    font-size: 16pt;
+  }
+
+  .navLogo {
+
+  }
+
+  .freeLogo h3 {
+    margin-top: 15px;
+    margin-left: 15px;
+    font-size: 3.6rem;
+    margin-bottom: 0rem;
+  }
+
+  h3 {
+    font-size: 2.5rem;
+  }
+
+  #subtitle {
+    font-size: 12pt !important;
+  }
+
+  .main {
+    padding: 5px;
+  }
+
+  .ads {
+    display: none;
+  }
+
+  #subnav {
+    display: none;
+  }
+
+  section.tryitout {
+    width: 90% !important;
+  }
+
+  section.tryitout h4 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem !important;
+  }
+
+  #aceEditor {
+    width: 100% !important;
+  }
+
+  #lintButton {
+    display: none;
+  }
+
+  #preview {
+    margin-top: -15px !important;
+    margin-left: 0px !important;
+    margin-bottom: 15px !important;
+    float: left !important;
+    width: 100% !important;
+  }
+
+  #results {
+    padding: 0px !important;
+  }
+
+}
+
+.invisible { display: none; }
diff --git a/public/css/demoEditor.css b/public/css/demoEditor.css
@@ -1,8 +1,9 @@
 #preview {
-  margin-top: -29px;
+  margin-top: -40px;
+  margin-left: 25px;
   position: relative;
   float: right;
-  width: 35%;
+  width: 45%;
   height: 250px;
 }
 
@@ -12,12 +13,16 @@
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  height: 175px;
+  height: 250px;
+  border: solid #CECECE 1px !important;
+  margin-top: 0px;
+  width: 100%;
+  padding: 5px;
 }
 
 #aceEditor {
   float: left;
-  width: 60%;
+  width: 50%;
   margin-top: 5px;
   height: 250px;
 }
diff --git a/public/css/editor.css b/public/css/editor.css
@@ -4,6 +4,7 @@
   float: right;
   width: 35%;
   height: 500px;
+  border: solid #CECECE 1px !important;
 }
 
 #results {
diff --git a/src/js/style.js b/src/js/style.js
@@ -0,0 +1,14 @@
+$(() => {
+  $(window).resize(checkSize);
+  checkSize();
+
+  function checkSize() {
+    if (document.body.clientWidth <= 900) {
+      $('.tripleSection').removeClass("column");
+      $('.freeLogo').removeClass("invisible");
+    } else {
+      $('.tripleSection').addClass("column");
+      $('.freeLogo').addClass("invisible");
+    }
+  }
+});
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -37,17 +37,17 @@ function phoneNum(format) {
   </div>
   <section class="triplesec">
     <div class="main">
-      <div class="one-third column">
+      <div class="one-third column tripleSection">
         <h4 class="tripleTitle">Simple</h4>
-        <p class="tripleInfo">If you know Javascript, you know how to code APIs. APIs are written in Vanilla Javascript. No learning a new language and its fancy syntax required!</p>
+        <p class="tripleInfo">If you know Javascript, you know how to code APIs. APIs are written in <a class='green' href="http://vanilla-js.com/" target="_blank">Vanilla Javascript</a>. No learning a new language and its fancy syntax required! Check out the <a class='green' href="documentation" target="_blank">documentation</a> to learn how to start making your own APIs!</p>
       </div>
-      <div class="one-third column">
+      <div class="one-third column tripleSection">
         <h4 class="tripleTitle">Powerful</h4>
-        <p class="tripleInfo">You have complete control over the output of your API. Whether you want </p>
+        <p class="tripleInfo">You have complete control over the output of your API. Whether your API has complicated conditions or takes advantage of a published snippet,  </p>
       </div>
-      <div class="one-third column">
-        <h4 class="tripleTitle">Secure</h4>
-        <p class="tripleInfo">Only your account has access to the Lists and APIs that you have created. We also have features such as public links for APIs to prevent your API key and references from being leaked by accident.</p>
+      <div class="one-third column tripleSection">
+        <h4 class="tripleTitle">Social</h4>
+        <p class="tripleInfo">Did you create an awesome piece of code that you think would be helpful for others to use in their APIs? We have snippets! Think of it like NPM modules for APIs.</p>
       </div>
     </div>
   </section>
diff --git a/views/pages/pricing.ejs b/views/pages/pricing.ejs
@@ -76,11 +76,11 @@
       <% include ../snippets/ads %>
     </div>
     <div class="disclaimers">
-      <p><br><b><span style="color: orange">Beta users</span></b>: These are the current prices and perks. If you purchase a subscription during the beta period, it'll carry over when RandomAPI releases with the same monthly charge. Beta prices will most likely increase and perk values will <b>definitely</b> increase in the final version.</p>
+      <p><br><b><span style="color: orange">Beta users</span></b>: These are the current prices and perks. If you purchase a subscription during the beta period, it'll carry over with the <b>same monthly charge</b> when RandomAPI. Beta prices will most likely increase and perk values will <b>definitely</b> increase in the final version.</p>
       <hr>
       Here be techno jargon<br>
       <sup>1</sup>: <span id='disclaimer'>API requests are queued into the generator with the least number of tasks. If there are many users of a tier currently using a generator, it may take a longer time for your results to be generated. Example: 100 tasks spread out over 5 generators gives each generator a load of 20 tasks while 100 tasks all in 1 generator would be significantly slower to receive results for since only 1 generator is doing all of the work. <b>tl;dr</b>: bigger numbers are better.</span><br><br>
-      <sup>2</sup>: <span id='disclaimer'>If your API uses lists, their contents are cached in memory in order to speed up access times. 60/120/5 means lists have 60 seconds TTL in local cache, 120 seconds TTL in redis cache, and the Generator has 5 MB of local cache. When you make your intial API request, it has to read in all of the list data into memory from disk. This is a timely process, so caching solves this problem by making your list data available in memory until the list hasn't been accessed for X seconds. At that point, your list will be removed from the local cache and any request after that will either have to check the redis cache, or worst case, reread the data from disk again. <b>tl;dr</b>: bigger numbers are better.</span>
+      <sup>2</sup>: <span id='disclaimer'>If your API uses Lists/Snippets, their contents are cached in memory in order to speed up access times. 60/120/5 means 60 seconds TTL in local cache, 120 seconds TTL in redis cache, and the Generator has 5 MB of local cache. When you make your intial API request, it has to read in all of the List/Snippet data into memory from disk. This is a timely process, so caching solves this problem by making your list data available in memory until the list hasn't been accessed for X seconds. At that point, your list/snippet will be removed from the local cache and any request after that will either have to check the redis cache, or worst case, reread the data from disk again. <b>tl;dr</b>: bigger numbers are better.</span>
     </div>
   </div>
   <% include ../snippets/footer %>
diff --git a/views/pages/upgrade.ejs b/views/pages/upgrade.ejs
@@ -102,11 +102,11 @@
       <% include ../snippets/ads %>
     </div>
     <div class="disclaimers">
-      <p><br><b><span style="color: orange">Beta users</span></b>: These are the current prices and perks. If you purchase a subscription during the beta period, it'll carry over when RandomAPI releases with the same monthly charge. Beta prices will most likely increase and perk values will <b>definitely</b> increase in the final version.</p>
+      <p><br><b><span style="color: orange">Beta users</span></b>: These are the current prices and perks. If you purchase a subscription during the beta period, it'll carry over with the <b>same monthly charge</b> when RandomAPI. Beta prices will most likely increase and perk values will <b>definitely</b> increase in the final version.</p>
       <hr>
       Here be techno jargon<br>
       <sup>1</sup>: <span id='disclaimer'>API requests are queued into the generator with the least number of tasks. If there are many users of a tier currently using a generator, it may take a longer time for your results to be generated. Example: 100 tasks spread out over 5 generators gives each generator a load of 20 tasks while 100 tasks all in 1 generator would be significantly slower to receive results for since only 1 generator is doing all of the work. <b>tl;dr</b>: bigger numbers are better.</span><br><br>
-      <sup>2</sup>: <span id='disclaimer'>If your API uses lists, their contents are cached in memory in order to speed up access times. 60/120/5 means lists have 60 seconds TTL in local cache, 120 seconds TTL in redis cache, and the Generator has 5 MB of local cache. When you make your intial API request, it has to read in all of the list data into memory from disk. This is a timely process, so caching solves this problem by making your list data available in memory until the list hasn't been accessed for X seconds. At that point, your list will be removed from the local cache and any request after that will either have to check the redis cache, or worst case, reread the data from disk again. <b>tl;dr</b>: bigger numbers are better.</span>
+      <sup>2</sup>: <span id='disclaimer'>If your API uses Lists/Snippets, their contents are cached in memory in order to speed up access times. 60/120/5 means 60 seconds TTL in local cache, 120 seconds TTL in redis cache, and the Generator has 5 MB of local cache. When you make your intial API request, it has to read in all of the List/Snippet data into memory from disk. This is a timely process, so caching solves this problem by making your list data available in memory until the list hasn't been accessed for X seconds. At that point, your list/snippet will be removed from the local cache and any request after that will either have to check the redis cache, or worst case, reread the data from disk again. <b>tl;dr</b>: bigger numbers are better.</span>
     </div>
   </div>
   <% include ../snippets/footer %>
diff --git a/views/snippets/header.ejs b/views/snippets/header.ejs
@@ -19,4 +19,5 @@
 <script src="js/jquery.js"></script>
 <script src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
 <script src="js/general.js"></script>
+<script src="js/style.js"></script>
 <message hidden><%=messages%></message>
diff --git a/views/snippets/navbar.ejs b/views/snippets/navbar.ejs
@@ -13,6 +13,9 @@ switch(path) {
   case '/pricing':
     selected['pricing'] = style;
     break;
+  case '/search':
+    selected['search'] = style;
+    break;
   case '/documentation':
     selected['documentation'] = style;
     break;
@@ -28,16 +31,22 @@ switch(path) {
     selected['home'] = style;
 }
 
+if (selected['search'] && session.loggedin) {
+  delete selected['search'];
+  selected['home'] = style;
+}
+
 let upgrade;
 if (session.user !== undefined && session.user.tierName === 'Free') {
   upgrade = "upgrade";
 } else {
   upgrade = "settings/subscription";
 }
 %>
+<a href="" class="freeLogo invisible"><h3>RandomAPI</h3></a>
 
 <div id="navbar" class="scroll">
-  <a href=""><h3>RandomAPI</h3></a>
+  <a href="" class="navLogo"><h3>RandomAPI</h3></a>
   <div class="nav">
     <ul>
       <% if (session.loggedin === true) { %>
@@ -48,6 +57,7 @@ if (session.user !== undefined && session.user.tierName === 'Free') {
         <a href="logout"><li>Logout</li></a>
       <% } else { %>
         <a href=""><li <%- selected['home'] %>>Home</li></a>
+        <a href="search"><li <%- selected['search'] %>>Search</li></a>
         <a href="pricing"><li <%- selected['pricing'] %>>Pricing</li></a>
         <a href="documentation"><li <%- selected['documentation'] %>>Documentation</li></a>
         <a href="login"><li <%- selected['login'] %>>Login</li></a>

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`float: right;`
`5`	`5`	`width: 35%;`
`6`	`6`	`height: 500px;`
	`7`	`+ border: solid #CECECE 1px !important;`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`#results {`