View improvements.

luismu78 · Nov 18, 2019 · 141d109 · 141d109
1 parent 24db2d7
commit 141d109
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 102 deletions.
diff --git a/blogproj/settings.py b/blogproj/settings.py
@@ -40,6 +40,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'crispy_forms',
     'mainapp',
     'users'
 ]
@@ -119,6 +120,7 @@
 
 USE_TZ = True
 
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/2.2/howto/static-files/

diff --git a/mainapp/templates/mainapp/filtered_post_list.html b/mainapp/templates/mainapp/filtered_post_list.html
@@ -4,20 +4,9 @@
 {{ title }}
 {% endblock %}
 
-{% block content %}
-
-      <div class="row">
-        <div class="col-lg-6">
-          <h1>{{ title }}</h1>
-        </div>
-      </div>
 
-      {% for post in posts %}
-      <div class="row">
-        <div class="col-lg-6">
-          {% include 'mainapp/snippet_post_link.html' %}
-        </div>
-      </div>         
-      {% endfor %}
-
+{% block content %}
+  <h3> {{title}}</h3>
+
+  {% include 'mainapp/snippet_post_list.html' %}
 {% endblock %}
diff --git a/mainapp/templates/mainapp/index.html b/mainapp/templates/mainapp/index.html
@@ -5,27 +5,7 @@
 {% endblock %}
 
 {% block content %}
-
-    <!--<div class="row">
-      <div class="col-lg-6">
-        {% include 'mainapp/snippet_tag_labels.html' %}            
-      </div>
-    </div>     -->
-    <div class="row">
-    {% for post in posts %}
-
-        <div class="col-sm-4 py-2 box-shadow">
-          <a href="{{post.get_absolute_url}}">
-          <img class="card-img-top" src="https://picsum.photos/id/{{post.id}}/500/350" alt="{{post.title}}">
-          <div class="card-body">
-            <div class="card-title">{{post.title}}</div>
-            <p class="card-text">
-            {{post.body|truncatewords:"30"}}
-            </p>
-            <div class="card-subtext"><a href="{{post.author.get_absolute_url}}" class="">{{post.author.username}}</a></div>
-          </div></a>
-      </div>
-    {% endfor %}
-
-    </div>
+  <h3> Latest Posts </h3>
+
+  {% include 'mainapp/snippet_post_list.html' %}
 {% endblock %}
diff --git a/mainapp/templates/mainapp/post.html b/mainapp/templates/mainapp/post.html
@@ -1,36 +1,38 @@
 {% extends 'base.html' %}
 
 {% block title %}
-{{ post.title }}
+{{ object.title }}
 {% endblock %}
 
 {% block content %}
   <div class="row">
     <div class="col-sm-12">
       <div class="jumbotron jumbotron-cover-image" 
-        style='background: #000 url("https://picsum.photos/id/{{post.id}}/800/400") center center; background-size: cover; padding: 8rem;'> 
+        style='background: #000 url("https://picsum.photos/id/{{object.id}}/800/400") center center; background-size: cover; padding: 8rem;'> 
       </div>
     </div>
   </div>
   <div class="row py-3">
     <div class="col-sm-12 post-heading">
-        <h1 class="post-title">{{post.title}}</h1>
-        <h3 class="post-subtitle">{{post.author.username}}</h3>
-        <h3 class="post-subtitle">{{post.postdate}}</h3>
-        {% include 'mainapp/snippet_tag_labels.html' with tags=post.tags.all %}  
+        <h1 class="post-title py-2">{{object.title}}</h1>
+        <h4 class="post-subtitle"><a href="{{object.author.get_absolute_url}}" class="">{{object.author.username}}</a></h4>
+        <h4 class="post-subtitle">{{object.postdate}}</h4>
+        <div class="tags">
+        {% include 'mainapp/snippet_tag_labels.html' with tags=object.tags.all %}  
+        </div>
     </div><!-- /.col-lg-8 -->
   </div>
   <div class="row py-3">
-    <div class="col-md-8 post-body">
-    {{post.body | escape | linebreaks}}
+    <div class="col-md-8 col-lg-9 post-body">
+    {{object.body | escape | linebreaks}}
     </div>
