Show contributor/contribution details on mobile

Refs #163

On small screens, when selecting a contribution or contributor, the
lists are hidden and only the details are shown. The transitions are
animated using liquid-fire.

app/styles/components/_contribution-details.scss

@@ -84,5 +84,14 @@ section#contribution-details {
       }
     }
   }
-
+}
+
+// On small screens, hide contributor and contributions list when
+// showing details
+@include media-max(small) {
+  #dashboard.with-details {
+    #contributions, #stats {
+      display: none;
+    }
+  }
 }

app/templates/dashboard.hbs

@@ -92,7 +92,7 @@
   </div>
 
   <div id="details">
-    {{outlet}}
+    {{liquid-outlet}}
   </div>
 
 </main>

app/templates/dashboard/contributions/show.hbs

@@ -42,7 +42,7 @@
           kredits will be issued.
         </p>
         <p>
-          {{link-to "Re-submit contribution …" "contributions.resubmit" model class="button small green"}}.
+          {{link-to "Re-submit contribution …" "contributions.resubmit" model class="button small green"}}
         </p>
       </div>
     {{/if}}
@@ -50,7 +50,7 @@
 
   <div class="actions">
     <p>
-      {{link-to "Copy & edit as new" "contributions.resubmit" model class="button small"}}.
+      {{link-to "Copy & edit as new" "contributions.resubmit" model class="button small"}}
       {{#if model.ipfsHash}}
         <a href="{{ipfsGatewayUrl}}/{{model.ipfsHash}}"
            class="button small" target="_blank" rel="noopener">

app/transitions.js

@@ -0,0 +1,25 @@
+export default function () {
+  this.transition(
+    this.fromRoute('dashboard.index'),
+    this.toRoute('dashboard.contributions'),
+    this.media('(max-width: 600px)'),
+    this.use('toLeft'),
+    this.reverse('toRight'),
+  );
+
+  this.transition(
+    this.fromRoute('dashboard.index'),
+    this.toRoute('dashboard.contributors'),
+    this.media('(max-width: 600px)'),
+    this.use('toLeft'),
+    this.reverse('toRight')
+  );
+
+  this.transition(
+    this.fromRoute('dashboard.contributions'),
+    this.toRoute('dashboard.contributors'),
+    this.media('(max-width: 600px)'),
+    this.use('toLeft'),
+    this.reverse('toRight')
+  );
+}