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

update style.css

parent 693ae284
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
blog/blog.db
+ 0
− 0
View file @ 58fe1415
No preview for this file type
blog/form.py
+ 27
− 27
View file @ 58fe1415
......@@ -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.")])
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 contains 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')
# 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 @ 58fe1415
......@@ -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/style.css
+ 154
− 52
View file @ 58fe1415
......@@ -14,38 +14,33 @@ 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;
......@@ -56,62 +51,89 @@ button {
border-radius: 10px;
}
select {
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;
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 +144,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 +196,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 +238,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 +275,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 @ 58fe1415
......@@ -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 @ 58fe1415
{% 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 @ 58fe1415
......@@ -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