-    <aside class="col-md-4 pl-5">
+    <aside class="col-sm-8 col-md-4 col-lg-3 pl-5">
       <div class="py-3 mb-3 bg-white rounded">
           <div class="card-title">About the Author</div>
-          <img class="card-img-top" src="https://randomuser.me/api/portraits/lego/{{post.author.id}}.jpg" alt="{{post.author.username}}">
+          <img class="card-img-top" src="https://randomuser.me/api/portraits/lego/{{object.author.id}}.jpg" alt="{{object.author.username}}">
           <div class="card-body py-4">
             <p class="card-author-bio">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
-            <a href="{{post.author.get_absolute_url}}" class=""><div class="card-author-link">Read More</div></a>
+            <a href="{{object.author.get_absolute_url}}" class=""><div class="card-author-link">Read More</div></a>
           </div>   
 
       </div>

diff --git a/mainapp/templates/mainapp/snippet_post_link.html b/mainapp/templates/mainapp/snippet_post_link.html
diff --git a/mainapp/templates/mainapp/snippet_post_list.html b/mainapp/templates/mainapp/snippet_post_list.html
@@ -0,0 +1,23 @@
+<div class="row">
+    {% for post in posts %}
+
+        <div class="col-sm-4 py-2 box-shadow">
+          <a href="{{post.get_absolute_url}}">
+          <img class="card-img-top" src="https://picsum.photos/id/{{post.id}}/500/350" alt="{{post.title}}"></a>
+          <div class="card-body">
+            <a href="{{post.get_absolute_url}}"><div class="card-title">
+                {{post.title}}
+            </div></a>
+            <div class="card-subtext">
+                <a href="{{post.author.get_absolute_url}}" class="">{{post.author.username}}</a>
+            </div>
+            <div class="card-text">
+                {{post.body|truncatewords:"30"}}
+            </div>
+            <div class="card-subtext">
+                {% include 'mainapp/snippet_tag_labels.html' with tags=post.tags.all %}
+            </div>
+          </div>
+      </div>
+    {% endfor %}
+</div>
diff --git a/mainapp/templates/mainapp/snippet_tag_labels.html b/mainapp/templates/mainapp/snippet_tag_labels.html
@@ -1,5 +1,3 @@
 {% for tag in tags %}
-<a href="{{tag.get_absolute_url}}">
-    <span class="card-author-link">{{tag.name}}{% if not forloop.last %}, {% endif %}</span>
-</a>
+<a href="{{tag.get_absolute_url}}">{{tag.name}}</a>
 {% endfor %}
diff --git a/mainapp/views.py b/mainapp/views.py
@@ -10,7 +10,7 @@ def index(request):
 
 def post(request, id):
     post = get_object_or_404(BlogPost, pk=id)
-    return render(request, 'mainapp/post.html', {'post': post})
+    return render(request, 'mainapp/post.html', {'object': post})
 
 def tag_posts(request, name):
     name = name.lower()

diff --git a/readme.md b/readme.md
@@ -13,14 +13,14 @@ Install python3 per your OS instructions.
 
 # Run server
 
-python blogproj/manage.py runserver
+`python manage.py runserver`
 
 
 # Create a user account.
 
 Run the create super user command and follow terminal insctructions.
 
-`python blogproj/manage.py createsuperuser`
+`python manage.py createsuperuser`
 
 
 # Create some content
@@ -32,3 +32,6 @@ http://localhost:8000/admin
 
 http://localhost:8000
 
+# Run tests by using Django Test on the module folders
+
+`python manage.py test module1`
diff --git a/requirements.txt b/requirements.txt
@@ -1,4 +1,5 @@
 Django==2.2.5
+django-crispy-forms==1.8.0
 pytz==2019.2
 six==1.13.0
 sqlparse==0.3.0

