Fixed the mobile view header to look better (#297)

Co-authored-by: Nedas <nedas.surkus@tabulareditor.com>

Author: Metallist1

templates/tabulareditor/layout/_master.tmpl

@@ -99,17 +99,24 @@
       <div id="hs_cos_wrapper_global-header-dndarea-module-2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
         <div class="siteheader-module_wrp">
           <nav class="siteheader-module navbar siteheader-module--194387751113 " id="main-navigation" aria-label="Primary">
-            <button class="siteheader-module__mobile-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation">
-              <svg xmlns="http://www.w3.org/2000/svg" class="siteheader-module__mobile-toggler-img" fill="currentColor" viewBox="0 0 16 16">
-                <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path>
-              </svg>
-            </button>
-            <div class="siteheader-module__logo">
-              <div class="header-logo">
-                <a class="header-logo__link" href="{{_appLogoUrl}}{{^_appLogoUrl}}{{_rel}}index.html{{/_appLogoUrl}}">
-                  <img class="header-logo__image" src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}" height="50" width="263">
-                </a>
+            <div class="siteheader-module__topbar">
+              {{^_disableToc}}
+              <button class="siteheader-module__toc-toggler d-md-none" id="toc-toggler-header"
+                  type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas"
+                  aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
+                <i class="bi bi-list"></i>
+              </button>
+              {{/_disableToc}}
+              <div class="siteheader-module__logo">
+                <div class="header-logo">
+                  <a class="header-logo__link" href="{{_appLogoUrl}}{{^_appLogoUrl}}{{_rel}}index.html{{/_appLogoUrl}}">
+                    <img class="header-logo__image" src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}" height="50" width="263">
+                  </a>
+                </div>
               </div>
+              <button class="siteheader-module__mobile-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation">
+                <i class="bi bi-three-dots-vertical"></i>
+              </button>
             </div>
             <div class="siteheader-module__navbar collapse navbar-collapse" id="mainNavigation">
               <div class="siteheader-module__main-nav">
@@ -209,13 +216,6 @@
 
       <div class="content">
         <div class="actionbar" id="toc-actionbar">
-          {{^_disableToc}}
-          <button class="btn btn-lg border-0 d-md-none"
-              type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas"
-              aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
-            <i class="bi bi-list"></i>
-          </button>
-          {{/_disableToc}}
         </div>
 
         <article id="article" data-uid="{{uid}}">
@@ -253,7 +253,7 @@
 
           {{! meta applies to }}
           {{#applies_to}}
-          <div class="applies-to-div"><strong>Applies to: </strong>
+          <div class="applies-to-div"><strong data-ui-string="appliesTo">Applies to: </strong>
             <ul class="applies-to">
             {{#products}}
               <li class="applies-to-product{{#note}} applies-to-tooltip{{/note}}">
@@ -270,7 +270,7 @@
                 {{/editions}}
                 {{#since}}
                   <span class="version-info">
-                    ({{#until}}Available in {{since}}–{{until}}{{/until}}{{^until}}Available since {{since}}{{/until}})
+                    ({{#until}}<span data-ui-string="availableIn">Available in</span> {{since}}–{{until}}{{/until}}{{^until}}<span data-ui-string="availableSince">Available since</span> {{since}}{{/until}})
                   </span>
                 {{/since}}
                 {{^editions}}