mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2024-12-29 10:56:10 +00:00
Start work on profile page
This commit is contained in:
parent
2682ab0e8e
commit
f5a31a8149
|
|
@ -87,9 +87,12 @@ class User(db.Model, UserMixin): # pylint: disable=too-few-public-methods, C010
|
|||
id = db.Column(db.Integer, primary_key=True)
|
||||
alt_id = db.Column(db.String, unique=True, nullable=False, default=str(uuid4()))
|
||||
|
||||
profile_picture = db.Column(db.String, nullable=True, default=None)
|
||||
picture = db.Column(db.String, nullable=True, default=None)
|
||||
picture_colour = db.Column(db.String, nullable=True, default=None)
|
||||
banner = db.Column(db.String, nullable=True, default=None)
|
||||
bannner_colour = db.Column(db.String, nullable=True, default=None)
|
||||
|
||||
username = db.Column(db.String, unique=True, nullable=False)
|
||||
|
||||
email = db.Column(db.String, unique=True, nullable=False)
|
||||
password = db.Column(db.String, nullable=False)
|
||||
joined_at = db.Column(
|
||||
|
|
|
|||
BIN
onlylegs/static/banner.png
Normal file
BIN
onlylegs/static/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
|
|
@ -36,6 +36,8 @@
|
|||
|
||||
.banner
|
||||
height: 30rem
|
||||
max-height: 69vh
|
||||
|
||||
background-color: RGB($bg-300)
|
||||
|
||||
img
|
||||
|
|
@ -72,9 +74,8 @@
|
|||
bottom: 0
|
||||
|
||||
display: grid
|
||||
grid-template-columns: 1fr auto
|
||||
grid-template-rows: 1fr auto auto
|
||||
grid-template-areas: 'info info' 'header header' 'subtitle options'
|
||||
grid-template-columns: auto 1fr auto
|
||||
grid-template-areas: 'info info info' 'image header header' 'subtitle subtitle options'
|
||||
|
||||
z-index: +2
|
||||
|
||||
|
|
@ -109,6 +110,19 @@
|
|||
margin-top: auto
|
||||
grid-area: options
|
||||
|
||||
.banner-picture
|
||||
grid-area: image
|
||||
|
||||
margin: auto 1rem auto 0
|
||||
|
||||
position: relative
|
||||
|
||||
width: 6.9rem
|
||||
height: 6.9rem
|
||||
|
||||
background-color: RGB($primary)
|
||||
border-radius: $rad
|
||||
|
||||
.banner-small
|
||||
height: 3.5rem
|
||||
background-color: RGB($bg-100)
|
||||
|
|
@ -165,8 +179,12 @@
|
|||
display: none
|
||||
|
||||
.banner
|
||||
min-height: 17rem
|
||||
min-height: 15rem
|
||||
height: auto
|
||||
max-height: 30vh
|
||||
|
||||
.banner-filter
|
||||
background: linear-gradient(to bottom, RGB($bg-100), transparent)
|
||||
|
||||
.banner-content
|
||||
padding: 0.5rem
|
||||
|
|
@ -178,7 +196,7 @@
|
|||
align-items: center
|
||||
|
||||
.banner-header
|
||||
margin: 1rem 0
|
||||
margin: 0.5rem 0
|
||||
text-align: center
|
||||
font-size: 2.5rem
|
||||
|
||||
|
|
@ -192,6 +210,14 @@
|
|||
.pill-row
|
||||
margin-top: 0rem
|
||||
|
||||
.banner-picture
|
||||
margin: 0 auto
|
||||
|
||||
width: 4rem
|
||||
height: 4rem
|
||||
|
||||
display: flex
|
||||
|
||||
.banner-small
|
||||
.banner-content
|
||||
.banner-info
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
.gallery-header
|
||||
margin: 0.5rem
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: flex-start
|
||||
|
||||
font-size: 2rem
|
||||
font-weight: 700
|
||||
|
||||
.gallery-grid
|
||||
margin: 0
|
||||
padding: 0.35rem
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
@media (max-width: $breakpoint)
|
||||
.pop-up
|
||||
.pop-up-wrapper
|
||||
width: calc(100% - 0.75rem)
|
||||
max-width: calc(100% - 0.75rem)
|
||||
max-height: 95vh
|
||||
|
||||
.pop-up-content
|
||||
|
|
|
|||
|
|
@ -2,13 +2,41 @@
|
|||
|
||||
{% block nav_profile %}selected{% endblock %}
|
||||
{% block content %}
|
||||
<div class="banner-small">
|
||||
<div class="banner">
|
||||
{% if user.banner %}
|
||||
<img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='banner.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
|
||||
{% endif %}
|
||||
<span class="banner-filter"></span>
|
||||
<div class="banner-content">
|
||||
{% if user.picture %}
|
||||
<img class="banner-picture" src="{{ url_for('static', filename='icon.png') }}" alt="Profile picture" onload="imgFade(this)" style="opacity:0;"/>
|
||||
{% else %}
|
||||
<img class="banner-picture" src="{{ url_for('static', filename='icon.png') }}" alt="Profile picture" onload="imgFade(this)" style="opacity:0;"/>
|
||||
{% endif %}
|
||||
<h1 class="banner-header">{{ user.username }}</h1>
|
||||
<p class="banner-info">Member since <span class="time">{{ user.joined_at }}</span></p>
|
||||
<p class="banner-subtitle">{{ images|length }} Images · {{ groups|length }} Groups</p>
|
||||
<div class="pill-row">
|
||||
<div>
|
||||
<button class="pill-item" onclick="groupShare()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
|
||||
</button>
|
||||
<button class="pill-item" onclick="moreInfo()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url_for('settings.general') }}#profileSettings" class="pill-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228.25,63.07l-4.66-2.69a23.6,23.6,0,0,0,0-8.76l4.66-2.69a8,8,0,0,0-8-13.86l-4.67,2.7A23.92,23.92,0,0,0,208,33.38V28a8,8,0,0,0-16,0v5.38a23.92,23.92,0,0,0-7.58,4.39l-4.67-2.7a8,8,0,1,0-8,13.86l4.66,2.69a23.6,23.6,0,0,0,0,8.76l-4.66,2.69a8,8,0,0,0,4,14.93,7.92,7.92,0,0,0,4-1.07l4.67-2.7A23.92,23.92,0,0,0,192,78.62V84a8,8,0,0,0,16,0V78.62a23.92,23.92,0,0,0,7.58-4.39l4.67,2.7a7.92,7.92,0,0,0,4,1.07,8,8,0,0,0,4-14.93ZM192,56a8,8,0,1,1,8,8A8,8,0,0,1,192,56Zm29.35,48.11a8,8,0,0,0-6.57,9.21A88.85,88.85,0,0,1,216,128a87.62,87.62,0,0,1-22.24,58.41,79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75A88,88,0,0,1,128,40a88.76,88.76,0,0,1,14.68,1.22,8,8,0,0,0,2.64-15.78,103.92,103.92,0,1,0,85.24,85.24A8,8,0,0,0,221.35,104.11ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0Z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if images %}
|
||||
<h1 class="gallery-header">Images</h1>
|
||||
<div class="gallery-grid">
|
||||
{% for image in images %}
|
||||
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }})">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ from flask import Blueprint, render_template, request
|
|||
from werkzeug.exceptions import abort
|
||||
from flask_login import current_user
|
||||
|
||||
from onlylegs.models import Post, User
|
||||
from onlylegs.models import Post, User, Group
|
||||
from onlylegs.extensions import db
|
||||
|
||||
|
||||
blueprint = Blueprint("profile", __name__, url_prefix="/profile")
|
||||
|
|
@ -26,11 +27,9 @@ def profile():
|
|||
abort(404, "You must be logged in to view your own profile!")
|
||||
|
||||
# Get the user's data
|
||||
user = User.query.filter(User.id == user_id).first()
|
||||
|
||||
if not user:
|
||||
abort(404, "User not found :c")
|
||||
user = db.get_or_404(User, user_id, description="User not found :<")
|
||||
|
||||
images = Post.query.filter(Post.author_id == user_id).all()
|
||||
groups = Group.query.filter(Group.author_id == user_id).all()
|
||||
|
||||
return render_template("profile.html", user=user, images=images)
|
||||
return render_template("profile.html", user=user, images=images, groups=groups)
|
||||
|
|
|
|||
Loading…
Reference in a new issue