Updated mobile navigation

app/init.php

@@ -25,7 +25,7 @@ const APP_EMAIL_SECURITY = 'security@localhost.test'; // Default security email
 const APP_USERAGENT = APP_NAME.'-Server v%s. Please report abuse at %s';
 const APP_MODE_ADMIN = 'admin';
 const APP_PAGING_LIMIT = 15;
-const APP_CACHE_BUSTER = 48;
+const APP_CACHE_BUSTER = 55;
 const APP_VERSION_STABLE = '0.5.0';
 const APP_STORAGE_UPLOADS = '/storage/uploads';
 const APP_STORAGE_CACHE = '/storage/cache';

app/views/console/comps/header.phtml

@@ -4,7 +4,7 @@
         <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
     </a>
 
-    <div class="change-project pull-start">
+    <div class="change-project pull-start desktops-only">
         <div class="list project-only margin-end-small">
             <label class="margin-bottom-no">
                 <select class="margin-bottom-no"
@@ -39,11 +39,11 @@
 
         <a href="/console/account" class="account pull-end clear">
             <img src="" data-ls-attrs="src={{account|gravatar}}" alt="User Avatar" class="avatar margin-start pull-end" />
-            <span class="name pull-end" data-ls-bind="{{account.name}}"></span>
+            <span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
         </a>
     </div>
     
-    <div class="pull-end margin-end switch-theme">
+    <div class="pull-end margin-end switch-theme desktops-only">
         <button data-general-theme
             data-analytics-event="click"
             data-analytics-category="console/header"
@@ -53,15 +53,18 @@
         </button>
     </div>
 
-    <nav class="project-only">
+    <nav class="project-only" data-ls-ui-open="" data-button-class="round icon-btn phones-only tablets-only" data-button-icon="icon-dot-3">
         <a class="logo" href="/console"
             data-analytics-event="click"
             data-analytics-category="console/navigation"
             data-analytics-label="Logo Link">
-            <img src="/images/appwrite-nav.svg" alt="Appwrite Logo" />
+            <img src="/images/appwrite-nav.svg" alt="Appwrite Logo" class="nav" />
+
+            <img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="top force-light" />
+            <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="top force-dark" />
         </a>
 
-        <div data-ui-highlight class="project-only container">
+        <div data-ui-highlight class="container">
 
             <ul class="links">
                 <li>
@@ -111,12 +114,12 @@
 
             <ul class="links">
                 <li>
-                    <a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
+                    <a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"
                         data-analytics-event="click"
                         data-analytics-category="console/navigation"
-                        data-analytics-label="API Keys Link">
-                        <i class="icon-key-inv"></i>
-                        API Keys
+                        data-analytics-label="Tasks Link">
+                        <i class="icon-clock"></i>
+                        Tasks
                     </a>
                 </li>
                 <li>
@@ -129,18 +132,18 @@
                     </a>
                 </li>
                 <li>
-                    <a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"
+                    <a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
                         data-analytics-event="click"
                         data-analytics-category="console/navigation"
-                        data-analytics-label="Tasks Link">
-                        <i class="icon-clock"></i>
-                        Tasks
+                        data-analytics-label="API Keys Link">
+                        <i class="icon-key-inv"></i>
+                        API Keys
                     </a>
                 </li>
             </ul>
         </div>
 
-        <ul class="links bottom project-only">
+        <ul class="links bottom">
             <li>
                 <a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
                     data-analytics-event="click"
@@ -152,7 +155,7 @@
     </nav>
 </header>
 
-<div class="list pull-start project-only"
+<div class=""
     data-service="projects.list"
     data-event="load,projects.update"
     data-name="projects"

app/views/console/settings/index.phtml

@@ -191,7 +191,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
                                         <th width="200">Domain Name</th>
                                         <th width="160">TLS</th>
                                         <th></th>
-                                        <th width="60"></th>
+                                        <th width="40"></th>
                                     </tr>
                                 </thead>
                                 <tbody data-ls-loop="console-domains" data-ls-as="domain">

public/styles/forms.less

@@ -269,6 +269,12 @@ select {
       border-color: #b3d7fd;
     }
   }
+
+  &:-webkit-autofill::first-line {
+    font-weight: 300;
+    .text-size-normal;
+  }
+
 }
 
 input[type=email],

public/styles/scopes/console.less

@@ -1,12 +1,11 @@
 .console {
-  height: 100%;
   width: 100%;
   padding: 0;
   overflow: auto;
+  overscroll-behavior: none;
   
   body {
     position: relative;
-    height: ~"calc(100% - 70px)";
     width: ~"calc(100% - 320px)";
     overflow: auto;
     padding-top: 70px;
@@ -83,7 +82,7 @@
     .logo {
       display: none;
       border: none;
-      
+
       &:hover {
         border: none;
         opacity: .8;
@@ -726,6 +725,14 @@
     display: none;
   }
 
+  @media @desktops {
+    .logo {
+      .top {
+        display: none!important;
+      }
+    }
+  }
+
   @media @phones, @tablets {
     >header {
       width: ~"calc(100% - 30px)"!important;
@@ -734,8 +741,59 @@
 
       nav {
         width: 100%;
-        display: none!important;
-        visibility: hidden;
+        height: 70px;
+        overflow: hidden;
+
+        &.close {
+          background: transparent;
+
+          .logo {
+            .nav {
+              display: none!important;
+            }
+          }
+        }
+
+        &.open {
+          height: 100%;
+
+          .logo {
+            .top {
+              display: none!important;
+            }
+          }
+
+          .bottom {
+            display: block!important;
+          }
+
+          button {
+            color: #87a5b9;
+          }
+        }
+
+        button {
+          margin: 9px;
+          background: transparent;
+          color: var(--config-color-normal);
+  
+          &:hover, &:focus {
+            background: transparent;
+          }
+        }
+
+        .logo {
+          display: block!important;
+          position: absolute;
+          top: 0;
+          left: 50%;
+          margin: auto;
+          transform: translateX(-50%);
+        }
+
+        .bottom {
+          display: none!important;
+        }
       }
     }
 
@@ -777,16 +835,6 @@
         width: 175px;
         font-size: 14px;
       }
-
-      .switch-theme {
-        display: none;
-      }
-
-      .account {
-        .name {
-          display: none;
-        }
-      }
     }
 
     >footer {

public/styles/themes.less

@@ -144,21 +144,21 @@
   
   .theme-light {
     .force-light {
-      display: block;
+      display: block!important;
     }
   }
   
   .theme-dark {
     .force-dark {
-      display: block;
+      display: block!important;
     }
   }
   
   .force-dark {
-    display: none;
+    display: none!important;
   }
   
   .force-light {
-    display: none;
+    display: none!important;
   }