Add basic user browsing page

- Needs pagination
- Needs some style fixing
- Somewhat empty, fixes up next

routes.py

@@ -18,7 +18,8 @@ def about():
 
 @blueprint.route('/users')
 def browse():
-    return render_template('pages/browse.html')
+    users = User.query.all()
+    return render_template('pages/browse.html', users=users)
 
 
 @blueprint.route('/feed')

static/styles.css

@@ -136,10 +136,12 @@ form button {
   padding-left: 1em;
   font-size: 0.9em;
 }
-.profile-title .profile-timestamp.offline {
+
+.offline {
   color: dimgrey;
 }
-.profile-title .profile-timestamp.online {
+
+.online {
   color: #0C8C00;
   font-weight: 600;
 }
@@ -174,4 +176,26 @@ form button {
   font-size: 0.9em;
 }
 
+.user-list {
+  white-space: nowrap;
+}
+.user-list .user-box {
+  width: 50%;
+  margin: 0.3em;
+  padding: 0.5em;
+  border: 1px solid darkblue;
+}
+.user-list .user-box .user-box-timestamp {
+  font-size: 0.8em;
+}
+.user-list .user-box .user-box-username {
+  font-weight: bold;
+}
+.user-list .user-box .user-box-img {
+  margin-top: 0.3em;
+  max-height: 3em;
+  max-width: 3em;
+  filter: drop-shadow(5px 7px 6px rgba(0, 0, 0, 0.2));
+}
+
 /*# sourceMappingURL=styles.css.map */

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;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGJ;EACE;EACA;;AAEA;EACE;EACA;EACA","file":"styles.css"}
+{"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;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"styles.css"}

static/styles.scss

@@ -141,52 +141,52 @@ form {
   }
 }
 
-  .profile-title {
+.profile-title {
-    display: block;
+  display: block;
-    border-bottom: 1px solid grey;
+  border-bottom: 1px solid grey;
-    width: 100%;
+  width: 100%;
 
-    .profile-username {
+  .profile-username {
-      font-size: 1.5em;
+    font-size: 1.5em;
-      font-weight: bold;
+    font-weight: bold;
-    }
-
-    .profile-timestamp {
-      padding-left: 1em;
-      font-size: 0.9em;
-
-      &.offline {
-        color: dimgrey;
-      }
-
-      &.online {
-        color: #0C8C00;
-        font-weight: 600;
-      }
-    }
   }
 
-  .profile-left {
+  .profile-timestamp {
-    padding: 0.8em;
+    padding-left: 1em;
-    width: fit-content;
+    font-size: 0.9em;
-    border-right: 1px solid grey;
+  }
+}
 
-    .profile-details {
+.offline {
-      font-size: 0.7em;
+  color: dimgrey;
-      text-align: center;
+}
-    }
 
-    .profile-picture {
+.online {
-      margin: 0.8em;
+  color: #0C8C00;
-      max-width: 10em;
+  font-weight: 600;
-      max-height: 10em;
+}
-      filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.1));;
+
-    }
+.profile-left {
+  padding: 0.8em;
+  width: fit-content;
+  border-right: 1px solid grey;
+
+  .profile-details {
+    font-size: 0.7em;
+    text-align: center;
   }
 
-  .profile-bio, .profile-left {
+  .profile-picture {
-    display: inline-block;
+    margin: 0.8em;
+    max-width: 10em;
+    max-height: 10em;
+    filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.1));;
   }
+}
+
+.profile-bio, .profile-left {
+  display: inline-block;
+}
 
 .profile-lower {
   display: flex;
@@ -198,3 +198,29 @@ form {
     font-size: 0.9em;
   }
 }
+
+.user-list {
+  white-space: nowrap;
+
+  .user-box {
+    width: 50%;
+    margin: 0.3em;
+    padding: 0.5em;
+    border: 1px solid darkblue;
+
+    .user-box-timestamp {
+      font-size: 0.8em;
+    }
+
+    .user-box-username {
+      font-weight: bold;
+    }
+
+    .user-box-img {
+      margin-top: 0.3em;
+      max-height: 3em;
+      max-width: 3em;
+      filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.2));;
+    }
+  }
+}

templates/pages/browse.html

@@ -1 +1,25 @@
 {% extends 'layouts/index.html' %}
+
+{% block content %}
+    <div class="content-inner">
+        <div class="user-list">
+            {% for user in users %}
+                <div class="user-box">
+                    <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 %}
+                    <br>
+                    <img class="user-box-img" src="{{ url_for('static', filename='default_photo.png') }}"
+                         alt="{{ user.username }}'s Profile Picture">
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock %}

templates/pages/user.html

@@ -3,7 +3,7 @@
 {% block content %}
     <div class="content-inner">
         <div class="profile-title">
-            <span class="profile-username">{{ user.username }}</span>
+            <span class="profile-username">{{ user.name }}</span>
             {% with seen_text = user.get_last_seen() %}
                 {% if seen_text == 'Online now!' %}
                     <span class="profile-timestamp online">{{ seen_text }}</span>
@@ -17,8 +17,8 @@
                 <img class="profile-picture" src="{{ url_for('static', filename='default_photo.png') }}" alt="{{ user.username }}'s Profile Picture">
                 <div class="profile-details">
                     Registered {{ user.get_registration_delta() }} ago<br>
-                    67 likes<br>
+                    0 likes<br>
-                    14 posts<br>
+                    0 posts<br>
                 </div>
             </div>
             <div class="profile-bio">