First attempt at a better install dialog

dashboard/src/components/AppInstallDialog.vue

@@ -1,27 +1,37 @@
 <template>
-  <Dialog ref="dialog"
-    :reject-label="$t('main.dialog.cancel')"
-    :confirm-label="'Install'"
-     confirm-style="success"
-  >
-    <div>
+  <Dialog ref="dialog" :show-x="true" @close="step = 0">
+    <div class="content">
       <div class="header">
-        <img class="icon" :src="app.iconUrl" />
-        <div class="right">
+        <div class="summary">
           <div class="title">{{ manifest.title }}</div>
           <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
           <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
           <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
         </div>
+        <img class="icon" :src="app.iconUrl" />
       </div>
-      <div v-html="description"></div>
+      <Transition name="slide-left" mode="out-in">
+        <div v-if="step === 0">
+          <Button @click="onProceed" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
+          <div class="screenshots">
+            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
+          </div>
+          <div class="description" v-html="description"></div>
+        </div>
+        <div v-else-if="step === 1">
+          <div>Now install {{ manifest.title }}</div>
+          <br/>
+          <br/>
+          <Button @click="onInstall" icon="fa-solid fa-circle-down">TODO Submit</Button>
+        </div>
+      </Transition>
     </div>
   </Dialog>
 </template>
 
 <script>
 
-import { Dialog } from 'pankow';
+import { Button, Dialog } from 'pankow';
 import { prettyDate, prettyFileSize } from 'pankow/utils';
 import { marked } from 'marked';
 
@@ -31,6 +41,7 @@ const accessToken = localStorage.token;
 export default {
   name: 'AppInstallDialog',
   components: {
+    Button,
     Dialog,
   },
   data() {
@@ -40,6 +51,7 @@ export default {
       manifest: {},
       busy: false,
       error: {},
+      step: 0
     };
   },
   computed: {
@@ -51,13 +63,17 @@ export default {
     prettyDate,
     prettyFileSize,
     async open(app) {
+      this.step = 0;
       this.app = app;
       this.manifest = app.manifest;
 
       this.$refs.dialog.open();
     },
     onProceed() {
-
+      this.step = 1;
+    },
+    onInstall() {
+      this.step = 0;
     }
   },
 };
@@ -66,34 +82,71 @@ export default {
 
 <style scoped>
 
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.content {
+  width: 1024px;
+  max-width: 100%;
+  height: 1024px;
+  max-height: 100%;
+}
+
 .header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  margin: 4px;
 }
 
-.right {
+.summary {
   display: flex;
   flex-direction: column;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .title {
-  font-size: 26px;
+  font-size: 32px;
   margin-bottom: 10px;
 }
 
 .icon {
-  width: 96px;
-  height: 96px;
-  object-fit: cover;
+  width: 128px;
+  height: 128px;
+  object-fit: contain;
   margin-right: 20px;
 }
 
 .description {
+  margin: 0 4px;
+}
+
+.screenshots {
+  margin: 10px 4px;
   display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  padding: 10px 0;
+  overflow: auto;
+}
+
+.screenshot {
+  display: inline-block;
+  border-radius: var(--pankow-border-radius);
+  height: 300px;
+  object-size: contain;
 }
 
 </style>