nicer design

rowers/templates/list_workouts.html

@@ -46,8 +46,11 @@
   #mypointer {
   cursor: pointer;
   }
+  div.columns       { width: 100%; }
+  div.columns div   { width: 20%; padding: 10px; float: left; }
 </style>
 
+
 {% if team %}
 <h1>{{ team.name }} Team Workouts</h1>
 {% else %}
@@ -153,17 +156,11 @@
       </span>
     </p>
   </li>
-  <li class="grid_4">
 
     {% if workouts %}
-    <table class="listtable " style="width:100%">
-      <tbody>
         {% for workout in workouts %}
-        <tr>
-          <td>
-            {{ workout.workouttype }}
-          </td>
-          <td>
+        <li class="grid_4 divlines">
+          <div>
             {% if workout.name != '' %}
             <h2>
               {{ workout.name }}
@@ -173,30 +170,38 @@
               No Name
             </h2>
             {% endif %}
-          <p> {{ workout.date|date:"Y-m-d" }} {{ workout.starttime|date:"H:i" }} </p>
-          <p>{{ workout.distance }}m {{ workout.duration |durationprint:"%H:%M:%S.%f" }} </p>
-          </td>
-          <td>
-          <p>{% if workout|may_edit:request %}
+          </div>
+          <div class="columns">
+          <div>
+            {{ workout.workouttype }}
+          </div>
+          <div>
+            {{ workout.date|date:"Y-m-d" }} {{ workout.starttime|date:"H:i" }}
+          </div>
+          <div>
+            {{ workout.distance }}m
+          </div>
+          <div>
+            {{ workout.duration |durationprint:"%H:%M:%S.%f" }}
+          </div>
+          <div>
+            {% if workout|may_edit:request %}
             <a class="small"
             href={% url rower.defaultlandingpage id=workout.id|encode %}
             title="Edit">
-              <i class="fas fa-search fa-fw"></i>
-            </a>
+            <i class="fas fa-search fa-fw"></i></a>
             {% else %}
             &nbsp;
             {% endif %}
-          </p>
-        </td>
-        </tr>
+          </div>
+          </div>
+        </li>
 
         {% endfor %}
-      </tbody>
-    </table>
+
     {% else %}
-    <p> No workouts found </p>
+    <li> No workouts found </li>
     {% endif %}
-  </li>
     {% if announcements %}
   <li class="grid_4">
     <h3>What's New?</h3>

rowers/views/workoutviews.py

@@ -2357,7 +2357,7 @@ def workouts_view(request,message='',successmessage='',
     else:
         searchform = SearchForm()
 
-    paginator = Paginator(workouts,20) # show 25 workouts per page
+    paginator = Paginator(workouts,10) # show 25 workouts per page
     page = request.GET.get('page',1)
 
     try:

static/css/rowsandall2.css

@@ -1,3 +1,5 @@
+
+
 #main {
     background-color: transparent;
     -webkit-background-size: cover;
@@ -320,6 +322,16 @@ th.rotate > div > span {
     margin: 2px;
 }
 
+.divlines {
+    display: block;
+    overflow-x: hidden;
+    border-width: 1px 0 0 0;
+    border-color: #333 #333 #333 #333;
+    border-style: solid;
+    padding: 5px;
+    margin: 2px;
+}
+
 .whiteborder {
     border: solid 2px #aaa;
 }

templates/newbase.html

@@ -46,7 +46,7 @@
 		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
     <link rel="stylesheet" href="/static/css/styles2.css">
     <link rel="stylesheet" href="/static/css/text2.css" />
-    <link rel="stylesheet" href="/static/css/rowsandall2.min.css" />
+    <link rel="stylesheet" href="/static/css/rowsandall2.css" />
     {% block meta %} {% endblock %}
     <div id="fb-root"></div>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>