From 4a0761605f607057b6b2338dbd7eaf5746a4eba3 Mon Sep 17 00:00:00 2001
From: unknown <santosh.2@iitj.ac.in>
Date: Fri, 29 Jul 2022 03:34:42 +0530
Subject: [PATCH] Changed month list page | Added filter to search specific
 year

---
 .../mailarchives/templates/monthlist.html     |  61 ++++---
 django/media/css/main.css                     | 150 +++++++++++++++++-
 django/media/js/main.js                       |  20 +++
 3 files changed, 212 insertions(+), 19 deletions(-)

diff --git a/django/archives/mailarchives/templates/monthlist.html b/django/archives/mailarchives/templates/monthlist.html
index f255b5c..2c8f947 100644
--- a/django/archives/mailarchives/templates/monthlist.html
+++ b/django/archives/mailarchives/templates/monthlist.html
@@ -10,24 +10,49 @@
 {%include "searchform.html" %}
 
 <h2>View Archives</h2>
+<div class="col-sm-5 pl-0">
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
+    </div>
+    <input type="text" id="MonthlistSearch" class="form-control" onkeyup="monthlistSearch()" placeholder="Enter year">
+  </div>
+</div>
 
 {%regroup months by year as yearmonth %}
-<table class="table table-striped table-sm thread-list">
-  <tbody>
-    {% for year in yearmonth %}
-      <tr>
-        <th colspan="3">{{ year.grouper }}</th>
-      </tr>
-      {% for month in year.list %}
-        <tr>
-          <th scope="row">
-            <a href="/list/{{list.listname}}/{{month.year}}-{{month.month|stringformat:"02d"}}/">{{month.date|date:"F Y"}}</a>
-          </th>
-          <td><a href="/list/{{list.listname}}/{{month.year}}-{{month.month|stringformat:"02d"}}/">View Archives</a></td>
-          <td><a href="/list/{{list.listname}}/mbox/{{list.listname}}.{{month.year}}{{month.month|stringformat:"02d"}}">Download mbox</a></td>
-        </tr>
-      {% endfor %}
-    {% endfor %}
-  </tbody>
-</table>
+{% for year in yearmonth %}
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="heading{{ year.grouper }}">
+        <h4 class="panel-title">
+        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ year.grouper }}" aria-expanded="false" aria-controls="collapse{{ year.grouper }}">
+          {{ year.grouper }}
+        </a>
+      </h4>
+      </div>
+      <div id="collapse{{ year.grouper }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{ year.grouper }}">
+        <div>
+          <table id="monthlist-table">
+            <thead>
+              <tr id="monthlist-table-header">
+                <th id="monthlist-table-header-month" class="list-table-header-text" data-field="monthname">Month</th>
+                <th id="monthlist-table-header-action" class="list-table-header-text" data-field="viewarchives">View Archives</th>
+                <th id="monthlist-table-header-action" class="list-table-header-text" data-field="mbox">Download mbox</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for month in year.list %}
+              <tr>
+                <th id="monthlist-table-data-th" scope="row"><a href="/list/{{list.listname}}/{{month.year}}-{{month.month|stringformat:"02d"}}/">{{month.date|date:"F Y"}}</a></th>
+                <td id="monthlist-table-data-td" ><a id="monthlist-table-data-td-a" href="/list/{{list.listname}}/{{month.year}}-{{month.month|stringformat:"02d"}}/"><i id="monthlist-table-data-i" class="fa fa-archive" aria-hidden="true"></i></a></td>
+                <td id="monthlist-table-data-td" ><a id="monthlist-table-data-td-a" href="/list/{{list.listname}}/mbox/{{list.listname}}.{{month.year}}{{month.month|stringformat:"02d"}}"><i id="monthlist-table-data-i" class="fa fa-download" aria-hidden="true"></i></a></td>
+              </tr>
+              {%endfor%}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endfor %}
 {%endblock%}
diff --git a/django/media/css/main.css b/django/media/css/main.css
index ff1c2a9..0236157 100644
--- a/django/media/css/main.css
+++ b/django/media/css/main.css
@@ -162,6 +162,110 @@ hr {
   margin: 1em 0 2em 0;
 }
 
