make guide section more mobile friendly on portrait

app/routes/hyperapi.py

@@ -60,11 +60,3 @@ def get_badges():
     uploads = BadgeUploads.get_for_user(get_active_user().id)
     badges = sorted(Badges.findall({'user_id': int(get_active_user().id)}), key=lambda x: x['sort_order'])
     return render_template('components/badge_editor_badges.html', uploads=uploads, badges=badges)
-
-
-@bp.get('/badge-editor/template')
-@login_required
-@account_required
-def get_badge_template():
-    uploads = BadgeUploads.get_for_user(get_active_user().id)
-    return render_template('components/badge_editor_template.html', uploads=uploads)

app/routes/users.py

@@ -394,7 +394,8 @@ def page(username):
 @login_required
 @redirect_to_own
 def settings(username):
-    return render_template('users/settings.html')
+    uploads = BadgeUploads.get_for_user(get_active_user().id)
+    return render_template('users/settings.html', uploads=uploads)
 
 
 @bp.post('/<username>/settings')

app/templates/common/macros.html

@@ -331,8 +331,8 @@
 {% else %}
   {% set selected_href = defaults[0].file_path %}
 {% endif %}
-<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorBadge" data-listeners="click input submit change">
+<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorBadge" data-listeners="click input submit change" data-receive="deleteBadge">
-<div class="settings-badge-container" data-receive="deleteBadge">
+<div class="settings-badge-container">
   <div class="settings-badge-select">
     <select data-send="badgeUpdatePreview badgeToggleFilePicker" name="badge_choice[]" required>
       <optgroup label="Default">

app/templates/components/badge_editor_badges.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import badge_editor_single with context %}
+{% from 'common/macros.html' import badge_editor_single %}
 {% for badge in badges %}
   {{ badge_editor_single(options=uploads, selected=badge.upload, badge=badge) }}
 {% endfor %}

app/templates/components/badge_editor_template.html

@@ -1,2 +1,2 @@
-{% from 'common/macros.html' import badge_editor_single with context %}
+{% from 'common/macros.html' import badge_editor_single %}
 {{ badge_editor_single(options=uploads) }}

app/templates/users/settings.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import babycode_editor_component %}
+{% from 'common/macros.html' import babycode_editor_component, badge_editor_single %}
 {% extends 'base.html' %}
 {% block title %}settings{% endblock %}
 {% block content %}
@@ -68,4 +68,8 @@
     <a class="linkbutton critical" href="{{ url_for('users.delete_page', username=active_user.username) }}">Delete account</a>
   </div>
 </div>
+
+<template id='badge-editor-template'>
+{{ badge_editor_single(options=uploads) }}
+</template>
 {% endblock %}

data/static/css/style.css

@@ -60,11 +60,6 @@ body {
   color: black;
 }
 
-@media (orientation: portrait) {
-  body {
-    margin: 20px 0;
-  }
-}
 :where(a:link) {
   color: #c11c1c;
 }
@@ -1539,3 +1534,19 @@ img.badge-button {
   background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097);
   color: black;
 }
+
+@media (orientation: portrait) {
+  body {
+    margin: 20px 0;
+  }
+  .guide-container {
+    grid-template-areas: "guide-toc" "guide-topics";
+    grid-template-columns: unset;
+  }
+  .guide-toc {
+    position: unset;
+  }
+  .guide-section {
+    padding-right: 20px;
+  }
+}

data/static/css/theme-otomotone.css

@@ -60,11 +60,6 @@ body {
   color: #e6e6e6;
 }
 
-@media (orientation: portrait) {
-  body {
-    margin: 20px 0;
-  }
-}
 :where(a:link) {
   color: #e87fe1;
 }
@@ -1540,6 +1535,21 @@ img.badge-button {
   color: black;
 }
 
