[Vue] Use card reveal effect for app cards on about page

aleksis/core/assets/components/about/InstalledAppCard.vue

@@ -42,21 +42,19 @@
               </v-chip>
             </div>
           </v-col>
-
-          <v-col cols="12" v-if="app.copyrights.length !== 0">
-            <span v-for="(copyright, index) in app.copyrights" :key="index">
-              Copyright © {{ copyright.years }}
-              <a :href="'mailto:' + copyright.email">{{ copyright.name }}</a>
-              <br/>
-            </span>
-          </v-col>
         </v-row>
-
       </v-card-text>
 
       <v-spacer></v-spacer>
 
       <v-card-actions v-if="app.urls.length !== 0">
+        <v-btn
+            text
+            color="primary"
+            @click="reveal = true"
+        >
+          Show copyright
+        </v-btn>
         <v-btn
             v-for="url in app.urls"
             color="primary"
@@ -66,12 +64,44 @@
           {{ url.name }}
         </v-btn>
       </v-card-actions>
+
+      <v-expand-transition>
+        <v-card
+            v-if="reveal"
+            class="transition-fast-in-fast-out v-card--reveal d-flex flex-column"
+        >
+          <v-card-text class="pb-0">
+            <v-row>
+              <v-col cols="12" v-if="app.copyrights.length !== 0">
+                <span v-for="(copyright, index) in app.copyrights" :key="index">
+                  Copyright © {{ copyright.years }}
+                  <a :href="'mailto:' + copyright.email">{{ copyright.name }}</a>
+                  <br/>
+                </span>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-spacer></v-spacer>
+          <v-card-actions class="pt-0">
+            <v-btn
+                text
+                color="primary"
+                @click="reveal = false"
+            >
+              Close
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-expand-transition>
     </v-card>
   </v-col>
 </template>
 <script>
 export default {
   name: "InstalledAppCard",
+  data: () => ({
+    reveal: false,
+  }),
   props: {
     app: {
       type: Object,

aleksis/core/assets/css/global.scss

@@ -14,3 +14,12 @@ p, h1, h2, h3, h4, h5, h6, .card-title {
 [v-cloak] {
   display: none;
 }
+
+.v-card--reveal {
+  bottom: 0;
+  opacity: 1 !important;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+}