diff --git a/routes.py b/routes.py index 0977258..90169d4 100644 --- a/routes.py +++ b/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') diff --git a/static/styles.css b/static/styles.css index 7a3e4eb..312af53 100644 --- a/static/styles.css +++ b/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 */ diff --git a/static/styles.css.map b/static/styles.css.map index 6fb5324..b3f5503 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;;;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"} \ 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;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 64cec79..297a9e9 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -141,52 +141,52 @@ form { } } - .profile-title { - display: block; - border-bottom: 1px solid grey; - width: 100%; +.profile-title { + display: block; + border-bottom: 1px solid grey; + width: 100%; - .profile-username { - font-size: 1.5em; - font-weight: bold; - } - - .profile-timestamp { - padding-left: 1em; - font-size: 0.9em; - - &.offline { - color: dimgrey; - } - - &.online { - color: #0C8C00; - font-weight: 600; - } - } + .profile-username { + font-size: 1.5em; + font-weight: bold; } - .profile-left { - padding: 0.8em; - width: fit-content; - border-right: 1px solid grey; + .profile-timestamp { + padding-left: 1em; + font-size: 0.9em; + } +} - .profile-details { - font-size: 0.7em; - text-align: center; - } +.offline { + color: dimgrey; +} - .profile-picture { - margin: 0.8em; - max-width: 10em; - max-height: 10em; - filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.1));; - } +.online { + color: #0C8C00; + font-weight: 600; +} + +.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 { - display: inline-block; + .profile-picture { + 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));; + } + } +} diff --git a/templates/pages/browse.html b/templates/pages/browse.html index 3fd01ed..4d7ab95 100644 --- a/templates/pages/browse.html +++ b/templates/pages/browse.html @@ -1 +1,25 @@ {% extends 'layouts/index.html' %} + +{% block content %} +
+