UI FIXES

ahmishra · Jul 3, 2021 · 4106b88 · 4106b88
1 parent db5e751
commit 4106b88
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 24 deletions.
diff --git a/main/__pycache__/forms.cpython-37.pyc b/main/__pycache__/forms.cpython-37.pyc
diff --git a/main/__pycache__/models.cpython-37.pyc b/main/__pycache__/models.cpython-37.pyc
diff --git a/main/__pycache__/routes.cpython-37.pyc b/main/__pycache__/routes.cpython-37.pyc
diff --git a/main/forms.py b/main/forms.py
@@ -87,7 +87,8 @@ class NewPostForm(FlaskForm):
 
     title = StringField('Title', validators=[DataRequired(), Length(3)])
     content = TextAreaField('Content', validators=[DataRequired(), Length(3)])
-    thumbnail = StringField('Thumbnail(Image URL)', validators=[DataRequired(), Length(3)])
+    thumbnail = StringField('Thumbnail Optional (Image URL)', render_kw={
+                            "placeholder": "For eg. https://picsum.photos/536/354"})
     submit = SubmitField('Post')
 
 

diff --git a/main/models.py b/main/models.py
@@ -99,11 +99,7 @@ class Post(db.Model):
 
     id = db.Column(db.Integer, primary_key=True)
     title = db.Column(db.String(100), nullable=False)
-    thumbnail = db.Column(
-        db.String(1000),
-        nullable=False,
-        default="https://designshack.net/wp-content/uploads/placeholder-image.png"
-    )
+    thumbnail = db.Column(db.String(500), nullable=True)
 
     date_posted = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
     content = db.Column(db.Text, nullable=False)

diff --git a/main/static/main.css b/main/static/main.css
@@ -226,6 +226,16 @@ body {
 }
 
 
+/* Class to add elipsis to text */
+.elipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 11;
+	-webkit-box-orient: vertical;
+}
+
+
 /* Bounce Animation */
 @keyframes bounce{
     from { transform: translate3d(0, 0, 0);}

diff --git a/main/templates/new-post.html b/main/templates/new-post.html
@@ -15,7 +15,7 @@
 
             <div class="row">
 
-                <div class="col-7">
+                <div class="col-5">
                     <!-- TITLE -->
                     <div class="form-group">
                         {{ form.title.label(class="form-control-label") }}
@@ -33,7 +33,7 @@
                     </div>
                 </div>
 
-                <div class="col-3">
+                <div class="col-5">
                     <!-- THUMBNAIL -->
                     <div class="form-group">
                         {{ form.thumbnail.label(class="form-control-label") }}

diff --git a/main/templates/post-detail.html b/main/templates/post-detail.html
@@ -27,10 +27,20 @@
 
         <!-- Displaying the post's content -->
         <h2 style="font-weight: 700;">{{ post.title }}</h2>
-        <b>Posted By- <a href="{{ url_for('user_info', username=post.author.username) }}">{{ post.author.username }}</a></b>
+        <div class="card-body" style="margin: 0; padding: 0;">
+            <a href="" style="text-decoration: none; color: orangered; font-weight: bolder;">
+                <img src="{{ url_for('static', filename='profile_pics/' ~ post.author.profile_picture) }}" alt="DP" width="32"
+                height="32">&ensp;{{ post.author.username }}
+            </a>
+        </div>
+
+        <br>
 
-        <p>{{ post.content|markdown }}</p>
         <small class="text-muted">{{ post.date_posted.replace(microsecond = 0) }}</small>
+
+        <br>
+
+        <p>{{ post.content|markdown }}</p>
 
     </div>
 

diff --git a/main/templates/post-update.html b/main/templates/post-update.html
@@ -15,7 +15,7 @@
 
             <div class="row">
 
-                <div class="col-7">
+                <div class="col-5">
                     <!-- TITLE -->
                     <div class="form-group">
                         {{ form.title.label(class="form-control-label") }}
@@ -33,7 +33,7 @@
                     </div>
                 </div>
 
-                <div class="col-3">
+                <div class="col-5">
                     <!-- THUMBNAIL -->
                     <div class="form-group">
                         {{ form.thumbnail.label(class="form-control-label") }}

diff --git a/main/templates/posts.html b/main/templates/posts.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="container">
-    <div class="row">
+    <div class="row no-gutters">
         <div class="text-center">
             <a href="{{ url_for('new_post') }}">
                 <button class="btn btn-primary btn-primary btn-lg rainbow-button">Post A New Blog</button>
@@ -18,21 +18,54 @@
         {% if posts.items != [] %}
             {% for i in posts.items %}
                 <!-- Displaying the posts if exists -->
-                <a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-4" style="text-decoration: none; color: white;">
-                    <div class="col-4">
-                        <div class="card cards" style="box-shadow: 1px 1px 30px black; border: none;">
-                            <img src="{{ i.thumbnail }}" alt="Image Support" style="border-radius: 25px; height: 18rem;">
-                            <div class="card-body">
-                                <h5 class="card-title" style="font-weight: 600;">
-                                    {{ i.title }}
-                                </h5>
-                                <h6 class="card-subtitle mb-2 text-muted">
-                                    Author: {{ i.author.username }} &emsp; Posted On: {{ i.date_posted.date() }}
-                                </h6>
+                {% if i.thumbnail %}
+                <a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
+                    <div class="col-auto">
+                        <div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px; height: 18rem;">
+                            <div class="card-body" style="margin: 0; padding: 0;">
+                                <img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP" width="32"
+                                    height="32">&ensp;{{ i.author.username }}
                             </div>
+
+                            <br>
+
+                            <span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
+                            <img src="{{ i.thumbnail }}" alt="Image Support" style="border-radius: 25px;">
+
+                            <br>
+
+                            <h5 class="card-title" style="font-weight: 600;">
+                                {{ i.title }}
+                            </h5>
+                        </div>
+                    </div>
+                </a>
+                {% else %}
+                <a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
+                    <div class="col-auto">
+                        <div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px; height: 18rem;">
+                            <div class="card-body" style="margin: 0; padding: 0;">
+                                <img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP"
+                                    width="32" height="32">&ensp;{{ i.author.username }}
+                            </div>
+
+                            <br>
+
+                            <span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
+
+                            <br>
+
+                            <h5 class="card-title" style="font-weight: 600;">
+                                {{ i.title }}
+                            </h5>
+
+                            <p class="elipsis" style="height: 17rem;">
+                                {{ i.content }}
+                            </p>
                         </div>
                     </div>
                 </a>
+                {% endif %}
             {% endfor %}
         {% else %}
             <!-- Messaging the user that no posts exists -->