improve styling for browse-backups dialog

src/css/dialogs-browse-backups.css

@@ -0,0 +1,95 @@
+#dialog-container.browse-backups {
+  width: 700px;
+  height: 500px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -350px;
+}
+
+.backups-step-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.backups-step-content {
+  width: 100%;
+  height: 10px;
+  flex-grow: 1;
+  background: #444;
+}
+
+.backups-step-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.show #dialog-container.browse-backups {
+  margin-top: -250px;
+}
+
+.browse-backups .session-list,
+.browse-backups .snapshot-list {
+  width: 100%;
+  padding: 20px;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.browse-backups .session-item,
+.browse-backups .snapshot-item {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 60px;
+
+  margin-bottom: 10px;
+  padding: 0 20px;
+
+  border: 1px solid #666;
+  box-sizing: border-box;
+}
+
+.browse-backups .session-details,
+.browse-backups .snapshot-details {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.browse-backups .session-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.browse-backups .session-details-title {
+  font-weight: bold;
+}
+
+.browse-backups .session-details-info {
+  color: #999;
+}
+
+.browse-backups .session-actions,
+.browse-backups .snapshot-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: flex;
+}
+
+.browse-backups .session-actions button,
+.browse-backups .snapshot-actions button {
+  margin-left: 10px;
+}
+
+.browse-backups .session-item:last-child,
+.browse-backups .snapshot-item:last-child {
+  margin-bottom: 0;
+}

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

@@ -28,7 +28,14 @@
         var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
         var html = '';
         sessions.forEach(function (session) {
-          html += pskl.utils.Template.replace(sessionItemTemplate, session);
+          var view = {
+            id: session.id,
+            name: session.name,
+            description: session.description ? '- ' + session.description : '',
+            date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+            count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
+          };
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
         });
       }
       this.container.querySelector('.session-list').innerHTML = html;

src/js/database/BackupDatabase.js

@@ -188,7 +188,8 @@
         endDate: snapshot.date,
         name: snapshot.name,
         description: snapshot.description,
-        id: snapshot.session_id
+        id: snapshot.session_id,
+        count: 1
       };
     };
 
@@ -196,6 +197,7 @@
       var s = sessions[snapshot.session_id];
       s.startDate = Math.min(s.startDate, snapshot.date);
       s.endDate = Math.max(s.endDate, snapshot.date);
+      s.count++;
 
       if (s.endDate === snapshot.date) {
         // If the endDate was updated, update also the session metadata to

src/piskel-style-list.js

@@ -18,6 +18,7 @@
   "css/icons.css",
   "css/color-picker-slider.css",
   "css/dialogs.css",
+  "css/dialogs-browse-backups.css",
   "css/dialogs-browse-local.css",
   "css/dialogs-cheatsheet.css",
   "css/dialogs-create-palette.css",

src/templates/dialogs/browse-backups.html

@@ -19,10 +19,16 @@
 </script>
 
 <script type="text/template" id="session-list-item">
-<div class="session-item">
-  {{name}} - {{description}}
-  <button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
-  <button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
+<div class="session-item" title="{{id}}">
+  <div class="session-details">
+    <span class="session-details-title">{{name}} {{description}}</span>
+    <span class="session-details-info">Session recorded {{date}}</span>
+    <span class="session-details-info">{{count}} saved</span>
+  </div>
+  <div class="session-actions">
+    <button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
+    <button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
+  </div>
 </div>
 </script>
 
@@ -31,13 +37,19 @@
   <div class="backups-step-content">
     <div class="snapshot-list"></div>
   </div>
-  <button class="button back-button">back</button>
+  <div class="backups-step-actions">
+    <button class="button back-button">back</button>
+  </div>
 </div>
 </script>
 
 <script type="text/template" id="snapshot-list-item">
 <div class="snapshot-item">
-  {{name}} - {{description}}. Snapshot taken at {{date}}.
-  <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
+  <div class="snapshot-details">
+    {{name}} - {{description}}. Snapshot taken at {{date}}.
+  </div>
+  <div class="snapshot-actions">
+    <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
+  </div>
 </div>
 </script>