+/** HOME PAGE */
+.panel-default>.panel-heading {
+    color: #333;
+    background-color: #f0f7ff;
+    border-color: #e4e5e7;
+    border-radius: 7px;
+    padding: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+  
+.panel-default> .panel-heading:hover {
+    background-color: #eeeeee;
+}
+  
+.panel-default>.panel-heading a {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 600;
+    color: #336791 !important;
+    display: block;
+    padding: 10px 15px;
+    font-size: 1em;
+    margin: 1em 0;
+}
+  
+.panel-default>.panel-heading a:after {
+    content: "";
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    float: right;
+    transition: transform .25s linear;
+    -webkit-transition: -webkit-transform .25s linear;
+}
+  
+.panel-default>.panel-heading a[aria-expanded="true"] {
+    background-color: #eee;
+    border-radius: 7px;
+    border: 1px solid #336791;
+}
+  
+.panel-default>.panel-heading a[aria-expanded="true"]:after {
+    content: "\2212";
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+  
+.panel-default>.panel-heading a[aria-expanded="false"]:after {
+    content: "\002b";
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+  
+.page-list .btn-group> .btn {
+    width: auto;
+}
+  
+.page-list .btn-group .dropdown-menu> .dropdown-item {
+    color: #007bff !important;
+}
+  
+.page-list .btn-group .dropdown-menu> .dropdown-item:active {
+    background-color: #ffffff;
+}
+  
+.page-list .btn-group .dropdown-menu> .active {
+    color: #ffffff !important;
+}
+  
+.fixed-table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+  
+.pagination .page-link {
+    color: #007bff !important;
+    background-color: #fff;
+}
+  
+.pagination .active .page-link {
+    color: #fff !important;
+}
+  
+.pagination .page-item:not(.active) .page-link:hover {
+    background-color: #e9ecef !important;
+}
+  
+#pgContentWrap .list-header {
+    background-color: #336791;
+}
+  
+#pgContentWrap .list-header .list-table-header-text .th-inner {
+    color: #fff;
+}
+
 /**
 p, ul, ol, dl, table {
 	  margin-bottom: 3em;
@@ -819,6 +923,50 @@ th.formfieldnamecontainer {
     padding: 0;
 }
 
+/** Month lists */
+#monthlist-table {
+    width: 100%;
+}
+  
+#monthlist-table-header {
+    background: #336791;
+}
+  
+#monthlist-table-header-month {
+    padding: 5px;
+    font-weight: 600;
+    color: #ffffff !important;
+}
+  
+#monthlist-table-header-action {
+    padding: 5px;
+    font-weight: 600;
+    color: #ffffff !important;
+    text-align: center;
+}
+  
+#monthlist-table-data-th {
+    padding: 5px;
+    border-bottom: 1px solid #ddd;
+}
+  
+#monthlist-table-data-td {
+    padding: 5px;
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+}
+  
+#monthlist-table-data-i {
+    border-radius: 5px;
+    padding: 3px;
+    border: 1.5px solid #ffffff;
+} 
+  
+#monthlist-table-data-i:hover {
+    color: #cf2263 !important;
+    border: 1.5px solid #840032;
+}
+
 /** Messages */
 
 h3.messages {
@@ -887,7 +1035,7 @@ h1.subject {
     .navbar {
       padding: 5px 10px;
     }
-    
+
     .navbar-toggler-icon {
       width: 1rem;
       height: 1.5rem;
diff --git a/django/media/js/main.js b/django/media/js/main.js
index 6e54b30..1832310 100644
--- a/django/media/js/main.js
+++ b/django/media/js/main.js
@@ -30,3 +30,23 @@ _gaq.push(['_trackPageview']);
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
+
+/*
+*
+Monthlist search function
+*/
+
+function monthlistSearch() {
+    $('.panel-collapse.in')
+        .collapse('hide');
+    var input = document.getElementById("MonthlistSearch");
+    var filter = input.value.toLowerCase();
+    var nodes = document.getElementsByClassName('panel-title');
+    for (i = 0; i < nodes.length; i++) {
+        if (nodes[i].innerText.toLowerCase().includes(filter)) {
+            nodes[i].style.display = "block";
+        } else {
+            nodes[i].style.display = "none";
+        }
+    }
+}
\ No newline at end of file
-- 
2.26.2.windows.1

