From beceed00957eb482be3790e5551d27b8fffcf93e Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 27 Mar 2022 05:06:40 -0500
Subject: [PATCH] Properly split user browsing page into two columns

---
 static/styles.css           |  3 ++-
 static/styles.css.map       |  2 +-
 static/styles.scss          |  6 +++++-
 templates/pages/browse.html | 38 ++++++++++++++++++++-----------------
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 9c3275e..3cc4237 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -176,8 +176,9 @@ form button {
   font-size: 0.9em;
 }
 
-.user-list {
+.user-list .user-list-row {
   white-space: nowrap;
+  display: flex;
 }
 .user-list .user-box {
   width: 50%;
diff --git a/static/styles.css.map b/static/styles.css.map
index ffa4190..42ef8eb 100644
--- a/static/styles.css.map
+++ b/static/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/static/styles.scss b/static/styles.scss
index ad69a8f..2042975 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -200,7 +200,11 @@ form {
 }
 
 .user-list {
-  white-space: nowrap;
+
+  .user-list-row {
+    white-space: nowrap;
+    display: flex;
+  }
 
   .user-box {
     width: 50%;
diff --git a/templates/pages/browse.html b/templates/pages/browse.html
index 76ff956..78a93b2 100644
--- a/templates/pages/browse.html
+++ b/templates/pages/browse.html
@@ -3,28 +3,32 @@
 {% block content %}
     <div class="content-inner">
         <div class="user-list">
-            {% for user in users %}
-                <div class="user-box">
-                    <div class="user-box-top">
+            {% for user_row in users|batch(2, '&nbsp;') %}
+                <div class="user-list-row">
+                    {% for user in user_row %}
+                        <div class="user-box">
+                            <div class="user-box-top">
 
                     <span class="user-box-username">
                         <a href="{{ url_for('main.user', username=user.username) }}">{{ user.name }}</a>
                     </span>
-                        {% with seen_text = user.get_last_seen() %}
-                            {% if seen_text == 'Online now!' %}
-                                <span class="user-box-timestamp online">{{ seen_text }}</span>
-                            {% else %}
-                                <span class="user-box-timestamp offline">{{ seen_text }}</span>
-                            {% endif %}
-                        {% endwith %}
-                    </div>
-                    <div class="user-box-bottom">
-                        <div class="user-box-img">
-                            <img src="{{ url_for('static', filename='default_photo.png') }}"
-                                 alt="{{ user.username }}'s Profile Picture">
+                                {% with seen_text = user.get_last_seen() %}
+                                    {% if seen_text == 'Online now!' %}
+                                        <span class="user-box-timestamp online">{{ seen_text }}</span>
+                                    {% else %}
+                                        <span class="user-box-timestamp offline">{{ seen_text }}</span>
+                                    {% endif %}
+                                {% endwith %}
+                            </div>
+                            <div class="user-box-bottom">
+                                <div class="user-box-img">
+                                    <img src="{{ url_for('static', filename='default_photo.png') }}"
+                                         alt="{{ user.username }}'s Profile Picture">
+                                </div>
+                                <p class="user-box-minibio">{{ user.about_me }}</p>
+                            </div>
                         </div>
-                        <p class="user-box-minibio">{{ user.about_me }}</p>
-                    </div>
+                    {% endfor %}
                 </div>
             {% endfor %}
         </div>