Merge pull request #33 from live-codes/ui-enhancements

toolbar adjustments

src/livecodes/UI/login.ts

@@ -61,9 +61,10 @@ export const displayLoggedIn = (user: User) => {
     loginLink.style.display = 'none';
   }
   const logOutLink = getLogoutLink();
-  if (logOutLink) {
+  const logOutText = logOutLink?.querySelector('span');
+  if (logOutLink && logOutText) {
     const displayName = user.displayName || user.username;
-    logOutLink.innerHTML = window.deps.translateString('login.logout', 'Log out');
+    logOutText.innerHTML = window.deps.translateString('login.logout', 'Log out');
     logOutLink.classList.add('hint--bottom');
     logOutLink.dataset.hint = window.deps.translateString(
       'login.loginAs',
@@ -82,8 +83,9 @@ export const displayLoggedOut = () => {
     loginLink.style.display = 'flex';
   }
   const logOutLink = getLogoutLink();
-  if (logOutLink) {
-    logOutLink.innerHTML = window.deps.translateString('login.logout', 'Log out');
+  const logOutText = logOutLink?.querySelector('span');
+  if (logOutLink && logOutText) {
+    logOutText.innerHTML = window.deps.translateString('login.logout', 'Log out');
     logOutLink.style.display = 'none';
   }
 };

src/livecodes/html/app.html

@@ -96,7 +96,7 @@
             <a
               href="javascript:void(0)"
               id="app-menu-button-i18n"
-              class="button hint--bottom"
+              class="button hint--right"
               data-hint="UI Language"
               data-i18n="app.i18nButton.hint"
               data-i18n-prop="data-hint"
@@ -107,7 +107,7 @@
             <a
               href="javascript:void(0)"
               id="light-theme-button"
-              class="button hint--bottom"
+              class="button hint--right"
               data-hint="Change Theme"
               data-i18n="app.changeTheme.hint"
               data-i18n-prop="data-hint"
@@ -117,7 +117,7 @@
             <a
               href="javascript:void(0)"
               id="dark-theme-button"
-              class="button hint--bottom"
+              class="button hint--right"
               data-hint="Change Theme"
               data-i18n="app.changeTheme.hint"
               data-i18n-prop="data-hint"
@@ -188,7 +188,7 @@
           <a
             href="#"
             id="logout-link"
-            class="menu hint--bottom"
+            class="menu hint--bottom-left"
             aria-label="Logout"
             style="display: none"
           >

src/livecodes/styles/app.scss

@@ -675,6 +675,10 @@ a#result-button {
       display: none;
     }
 
+    #project-title {
+      display: none;
+    }
+
     #login-link,
     #logout-link {
       min-width: var(--s24);
@@ -738,60 +742,58 @@ a#result-button {
 
 @media only screen and (max-width: 480px) and (orientation: portrait) {
   #toolbar {
+    align-items: flex-start;
     display: flex;
-    flex-direction: unset;
-    flex-wrap: wrap;
     height: calc(var(--toolbar-height) * 2);
-    width: 100%;
 
-    .dropdown-menu.submenu {
-      left: 44%;
+    .toolbar-render {
+      justify-content: space-between;
+      place-items: center;
     }
 
-    #light-theme-button,
-    #dark-theme-button {
-      display: none;
-    }
-  }
+    #select-editor {
+      inset-inline-start: 0; /* left */
+      max-width: unset;
+      position: absolute;
+      top: var(--toolbar-height);
 
-  #toolbar > .toolbar-app,
-  #toolbar > .toolbar-render {
-    display: flex;
-    flex: 1;
-    flex-basis: 100%;
-    flex-direction: row;
-    flex-grow: 1;
-  }
+      .editor-title > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
 
-  #toolbar > .toolbar-render {
-    justify-content: space-between;
-    place-items: center;
-  }
+    .menu-scroller-markup,
+    .menu-scroller-style,
+    .menu-scroller-script {
+      max-width: 98vw;
+      position: fixed;
+      top: calc(var(--toolbar-height) * 2);
+      transform: translateX(-1vw);
+    }
 
-  #toolbar #select-editor {
-    max-width: unset;
+    .dropdown-menu-script {
+      column-count: 2;
+    }
 
-    .editor-title > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .dropdown-menu.submenu {
+      left: 44%;
     }
-  }
 
-  #toolbar #login-link,
-  #toolbar #logout-link {
-    height: 100%;
-  }
+    #light-theme-button,
+    #dark-theme-button {
+      display: none;
+    }
 
-  #select-editor {
-    ul li.editor-title {
-      top: 0;
-      width: 74px;
+    #login-link,
+    #logout-link {
+      height: 100%;
     }
   }
 
-  #toolbar #project-title {
-    height: var(--s24);
+  #editor-container {
+    height: calc(100% - var(--toolbar-height) * 2);
   }
 
   #modal {
@@ -1466,6 +1468,10 @@ li.editor-title {
         }
       }
 
+      #select-editor {
+        position: unset;
+      }
+
       .language-menu-button {
         display: none !important;
       }
@@ -1510,27 +1516,19 @@ li.editor-title {
 
   @media only screen and (max-width: 480px) and (orientation: portrait) {
     #toolbar {
-      display: flex;
-      flex-direction: unset;
-      flex-wrap: nowrap;
-      height: var(--toolbar-height);
-      width: 100%;
+      .toolbar-app,
+      .toolbar-render {
+        height: calc(var(--toolbar-height));
+      }
+
+      .editor-title {
+        width: 73px;
+      }
 
       #app-menu-button-i18n,
       #light-theme-button,
       #dark-theme-button {
-        display: none;
-      }
-
-      #select-editor {
-        height: var(--toolbar-height);
-        margin: 0;
-
-        li.editor-title {
-          height: 32px;
-          top: 0;
-          width: 74px;
-        }
+        display: none !important;
       }
     }
   }

src/livecodes/styles/inc-menu.scss

@@ -18,8 +18,6 @@
 }
 
 #app-menu-container-i18n {
-  // left: unset;
-  // right: 15%;
   left: 15rem;
   width: 250px;
 }
@@ -38,17 +36,10 @@
   }
 
   #app-menu-container-i18n {
-    // right: 10%;
     left: 8em;
   }
 }
 
-@media only screen and (max-width: 768px) {
-  #app-menu-container-i18n {
-    // right: 5%;
-  }
-}
-
 [id^='app-menu-button-'] {
   &:focus + .menu-scroller,
   &:active + .menu-scroller,
@@ -389,28 +380,6 @@ i.arrow {
   }
 }
 
-@media only screen and (max-width: 480px) and (orientation: portrait) {
-  #toolbar {
-    .menu-scroller-markup,
-    .menu-scroller-style,
-    .menu-scroller-script {
-      max-width: 98vw;
-      position: fixed;
-      transform: translateX(-1vw);
-    }
-
-    .dropdown-menu-script {
-      column-count: 2;
-    }
-
-    #app-menu-button-i18n,
-    #light-theme-button,
-    #dark-theme-button {
-      display: none !important;
-    }
-  }
-}
-
 .switch {
   cursor: pointer;
   display: inherit;