Improve layout on smaller screens.

liffiton · Jul 19, 2024 · a3482f3 · a3482f3
1 parent b0587de
commit a3482f3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/codehelp/templates/landing.html b/src/codehelp/templates/landing.html
@@ -114,11 +114,11 @@ <h1 class="title mb-0 mr-6">
                 Examples:
               </h1>
               <div>
-                <a class="button is-link is-light" @click="cur = (cur === 0) ? examples.length-1 : cur-1">&lt;</a>
+                <a role="button" class="button is-link is-light" @click="cur = (cur === 0) ? examples.length-1 : cur-1">&lt;</a>
                 <template x-for="i in examples.length">
-                  <a x-text="i" class="button ml-2 is-link is-light" :style="{'border-bottom': (cur === i-1) && '3px solid #60c'}" @click="cur = i-1"></a>
+                  <a role="button" x-text="i" class="button ml-1 is-link is-light" :style="{'border-bottom': (cur === i-1) && '4px solid #60c'}" @click="cur = i-1"></a>
                 </template>
-                <a class="button ml-2 is-link is-light" @click="cur = (cur+1) % examples.length">&gt;</a>
+                <a role="button" class="button ml-1 is-link is-light" @click="cur = (cur+1) % examples.length">&gt;</a>
               </div>
             </div>
             <hr>

diff --git a/src/gened/templates/base.html b/src/gened/templates/base.html
@@ -122,6 +122,14 @@
           <svg aria-hidden="true" style="height: 1.5em; margin-right: 0.2em;" viewBox="0 0 14 10"><use href="#svg_app_logo" /></svg>
           {{ config['APPLICATION_TITLE'] }}
         </a>
+        <a role="button" class="navbar-burger" style="height: inherit;" aria-label="menu" aria-expanded="false" x-bind:class="menu_open ? 'is-active' : ''" x-on:click="menu_open = ! menu_open">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+      <div class="navbar-menu" x-bind:class="menu_open ? 'is-active' : ''">
+        <div class="navbar-start">
         {% if auth['user_id'] %}
           <a class="navbar-item has-text-success" href="{{ url_for('helper.help_form') }}">
             <div class="icon-text">
@@ -132,14 +140,6 @@
             </div>
           </a>
         {% endif %}
-        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" x-bind:class="menu_open ? 'is-active' : ''" x-on:click="menu_open = ! menu_open">
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-      <div class="navbar-menu" x-bind:class="menu_open ? 'is-active' : ''">
-        <div class="navbar-start">
         {% for nav_item_template in config['NAVBAR_ITEM_TEMPLATES'] %}
           {% include nav_item_template %}
         {% endfor %}
@@ -186,18 +186,18 @@
             {% if auth['role'] == 'instructor' %}
               <a class="navbar-item is-size-6 has-text-success" href="/instructor/config">
                 <div class="icon-text">
-                  <span class="icon">
+                  <span class="icon" title="Configure Class">
                     <svg aria-hidden="true"><use href="#svg_config" /></svg>
                   </span>
-                  <span>Configure Class</span>
+                  <span class="is-hidden-desktop-only">Configure Class</span>
                 </div>
               </a>
               <a class="navbar-item is-size-6 has-text-warning" href="/instructor/">
                 <div class="icon-text">
-                  <span class="icon">
+                  <span class="icon" title="Instructor View">
                     <svg aria-hidden="true"><use href="#svg_table_grid" /></svg>
                   </span>
-                  <span>Instructor View</span>
+                  <span class="is-hidden-desktop-only">Instructor View</span>
                 </div>
               </a>
             {% endif %}