From 10754a14c8d0dda68f2484e523f6901b3e7daee3 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Fri, 19 Jun 2020 14:14:28 +0800
Subject: css changes and bug fixes

Presentation
Undo / Redo
Image upload
Record Audio
---
 src/mobile/MobileInterface.tsx | 205 +++++++++++++++++++++++------------------
 1 file changed, 117 insertions(+), 88 deletions(-)

(limited to 'src/mobile/MobileInterface.tsx')

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 4000bee85..612b112e6 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+    faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
@@ -25,6 +25,7 @@ import "./MobileInterface.scss";
 import "./MobileMenu.scss";
 import "./MobileHome.scss";
 import "./ImageUpload.scss";
+import "./AudioUpload.scss";
 import { DocumentManager } from '../client/util/DocumentManager';
 import SettingsManager from '../client/util/SettingsManager';
 import { Uploader } from "./ImageUpload";
@@ -39,8 +40,9 @@ import { RadialMenu } from "../client/views/nodes/RadialMenu";
 import { UndoManager } from "../client/util/UndoManager";
 import { MainView } from "../client/views/MainView";
 import { List } from "../fields/List";
+import { AudioUpload } from "./AudioUpload";
 
-library.add(faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+library.add(faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
@@ -54,17 +56,18 @@ export class MobileInterface extends React.Component {
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
     @observable private mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(this.userDoc);
     @observable private renderView?: () => JSX.Element;
-    @observable private sidebarActive: boolean = false;
-    @observable private imageUploadActive: boolean = false;
-    @observable private menuListView: boolean = false;
-    @observable private _ink: boolean = false;
-
-    public _activeDoc: Doc = this.mainDoc;
-    public _homeDoc: Doc = this.mainDoc;
-    private _homeMenu: boolean = true;
-    private _child: Doc | null = null;
-    private _parents: Array<Doc> = [];
-    private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc);
+    @observable private sidebarActive: boolean = false; //to toggle sidebar display
+    @observable private imageUploadActive: boolean = false; //to toggle image upload
+    @observable private audioUploadActive: boolean = false;
+    @observable private menuListView: boolean = false; //to switch between menu view (list / icon)
+    @observable private _ink: boolean = false; //toggle whether ink is being dispalyed
+
+    public _activeDoc: Doc = this.mainDoc; // doc updated as the active mobile page is updated (initially home menu)
+    public _homeDoc: Doc = this.mainDoc; // home menu as a document
+    private _homeMenu: boolean = true; // to determine whether currently at home menu
+    private _child: Doc | null = null; // currently selected document
+    private _parents: Array<Doc> = []; // array of parent docs (for pathbar)
+    private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); // to access documents in Dash Web
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -119,7 +122,7 @@ export class MobileInterface extends React.Component {
     }
 
     /**
-     * Back method for navigating
+     * Back method for navigating through items
      */
     back = () => {
         const header = document.getElementById("header") as HTMLElement;
@@ -182,7 +185,7 @@ export class MobileInterface extends React.Component {
         if (this.mainContainer) {
             const backgroundColor = () => "white";
             return (
-                <div style={{ position: "relative", top: '200px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}>
+                <div style={{ position: "relative", top: '198px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}>
                     <DocumentView
                         Document={this.mainContainer}
                         DataDoc={undefined}
@@ -213,6 +216,11 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    /**
+     * Note: window.innerWidth and window.screen.width compute different values. 
+     * window.screen.width is the display size, however window.innerWidth is the
+     * display resolution which computes differently. 
+     */
     returnWidth = () => window.innerWidth; //The windows width
     returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar)
 
@@ -224,11 +232,7 @@ export class MobileInterface extends React.Component {
     handleClick = async (doc: Doc) => {
         const children = DocListCast(doc.data);
         if (doc.type !== "collection" && this.sidebarActive) {
-            this._parents.push(this._activeDoc);
-            this._activeDoc = doc;
-            this.switchCurrentView((userDoc: Doc) => doc);
-            this._homeMenu = false;
-            this.toggleSidebar();
+            this.openFromSidebar(doc);
         } else if (doc.type === "collection" && children.length === 0) console.log("This collection has no children");
         else {
             this._parents.push(this._activeDoc);
@@ -239,6 +243,14 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    openFromSidebar = (doc: Doc) => {
+        this._parents.push(this._activeDoc);
+        this._activeDoc = doc;
+        this.switchCurrentView((userDoc: Doc) => doc);
+        this._homeMenu = false;
+        this.toggleSidebar();
+    }
+
     /**
      * Handles creation of array which is then rendered in renderPathbar()
      */
@@ -350,14 +362,6 @@ export class MobileInterface extends React.Component {
                         </div>
                     </div>
                     {this.renderPathbar()}
-                    <div className="sidebar" id="sidebar">
-                        <div className="sidebarButtons">
-                            <div
-                                className="item"
-                                onClick={() => MainView.Instance?.createNewWorkspace()}>Create New Workspace
-                            </div>
-                        </div>
-                    </div>
                 </div>
             );
         }
@@ -377,6 +381,7 @@ export class MobileInterface extends React.Component {
                         <div className="item-title"> {doc.title} </div>
                         <div className="item-type">{doc.type}</div>
                         <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+                        <FontAwesomeIcon className="open" onClick={() => this.openFromSidebar(doc)} icon="external-link-alt" size="lg" />
                     </div>);
             }
         });
@@ -398,9 +403,13 @@ export class MobileInterface extends React.Component {
                         {this._child ?
                             <>
                                 {buttons}
-                                <div className="item" key="home" onClick={this.returnMain}>
-                                    Return to library
-                            </div>
+                                <div
+                                    className="item" key="home"
+                                    onClick={this.returnMain}
+                                    style={{ opacity: 0.7 }}>
+                                    <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
+                                    <div className="item-type">Return to library</div>
+                                </div>
                             </> :
                             <>
                                 {buttons}
@@ -455,7 +464,7 @@ export class MobileInterface extends React.Component {
             return <div className="docButton"
                 title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
                 style={{ backgroundColor: "black", color: "white" }}
-                onClick={this.uploadAudio}
+            // onClick={this.uploadAudio}
             >
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload"
                 />
@@ -492,21 +501,45 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    undo = () => {
+        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
+            return (<>
+                <div className="docButton"
+                    style={{ backgroundColor: "black", color: "white" }}
+                    id="undoButton"
+                    title="undo"
+                    onClick={(e: React.MouseEvent) => {
+                        UndoManager.Undo();
+                        e.stopPropagation();
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt" />
+                </div>
+            </>);
+        }
+    }
+
+    redo = () => {
+        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
+            return (<>
+                <div className="docButton"
+                    style={{ backgroundColor: "black", color: "white" }}
+                    id="undoButton"
+                    title="redo"
+                    onClick={(e: React.MouseEvent) => {
+                        UndoManager.Redo();
+                        e.stopPropagation();
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt" />
+                </div>
+            </>);
+        }
+    }
+
     // Button for switching into ink mode
     drawInk = () => {
         if (this._activeDoc._viewType === "docking") {
             return (
                 <>
-                    {/* <div className="docButton"
-                        id="undoButton"
-                        title="undo"
-                        onClick={(e: React.MouseEvent) => {
-                            UndoManager.Undo();
-                            e.stopPropagation();
-                        }}>
-                        <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt"
-                        />
-                    </div> */}
                     <div className="docButton"
                         id="inkButton"
                         title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
@@ -514,23 +547,29 @@ export class MobileInterface extends React.Component {
                         <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
                         />
                     </div>
-                    {/* <div className="docButton"
-                        id="redoButton"
-                        title="redo"
-                        onClick={(e: React.MouseEvent) => {
-                            UndoManager.Redo();
-                            e.stopPropagation();
-                        }}>
-                        <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt"
+                </>);
+        }
+    }
+
+    // Mobile doc button for uploading 
+    upload = () => {
+        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
+            return (
+                <>
+                    <div className="docButton"
+                        id="uploadButton"
+                        title={"uploadFile"}
+                        onClick={this.toggleUpload}>
+                        <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload"
                         />
-                    </div> */}
+                    </div>
                 </>);
         }
     }
 
     // Button to download images on the mobile
     downloadDocument = () => {
-        if (this._activeDoc.type === "image") {
+        if (this._activeDoc.type === "image" || this._activeDoc.type === "pdf" || this._activeDoc.type === "video") {
             const url = this._activeDoc["data-path"]?.toString();
             return <div className="docButton"
                 title={"Download Image"}
@@ -559,24 +598,21 @@ export class MobileInterface extends React.Component {
         }
     }
 
-    // Pushing the audio doc onto Dash Web through the right side bar
-    uploadAudio = () => {
-        const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
-        const audioDoc = this._activeDoc;
-        const data = Cast(audioRightSidebar.data, listSpec(Doc));
-
-        if (data) {
-            data.push(audioDoc);
-        }
-    }
+    // // Pushing the audio doc onto Dash Web through the right side bar
+    // uploadAudio = () => {
+    //     const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+    //     const audioDoc = this._activeDoc;
+    //     const data = Cast(audioRightSidebar.data, listSpec(Doc));
 
-    panelHeight = () => window.innerHeight;
-    panelWidth = () => window.innerWidth;
+    //     if (data) {
+    //         data.push(audioDoc);
+    //     }
+    // }
 
     // Button for pinning images to presentation
     pinToPresentation = () => {
         // Only making button available if it is an image
-        if (this._activeDoc.type === "image") {
+        if (!(this._activeDoc.type === "collection" || this._activeDoc.type === "presentation")) {
             const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
             return <div className="docButton"
                 title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
@@ -611,7 +647,7 @@ export class MobileInterface extends React.Component {
         }
     }
 
-    // Logics for switching the menu into the icons
+    // Logic for switching the menu into the icons
     @action
     changeToIconView = () => {
         if (this._homeDoc._viewType = "stacking") {
@@ -635,7 +671,7 @@ export class MobileInterface extends React.Component {
         }
     }
 
-    // Logics for switching the menu into the stacking view
+    // Logic for switching the menu into the stacking view
     @action
     changeToListView = () => {
         if (this._homeDoc._viewType = "masonry") {
@@ -674,29 +710,16 @@ export class MobileInterface extends React.Component {
     @action
     toggleUpload = () => this.imageUploadActive = !this.imageUploadActive
 
+    // For toggling image upload pop up
+    @action
+    toggleAudio = () => this.audioUploadActive = !this.audioUploadActive
+
     // For closing the image upload pop up
     @action
     closeUpload = () => {
         this.imageUploadActive = false;
     }
 
-    // Returns the image upload pop up
-    uploadImage = () => {
-        if (this.imageUploadActive) {
-            console.log("active");
-        } else if (!this.imageUploadActive) {
-
-        }
-        return (
-            <div>
-                <div className="closeUpload" onClick={this.toggleUpload}>
-                    <FontAwesomeIcon icon="window-close" size={"lg"} />
-                </div>
-                <Uploader />
-            </div>
-        );
-    }
-
     displayRadialMenu = () => {
         if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
             return <RadialMenu />;
@@ -713,7 +736,10 @@ export class MobileInterface extends React.Component {
             <div className="mobileInterface-container" onDragOver={this.onDragOver}>
                 <SettingsManager />
                 <div className={`image-upload ${this.imageUploadActive ? "active" : ""}`}>
-                    {this.uploadImage()}
+                    <Uploader Document={this._homeMenu ? this._library : this._activeDoc} />
+                </div>
+                <div className={`audio-upload ${this.audioUploadActive ? "active" : ""}`}>
+                    <AudioUpload />
                 </div>
                 {this.switchMenuView()}
                 {this.inkMenu()}
@@ -721,8 +747,11 @@ export class MobileInterface extends React.Component {
                     <div className="docButtonContainer">
                         {this.pinToPresentation()}
                         {this.downloadDocument()}
-                        {this.drawInk()}
-                        {this.uploadAudioButton()}
+                        {this.undo()}
+                        {this.redo()}
+                        {this.upload()}
+                        {/* {this.drawInk()} */}
+                        {/* {this.uploadAudioButton()} */}
                     </div>
                     {this.displayWorkspaces()}
                     {this.renderDefaultContent()}
@@ -738,7 +767,7 @@ export class MobileInterface extends React.Component {
 Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
 Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
 Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
-Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
+Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); });
 Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
 Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
 Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); });
-- 
cgit v1.2.3-70-g09d2


From 790d41009a678f560cd3b78e86069251e494cfd1 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Mon, 22 Jun 2020 14:55:00 +0800
Subject: updated css width property for mobile

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/util/SettingsManager.scss               |  2 +-
 src/client/views/AntimodeMenu.scss                 | 16 ++--
 .../views/collections/CollectionStackingView.scss  |  2 +-
 .../views/collections/CollectionViewChromes.scss   |  2 +-
 .../collectionFreeForm/InkOptionsMenu.scss         | 18 ++--
 src/client/views/nodes/AudioBox.scss               |  2 +-
 src/client/views/nodes/PDFBox.scss                 |  2 +-
 src/client/views/nodes/PresBox.scss                |  2 +-
 .../views/presentationview/PresElementBox.scss     |  2 +-
 src/mobile/AudioUpload.scss                        | 95 ----------------------
 src/mobile/MobileInterface.tsx                     | 10 +--
 src/mobile/MobileMenu.scss                         | 24 ++++--
 13 files changed, 45 insertions(+), 134 deletions(-)

(limited to 'src/mobile/MobileInterface.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b7da4ae2f..5edb2225f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -465,7 +465,7 @@ export class CurrentUserUtils {
 
     static setupMobileButtons(doc?: Doc, buttons?: string[]) {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
-            { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections." },
+            { title: "WORKSPACES", icon: "folder-open", click: 'openWorkspaces()', backgroundColor: "#ffd6d6", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " },
             { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." },
             { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." },
             { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." },
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 1eac9303b..0116c5294 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -135,7 +135,7 @@
     }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
     .settings-interface {
         background-color: whitesmoke !important;
         color: grey;
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 170631422..43f45fb1c 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -41,7 +41,7 @@
     }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
     .antimodeMenu-cont {
         position: absolute;
         z-index: 10000;
@@ -51,31 +51,31 @@
         border-radius: 0px 6px 6px 6px;
         // overflow: hidden;    
         display: flex;
-    
+
         &.with-rows {
             flex-direction: column-reverse;
         }
-    
+
         .antimodeMenu-row {
             display: flex;
             height: 100%;
-            width:100%;
+            width: 100%;
         }
-    
+
         .antimodeMenu-button {
             background-color: transparent;
             width: 100px;
             height: 100px;
-    
+
             &.active {
                 background-color: #121212;
             }
         }
-    
+
         .antimodeMenu-button:hover {
             background-color: #121212;
         }
-    
+
         .antimodeMenu-dragger {
             height: 100%;
             transition: width .2s;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 98efdfd23..342773db8 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -424,7 +424,7 @@
     }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
 
     .collectionStackingView .collectionStackingView-columnDragger,
     .collectionMasonryView .collectionStackingView-columnDragger {
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 54ee4ab3b..ec2d78735 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -80,7 +80,7 @@
                 // margin-top: 10px;
             }
 
-            @media only screen and (max-width: 1000) {
+            @media only screen and (max-device-width: 480px) {
                 .collectionViewBaseChrome-collapse {
                     display: none;
                 }
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index 72fdf5af9..4855dfea8 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -33,39 +33,39 @@
     }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
     .antimodeMenu-button {
         .color-preview {
             width: 100%;
             height: 100%;
         }
-    
+
     }
-    
+
     .sketch-picker {
         background: #323232;
-    
+
         .flexbox-fit {
             background: #323232;
         }
     }
-    
+
     .btn-group {
         display: grid;
         grid-template-columns: auto auto;
         /* Make the buttons appear below each other */
     }
-    
+
     .btn2-group {
         display: block;
         background: #323232;
         grid-template-columns: auto;
-    
+
         /* Make the buttons appear below each other */
         .antimodeMenu-button {
             background: #323232;
             display: block;
-    
+
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 61ce4bd13..43dd698ad 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -174,7 +174,7 @@
 }
 
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
 
     .audiobox-container,
     .audiobox-container-interactive {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 1a31d2916..b19ddf1f5 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -224,7 +224,7 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-device-width: 480px) {
 
     .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton,
     .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton {
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index e62aa48fb..1261cbfdd 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -81,7 +81,7 @@
     }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
     .presBox-cont .presBox-buttons {
         position: absolute;
         top: 70%;
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 99fe2a3ba..79532995e 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -106,7 +106,7 @@
     z-index: 2;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-device-width: 480px) {
     .presElementBox-buttons {
         display: inline-flex;
         position: relative;
diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss
index 5f0ba465a..9fe442e55 100644
--- a/src/mobile/AudioUpload.scss
+++ b/src/mobile/AudioUpload.scss
@@ -7,77 +7,6 @@
     align-items: center;
     max-width: 400px;
     min-width: 400px;
-
-    .upload_label {
-        font-size: 3em;
-        font-weight: 700;
-        color: white;
-        background-color: black;
-        display: inline-block;
-        margin: 10;
-        width: 100%;
-        border-radius: 10px;
-    }
-
-    .file {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        direction: ltr;
-    }
-
-    .upload_label:hover {
-        background-color: darkred;
-    }
-
-    .button_file {
-        text-align: center;
-        height: 50%;
-        width: 50%;
-        background-color: paleturquoise;
-        color: grey;
-        font-size: 3em;
-    }
-
-    .inputfile {
-        width: 0.1px;
-        height: 0.1px;
-        opacity: 0;
-        overflow: hidden;
-        position: absolute;
-        z-index: -1;
-    }
-
-    .inputfile+label {
-        font-size: 3em;
-        font-weight: 700;
-        color: white;
-        background-color: black;
-        display: inline-block;
-        margin: 10px;
-        width: 100%;
-        border-radius: 10px;
-    }
-
-    .inputfile:focus+label,
-    .inputfile+label:hover {
-        background-color: darkred;
-    }
-
-    .status {
-        font-size: 2em;
-    }
-
-}
-
-.backgroundUpload {
-    height: 100vh;
-    top: 0;
-    z-index: 999;
-    width: 100vw;
-    position: absolute;
-    background-color: lightgrey;
-    opacity: 0.4;
 }
 
 .audio-upload {
@@ -92,28 +21,4 @@
     height: 100vh;
     width: 100vw;
     opacity: 1;
-}
-
-.uploadContainer {
-    top: 40;
-    position: absolute;
-    z-index: 1000;
-    height: 20vh;
-    width: 80vw;
-    opacity: 1;
-}
-
-.loadingImage {
-    display: inline-flex;
-    width: max-content;
-}
-
-.loadingSlab {
-    position: relative;
-    width: 30px;
-    height: 30px;
-    margin: 10;
-    border-radius: 20px;
-    opacity: 0.3;
-    background-color: black;
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 84a5975cb..ceda74da2 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -415,7 +415,7 @@ export class MobileInterface extends React.Component {
                                     onClick={this.returnMain}
                                     style={{ opacity: 0.7 }}>
                                     <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
-                                    <div className="item-type">Return to library</div>
+                                    <div className="item-type">Return to workspaces</div>
                                 </div>
                             </> :
                             <>
@@ -509,7 +509,7 @@ export class MobileInterface extends React.Component {
     }
 
     undo = () => {
-        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
+        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") {
             return (<>
                 <div className="docButton"
                     style={{ backgroundColor: "black", color: "white" }}
@@ -526,7 +526,7 @@ export class MobileInterface extends React.Component {
     }
 
     redo = () => {
-        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) {
+        if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") {
             return (<>
                 <div className="docButton"
                     style={{ backgroundColor: "black", color: "white" }}
@@ -814,10 +814,10 @@ export class MobileInterface extends React.Component {
                         {this.pinToPresentation()}
                         {this.downloadDocument()}
                         {this.undo()}
+                        {this.drawInk()}
                         {this.redo()}
-                        {this.upload()}
+                        {/* {this.upload()} */}
                         {this.uploadImageButton()}
-                        {/* {this.drawInk()} */}
                         {/* {this.uploadAudioButton()} */}
                     </div>
                     {this.displayWorkspaces()}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 87731655a..53bc48034 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -19,7 +19,6 @@ body {
     width: 100vw;
     height: $navbar-height;
     background-color: whitesmoke;
-    border-bottom: 5px solid black;
     z-index: 150;
 }
 
@@ -221,14 +220,17 @@ body {
 
 .back {
     position: absolute;
-    top: 44%;
     left: 42px;
-    background-color: black;
+    top: 0;
+    background: #1a1a1a;
     width: 50px;
-    height: 50px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
     text-align: center;
+    flex-direction: column;
+    align-items: center;
     border-radius: 10px;
-    transform: translate(0, -50%);
     font-size: 25px;
     user-select: none;
     z-index: 100;
@@ -243,7 +245,7 @@ body {
     border-radius: 0px;
     width: 100%;
     height: 80px;
-    transition: all 400ms ease 50ms;
+    overflow: hidden;
 }
 
 .pathname {
@@ -291,14 +293,19 @@ body {
 
 .scrollmenu {
     overflow: auto;
+    width: 100%;
+    height: 100%;
     white-space: nowrap;
+    display: inline-flex;
 }
 
 .pathbarItem {
     position: relative;
-    display: inline-flex;
+    display: flex;
+    align-items: center;
     color: whitesmoke;
     text-align: center;
+    justify-content: center;
     user-select: none;
     transform: translate(100px, 0px);
     font-size: 30px;
@@ -311,7 +318,6 @@ body {
     text-align: center;
     height: 50px;
     padding: 10px;
-    background-color: rgb(48, 40, 40);
     font-size: 30px;
     border-radius: 10px;
     text-transform: uppercase;
@@ -321,7 +327,7 @@ body {
 
 
 .pathIcon {
-    transform: translate(0px, 8px);
+    transform: translate(0px, 0px);
     position: relative;
 }
 
-- 
cgit v1.2.3-70-g09d2

