Improve browse page styling & data

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

View File

@@ -184,6 +184,7 @@ form button {
margin: 0.3em;
padding: 0.5em;
border: 1px solid darkblue;
height: 6em;
}
.user-list .user-box .user-box-timestamp {
font-size: 0.8em;
@@ -191,7 +192,23 @@ form button {
.user-list .user-box .user-box-username {
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;
max-height: 3em;
max-width: 3em;

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"}

View File

@@ -207,6 +207,7 @@ form {
margin: 0.3em;
padding: 0.5em;
border: 1px solid darkblue;
height: 6em;
.user-box-timestamp {
font-size: 0.8em;
@@ -216,11 +217,33 @@ form {
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 {
margin-top: 0.3em;
max-height: 3em;
max-width: 3em;
filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.2));;
img {
margin-top: 0.3em;
max-height: 3em;
max-width: 3em;
filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.2));;
}
}
}
}

View File

@@ -5,19 +5,26 @@
<div class="user-list">
{% for user in users %}
<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 %}
<br>
<img class="user-box-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>
{% endfor %}
</div>