Add about and title change

Travis Lawrence · Travis Lawrence · commit e28d4f7c2965 · 2018-05-01T13:28:33.000-07:00
diff --git a/client/options.html b/client/options.html
@@ -5,7 +5,7 @@
 
     <body>
         <div class='apod-options'>
-            <h3>APOD By The Trav Options</h3>
+            <h3>Options</h3>
             <form id='apod-options'>
 
                 <div class='option'>
@@ -37,6 +37,15 @@ <h3>APOD By The Trav Options</h3>
                     </div>
                 </div>
             </form>
+            <div class='about-apod'>
+                <p>APOD By The Trav</p>
+                <ul>
+                    <li><a target='_blank' href='https://www.redundantrobot.com'>RedundantRobot</a></li>
+                    <li><a target='_blank' href='https://www.github.com/travisl12'>Github</a></li>
+                    <li><a target='_blank' href='https://www.twitter.com/travisl12'>Twitter</a></li>
+                    <li><a target='_blank' href='https://codepen.io/TravisL12'>CodePen</a></li>
+                </ul>
+            </div>
         </div>
     </body>
 </html>
diff --git a/client/scripts/components/Apod.js b/client/scripts/components/Apod.js
@@ -312,6 +312,7 @@ class Apod {
     }
 
     constructApod() {
+        document.title = `${this.response.title} - (${this.history.currentIdx + 1})`;
         apodTitle.textContent = this.response.title;
         apodDate.textContent = DateManager.prettyDateFormat(this.response.date);
         this.wouldYouLikeToKnowMore(`${this.response.title} ${this.response.explanation}`);
diff --git a/client/styles/_variables.scss b/client/styles/_variables.scss
@@ -65,5 +65,19 @@ $highlight-blue: lightblue;
     transform-origin: bottom;
 }
 
+h1 {
+    font-size: 24px;
+}
+
+h2 {
+    font-size: 18px;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+}
+
 @import 'apod_loading_sun';
 @import 'apod_loading_moon';
diff --git a/client/styles/options.scss b/client/styles/options.scss
@@ -17,7 +17,30 @@ body {
         font-size: 14px;
         margin-top: 0;
     }
+    .about-apod {
+        padding: 10px;
+        width: 100%;
+        box-sizing: border-box;
+        background-color: lightgray;
+        p {
+            font-weight: bold;
+            margin-top: 0;
+            text-align: center;
+        }
+
+        ul {
+            display: flex;
+            justify-content: space-between;
+        }
 
+        a {
+            color: $gray;
+            text-decoration: none;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
     #apod-options {
 
         .option {
diff --git a/client/styles/style.scss b/client/styles/style.scss
@@ -19,14 +19,6 @@
     background-repeat: no-repeat;
 }
 
-h1 {
-    font-size: 24px;
-}
-
-h2 {
-    font-size: 18px;
-}
-
 body {
     background: black;
     margin: 0;
@@ -35,12 +27,6 @@ body {
     height: 100%;
 }
 
-ul, li {
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-}
-
 .bg-contain {
     background-size: contain;
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-// const Uglify = require('uglifyjs-webpack-plugin');
+const Uglify = require('uglifyjs-webpack-plugin');
 
 const IndexHtmlWebpackPluginConfig = new HtmlWebpackPlugin({
   template: './client/apod-by-trav.html',
@@ -72,7 +72,7 @@ module.exports = {
     ],
   },
   plugins: [
-    // new Uglify(),
+    new Uglify(),
     IndexHtmlWebpackPluginConfig,
     OptionsHtmlWebpackPluginConfig,
     CopyWebpackPluginConfig,

Original file line number	Diff line number	Diff line change
`@@ -312,6 +312,7 @@ class Apod {`
`312`	`312`	`}`
`313`	`313`
`314`	`314`	`constructApod() {`
	`315`	+ document.title = `${this.response.title} - (${this.history.currentIdx + 1})`;
`315`	`316`	`apodTitle.textContent = this.response.title;`
`316`	`317`	`apodDate.textContent = DateManager.prettyDateFormat(this.response.date);`
`317`	`318`	this.wouldYouLikeToKnowMore(`${this.response.title} ${this.response.explanation}`);