Improved challenge layout.

website/client/components/sidebarSection.vue

@@ -0,0 +1,94 @@
+<template lang="pug">
+  .section(:class="{'section-last': last}")
+      .section-header.d-flex.align-items-center
+        h3.mb-0(v-once)
+          | {{ title }}
+        .section-info.mx-1(
+          v-if="tooltip !== null"
+        )
+          .svg-icon(
+            v-html='icons.information',
+            :id="tooltipId",
+            :title="tooltip"
+          )
+          b-tooltip(
+            :title="tooltip",
+            :target="tooltipId",
+          )
+        .section-toggle.ml-auto(@click="toggle")
+          .svg-icon(v-html="icons.upIcon", v-if="visible")
+          .svg-icon(v-html="icons.downIcon", v-else)
+      .section-body(v-show="visible")
+        slot
+</template>
+
+<style lang="scss" scoped>
+  .section {
+    border-top: 1px solid #e1e0e3;
+    margin-top: 1em;
+    padding-top: 1em;
+  }
+
+  .section-last {
+    border-bottom: 1px solid #e1e0e3;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+  }
+
+  .section-body {
+    margin-top: 1em;
+  }
+
+  .section-toggle {
+    cursor: pointer;
+  }
+
+  .section-info {
+    cursor: help;
+  }
+
+  .section-info .svg-icon,
+  .section-toggle .svg-icon {
+    width: 16px;
+  }
+</style>
+
+<script>
+  import uuid from 'uuid/v4';
+  import upIcon from 'assets/svg/up.svg';
+  import downIcon from 'assets/svg/down.svg';
+  import informationIcon from 'assets/svg/information.svg';
+
+  export default {
+    props: {
+      title: {
+        required: true,
+      },
+      tooltip: {
+        default: null,
+      },
+      show: {
+        default: true,
+      },
+      last: {
+        default: false,
+      },
+    },
+    data () {
+      return {
+        tooltipId: uuid(),
+        visible: this.show,
+        icons: {
+          upIcon,
+          downIcon,
+          information: informationIcon
+        },
+      };
+    },
+    methods: {
+      toggle () {
+        this.visible = !this.visible;
+      },
+    },
+  };
+</script>