+@media (orientation: portrait) {
+  body {
+    margin: 20px 0;
+  }
+  .guide-container {
+    grid-template-areas: "guide-toc" "guide-topics";
+    grid-template-columns: unset;
+  }
+  .guide-toc {
+    position: unset;
+  }
+  .guide-section {
+    padding-right: 20px;
+  }
+}
 #topnav {
   margin-bottom: 10px;
   border: 10px solid rgb(40, 40, 40);

data/static/css/theme-peachy.css

@@ -60,11 +60,6 @@ body {
   color: black;
 }
 
-@media (orientation: portrait) {
-  body {
-    margin: 12px 0;
-  }
-}
 :where(a:link) {
   color: black;
 }
@@ -1540,6 +1535,21 @@ img.badge-button {
   color: black;
 }
 
+@media (orientation: portrait) {
+  body {
+    margin: 12px 0;
+  }
+  .guide-container {
+    grid-template-areas: "guide-toc" "guide-topics";
+    grid-template-columns: unset;
+  }
+  .guide-toc {
+    position: unset;
+  }
+  .guide-section {
+    padding-right: 12px;
+  }
+}
 #topnav {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;

data/static/css/theme-snow-white.css

@@ -60,11 +60,6 @@ body {
   color: black;
 }
 
-@media (orientation: portrait) {
-  body {
-    margin: 20px 0;
-  }
-}
 :where(a:link) {
   color: #711579;
 }
@@ -1539,3 +1534,19 @@ img.badge-button {
   background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097);
   color: black;
 }
+
+@media (orientation: portrait) {
+  body {
+    margin: 20px 0;
+  }
+  .guide-container {
+    grid-template-areas: "guide-toc" "guide-topics";
+    grid-template-columns: unset;
+  }
+  .guide-toc {
+    position: unset;
+  }
+  .guide-section {
+    padding-right: 20px;
+  }
+}

data/static/js/babycode-editor.js

@@ -23,7 +23,6 @@
 
   if (inThread()) {
     const form = ta.closest('.post-edit-form');
-    console.log(ta.closest('.post-edit-form'));
     if (form){
       form.addEventListener("submit", () => {
         localStorage.removeItem(window.location.pathname);

data/static/js/bitties/pyrom-bitty.js

@@ -287,11 +287,8 @@ export class BadgeEditorForm {
       return;
     }
     if (this.#badgeTemplate === undefined){
-      const badge = await this.api.getHTML(`${badgeEditorEndpoint}/template`)
+      this.#badgeTemplate = document.getElementById('badge-editor-template').content;
-      if (!badge.value){
+      console.log(this.#badgeTemplate);
-        return;
-      }
-      this.#badgeTemplate= badge.value;
     }
     el.replaceChildren();
     const addButton = `<button data-disable-if-max="1" data-receive="updateBadgeCount" DISABLE_IF_MAX type="button" data-send="addBadge">Add badge</button>`;

sass/_default.scss

@@ -178,13 +178,6 @@ body {
   color: $DEFAULT_FONT_COLOR;
 }
 
-$body_portrait_margin: $BIG_PADDING $ZERO_PADDING !default;
-@media (orientation: portrait) {
-  body {
-    margin: $body_portrait_margin;
-  }
-}
-
 $link_color: #c11c1c !default;
 $link_color_visited: #730c0c !default;
 :where(a:link){
@@ -1536,3 +1529,26 @@ $rss_button_font_color_active: black !default;
     color: $rss_button_font_color_active;
   }
 }
+
+@media (orientation: portrait) {
+  $body_portrait_margin: $BIG_PADDING $ZERO_PADDING !default;
+  body {
+    margin: $body_portrait_margin;
+  }
+
+  .guide-container {
+    grid-template-areas:
+    "guide-toc"
+    "guide-topics";
+    grid-template-columns: unset;
+  }
+
+  .guide-toc {
+    position: unset;
+  }
+
+  $guide_section_padding_right_portrait: $BIG_PADDING !default;
+  .guide-section {
+    padding-right: $guide_section_padding_right_portrait;
+  }
+}