Update home page UI

db/static/css/app.css

@@ -133,34 +133,41 @@ body {
     min-height: 100px;
 }
 
-.satellite-group-item {
-    margin-top: 20px;
+.sats {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
-a.satellite-item {
-    min-height: 120px;
-    padding: 10px;
-    border: 1px solid #ffffff;
-    cursor: pointer;
+.satellite-group-item {
+    margin: 20px;
+    flex-basis: 20%;
+    text-align: center;
+}
+
+.satellite-item {
     display: block;
-    background-image: linear-gradient(to bottom, #ffffff 0, #f4f4f4 100%);
-    color: black;
-    text-decoration: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-    border-radius: 5px;
+}
+
+.satellite-item .panel-heading {
+    background-image: url('/static/img/sat.png');
+    background-size: cover;
+    height: 120px;
 }
 
 a.satellite-item:hover {
-    box-shadow: 0 2px 5px #808080;
-    transition: all 0.3s ease-out 0s;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease-out 0s;
+    text-decoration: none;
 }
 
 .satellite-title {
     font-weight: bold;
     font-size: 1.2em;
-    display: inline-block;
     min-height: 30px;
     padding-top: 5px;
+    display: inline-block;
 }
 
 .satellite-title .badge {
@@ -169,12 +176,26 @@ a.satellite-item:hover {
 
 .satellite-names {
     font-size: 1.1em;
+    margin: 5px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 200px;
+    white-space: nowrap;
+}
+
+.satellite-names-full {
     margin-bottom: 10px;
     font-weight: normal;
     float: right;
     margin-top: 5px;
 }
 
+.panel-default .satellite-transmitters {
+    position: relative;
+    margin-top: 10px;
+}
+
 #map {
     width: 100%;
     height: 250px;
@@ -193,31 +214,12 @@ a.satellite-item:hover {
     display: inline-block;
 }
 
-.satellite-img {
-    max-width: 70px;
-    max-height: 70px;
-    border-radius: 10px;
-    padding: 5px;
-}
-
 .satellite-img-full {
     width: 100%;
     max-height: 250px;
     border-radius: 5px;
 }
 
-.satellite-transmitters {
-    position: absolute;
-    bottom: 0;
-}
-
-.satellite-transmitters > span {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100px;
-}
-
 .panel-transmitter {
     margin: 20px 0;
 }

db/static/js/home.js

@@ -0,0 +1,8 @@
+$(document).ready(function() {
+    'use strict';
+
+    $('.satellite-group-item').each(function() {
+        var img = $(this).data('image');
+        $(this).find('.panel-heading').css('background-image', 'url(' + img + ')');
+    });
+});

db/templates/base/home.html

@@ -47,30 +47,22 @@
 {% block content %}
   <div class="row sats">
     {% for sat in satellites %}
-      <div class="col-md-4 col-sm-6 col-xs-12 satellite-group-item"
-           data-selector="{{ sat.name|lower }}{{ sat.norad_cat_id }}{{ sat.names|lower }}">
-        <a href="{% url 'satellite' norad=sat.norad_cat_id %}" class="satellite-item">
-          <div class="row">
-            <div class="col-xs-3">
-              <img src="{{ sat.get_image }}" alt="{{ sat.name }}" class="satellite-img">
-              {% if request.user.is_superuser and sat.pending_suggestions %}
-                <div class="suggestions-counter text-info satellite-img">
-                  <span class="glyphicon glyphicon-edit" title="Suggest edits"></span> {{  sat.pending_suggestions }}
-                </div>
-              {% endif %}
-            </div>
-            <div class="col-xs-9 satellite-info">
-              <div class="satellite-title">{{ sat.norad_cat_id }} - {{ sat.name }}</div>
-              <div>{{ sat.names }}</div>
-              <div class="satellite-transmitters">
-                {% for transmitter in sat.transmitters.all|slice:":5" %}
-                  <span class="label label-default">{{ transmitter.description }}</span>
-                {% endfor %}
-                {% if sat.transmitters.all.count > 5 %}
-                  <span class="label label-default">+{{ sat.transmitters.all.count|add:"-5" }}</span>
-                {% endif %}
-              </div>
-            </div>
+      <div class="satellite-group-item"
+           data-selector="{{ sat.name|lower }}{{ sat.norad_cat_id }}{{ sat.names|lower }}"
+           data-image="{{ sat.get_image }}">
+        <a href="{% url 'satellite' norad=sat.norad_cat_id %}" class="panel panel-default satellite-item">
+          <div class="panel-heading"></div>
+          <div class="panel-body">
+            <div class="satellite-title">{{ sat.norad_cat_id }} - {{ sat.name }}</div>
+            <div class="satellite-names">{{ sat.names }}&nbsp;</div>
+          </div>
+          <div class="panel-footer">
+            {% with total=sat.transmitters.all.count %}
+              {{ total }} transmitter{{ total|pluralize }}
+            {% endwith %}
+            {% if request.user.is_superuser and sat.pending_suggestions %}
+              - <span class="glyphicon glyphicon-edit" title="Suggest edits"></span> {{  sat.pending_suggestions }}
+            {% endif %}
           </div>
         </a>
       </div>
@@ -103,3 +95,7 @@
     </div>
   </div>
 {% endblock %}
+
+{% block javascript %}
+  <script src="{% static 'js/home.js' %}"></script>
+{% endblock %}

db/templates/base/satellite.html

@@ -24,7 +24,7 @@
             {{ satellite }}
           </div>
           {% if satellite.names %}
-            <div class="satellite-names hidden-xs">{{ satellite.names }}</div>
+            <div class="satellite-names-full hidden-xs">{{ satellite.names }}</div>
           {% endif %}
         </div>
         <div class="row panel-body">
@@ -47,9 +47,9 @@
       <div class="panel panel-default panel-satellite">
         <div class="panel-heading">
           <div class="satellite-title">
-            Transmitters <span class="badge">{{ satellite.transmitters.count }}</span>
+            Transmitters <span class="badge hidden-xs">{{ satellite.transmitters.count }}</span>
             {% if suggestions %}
-              <div class="suggestions-counter label label-default">
+              <div class="suggestions-counter label label-default hidden-xs">
                 {{ suggestions.count }} suggestion{{ suggestions.count|pluralize }} pending
               </div>
             {% endif %}
@@ -58,7 +58,7 @@
             <button type="button"
                     class="btn btn-primary btn-sm"
                     data-toggle="modal" data-target="#NewSuggestionModal">
-              <span class="glyphicon glyphicon-plus" title="Suggest edits"></span> Suggest New Transmitter
+              <span class="glyphicon glyphicon-plus" title="Suggest edits"></span> Suggest <span class="hidden-xs">New Transmitter</span>
             </button>
           </div>
         </div>