From 723d9863bfe426044afd71e3dc6b4f2d40b4c80f Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Mon, 31 Jan 2022 09:32:06 -0700
Subject: [PATCH] Using PageContainer to handle responsive margin for mobile. 
 All pages have more padding on desktop than on mobile.

---
 app/src/App.js                    |  10 +--
 app/src/components/Admin.js       |   6 +-
 app/src/components/Apps.js        |   9 +--
 app/src/components/Archive.js     |   5 +-
 app/src/components/Common.js      |  19 ++++-
 app/src/components/Files.js       |   6 +-
 app/src/components/Inventory.js   |   6 +-
 app/src/components/VideoPlayer.js | 127 ++++++++++++++++--------------
 app/src/components/Videos.js      |   6 +-
 9 files changed, 110 insertions(+), 84 deletions(-)

diff --git a/app/src/App.js b/app/src/App.js
index 57df089c..9c58d903 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -12,7 +12,7 @@ import {AppsRoute} from "./components/Apps";
 import {InventoryRoute} from "./components/Inventory";
 import {ArchiveRoute, ArchivesList} from "./components/Archive";
 import {Saver} from "./components/Upload";
-import {MoreButton, SearchInput} from "./components/Common";
+import {MoreButton, PageContainer, SearchInput} from "./components/Common";
 import {FilesRoute} from "./components/Files";
 import {useSearch, useVersion} from "./hooks/customHooks";
 
@@ -49,10 +49,10 @@ function Welcome() {
     }
 
     return (
-        <Container fluid>
+        <PageContainer>
             <SearchInput initValue={searchStr} onSubmit={setSearchStr} size='big' placeholder='Search Everywhere...'/>
             {body}
-        </Container>
+        </PageContainer>
     )
 }
 
