Refactor repository list view

Signed-off-by: Keshav Priyadarshi <git@keshav.space>

Author: keshav-space

fedcode/forms.py

@@ -137,9 +137,8 @@ class SearchRepositoryForm(forms.Form):
         label=False,
         widget=forms.TextInput(
             attrs={
-                "placeholder": "Please Enter a Repository URL ex: https://github.com/nexB/vulnerablecode-data",
-                "class": "input is-rounded",
-                "style": "width: 90%;",
+                "placeholder": "Search a repository...",
+                "class": "input",
             },
         ),
     )

fedcode/pipes/utils.py

@@ -19,7 +19,7 @@
 
 
 def create_note(pkg, note_dict):
-    # TODO: also take argument for source of the note ideally github blob for 
+    # TODO: also take argument for source of the note ideally github blob for
     # for file.
     note, _ = Note.objects.get_or_create(acct=pkg.acct, content=saneyaml.dump(note_dict))
     pkg.notes.add(note)

fedcode/templates/repo_list.html

@@ -1,57 +1,86 @@
 {% extends "base.html" %}
+
 {% block title %}
-Git Repository List
+Git Repositories
 {% endblock %}
 
 {% block extra-head %}
+<style>
+  /* Remove the border below the table header */
+  thead th {
+    border-bottom: none !important;
+  }
+
+  tbody tr:hover {
+    background-color: #e0e0e0 !important;
+    cursor: pointer;
+  }
+
+  tbody tr:nth-child(even):hover {
+    background-color: #d3d3d3 !important;
+  }
+</style>
 {% endblock %}
+
+
 {% block content %}
 <div class="columns">
   <div class="column">
   </div>
   <div class="column is-two-thirds">
-
-  <div class="content is-normal">
-    <h1>Git Repository List</h1>
-    <hr/>
-  <div>
-
-  <form method="get" class="has-text-centered box" action="">
-      {{ form }}
-      <button type="submit" class="button is-link is-rounded">Search</button>
-  </form>
-
-  {% for repo in repo_list %}
-  <article class="media box mt-4 ">
-    <div class="media-left has-text-centered">
-        <h2>Number of Reviews</h2>
-        <p>{{ repo.review_count }}</p>
-    </div>
-    <div class="media-content ">
-      <div class="content" style="border-left: 4px solid black;">
-          <h3 class="ml-3 mr-3"><a href="{{ repo.url }}"> {{ repo.url }}</a></h3>
-          <small>@{{ repo.admin.user.username }}</small>
-          {% if user.person %}
-          <a class="is-center button ml-3" href="{% url 'review-create' repo.id %}">Create Review </a>
-          {% endif %}
-          {% if user.service %}
-              <form method="post" action="{% url 'sync-activity' repo.id %}">
-                {% csrf_token %}
-                <input type="submit" class="is-center button mt-2 ml-3 is-info" value="Sync">
-              </form>
-          {% endif %}
-
+    <div class="content is-normal">
+      <h1>Git Repository List</h1>
+      <hr />
+      <div>
+        <form method="get" class="box px-6 mx-0" action="">
+          <div class="field has-addons">
+            <div class="control is-expanded">
+              {{ form.search }}
+            </div>
+            <div class="control">
+              <button type="submit" class="button is-info">Search</button>
+            </div>
+          </div>
+        </form>
+        <div class="box">
+          <table class="table is-striped  is-hoverable is-fullwidth">
+            <thead>
+              <tr>
+                <th colspan="3">
+                  <div class="box is-small">
+                    <div class="columns">
+                      <div class="column is-three-fifths">Repository</div>
+                      <div class="column is-one-fifth">Creator</div>
+                      <div class="column is-one-fifth">Review</div>
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for repo in repo_list %}
+              <tr>
+                <td colspan="3">
+                  <a href="{{ repo.url }}" class="has-text-info">
+                    <div class="columns px-5">
+                      <div class="column is-three-fifths">{{ repo.url }}</div>
+                      <div class="column is-one-fifth">@{{ repo.admin.user.username }}</div>
+                      <div class="column is-one-fifth">{{ repo.review_count }}</div>
+                    </div>
+                  </a>
+                </td>
+              </tr>
+              {% empty %}
+              <tr>
+                <td colspan="3" class="has-text-centered">No Repository found.</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
       </div>
-
     </div>
-  </article>
-  {% endfor %}
-
-</div>
-
-  </div>
   </div>
   <div class="column"></div>
 </div>
-
 {% endblock %}