Skip to content
Snippets Groups Projects
Commit 11bad2f3 authored by Yukun Ge's avatar Yukun Ge
Browse files

update front-end

parent 693ae284
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
blog/.DS_Store
+ 0
− 0
View file @ 11bad2f3
No preview for this file type
blog/blog.db
+ 0
− 0
View file @ 11bad2f3
No preview for this file type
blog/form.py
+ 27
− 27
View file @ 11bad2f3
......@@ -6,16 +6,16 @@ from wtforms.validators import Length, EqualTo, Email, InputRequired, Regexp, Nu
class RegisterForm(FlaskForm):
username = StringField(u'first name',
validators=[InputRequired(message=u'please input your first name.'), Length(1, 20), Regexp(r'[a-zA-Z0-9]+', message=u"Your first name contain invalid characters.")])
email = StringField(u'email', validators=[
InputRequired(message=u'please input your email.'), Length(1, 20),
username = StringField(u'First name',
validators=[InputRequired(message=u'Please input your first name.'), Length(1, 20), Regexp(r'[a-zA-Z0-9]+', message=u"Your first name contain invalid characters. Only letters and numbers are eligible.")])
email = StringField(u'Email', validators=[
InputRequired(message=u'Please input your email.'), Length(1, 20),
Email(message=u'Invalid email. Please check.')])
password = PasswordField(u'password',
validators=[InputRequired(message=u'please input your password.'), Length(1, 20), Regexp(r'[a-zA-Z0-9]+', message=u"Your password contain invalid characters.")])
password2 = PasswordField(u'confirm password',
validators=[InputRequired(message=u'please repeat your password.'), EqualTo("password", message=u"Passwords do not match. Please try again."), ])
submit = SubmitField(u'register')
password = PasswordField(u'Password',
validators=[InputRequired(message=u'Please input your password.'), Length(1, 20), Regexp(r'[a-zA-Z0-9]+', message=u"Your password contain invalid characters. Only letters and numbers are eligible.")])
password2 = PasswordField(u'Confirm Password',
validators=[InputRequired(message=u'Please repeat your password.'), EqualTo("password", message=u"Passwords do not match. Please try again."), ])
submit = SubmitField(u'Register')
# login form
......@@ -23,39 +23,39 @@ class RegisterForm(FlaskForm):
class LoginForm(FlaskForm):
# username = StringField(u'username',
# validators=[DataRequired(message=u'please input your username')])
email = StringField(u'email', validators=[
DataRequired(message=u'please input your email'), Length(1, 20),
Email(message=u'Invalid email Please check.')])
password = PasswordField(u'password',
validators=[DataRequired(message=u'please input your password'), Length(1, 20)])
submit = SubmitField(u'login')
email = StringField(u'Email', validators=[
DataRequired(message=u'Please input your email.'), Length(1, 20),
Email(message=u'Invalid email. Please check.')])
password = PasswordField(u'Password',
validators=[DataRequired(message=u'Please input your password.'), Length(1, 20)])
submit = SubmitField(u'Login')
# post form
class PostForm(FlaskForm):
title = StringField(u'title',
validators=[DataRequired(message=u'please input your title')])
description = StringField(u'description', validators=[
DataRequired(message=u'please input your description')])
content = StringField(u'content',
validators=[DataRequired(message=u'please input your content')])
submit = SubmitField(u'post')
title = StringField(u'Title',
validators=[DataRequired(message=u'Please input your title.')])
description = StringField(u'Description', validators=[
DataRequired(message=u'Please input your description.')])
content = StringField(u'Content',
validators=[DataRequired(message=u'Please input your content.')])
submit = SubmitField(u'Post')
# post form
class CommentForm(FlaskForm):
content = StringField(u'content',
validators=[DataRequired(message=u'please input your content')])
score = IntegerField(u'score', validators=[NumberRange(min=1, max=5)])
content = StringField(u'Content',
validators=[DataRequired(message=u'Please input your content.')])
score = IntegerField(u'Stars', validators=[NumberRange(min=1, max=5)])
post_id = HiddenField('post_id')
submit = SubmitField(u'comment')
class PostOrderForm(FlaskForm):
post_order = SelectField('Order', choices=[
('asc', 'sort posts ascending'),
('desc', 'sort posts descending'),
('asc', 'Sort posts ascending'),
('desc', 'Sort posts descending'),
])
submit = SubmitField('Sort')
blog/routes.py
+ 3
− 3
View file @ 11bad2f3
......@@ -73,7 +73,7 @@ def add_post():
content=post_form.content.data, author_id=current_user.id)
db.session.add(current_post)
db.session.commit()
flash(u'add post success')
flash(u'Posted successfully')
return redirect(url_for('home'))
form = PostForm()
return render_template("add_post.html", username=g.user.username, form=form)
......@@ -89,7 +89,7 @@ def add_comment():
blog_id=comment_form.post_id.data, score=comment_form.score.data, username=current_user.username)
db.session.add(current_comment)
db.session.commit()
flash(u'add comment success')
flash(u'Comment added successfully')
return redirect(f'/post/{current_comment.blog_id}')
......@@ -112,7 +112,7 @@ def login():
if error is None:
session.clear()
session['username'] = login_user.username
flash(u'login success')
flash(u'Login successfully')
return redirect(url_for('home'))
return redirect(url_for('error'))
return render_template("login.html", form=login_form, username=username)
......
blog/static/.DS_Store
+ 0
− 0
View file @ 11bad2f3
No preview for this file type
blog/static/style.css
+ 155
− 52
View file @ 11bad2f3
......@@ -14,52 +14,34 @@ body {
.pers_greet {
padding-left: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 34px;
font-weight: 700;
color: #5b64e9;
}
a {
text-decoration: none;
}
input {
border-radius: 10px;
}
.post-header {
padding-left: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
height: 200px;
background: #f5dfb6;
height: 100px;
background: linear-gradient(to right, #d3c3e2, #81a5ec);
padding-left: 20px;
font-size: 20px;
}
.footer a {
font-size: 20px;
}
button {
background: rgb(207, 203, 203);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
select {
background: rgb(207, 203, 203);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
......@@ -67,51 +49,92 @@ select {
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
margin-left: 20px;
border-radius: 10px;
}
.nav {
margin: 0;
padding: 0;
background: #f5dfb6;
font-size: 24px;
width: 100%;
padding-bottom: 10px;
background: linear-gradient(to right, #d3c3e2, #81a5ec);
width: calc(100% - 40px);
border: 1px solid #42432d;
border-width: 1px 0;
list-style-type: none;
display: flex;
border: none;
justify-content: space-around;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
}
.nav li {
color: #000;
padding: 20px 40px 4px 20px;
font-size: 15px;
margin-top: 15px;
float: left;
width: auto;
background: linear-gradient(to right, #b4e2b8, #8ea9df);
text-align: center;
border-radius: 10px;
padding: 5px 10px 0px 10px;
padding-bottom: 5px;
border-radius: 15px;
}
.nav a {
text-decoration: none;
}
select {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: rgb(207, 203, 203);
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
margin-left: 5px;
border-radius: 5px;
padding: 1px 0px 1px 1px;
}
.form_sort {
max-width: 250px;
background: rgba(0, 0, 0, 0);
padding: 0px 0px 0px 12px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #e4e4e4;
border-radius: 10px;
display: flex;
}
.form_sort input {
border: 3px solid #dadada;
color: #888;
height: 30px;
margin: 2px 6px 16px 0;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 24px;
line-height: 15px;
box-shadow: inset 0px 1px 4px #a4bddb;
}
.form {
margin-left: auto;
margin-right: auto;
max-width: 500px;
background: #f7f7f7;
background: rgba(0, 0, 0, 0);
padding: 25px 15px 25px 10px;
font: 24px;
color: #888;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #e4e4e4;
margin-bottom: 10px;
border-radius: 10px;
}
.form input {
border: 1px solid #dadada;
border: 3px solid #dadada;
color: #888;
height: 30px;
margin-bottom: 16px;
......@@ -122,10 +145,51 @@ select {
width: 70%;
font-size: 24px;
line-height: 15px;
box-shadow: inset 0px 1px 4px #ececec;
box-shadow: inset 0px 1px 4px #a4bddb;
}
input {
border-radius: 10px;
}
#sort_option {
margin-top: 7px;
color: rgb(150, 148, 148);
}
#sort_button {
padding: 2px 0 0 0;
text-align: center;
width: 60px;
height: 35px;
}
#title,
#description,
#content,
#email,
#password,
#password2,
#submit,
#username,
#score {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
}
.comment_text, .post_rating {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
}
.detailed_description {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
white-space: pre-wrap;
word-wrap: break-word;
}
.blog_post {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
list-style-type: none;
width: calc(100% - 60px);
padding-left: 20px;
......@@ -133,17 +197,23 @@ select {
.blog_post h3 {
font-size: 24px;
margin: 0;
}
.blog_post li img {
float: left;
margin: 0 20px 0 0;
height: 200px;
height: 100px;
}
.blog_post li p {
font-size: 24px;
margin-top: 20px;
.post_username {
font-size: 10px;
margin: 5px 0 0 0;
}
.short_description {
font-size: 15px;
margin: 15px 0 0 0
}
.blog_post li {
......@@ -169,22 +239,33 @@ select {
margin-left: 0;
justify-content: left;
padding: 0;
position: absolute;
right: 0px;
bottom: 10px;
margin-top: 0;
}
.contact {
text-align: right;
margin-right: 605px;
margin-bottom: 0;
}
.img-url {
display: flex;
margin-right: 20px;
margin-right: 30px;
}
.img-url img {
width: 50px;
height: 50px;
border-radius: 10px;
width: 40px;
height: 40px;
border-radius: 5px;
}
.img-url p,
.img-url a {
font-size: 16px;
font-size: 14px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.policy {
......@@ -195,8 +276,30 @@ select {
margin-left: 20px;
}
hr {
background: #f5dfb6;
height: 3px;
border: none;
label {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
}
#submit {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
}
#notes {
margin-top: 39px;
}
#comment_header {
margin: 5px 10px 0 10px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
}
hr {
height: 4px;
width: 90%;
background: linear-gradient(to right, #d3c3e2, #81a5ec);
border: #fff;
margin-top: 30px;
}
\ No newline at end of file
blog/templates/base.html
+ 20
− 23
View file @ 11bad2f3
......@@ -11,17 +11,16 @@ filename='style.css') }}">
<body>
<div id='top_navig_bar'>
<ul class="nav">
<li id='home'><a href="{{ url_for('home') }}">home</a></li>
<li id='home'><a href="{{ url_for('home') }}">HOME</a></li>
{% if username!='Guest' %}
<li id='logout'><a href="{{ url_for('logout') }}">logout</a></li>
<li id='logout'><a href="{{ url_for('logout') }}">LOGOUT</a></li>
{% else %}
<li id='login'><a href="{{ url_for('login') }}">login</a></li>
<li id='register'><a href="{{ url_for('register') }}">register</a></li>
<li id='login'><a href="{{ url_for('login') }}">LOGIN</a></li>
<li id='register'><a href="{{ url_for('register') }}">REGISTER</a></li>
{% endif %}
</ul>
<h1 id="pers_greet" class='pers_greet'>Hello, {{username}}!</h1>
<div>
<hr />
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
......@@ -31,7 +30,6 @@ filename='style.css') }}">
</li>
{% endfor %}
</ul>
<hr />
{% endif %}
{% endwith %}
</div><!-- /.navbar-collapse -->
......@@ -46,24 +44,23 @@ filename='style.css') }}">
<footer class='footer' id='footer'>
<h5><a href="{{ url_for('private_policy') }}">private policy</a> · <a href="{{ url_for('disclaimer') }}">disclaimer</a></h5>
<h4 id="notes"><a href="{{ url_for('private_policy') }}">Private Policy</a> &nbsp; <a href="{{ url_for('disclaimer') }}">Disclaimer</a></h4>
<div class='contact'>
<p>contact me</p>
<ul class='contact-list'>
<li class='img-url'>
<img src='/static/img/selfie.jpg'>
<p>&nbsp; YuKun Ge</p>
</li>
<li class='img-url'>
<img src='/static/img/Gmail.png'>
<p>&nbsp; gey14@cardiff.ac.uk</p>
</li>
<li class='img-url'>
<img src='/static/img/Linkedln.png'>
<p><a href="https://www.linkedin.com/in/yukun-ge/" target="_blank">&nbsp;
https://www.linkedin.com/in/yukun-ge/</a></p>
</li>
</ul>
<ul class='contact-list'>
<li class='img-url'>
<img src='/static/img/selfie.jpg'>
<p>&nbsp; YuKun Ge</p>
</li>
<li class='img-url'>
<img src='/static/img/Gmail.png'>
<p>&nbsp; gey14@cardiff.ac.uk</p>
</li>
<li class='img-url'>
<img src='/static/img/Linkedln.png'>
<p><a href="https://www.linkedin.com/in/yukun-ge/" target="_blank">&nbsp;
https://www.linkedin.com/in/yukun-ge/</a></p>
</li>
</ul>
</div>
</footer>
......
blog/templates/home.html
+ 5
− 8
View file @ 11bad2f3
{% extends 'base.html' %} {% block main %} {% if username!='Guest' %}
<button onclick="clickButton()" class="new-post">New Post</button>
<hr />
{% endif %}
<form
method="POST"
action="{{ url_for('home') }}"
class="form"
class="form_sort"
style="margin-left: 20px"
>
<div>{{ order_form.hidden_tag() }}</div>
<div>{{order_form.post_order.label}} {{order_form.post_order()}}</div>
<div style="margin-top: 20px">{{ order_form.submit }}</div>
</form>
<hr />
<div id="sort_option">{{ order_form.post_order.label }} {{order_form.post_order()}}</div>
<div id="sort_button">{{ order_form.submit }}</div>
</form>
<form
class="form"
......@@ -40,7 +37,7 @@
/>
<h3 class="post_title">{{ post.title }}</h3>
</a>
<p>By {{ post.user.username }}</p>
<p class="post_username">@{{ post.user.username }}</p>
<p class="short_description">{{ post.description }}</p>
</li>
{% endfor %}
......
blog/templates/post.html
+ 5
− 6
View file @ 11bad2f3
......@@ -17,21 +17,22 @@
{%endif%}
<pre class="detailed_description">{{ post.content }}</pre>
</div>
<hr />
<hr>
<p id="comment_header">Comments</p>
<ul>
{% for comment in post.comment %}
<li>
<h3>user: {{comment.username}}</h3>
<h4 class="post_rating">scroe: {{comment.score}}</h4>
<h4 class="post_rating">stars: {{comment.score}}</h4>
<p class="comment_text">{{comment.content}}</p>
<hr />
</li>
{% endfor %}
</ul>
{% if username!='Guest' %}
<button onclick="clickButton()" style="margin-left: 20px">New Comment</button>
<hr />
{% endif %}
<form
class="form"
......@@ -41,8 +42,6 @@
style="margin-left: 20px"
>
{{ form.hidden_tag() }}
<br />
<br />
{{ form.score.label }}&nbsp;{{ form.score() }}
<br />
<br />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment