From 497772940986eb7a601649501111541166f9584c Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Mon, 23 May 2016 08:16:14 -0400
Subject: [PATCH] Make watch page full width (override 800px page width)

---
 js/app.js           | 24 +++++++-----------------
 js/page/help.js     |  2 +-
 js/page/home.js     |  2 +-
 js/page/my_files.js |  2 +-
 js/page/report.js   |  2 +-
 js/page/settings.js |  2 +-
 js/page/start.js    |  2 +-
 js/page/watch.js    |  4 ++--
 scss/_gui.scss      | 10 ++++++++++
 9 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/js/app.js b/js/app.js
index aeb0fbbca..99d89f991 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,8 +1,3 @@
-var appStyles = {
-  width: '800px',
-  marginLeft: 'auto',
-  marginRight: 'auto',
-};
 var App = React.createClass({
   getInitialState: function() {
     // For now, routes are in format ?page or ?page=args
@@ -46,24 +41,19 @@ var App = React.createClass({
   },
   render: function() {
     if (this.state.viewingPage == 'home') {
-      var content = <HomePage />;
+      return <HomePage />;
     } else if (this.state.viewingPage == 'settings') {
-      var content = <SettingsPage />;
+      return <SettingsPage />;
     } else if (this.state.viewingPage == 'help') {
-      var content = <HelpPage />;
+      return <HelpPage />;
     } else if (this.state.viewingPage == 'watch') {
-      var content = <WatchPage name={this.state.pageArgs}/>;
+      return <WatchPage name={this.state.pageArgs}/>;
     } else if (this.state.viewingPage == 'report') {
-      var content = <ReportPage />;
+      return <ReportPage />;
     } else if (this.state.viewingPage == 'files') {
-      var content = <MyFilesPage />;
+      return <MyFilesPage />;
     } else if (this.state.viewingPage == 'start') {
-      var content = <StartPage />;
+      return <StartPage />;
     }
-    return (
-      <div style={appStyles}>
-        {content}
-      </div>
-    );
   }
 });
\ No newline at end of file
diff --git a/js/page/help.js b/js/page/help.js
index c6268a7f7..b6b9d4af0 100644
--- a/js/page/help.js
+++ b/js/page/help.js
@@ -3,7 +3,7 @@
 var HelpPage = React.createClass({
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>Troubleshooting</h1>
         <p>Here are the most commonly encountered problems and what to try doing about them</p>
 
diff --git a/js/page/home.js b/js/page/home.js
index ab965f690..73b05b7a5 100644
--- a/js/page/home.js
+++ b/js/page/home.js
@@ -281,7 +281,7 @@ var HomePage = React.createClass({
   },
   render: function() {
     return (
-      <div>
+      <div className="page">
         <Header />
         <Discover />
       </div>
diff --git a/js/page/my_files.js b/js/page/my_files.js
index 9deb17d83..291482055 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -125,7 +125,7 @@ var MyFilesPage = React.createClass({
       }
     }
     return (
-      <main>
+      <main className="page">
       <h1>My files</h1>
       {content}
       <section>
diff --git a/js/page/report.js b/js/page/report.js
index ddfb999c4..087783fee 100644
--- a/js/page/report.js
+++ b/js/page/report.js
@@ -20,7 +20,7 @@ var ReportPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>Report a bug</h1>
         <section>
         <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
diff --git a/js/page/settings.js b/js/page/settings.js
index 958bcd312..34f0db780 100644
--- a/js/page/settings.js
+++ b/js/page/settings.js
@@ -73,7 +73,7 @@ var SettingsPage = React.createClass({
     }
 
     return (
-      <main>
+      <main className="page">
         <h1>Settings</h1>
         <section>
           <h4>Run on startup</h4>
diff --git a/js/page/start.js b/js/page/start.js
index 1c5b1d0b6..8ae856ac8 100644
--- a/js/page/start.js
+++ b/js/page/start.js
@@ -4,7 +4,7 @@ var StartPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>LBRY has closed</h1>
         <Link href="lbry://lbry" label="Click here to start LBRY" />
       </main>
diff --git a/js/page/watch.js b/js/page/watch.js
index 35af645af..c0af88688 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -1,6 +1,6 @@
 var videoStyle = {
   width: '100%',
-  height: '100%',
+//  height: '100%',
   backgroundColor: '#000'
 };
 
@@ -39,7 +39,7 @@ var WatchPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page full-width">
       <div className={this.state.readyToPlay ? 'hidden' : ''}>
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...
diff --git a/scss/_gui.scss b/scss/_gui.scss
index ad9b29eea..33c16aaea 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -13,6 +13,16 @@ body
     position: relative;
 }
 
+.page {
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
+
+  &.full-width {
+    width: 100%;
+  }
+}
+
 section
 {
   margin-bottom: $spacing-vertical;