From 6e16aecbda754902b9ba37c9062d706d4b9862c3 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Aug 16 2018 10:00:48 +0000
Subject: remove css rules used in browse projects, groups, users pages


Removes the specific rules for formatting the card-like views
on the browse users, groups, and project pages. Replaces this
with bootstrap utilites and flex classes.

---

diff --git a/pagure/static/pagure.css b/pagure/static/pagure.css
index 5dc8dc2..ff5c379 100644
--- a/pagure/static/pagure.css
+++ b/pagure/static/pagure.css
@@ -155,47 +155,6 @@ z-index:1;
   direction:rtl;
 }
 
-.repo_desc
-{
-  height:2.5em;
-  line-height:1;
-  padding-left:65px;
-}
-
-.repo_name
-{
-  padding-top:4px;
-  width: 78%;
-  padding-left: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.repo_date
-{
-  background-color: #eee;
-  padding-left: 1.25rem;
-  font-size: 90%;
-}
-
-.project_wrapper
-{
-  border:1px solid #ddd;
-  position:relative;
-  border-radius: .25rem;
-  overflow: hidden;
-}
-
-.project_metadata
-{
-
-   bottom:0;
-   background:#eee;
-   width:100%;
-  margin-top:10px;
-}
-
 .nav-tabs .nav-link {
     padding: 0.5em 0.6em;
 }
diff --git a/pagure/templates/_render_repo.html b/pagure/templates/_render_repo.html
index 91a35e0..7242cf0 100644
--- a/pagure/templates/_render_repo.html
+++ b/pagure/templates/_render_repo.html
@@ -26,29 +26,33 @@
         username=repo.user.username if repo.is_fork else None,
         repo=repo.name, namespace=repo.namespace) %}
   <div class="col-lg-4 col-md-6">
-    <div class="project_wrapper mb-4">
-      {% if repo.avatar_email %}
-        <img class="projecticon float-left p-1" src="{{ repo.avatar_email | avatar_url }}" width=60 height=60 />
-      {% else %}
-        <div class="projecticon float-left p-1"><span class="fa fa-calendar-o fa-rotate-270 fa-4x text-muted"></span></div>
-      {% endif %}
-      <a class="project_link logo_link" href="{{ url }}">
-        <div class="repo_name">
-          <strong>
-            {{ repo.namespace + '/' if repo.namespace }}{{ repo.name }}
-          </strong>
-          {% if repo.private %}
-            <span title="Private project" class="text-danger fa fa-fw fa-lock"></span>
-          {% endif %}
+    <div class="border mb-4">
+      <div class="d-flex p-2">
+        {% if repo.avatar_email %}
+          <img src="{{ repo.avatar_email | avatar_url }}" width=60 height=60 />
+        {% else %}
+          <div><span class="fa fa-calendar-o fa-rotate-270 fa-4x text-muted"></span></div>
+        {% endif %}
+        <div class="pl-3">
+          <a href="{{ url }}">
+            <div>
+              <strong>
+                {{ repo.namespace + '/' if repo.namespace }}{{ repo.name }}
+              </strong>
+              {% if repo.private %}
+                <span title="Private project" class="text-danger fa fa-fw fa-lock"></span>
+              {% endif %}
+            </div>
+          </a>
+          <div title="{{ repo.description }}" data-toggle="tooltip">
+            <small>
+              {% if repo.description %}{{ repo.description }}{% else %}
+              <span class="text-muted">no description<span>{% endif %}
+            </small>
+          </div>
         </div>
-      </a>
-      <div class="repo_desc" title="{{ repo.description }}" data-toggle="tooltip">
-        <small>
-          {% if repo.description %}{{ repo.description }}{% else %}
-          <span class="text-muted">no description<span>{% endif %}
-        </small>
       </div>
-      <div class="project_metadata">
+      <div class="bg-light border-top">
         <span class="pl-2">
           <small>created {{repo.date_created|humanize}}</small>
         </span>
diff --git a/pagure/templates/group_list.html b/pagure/templates/group_list.html
index b9f381f..9838fe3 100644
--- a/pagure/templates/group_list.html
+++ b/pagure/templates/group_list.html
@@ -33,8 +33,8 @@
     {% if groups %}
       {% for group in groups %}
         <div class="col-lg-4 col-md-6">
-          <div class="project_wrapper mb-4">
-            <div class="media">
+          <div class="border mb-4">
+            <div class="media p-2">
               <div class="align-self-start mr-3"><span class="fa fa-users fa-fw fa-4x text-muted"></span></div>
               <div class="media-body align-self-center">
                   <a href="{{ url_for('ui_ns.view_group', group=group.group_name)}}">
@@ -43,7 +43,7 @@
                   <div class="nowrap"><small>{{ group.display_name }}</small></div>
               </div>
             </div>
-            <div class="project_metadata py-1 px-2 mt-0">
+            <div class="bg-light border-top py-1 px-2 mt-0">
                 <small>Formed {{ group.created |humanize }}</small>
               <div class="float-right text-muted">
                 <span title="Projects" data-toggle="tooltip" class="mr-1">
diff --git a/pagure/templates/user_list.html b/pagure/templates/user_list.html
index c172a35..1ca1668 100644
--- a/pagure/templates/user_list.html
+++ b/pagure/templates/user_list.html
@@ -22,7 +22,7 @@
       Users <span class="badge badge-secondary">{{ users_length }}</span>
       {%- if g.authenticated and config.get('PAGURE_AUTH') == 'local' %}
       <a href="{{ url_for('ui_ns.new_user') }}">
-      <button type="button" class="btn btn-success pull-xs-right">
+      <button type="button" class="btn btn-outline-success float-right">
           New User
       </button>
       </a>
@@ -31,8 +31,8 @@
     <div class="row">
     {% for user in users %}
       <div class="col-lg-4 col-md-6">
-        <div class="project_wrapper mb-4">
-          <div class="media">
+        <div class="border mb-4">
+          <div class="media p-2">
             <img class="align-self-start mr-3" src="{{user.default_email | avatar_url(60) |safe }}" width=60 height=60>
             <div class="media-body align-self-center">
                 <a href="{{url_for('ui_ns.view_user', username=user.user)}}">
@@ -42,7 +42,7 @@
             </div>
           </div>
 
-          <div class="project_metadata py-1 px-2 mt-0">
+          <div class="bg-light border-top py-1 px-2 mt-0">
               <small>joined <span title="{{
                 user.created | format_datetime }}">{{
                 user.created | humanize }}</span></small>