@@ -78,7 +78,7 @@ export default function App() {
             <header>
                 <NavBar/>
             </header>
-            <Container fluid style={{marginTop: '1em', padding: '1em'}}>
+            <>
                 <Switch>
                     <Route path='/videos/video/:video_id' exact component={VideoWrapper}/>
                     <Route path='/videos/channel/:channel_link/video/:video_id' exact component={VideoWrapper}/>
@@ -91,7 +91,7 @@ export default function App() {
                     <Route path='/files' component={FilesRoute}/>
                     <Route component={PageNotFound}/>
                 </Switch>
-            </Container>
+            </>
             <SemanticToastContainer position="top-right"/>
             <Footer/>
         </>
diff --git a/app/src/components/Admin.js b/app/src/components/Admin.js
index 04fe60dd..d1bf3371 100644
--- a/app/src/components/Admin.js
+++ b/app/src/components/Admin.js
@@ -23,7 +23,7 @@ import {
     startDownloads
 } from "../api";
 import TimezoneSelect from 'react-timezone-select';
-import {secondsToDate, secondsToFrequency, TabLinks, textEllipsis, WROLModeMessage} from "./Common";
+import {PageContainer, secondsToDate, secondsToFrequency, TabLinks, textEllipsis, WROLModeMessage} from "./Common";
 import {Route} from "react-router-dom";
 
 class Settings extends React.Component {
@@ -450,12 +450,12 @@ export default function Admin(props) {
     ];
 
     return (
-        <>
+        <PageContainer>
             <TabLinks links={links}/>
             <Route path='/admin' exact component={Downloads}/>
             <Route path='/admin/settings' exact component={Settings}/>
             <Route path='/admin/wrol' exact component={WROLMode}/>
-        </>
+        </PageContainer>
     )
 
 }
diff --git a/app/src/components/Apps.js b/app/src/components/Apps.js
index 994e8a4d..4eb7db15 100644
--- a/app/src/components/Apps.js
+++ b/app/src/components/Apps.js
@@ -4,6 +4,7 @@ import Container from "semantic-ui-react/dist/commonjs/elements/Container";
 import {Route} from "react-router-dom";
 import "../static/wrolpi.css";
 import {decryptOTP, encryptOTP} from "../api";
+import {PageContainer} from "./Common";
 
 class Encrypt extends React.Component {
     constructor(props) {
@@ -145,10 +146,8 @@ class OTP extends React.Component {
 
 export function AppsRoute(props) {
     return (
-        <>
-            <Container fluid>
-                <Route path='/apps/otp' exact component={OTP}/>
-            </Container>
-        </>
+        <PageContainer>
+            <Route path='/apps/otp' exact component={OTP}/>
+        </PageContainer>
     )
 }
diff --git a/app/src/components/Archive.js b/app/src/components/Archive.js
index 62859f90..d283f455 100644
--- a/app/src/components/Archive.js
+++ b/app/src/components/Archive.js
@@ -3,6 +3,7 @@ import {Card, Confirm, Container, Icon, Image, Placeholder} from "semantic-ui-re
 import Paginator, {
     ClearButton,
     ExternalLink,
+    PageContainer,
     SearchInput,
     TabLinks,
     textEllipsis,
@@ -321,10 +322,10 @@ export function ArchiveRoute(props) {
         {text: 'Domains', to: '/archive/domains'},
         {text: 'Manage', to: '/archive/manage'},
     ];
-    return <>
+    return <PageContainer>
         <TabLinks links={links}/>
         <Route path='/archive' exact component={Archives}/>
         <Route path='/archive/domains' component={Domains}/>
         <Route path='/archive/manage' component={ManageArchives}/>
-    </>
+    </PageContainer>
 }
diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index da319da6..7aa63ba8 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {Card, Container, Form, Icon, Image, Input, Menu, Pagination, Progress} from 'semantic-ui-react';
+import {Card, Container, Form, Icon, Image, Input, Menu, Pagination, Progress, Responsive} from 'semantic-ui-react';
 import {Link, NavLink} from "react-router-dom";
 import Button from "semantic-ui-react/dist/commonjs/elements/Button";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
@@ -652,3 +652,20 @@ export function TabLinks({links}) {
         </Menu>
     )
 }
+
+export function PageContainer(props) {
+    return (
+        <>
+            <Responsive minWidth={770}>
+                <Container fluid style={{marginTop: '1em', padding: '1em'}}>
+                    {props.children}
+                </Container>
+            </Responsive>
+            <Responsive maxWidth={769}>
+                <Container style={{marginTop: '1em', padding: 0}}>
+                    {props.children}
+                </Container>
+            </Responsive>
+        </>
+    )
+}
diff --git a/app/src/components/Files.js b/app/src/components/Files.js
index 9a2345bf..149d8329 100644
--- a/app/src/components/Files.js
+++ b/app/src/components/Files.js
@@ -3,7 +3,7 @@ import FileBrowser from 'react-keyed-file-browser';
 import {Button, Confirm, Header, Icon, Modal} from "semantic-ui-react";
 import 'react-keyed-file-browser/dist/react-keyed-file-browser.css';
 import {deleteFile, getFiles} from "../api";
-import {humanFileSize, secondsToDateTime} from "./Common";
+import {humanFileSize, PageContainer, secondsToDateTime} from "./Common";
 
 const icons = {
     File: <Icon name='file'/>,
@@ -112,6 +112,8 @@ class Files extends React.Component {
 
 export function FilesRoute(props) {
     return (
-        <Files/>
+        <PageContainer>
+            <Files/>
+        </PageContainer>
     );
 }
diff --git a/app/src/components/Inventory.js b/app/src/components/Inventory.js
index 6ded9ded..a9039744 100644
--- a/app/src/components/Inventory.js
+++ b/app/src/components/Inventory.js
@@ -16,7 +16,7 @@ import {
 import {Button, Checkbox, Dropdown, Form, Grid, Header, Portal, Segment, Table} from "semantic-ui-react";
 import {Route} from "react-router-dom";
 import {toast} from 'react-semantic-toasts';
-import {arraysEqual, enumerate, replaceNullValues, TabLinks} from './Common';
+import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks} from './Common';
 import _ from 'lodash';
 
 class InventorySummary extends React.Component {
@@ -1094,10 +1094,10 @@ export function InventoryRoute(props) {
         {text: 'Summary', to: '/inventory/summary'},
     ];
     return (
-        <>
+        <PageContainer>
             <TabLinks links={links}/>
             <Route path='/inventory' exact component={InventoryAddList}/>
             <Route path='/inventory/summary' exact component={InventorySummary}/>
-        </>
+        </PageContainer>
     )
 }
diff --git a/app/src/components/VideoPlayer.js b/app/src/components/VideoPlayer.js
index 4c5857b0..e27be091 100644
--- a/app/src/components/VideoPlayer.js
+++ b/app/src/components/VideoPlayer.js
@@ -4,8 +4,9 @@ import {deleteVideo, favoriteVideo} from "../api";
 import Button from "semantic-ui-react/dist/commonjs/elements/Button";
 import {Link} from "react-router-dom";
 import {humanFileSize, humanNumber, secondsToTimestamp, uploadDate, VideoCard} from "./Common";
-import {Confirm, Container, Segment, Tab} from "semantic-ui-react";
+import {Confirm, Segment, Tab} from "semantic-ui-react";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
+import Container from "semantic-ui-react/dist/commonjs/elements/Container";
 
 const MEDIA_PATH = '/media';
 
@@ -106,70 +107,76 @@ function VideoPage(props) {
     let tabPanes = [descriptionPane, statisticsPane, captionsPane];
 
     return (
-        <Container textAlign='left'>
-            <Button
-                style={{marginTop: '1em', marginBottom: '1em'}}
-                onClick={() => props.history.goBack()}
-            >
-                <Icon name='left arrow'/>
-                Back
-            </Button>
-            <Segment>
-                <video controls
-                       autoPlay={props.autoplay !== undefined ? props.autoplay : true}
-                       poster={posterUrl}
-                       id="player"
-                       playsInline={true}
-                       style={{maxWidth: '100%'}}
+        <>
+            <Container>
+                <Button
+                    style={{marginTop: '1em', marginBottom: '1em'}}
+                    onClick={() => props.history.goBack()}
                 >
-                    <source src={videoUrl} type="video/mp4"/>
-                    <track kind="captions" label="English captions" src={captionsUrl} srcLang="en" default/>
-                </video>
+                    <Icon name='left arrow'/>
+                    Back
+                </Button>
+            </Container>
 
-                <h2>{video.title || video.video_path}</h2>
-                {video.upload_date && <h3>{uploadDate(video.upload_date)}</h3>}
-                <h3>
-                    {channel && <Link to={`/videos/channel/${channel.link}/video`}>
-                        {channel.name}
-                    </Link>}
-                </h3>
+            <video controls
+                   autoPlay={props.autoplay !== undefined ? props.autoplay : true}
+                   poster={posterUrl}
+                   id="player"
+                   playsInline={true}
+                   style={{maxWidth: '100%'}}
+            >
+                <source src={videoUrl} type="video/mp4"/>
+                <track kind="captions" label="English captions" src={captionsUrl} srcLang="en" default/>
+            </video>
 
-                <p>
-                    {favorite_button}
-                    <a href={videoUrl}>
-                        <Button style={{margin: '0.5em'}}>
-                            <Icon name='download'/>
-                            Download
-                        </Button>
-                    </a>
-                    <Button
-                        color='red'
-                        onClick={() => setDeleteOpen(true)}
-                        style={{margin: '0.5em'}}
-                    >Delete</Button>
-                    <Confirm
-                        open={deleteOpen}
-                        content='Are you sure you want to delete this video?  All files related to this video will be deleted. It will not be downloaded again!'
-                        confirmButton='Delete'
-                        onCancel={() => setDeleteOpen(false)}
-                        onConfirm={() => handleDeleteVideo(video.id)}
-                    />
-                </p>
-            </Segment>
+            <Container style={{marginTop: '1em'}}>
+                <Segment>
 
-            <Tab panes={tabPanes}/>
+                    <h2>{video.title || video.video_path}</h2>
+                    {video.upload_date && <h3>{uploadDate(video.upload_date)}</h3>}
+                    <h3>
+                        {channel && <Link to={`/videos/channel/${channel.link}/video`}>
+                            {channel.name}
+                        </Link>}
+                    </h3>
 
-            <Grid columns={2} stackable>
-                <Grid.Row>
-                    <Grid.Column textAlign='left'>
-                        {props.prev && <><h3>Older</h3><VideoCard video={props.prev}/></>}
-                    </Grid.Column>
-                    <Grid.Column textAlign='left'>
-                        {props.next && <><h3>Newer</h3><VideoCard video={props.next}/></>}
-                    </Grid.Column>
-                </Grid.Row>
-            </Grid>
-        </Container>
+                    <p>
+                        {favorite_button}
+                        <a href={videoUrl}>
+                            <Button style={{margin: '0.5em'}}>
+                                <Icon name='download'/>
+                                Download
+                            </Button>
+                        </a>
+                        <Button
+                            color='red'
+                            onClick={() => setDeleteOpen(true)}
+                            style={{margin: '0.5em'}}
+                        >Delete</Button>
+                        <Confirm
+                            open={deleteOpen}
+                            content='Are you sure you want to delete this video?  All files related to this video will be deleted. It will not be downloaded again!'
+                            confirmButton='Delete'
+                            onCancel={() => setDeleteOpen(false)}
+                            onConfirm={() => handleDeleteVideo(video.id)}
+                        />
+                    </p>
+                </Segment>
+
+                <Tab panes={tabPanes}/>
+
+                <Grid columns={2} stackable>
+                    <Grid.Row>
+                        <Grid.Column textAlign='left'>
+                            {props.prev && <><h3>Older</h3><VideoCard video={props.prev}/></>}
+                        </Grid.Column>
+                        <Grid.Column textAlign='left'>
+                            {props.next && <><h3>Newer</h3><VideoCard video={props.next}/></>}
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </Container>
+        </>
     )
 }
 
diff --git a/app/src/components/Videos.js b/app/src/components/Videos.js
index dbd8bc6d..321ac9d3 100644
--- a/app/src/components/Videos.js
+++ b/app/src/components/Videos.js
@@ -5,7 +5,7 @@ import Paginator, {
     DEFAULT_LIMIT,
     defaultSearchOrder,
     defaultVideoOrder,
-    humanFileSize,
+    humanFileSize, PageContainer,
     Progresses,
     scrollToTop,
     searchOrders,
@@ -512,7 +512,7 @@ export function VideosRoute(props) {
     ];
 
     return (
-        <>
+        <PageContainer>
             <TabLinks links={links}/>
 
             <Route path='/videos' exact
@@ -545,7 +545,7 @@ export function VideosRoute(props) {
                    }
             />
             <Route path='/videos/channel/:channel_link/video' exact component={Videos}/>
-        </>
+        </PageContainer>
     )
 }