From 2942a8f9d0a6149c867ac9ba87b87a5fdffd3433 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Wed, 20 Mar 2019 19:01:30 -0600
Subject: [PATCH] Move user bio to a collapsable <details> in main

Probably still needs some tweaking, but this seems a lot better than
having it in the cramped space in the sidebar.
---
 tildes/scss/modules/_user.scss      | 33 +++++++++++++++++++++++++++++
 tildes/scss/styles.scss             |  1 +
 tildes/scss/themes/_theme_base.scss |  9 ++++++++
 tildes/tildes/templates/user.jinja2 | 14 ++++++------
 4 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 tildes/scss/modules/_user.scss

diff --git a/tildes/scss/modules/_user.scss b/tildes/scss/modules/_user.scss
new file mode 100644
index 0000000..a59dc22
--- /dev/null
+++ b/tildes/scss/modules/_user.scss
@@ -0,0 +1,33 @@
+// Copyright (c) 2019 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.user-bio {
+  @extend %links-text;
+  @extend %lists-text;
+
+  border: 1px solid;
+  padding: 0.4rem;
+  margin-bottom: 1rem;
+  font-size: 0.6rem;
+
+  summary::after {
+    font-size: 0.6rem;
+    font-style: italic;
+    content: "Hide bio";
+    display: none;
+  }
+
+  &[open] {
+    font-size: 0.8rem;
+
+    summary {
+      &::after {
+        display: inline;
+      }
+
+      span {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss
index c197317..665d7f7 100644
--- a/tildes/scss/styles.scss
+++ b/tildes/scss/styles.scss
@@ -33,6 +33,7 @@
 @import 'modules/time';
 @import 'modules/toast';
 @import 'modules/topic';
+@import 'modules/user';
 
 // Note: if you add a new theme, you may also want to add a new theme-color
 // meta tag inside the base.jinja2 template, so mobile browsers can match
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index dcbedfe..2d1dea3 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -470,6 +470,15 @@
     }
   }
 
+  .user-bio {
+    border-color: map-get($theme, "border");
+    background-color: map-get($theme, "background-secondary");
+
+    &[open] {
+      color: map-get($theme, "foreground-highlight");
+    }
+  }
+
   .is-comment-deleted, .is-comment-removed {
     color: map-get($theme, "foreground-secondary");
   }
diff --git a/tildes/tildes/templates/user.jinja2 b/tildes/tildes/templates/user.jinja2
index 9a75569..194ca47 100644
--- a/tildes/tildes/templates/user.jinja2
+++ b/tildes/tildes/templates/user.jinja2
@@ -48,6 +48,13 @@
     </div>
   {% endif %}
 
+  {% if user.bio_rendered_html %}
+    <details class="user-bio">
+      <summary><span>View {{ user.username }}'s bio</span></summary>
+      {{ user.bio_rendered_html|safe }}
+    </details>
+  {% endif %}
+
   {% if posts %}
     {% if request.has_permission("view_history", user) and posts.has_prev_page %}
       <div class="pagination">
@@ -120,13 +127,6 @@
 <dl>
   <dt>Registered</dt>
   <dd>{{ user.created_time.strftime('%B %-d, %Y') }}</dd>
-
-  {% if user.bio_rendered_html %}
-    <div class="user-bio">
-      <dt>Bio</dt>
-      <dd>{{ user.bio_rendered_html|safe }}</dd>
-    </div>
-  {% endif %}
 </dl>
 
 {% if request.has_permission('message', user) %}