tags form shown on the left with function of sorting articles based on tags, also some css changes

myproject1/articles/templates/articles/article_list.html

 {% extends 'base_layout.html' %}
 
-{% block content %}
-    <form method="GET" action="">
-  <input type="text" name='q' placeholder="search"/>
-  <input type="submit" value="Search"/>
+{% block content%}
+    <div class="search">
+    <form method="GET" action="" class="search" >
+  <input type="text" name='q' placeholder="search"class="button1"/>
+  <input type="submit" value="Search"class="button2"/>
     </form>
-    <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
-        <option value="">Order By</option>
-        <option value="./?ordering=a">Date(Ascending)</option>
-        <option value="./?ordering=d">Date(Descending)</option>
-    </select>
+        </div>
+
     <h1>Articles List</h1>
+    <div class="panel-heading">
+    <h2><i>Tags</i></h2>
+
+    <div class="panel-body">
+    <ul class="tags">
+        {% for tag in tags %}
+        <li><a href="{% url 'articles:tagged' tag.slug %}">{{ tag.name }}</a> </li>
+        {% empty %}
+            <li><a href="/articles/">Click here to show tags</a></li>
+        <li>No Tags Right now</li>
+        {% endfor %}
+    </ul>
+    </div>
+    </div>
     <div class="articles">
-        {% for article in articles %}
-            <div class="article">
-                <h2><a href="{% url 'articles:detail' slug=article.slug %}">
-                    <h2><b><i><u>{{ article.title }}</u></i></b></h2></a></h2>
-                <p>{{ article.snippet }}</p>
-                <p>{{ article.date }}</p>
+    {% for article in articles %}
+        <div class="article">
+            <a href="{% url 'articles:detail' slug=article.slug %}">
+                <h2><b><i><u>{{ article.title }}</u></i></b></h2>
+            <p>{{ article.snippet }}</p>
+            <p>{{ article.date }}</p>
                 <ul>
-                    {% for tag in article.tags.all %}
-                        <li> {{ tag.name }} </li>
-                    {% endfor %}
+                  {% for tag in article.tags.all %}
+                    <li> {{ tag.name }} </li>
+                  {% endfor %}
                 </ul>
-                <img src="{{ article.thumb.url }}" alt="" height="150" width="150">
+            <img src="{{ article.thumb.url }}" alt="" height="150" width="150">
+
+
                 <p class="author">added by {{ article.author.username }}</p>
-            </div>
-        {% endfor %}
+            </a>
+        </div>
+    {% endfor %}
+
     </div>
 {% endblock %}
\ No newline at end of file

myproject1/articles/urls.py

 from django.conf.urls import url
 from . import views
+from .views import TagIndexView,ArticleIndex
 
 app_name = 'articles'
 
 urlpatterns = [
-    url(r'^$', views.article_list, name="list"),
+    url(r'^$', ArticleIndex.as_view(), name="list"),
+    url(r'^$', views.article_list, name="List"),
     url(r'^create/$', views.article_create, name="create"),
+    url(r'^tag/(?P<slug>[-\w]+)/$', TagIndexView.as_view(), name='tagged'),
     url(r'^(?P<slug>[\w-]+)/$', views.article_detail, name="detail"),
 ]
\ No newline at end of file

myproject1/articles/views.py

-from django.http import HttpResponse
-from django.shortcuts import render, redirect
+from django.http import HttpResponse, HttpResponseRedirect, Http404
+from django.shortcuts import render, redirect, get_object_or_404
+from taggit.models import Tag
+from django.views.generic import DetailView, ListView
+from .forms import  *
+
+
 from .models import Article
 from django.contrib.auth.decorators import login_required
 from . import forms
-from .filters import ArticleFilter
+
+
+
+
+
+
+class TagMixin(object):
+    def get_context_data(self,**kwargs):
+        context = super(TagMixin,self).get_context_data(**kwargs)
+        context['tags']= Tag.objects.all()
+        return context
+
+class ArticleIndex(TagMixin,ListView):
+    template_name = 'articles/article_list.html'
+    model = Article
+    paginate_by = '1000'
+    queryset = Article.objects.all()
+    context_object_name = 'articles'
+
+    ordering = ['-date']
+
+
 
 
 def article_list(request):
@@ -22,6 +48,17 @@ def article_detail(request, slug):
     return render(request, 'articles/article_detail.html', {'article': article})
 
 
+
+class TagIndexView(TagMixin,ListView):
+    template_name = 'articles/article_list.html'
+    model = Article
+    paginate_by = '10'
+    context_object_name = 'articles'
+
+    def get_queryset(self):
+        return Article.objects.filter(tags__slug=self.kwargs.get('slug'))
+
+
 @login_required(login_url="/accounts/login/")
 def article_create(request):
     if request.method == 'POST':

myproject1/assets/styles.css

@@ -196,3 +196,32 @@ h1.create {
   margin-top:30px;
   margin-left:300px;
 }
+
+.panel-heading{
+  float:right;
+  margin-left:90px;
+  border: 1px solid #e8572f;
+    padding: 10px;
+    border-radius: 4px;
+    color: #e8572f;
+}
+
+form.search{
+
+margin-top:20px;
+margin-left:none;
+
+    padding: 10px;
+    border-radius: 4px;
+    color: #e8572f;
+
+    padding: 10px;
+    border-radius: 4px;
+    color: #e8572f;
+}
+input.button1, input.button2{
+  border: 1px solid #e8572f;
+    padding: 10px;
+    border-radius: 4px;
+    color: #e8572f;
+}
\ No newline at end of file