improve styling of snapshot list in browse backups dialog

src/css/dialogs-browse-backups.css

@@ -87,7 +87,7 @@
   align-items: center;
 
   width: 100%;
-  height: 60px;
+  height: 80px;
 
   margin-bottom: 10px;
   padding: 0 20px;
@@ -100,19 +100,20 @@
 .browse-backups .snapshot-details {
   flex-grow: 1;
   flex-shrink: 0;
-}
-
-.browse-backups .session-details {
   display: flex;
   flex-direction: column;
 }
 
-.browse-backups .session-details-title {
+.browse-backups .session-details-title,
+.browse-backups .snapshot-details-title {
   font-size: 13px;
 }
 
-.browse-backups .session-details-info {
+.browse-backups .session-details-info,
+.browse-backups .snapshot-details-info {
+  font-size: 11px;
   color: #bbb;
+  line-height: 1.5em;
 }
 
 .browse-backups .session-actions,

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -34,8 +34,16 @@
         var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
         var html = '';
         snapshots.forEach(function (snapshot) {
-          snapshot.date = pskl.utils.DateUtils.format(snapshot.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
-          html += pskl.utils.Template.replace(sessionItemTemplate, snapshot);
+          var view = {
+            id: snapshot.id,
+            name: snapshot.name,
+            description: snapshot.description ? '- ' + snapshot.description : '',
+            date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+            frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames',
+            resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
+            fps: snapshot.fps
+          };
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
         });
       }
       this.container.querySelector('.snapshot-list').innerHTML = html;

src/js/service/BackupService.js

@@ -55,6 +55,10 @@
       date: date,
       name: descriptor.name,
       description: descriptor.description,
+      frames: piskel.getFrameCount(),
+      width: piskel.getWidth(),
+      height: piskel.getHeight(),
+      fps: piskel.getFPS(),
       serialized: pskl.utils.serialization.Serializer.serialize(piskel)
     };
 

src/templates/dialogs/browse-backups.html

@@ -63,7 +63,9 @@
 <script type="text/template" id="snapshot-list-item">
 <div class="snapshot-item">
   <div class="snapshot-details">
-    {{name}} - {{description}}. Snapshot taken at {{date}}.
+    <span class="snapshot-details-title">{{name}} {{description}}</span>
+    <span class="snapshot-details-info">Snapshot recorded {{date}}</span>
+    <span class="snapshot-details-info">{{frames}}, size {{resolution}}, {{fps}}fps</span>
   </div>
   <div class="snapshot-actions">
     <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>