Widget: moving settings bar to the top

Also, moving tabs to the bottom.
ada-ukraine · Sep 8, 2024 · b113cb3 · b113cb3
1 parent cd77a0c
commit b113cb3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/frontend/sphinx/widget/templates/widget.html b/frontend/sphinx/widget/templates/widget.html
@@ -11,19 +11,6 @@
     {% for f in w.files %}
         <div class="file" data-basename="{{ f.basename }}">{{ f.content }}</div>
     {% endfor %}
-    <div id="{{ w.id }}.tab" class="tab">
-        {% for t in w.files %}
-            <button id="{{ w.id }}.tab.{{ t.basename }}" class="tab-links">{{ t.basename }}</button>
-        {% endfor %}
-    </div>
-    <div id="{{ w.id }}.editors">
-        <div id="{{ w.id }}.editors.editor" class="editor-container"></div>
-        <div id="{{ w.id }}.editors.non-tabbed-editor" class="non-tabbed-editor-container" hidden>
-            {% for t in w.files %}
-                <div id="{{ w.id }}.editors.non-tabbed-editor.{{ t.basename }}" class="non-tabbed-links"></div>
-            {% endfor %}
-        </div>
-    </div>
     <div id="{{ w.id }}.settings-bar" class="settings-bar">
         <div class="dropdown-container settingsbar-item">
             <button class="dropdown-btn">
@@ -78,6 +65,19 @@
             Download
         </button>
     </div>
+    <div id="{{ w.id }}.editors">
+        <div id="{{ w.id }}.editors.editor" class="editor-container"></div>
+        <div id="{{ w.id }}.editors.non-tabbed-editor" class="non-tabbed-editor-container" hidden>
+            {% for t in w.files %}
+                <div id="{{ w.id }}.editors.non-tabbed-editor.{{ t.basename }}" class="non-tabbed-links"></div>
+            {% endfor %}
+        </div>
+    </div>
+    <div id="{{ w.id }}.tab" class="tab">
+        {% for t in w.files %}
+            <button id="{{ w.id }}.tab.{{ t.basename }}" class="tab-links">{{ t.basename }}</button>
+        {% endfor %}
+    </div>
     <div class="row output-row">
         <div id="{{ w.id }}.button-group" class="col-md-3 button-group">
             {% for b in w.button_group %}

diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss
@@ -160,6 +160,8 @@ pre.widget {
     flex-wrap: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+    margin-bottom: 10px;
+
     button {
         background-color: inherit;
         float: left;
@@ -196,7 +198,6 @@ pre.widget {
     padding-left: 13px;
     display: block;
     margin-top: 0px;
-    margin-bottom: 10px;
 
     button {
         background-color: transparent;