layout tweaks etc.

src/public/javascripts/services/mobile.js

@@ -90,7 +90,7 @@ $("#note-menu-button").click(async e => {
     ]);
 
     itemsContainer.enableItem("delete", isNotRoot && parentNote.type !== 'search');
-
+    alert("A");
     contextMenuWidget.initContextMenu(e, itemsContainer, (event, cmd) => {
         if (cmd === "delete") {
             treeChangesService.deleteNodes([node]);
@@ -104,25 +104,14 @@ $("#note-menu-button").click(async e => {
     });
 });
 
-$("#global-actions-button").click(async e => {
+$("#switch-to-desktop-button").click(() => {
-    const itemsContainer = new ContextMenuItemsContainer([
+    utils.setCookie('trilium-device', 'desktop');
-        {title: "Switch to desktop version", cmd: "switch-to-desktop", uiIcon: "computer"},
-        {title: "Logout", cmd: "log-out", uiIcon: "log-out"}
-    ]);
 
-    contextMenuWidget.initContextMenu(e, itemsContainer, (event, cmd) => {
+    utils.reloadApp();
-        if (cmd === "switch-to-desktop") {
+});
-            utils.setCookie('trilium-device', 'desktop');
 
-            utils.reloadApp();
+$("#log-out-button").click(() => {
-        }
+    $("#logout-form").submit();
-        else if (cmd === 'log-out') {
-            $("#logout-form").submit();
-        }
-        else {
-            throw new Error("Unrecognized command " + cmd);
-        }
-    });
 });
 
 showTree();

src/public/stylesheets/mobile.css

@@ -35,7 +35,7 @@ html, body {
 }
 
 #detail {
-    padding: 20px 20px 10px 35px;
+    padding: 5px 20px 10px 0px;
     height: 100%;
     flex-direction: column;
 }
@@ -45,6 +45,7 @@ html, body {
     overflow: auto;
     flex-direction: column;
     height: 100%;
+    padding-left: 10px;
 }
 
 #note-title-row {

src/routes/mobile.js

@@ -1,37 +0,0 @@
-"use strict";
-
-const sourceIdService = require('../services/source_id');
-const sql = require('../services/sql');
-const attributeService = require('../services/attributes');
-const config = require('../services/config');
-const optionService = require('../services/options');
-
-async function index(req, res) {
-    const options = await optionService.getOptionsMap();
-
-    res.render('mobile', {
-        theme: options.theme,
-        sourceId: await sourceIdService.generateSourceId(),
-        maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
-        instanceName: config.General ? config.General.instanceName : null,
-        appCss: await getAppCss()
-    });
-}
-
-async function getAppCss() {
-    let css = '';
-    const notes = attributeService.getNotesWithLabel('appCss');
-
-    for (const note of await notes) {
-        css += `/* ${note.noteId} */
-${note.content}
-
-`;
-    }
-
-    return css;
-}
-
-module.exports = {
-    index
-};

src/routes/routes.js

@@ -1,7 +1,6 @@
 const setupRoute = require('./setup');
 const loginRoute = require('./login');
 const indexRoute = require('./index');
-const mobileRoute = require('./mobile');
 const multer = require('multer')();
 
 // API routes
@@ -97,8 +96,6 @@ const uploadMiddleware = multer.single('upload');
 
 function register(app) {
     route(GET, '/', [auth.checkAuth], indexRoute.index);
-    route(GET, '/mobile', [auth.checkAuth], mobileRoute.index);
-
     route(GET, '/login', [auth.checkAppInitialized], loginRoute.loginPage);
     route(POST, '/login', [], loginRoute.login);
     route(POST, '/logout', [auth.checkAuth], loginRoute.logout);

src/views/login.ejs

@@ -46,12 +46,18 @@
     // Required for correct loading of scripts in Electron
     if (typeof module === 'object') {window.module = module; module = undefined;}
 
-    let device = "desktop";
+    let device;
 
-    // mobile device detection based on https://stackoverflow.com/a/24600597/944162
+    if (window.location.search === '?desktop') {
-    if (/Mobi/.test(navigator.userAgent) || window.location.search === '?mobile') {
+        device = "desktop";
+    }
+    else if (window.location.search === '?mobile') {
         device = "mobile";
     }
+    else {
+        // mobile device detection based on https://stackoverflow.com/a/24600597/944162
+        device = /Mobi/.test(navigator.userAgent) ? "mobile" : "desktop";
+    }
 
     setCookie("trilium-device", device);
 

src/views/mobile.ejs

@@ -15,7 +15,14 @@
 
             <a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
 
-            <a id="global-actions-button" title="Global actions" class="icon-action jam jam-cogs"></a>
+            <div class="dropdown">
+                <a id="global-actions-button" title="Global actions" class="icon-action jam jam-cogs dropdown-toggle" data-toggle="dropdown"></a>
+
+                <div class="dropdown-menu dropdown-menu-right">
+                    <a class="dropdown-item" id="switch-to-desktop-button"><span class="jam jam-computer"></span> Switch to desktop version</a>
+                    <a class="dropdown-item" id="log-out-button"><span class="jam jam-log-out"></span> Logout</a>
+                </div>
+            </div>
         </div>
 
         <div id="tree"></div>
@@ -32,24 +39,26 @@
             </button>
         </div>
 
-        <div id="detail-content">
+        <div style="position: relative; height: 100%;"> <!-- This div here is for saved indicator to have suitable parent -->
             <span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
 
-            <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
+            <div id="detail-content">
+                <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
 
-            <div id="note-detail-code" class="note-detail-component"></div>
+                <div id="note-detail-code" class="note-detail-component"></div>
 
-            <% include details/search.ejs %>
+                <% include details/search.ejs %>
 
-            <% include details/render.ejs %>
+                <% include details/render.ejs %>
 
-            <% include details/file.ejs %>
+                <% include details/file.ejs %>
 
-            <% include details/image.ejs %>
+                <% include details/image.ejs %>
 
-            <% include details/relation_map.ejs %>
+                <% include details/relation_map.ejs %>
 
-            <% include details/protected_session_password.ejs %>
+                <% include details/protected_session_password.ejs %>
+            </div>
         </div>
     </div>