diff --git a/static/css/main.css b/static/css/main.css
@@ -51,7 +51,7 @@ body {
   letter-spacing: 0;
   color: #454545;
   opacity: 1;
-  margin-bottom: 21px
+  margin-bottom: 0px;
   }
 
   .card-text {
@@ -149,7 +149,7 @@ opacity: 1;
     text-transform: uppercase;
 }
 .post-subtitle {
-    font: 18px/26px Gotham;
+    font: 16px/26px Gotham;
     text-transform: uppercase;
     letter-spacing: 0;
     color: #7E7E7E;
@@ -171,6 +171,8 @@ opacity: 1;
     opacity: 1;
 }
 
+.tags a{border:1px solid #DDD;display:inline-block;color:#717171;background:#FFF;-webkit-box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out;border-radius:2px;margin:0 3px 6px 0;padding:5px 10px}
+.tags a:hover{border-color:#08C;}
 
 
 

diff --git a/templates/base.html b/templates/base.html
@@ -30,42 +30,26 @@
 
         <div class="collapse navbar-collapse w-100 order-3 dual-collapse2" id="navbarNavDropdown">
             <ul class="navbar-nav ml-auto">
+              {% if user.is_authenticated %}
               <li class="nav-item">
-                {% if user.is_authenticated %}
                   <a class="nav-link" href="{% url 'logout' %}">Logout</a>
-                {% else %}  
+              </li>
+              {% else %}  
+              <li class="nav-item">
                   <a class="nav-link" href="{% url 'login' %}">Login</a>
-                {% endif %}
+              </li>
+              {% endif %}
               </li>
             </ul>
           </div>
         </nav>
     </header>
-      <!--
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="/">Blog</a>
-        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-          <div class="navbar-form navbar-right">
-          {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}"><button type="submit" class="btn btn-success">Logout</button></a>
-          {% else %}  
-            <a href="{% url 'login' %}"><button type="submit" class="btn btn-success">Login</button></a>
-          {% endif %}
-          </div>
-        </div>
-      </div>
-    </nav>-->
 
     <main role="main" class="py-5 flex-fill">
+      {% block header %}
+
+      {% endblock %}
+
       <div class="container">
         {% block content %}
 
@@ -81,7 +65,6 @@
       </div>
     </footer>
 
-
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-slim.min.js"><\/script>')</script>
 

diff --git a/users/models.py b/users/models.py
@@ -3,4 +3,6 @@
 from django.contrib.auth.models import AbstractUser
 
 class User(AbstractUser):    
-    pass
+
+    def get_absolute_url(self):
+        return reverse('user_posts', args=[str(self.id)])
diff --git a/users/templates/registration/login.html b/users/templates/registration/login.html
@@ -1,7 +1,9 @@
 {% extends 'base.html' %}
+{% load crispy_forms_tags %} 
 
 {% block content %}
-
+<div class="row">
+  <div class="col-lg-6">
 {% if form.errors %}
   <p>Your username and password didn't match. Please try again.</p>
 {% endif %}
@@ -19,20 +21,12 @@
 {% csrf_token %}
 <table>
 
-<tr>
-  <td>{{ form.username.label_tag }}</td>
-  <td>{{ form.username }}</td>
-</tr>
-
-<tr>
-  <td>{{ form.password.label_tag }}</td>
-  <td>{{ form.password }}</td>
-</tr>
+  {{ form | crispy }}
 </table>
 
 <input type="submit" value="login" />
 <input type="hidden" name="next" value="{{ next }}" />
 </form>
-
-
+</div>
+</div>
 {% endblock %}
diff --git a/users/templates/registration/register.html b/users/templates/registration/register.html
@@ -1,12 +1,15 @@
 {% extends "base.html" %}
-
+
+{% load crispy_forms_tags %} 
+
 {% block title %}
     Create User - {{ block.super }}
 {% endblock %}
 
 {% block content %}
 
-     <div class="login">
+     <div class="row">
+         <div class="col-md-6">
 
          {% if messages %}
             <ul>
@@ -21,13 +24,14 @@ <h1>Create account - Blog</h1>
          <form method="post" >
              {% csrf_token %}
              <table>
-                {{ form.as_table }}
+                {{ form | crispy }}
                  <tr>
                     <td></td>
                     <td><input type="submit" name="submit" value="Register" /></td>
                 </tr>
              </table>
          </form>
+        </div>
      </div>
 
 {% endblock %}