feat(footer): reduce footer size

resolves #121

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-registry-ui",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "scripts": {
     "build": "./node_modules/gulp/bin/gulp.js build"
   },

src/style.css

@@ -376,6 +376,10 @@ footer {
   }
 }
 
+material-footer {
+  padding: 0.5em 1em;
+}
+
 @media screen and (min-width: 760px) and (max-height: 750px) {
   main {
     min-height: calc(100% - 144px - 2.5em);
@@ -516,8 +520,8 @@ catalog-element catalog-element.hide material-card {
   opacity: 0;
 }
 
-catalog-element catalog-element .list > span i.material-icons {
-  margin-right: 48px;
+catalog-element catalog-element > .content  {
+  margin-left: 3em;
 }
 
 remove-image {

src/tags/catalog-element.tag

@@ -16,18 +16,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
   <!-- Begin of tag -->
-  <material-card class="list highlight" item="{item}" expanded="{expanded}">
-    <material-waves onmousedown="{launch}" center="true" color="#ddd" />
-    <span>
-      <i class="material-icons">send</i>
-      { typeof opts.item === "string" ? opts.item : opts.item.repo }
-      <div if="{typeof opts.item !== "string"}" class="item-count right">
-        { opts.item.images && opts.item.images.length } images
-        <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
-      </div>
-    </span>
-  </material-card>
-  <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  <div class="content">
+    <material-card class="list highlight" item="{item}" expanded="{expanded}">
+      <material-waves onmousedown="{launch}" center="true" color="#ddd" />
+      <span>
+        <i class="material-icons">send</i>
+        { typeof opts.item === "string" ? opts.item : opts.item.repo }
+        <div if="{typeof opts.item !== "string"}" class="item-count right">
+          { opts.item.images && opts.item.images.length } images
+          <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
+        </div>
+      </span>
+    </material-card>
+    <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  </div>
   <script>
     this.on('mount', function() {
       const self = this;