wrap Transition around various views

projects/frontend/src/views/gallery/gallery-list.vue

@@ -166,27 +166,28 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.gallery-list
-  .navigation(
+  Transition
-    v-if='ready'
+    .navigation(
-  )
+      v-if='ready'
-    button.input(
-      v-if='variants?.length > 0'
-      @click='onNavigateBack($event)'
     )
-      span Back
+      button.input(
-    .input.labeled-checkbox(
+        v-if='variants?.length > 0'
-      v-if='hasWarnings'
+        @click='onNavigateBack($event)'
-    )
-      label(
-        for='warning-toggle-checkbox'
-      ) Hide Warnings
-      input(
-        type='checkbox'
-        name='warning-toggle-checkbox'
-        id='warning-toggle-checkbox'
-        v-model='hideWarnings'
-        @input='onHideWarningsToggled($event)'
       )
+        span Back
+      .input.labeled-checkbox(
+        v-if='hasWarnings'
+      )
+        label(
+          for='warning-toggle-checkbox'
+        ) Hide Warnings
+        input(
+          type='checkbox'
+          name='warning-toggle-checkbox'
+          id='warning-toggle-checkbox'
+          v-model='hideWarnings'
+          @input='onHideWarningsToggled($event)'
+        )
   Transition
     FilterPanel(
       v-if='galleryReady && !!config.tags'

projects/frontend/src/views/gallery/gallery-view.vue

@@ -63,26 +63,27 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.gallery-view
-  .view-wrapper(
+  Transition
-    v-if='ready'
+    .view-wrapper(
-  )
+      v-if='ready'
-    .view-outlet
+    )
-      img(
+      .view-outlet
-        :src='entry.url || entry.thumbnailUrl'
+        img(
-        :style='styles'
+          :src='entry.url || entry.thumbnailUrl'
-      )
+          :style='styles'
-    .view-content
+        )
-      p {{ title }}
+      .view-content
-      dl.info
+        p {{ title }}
-        .info-entry(
+        dl.info
-          v-for='(field, key) in entry.fields'
+          .info-entry(
-          :class='key'
+            v-for='(field, key) in entry.fields'
+            :class='key'
+          )
+            dt {{ key }}
+            dd {{ field }}
+        EmbedableContent(
+          :content='entry.description'
         )
-          dt {{ key }}
-          dd {{ field }}
-      EmbedableContent(
-        :content='entry.description'
-      )
 </template>
 
 <style scoped lang="sass">

projects/frontend/src/views/markdown/markdown.vue

@@ -26,10 +26,11 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.markdown
-  EmbedableContent(
+  Transition
-    v-if='content'
+    EmbedableContent(
-    :content='content'
+      v-if='content'
-  )
+      :content='content'
+    )
 </template>
 
 <style scoped lang="sass">

projects/frontend/src/views/project/project-list.vue

@@ -64,25 +64,27 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.project-list
-  .projects(
+  Transition
-    v-if='ready'
+    .projects(
-  )
+      v-if='ready'
-    Transition(
-      v-for='id in projectIds'
     )
-      ProjectTile(
+      Transition(
-        v-if='!projects[id].hidden || !config.removeFromView'
+        v-for='id in projectIds'
-        v-bind='projects[id]'
-        :class='{ hidden: projects[id].hidden && !config.removeFromView }'
-        :id='id'
-        :viewPath='projectViewPath'
-        :isInternal='true'
       )
-  FilterPanel(
+        ProjectTile(
-    v-if='ready && !!config.tags'
+          v-if='!projects[id].hidden || !config.removeFromView'
-    :tags='config.tags'
+          v-bind='projects[id]'
-    @toggledTagsChanged='onToggledTagsChanged($event)'
+          :class='{ hidden: projects[id].hidden && !config.removeFromView }'
-  )
+          :id='id'
+          :viewPath='projectViewPath'
+          :isInternal='true'
+        )
+  Transition
+    FilterPanel(
+      v-if='ready && !!config.tags'
+      :tags='config.tags'
+      @toggledTagsChanged='onToggledTagsChanged($event)'
+    )
 </template>
 
 <style scoped lang="sass">

projects/frontend/src/views/project/project-view.vue

@@ -45,12 +45,13 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.project-view
-  article(
+  Transition
-    v-if='ready'
+    article(
-  )
+      v-if='ready'
-    EmbedableContent(
-      :content='content'
     )
+      EmbedableContent(
+        :content='content'
+      )
 </template>
 
 <style lang="sass">