xevion/runnerspace
1
0
Fork 0
mirror of https://github.com/Xevion/runnerspace.git synced 2025-12-16 14:13:13 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve browse page styling & data

Browse Source 
ellipsis moment
This commit is contained in:
Xevion
2022-03-27 04:14:27 -05:00
parent f999b0f9a2
commit 5338797013
4 changed files with 63 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/styles.css
View File

@@ -184,6 +184,7 @@ form button {
margin: 0.3em; margin: 0.3em;
padding: 0.5em; padding: 0.5em;
border: 1px solid darkblue; border: 1px solid darkblue;
height: 6em;
} }
.user-list .user-box .user-box-timestamp { .user-list .user-box .user-box-timestamp {
font-size: 0.8em; font-size: 0.8em;
@@ -191,7 +192,23 @@ form button {
.user-list .user-box .user-box-username { .user-list .user-box .user-box-username {
font-weight: bold; font-weight: bold;
} }
.user-list .user-box .user-box-img { .user-list .user-box .user-box-bottom {
height: 100%;
display: flex;
}
.user-list .user-box .user-box-bottom .user-box-minibio {
width: 100%;
margin: 0.4em;
margin-left: 0.6em;
display: -webkit-box;
line-height: 1.2em;
height: 3.6em;
-webkit-line-clamp: 3;
white-space: normal;
overflow: hidden;
-webkit-box-orient: vertical;
}
.user-list .user-box .user-box-img img {
margin-top: 0.3em; margin-top: 0.3em;
max-height: 3em; max-height: 3em;
max-width: 3em; max-width: 3em;

2
static/styles.css.map
View File

@@ -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;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;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;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"}

31
static/styles.scss
View File

@@ -207,6 +207,7 @@ form {
margin: 0.3em; margin: 0.3em;
padding: 0.5em; padding: 0.5em;
border: 1px solid darkblue; border: 1px solid darkblue;
height: 6em;
.user-box-timestamp { .user-box-timestamp {
font-size: 0.8em; font-size: 0.8em;
@@ -216,11 +217,33 @@ form {
font-weight: bold; font-weight: bold;
} }
.user-box-bottom {
height: 100%;
display: flex;
.user-box-minibio {
width: calc(100%);
margin: 0.4em;
margin-left: 0.6em;
display: -webkit-box;
line-height: 1.2em;
height: 3.6em;
-webkit-line-clamp: 3;
white-space: normal;
overflow: hidden;
-webkit-box-orient: vertical;
}
}
.user-box-img { .user-box-img {
margin-top: 0.3em; img {
max-height: 3em; margin-top: 0.3em;
max-width: 3em; max-height: 3em;
filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.2));; max-width: 3em;
filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.2));;
}
} }
} }
} }

27
templates/pages/browse.html
View File

@@ -5,19 +5,26 @@
<div class="user-list"> <div class="user-list">
{% for user in users %} {% for user in users %}
<div class="user-box"> <div class="user-box">
<div class="user-box-top">
<span class="user-box-username"> <span class="user-box-username">
<a href="{{ url_for('main.user', username=user.username) }}">{{ user.name }}</a> <a href="{{ url_for('main.user', username=user.username) }}">{{ user.name }}</a>
</span> </span>
{% with seen_text = user.get_last_seen() %} {% with seen_text = user.get_last_seen() %}
{% if seen_text == 'Online now!' %} {% if seen_text == 'Online now!' %}
<span class="user-box-timestamp online">{{ seen_text }}</span> <span class="user-box-timestamp online">{{ seen_text }}</span>
{% else %} {% else %}
<span class="user-box-timestamp offline">{{ seen_text }}</span> <span class="user-box-timestamp offline">{{ seen_text }}</span>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
<br> </div>
<img class="user-box-img" src="{{ url_for('static', filename='default_photo.png') }}" <div class="user-box-bottom">
alt="{{ user.username }}'s Profile Picture"> <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> </div>
{% endfor %} {% endfor %}
</div> </div>