pug to html

website/client/src/components/challenges/challengeDetail.vue

@@ -1,84 +1,174 @@
-<template lang="pug">
-.row
-  challenge-modal(@updatedChallenge='updatedChallenge')
-  leave-challenge-modal(:challengeId='challenge._id')
-  close-challenge-modal(:members='members', :challengeId='challenge._id', :prize='challenge.prize')
-  challenge-member-progress-modal(:challengeId='challenge._id')
-  .col-12.col-md-8.standard-page
-    .row
-      .col-12.col-md-6
-        h1(v-markdown='challenge.name')
-        div
-          span.mr-1.ml-0.d-block
-            strong(v-once) {{ $t('createdBy') }}:
-            user-link.mx-1(:user="challenge.leader")
-          span.mr-1.ml-0.d-block(v-if="challenge.group && challenge.group.name !== 'Tavern'")
-            strong(v-once) {{ $t(challenge.group.type) }}:
-            group-link.mx-1(:group="challenge.group")
-          // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
-          // @TODO: Implement in V2 strong.margin-left(v-once)
-            .svg-icon.calendar-icon(v-html="icons.calendarIcon")
-            | {{$t('endDate')}}
-            // "endDate": "End Date: <% endDate %>",
-          // span {{challenge.endDate}}
-        .tags
-          span.tag(v-for='tag in challenge.tags') {{tag}}
-      .col-12.col-md-6.text-right
-        .box(@click="showMemberModal()")
-          .svg-icon.member-icon(v-html="icons.memberIcon")
-          | {{challenge.memberCount}}
-          .details(v-once) {{$t('participantsTitle')}}
-        .box
-          .svg-icon.gem-icon(v-html="icons.gemIcon")
-          | {{challenge.prize}}
-          .details(v-once) {{$t('prize')}}
-    .row.challenge-actions
-      .col-12.col-md-6
-        strong.view-progress {{ $t('viewProgressOf') }}
-        member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
-      .col-12.col-md-6.text-right
-        span(v-if='isLeader || isAdmin')
-          b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
-            b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
-              | {{$t(type)}}
-          task-modal(
-            :task="workingTask",
-            :purpose="taskFormPurpose",
-            @cancel="cancelTaskModal()",
-            ref="taskModal",
-            :challengeId="challengeId",
-            @taskCreated='taskCreated',
-            @taskEdited='taskEdited',
-            @taskDestroyed='taskDestroyed'
-          )
-    .row
-      task-column.col-12.col-sm-6(
-        v-for="column in columns",
-        :type="column",
-        :key="column",
-        :taskListOverride='tasksByType[column]',
-        :showOptions="showOptions",
-        @editTask="editTask",
-        @taskDestroyed="taskDestroyed",
-        v-if='tasksByType[column].length > 0')
-  .col-12.col-md-4.sidebar.standard-page
-    .button-container(v-if='canJoin')
-      button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
-    div
-      sidebar-section(:title="$t('challengeSummary')")
-        p(v-markdown='challenge.summary')
-      sidebar-section(:title="$t('challengeDescription')")
-        p(v-markdown='challenge.description')
-    .text-center(v-if='isMember')
-      button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
+<template>
+  <div class="row">
+    <challenge-modal @updatedChallenge="updatedChallenge" /><leave-challenge-modal :challenge-id="challenge._id" /><close-challenge-modal
+      :members="members"
+      :challenge-id="challenge._id"
+      :prize="challenge.prize"
+    /><challenge-member-progress-modal :challenge-id="challenge._id" /><div class="col-12 col-md-8 standard-page">
+      <div class="row">
+        <div class="col-12 col-md-6">
+          <h1 v-markdown="challenge.name"></h1><div>
+            <span class="mr-1 ml-0 d-block"><strong v-once>{{ $t('createdBy') }}:</strong><user-link
+              class="mx-1"
+              :user="challenge.leader"
+            /></span><span
+              v-if="challenge.group && challenge.group.name !== 'Tavern'"
+              class="mr-1 ml-0 d-block"
+            ><strong v-once>{{ $t(challenge.group.type) }}:</strong><group-link
+              class="mx-1"
+              :group="challenge.group"
+            /></span><!-- @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)--><!-- @TODO: Implement in V2 strong.margin-left(v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
+| {{$t('endDate')}}
+// "endDate": "End Date: <% endDate %>",--><!-- span {{challenge.endDate}}-->
+          </div><div class="tags">
+            <span
+              v-for="tag in challenge.tags"
+              class="tag"
+            >{{ tag }}</span>
+          </div>
+        </div><div class="col-12 col-md-6 text-right">
+          <div
+            class="box"
+            @click="showMemberModal()"
+          >
+            <div
+              class="svg-icon member-icon"
+              v-html="icons.memberIcon"
+            ></div>{{ challenge.memberCount }}<div
+              v-once
+              class="details"
+            >
+              {{ $t('participantsTitle') }}
+            </div>
+          </div><div class="box">
+            <div
+              class="svg-icon gem-icon"
+              v-html="icons.gemIcon"
+            ></div>{{ challenge.prize }}<div
+              v-once
+              class="details"
+            >
+              {{ $t('prize') }}
+            </div>
+          </div>
+        </div>
+      </div><div class="row challenge-actions">
+        <div class="col-12 col-md-6">
+          <strong class="view-progress">{{ $t('viewProgressOf') }}</strong><member-search-dropdown
+            :text="$t('selectParticipant')"
+            :members="members"
+            :challenge-id="challengeId"
+            @member-selected="openMemberProgressModal"
+          />
+        </div><div class="col-12 col-md-6 text-right">
+          <span v-if="isLeader || isAdmin"><b-dropdown
+            class="create-dropdown"
+            :text="$t('addTaskToChallenge')"
+            :variant="'success'"
+          ><b-dropdown-item
+            v-for="type in columns"
+            :key="type"
+            @click="createTask(type)"
+          >{{ $t(type) }}</b-dropdown-item></b-dropdown><task-modal
+            ref="taskModal"
+            :task="workingTask"
+            :purpose="taskFormPurpose"
+            :challenge-id="challengeId"
+            @cancel="cancelTaskModal()"
+            @taskCreated="taskCreated"
+            @taskEdited="taskEdited"
+            @taskDestroyed="taskDestroyed"
+          /></span>
+        </div>
+      </div><div class="row">
+        <task-column
+          v-for="column in columns"
+          v-if="tasksByType[column].length > 0"
+          :key="column"
+          class="col-12 col-sm-6"
+          :type="column"
+          :task-list-override="tasksByType[column]"
+          :show-options="showOptions"
+          @editTask="editTask"
+@taskDestroyed="taskDestroyed"
+        />
+      </div>
+    </div><div class="col-12 col-md-4 sidebar standard-page">
+      <div
+        v-if="canJoin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-success"
+          @click="joinChallenge()"
+        >
+          {{ $t('joinChallenge') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="edit()"
+        >
+          {{ $t('editChallenge') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="cloneChallenge()"
+        >
+          {{ $t('clone') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="exportChallengeCsv()"
+        >
+          {{ $t('exportChallengeCsv') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-danger"
+          @click="closeChallenge()"
+        >
+          {{ $t('endChallenge') }}
+        </button>
+      </div><div>
+        <sidebar-section :title="$t('challengeSummary')">
+          <p v-markdown="challenge.summary"></p>
+        </sidebar-section><sidebar-section :title="$t('challengeDescription')">
+          <p v-markdown="challenge.description"></p>
+        </sidebar-section>
+      </div><div
+        v-if="isMember"
+        class="text-center"
+      >
+        <button
+          v-once
+          class="btn btn-danger"
+          @click="leaveChallenge()"
+        >
+          {{ $t('leaveChallenge') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

website/client/src/components/challenges/challengeItem.vue

@@ -1,42 +1,84 @@
-<template lang="pug">
-.challenge
-  .challenge-prize
-    .number
-      span.svg-icon(v-html="icons.gemIcon")
-      span.value {{challenge.prize}}
-    .label {{ $t('prize') }}
-  .challenge-header
-    router-link(
-      :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
-    )
-      h3.challenge-title(v-markdown='challenge.name')
-    .meta-info
-      .member-count
-        .svg-icon.user-icon(v-html="icons.memberIcon")
-        span.count-label {{challenge.memberCount}}
-      .divider
-      .official(v-if="isOfficial")
-        .svg-icon.user-icon(v-html="icons.officialIcon")
-      .owner(v-if="fullLayout")
-        .owner-item
-          strong {{ $t('createdBy') }}:
-          user-link.mx-1(:user="challenge.leader")
-        .owner-item(v-if="challenge.group && !isTavern(challenge.group)")
-          strong {{ $t(challenge.group.type) }}:
-          group-link.mx-1(:group="challenge.group")
-  category-tags.challenge-categories(
-    :categories="challenge.categories",
-    :owner="isOwner",
-    :member="isMember",
-  )
-  .challenge-description(v-markdown='challenge.summary')
-  .well-wrapper(v-if="fullLayout")
-    .well
-      div(v-for="task in tasksData", :class="{'muted': task.value === 0}")
-        .number
-          .svg-icon(v-html="task.icon", :class="task.label + '-icon'")
-          span.value {{ task.value }}
-        .label {{$t(task.label)}}
+<template>
+  <div class="challenge">
+    <div class="challenge-prize">
+      <div class="number">
+        <span
+          class="svg-icon"
+          v-html="icons.gemIcon"
+        ></span><span class="value">{{ challenge.prize }}</span>
+      </div><div class="label">
+        {{ $t('prize') }}
+      </div>
+    </div><div class="challenge-header">
+      <router-link :to="{ name: 'challenge', params: { challengeId: challenge._id } }">
+        <h3
+          v-markdown="challenge.name"
+          class="challenge-title"
+        ></h3>
+      </router-link><div class="meta-info">
+        <div class="member-count">
+          <div
+            class="svg-icon user-icon"
+            v-html="icons.memberIcon"
+          ></div><span class="count-label">{{ challenge.memberCount }}</span>
+        </div><div class="divider"></div><div
+          v-if="isOfficial"
+          class="official"
+        >
+          <div
+            class="svg-icon user-icon"
+            v-html="icons.officialIcon"
+          ></div>
+        </div><div
+          v-if="fullLayout"
+          class="owner"
+        >
+          <div class="owner-item">
+            <strong>{{ $t('createdBy') }}:</strong><user-link
+              class="mx-1"
+              :user="challenge.leader"
+            />
+          </div><div
+            v-if="challenge.group && !isTavern(challenge.group)"
+            class="owner-item"
+          >
+            <strong>{{ $t(challenge.group.type) }}:</strong><group-link
+              class="mx-1"
+              :group="challenge.group"
+            />
+          </div>
+        </div>
+      </div>
+    </div><category-tags
+      class="challenge-categories"
+      :categories="challenge.categories"
+      :owner="isOwner"
+      :member="isMember"
+    /><div
+      v-markdown="challenge.summary"
+      class="challenge-description"
+    ></div><div
+      v-if="fullLayout"
+      class="well-wrapper"
+    >
+      <div class="well">
+        <div
+          v-for="task in tasksData"
+          :class="{'muted': task.value === 0}"
+        >
+          <div class="number">
+            <div
+              class="svg-icon"
+              :class="task.label + '-icon'"
+              v-html="task.icon"
+            ></div><span class="value">{{ task.value }}</span>
+          </div><div class="label">
+            {{ $t(task.label) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">

website/client/src/components/challenges/challengeMemberProgressModal.vue

@@ -1,14 +1,32 @@
-<template lang="pug">
-  b-modal#challenge-member-modal(title="User Progress", size='lg')
-    .row.award-row(v-if='isLeader || isAdmin')
-      .col-12.text-center
-        button.btn.btn-primary(v-once, @click='closeChallenge()') {{ $t('awardWinners') }}
-    .row
-      task-column.col-6(
-        v-for="column in columns",
-        :type="column",
-        :key="column",
-        :taskListOverride='tasksByType[column]')
+<template>
+  <b-modal
+    id="challenge-member-modal"
+    title="User Progress"
+    size="lg"
+  >
+    <div
+      v-if="isLeader || isAdmin"
+      class="row award-row"
+    >
+      <div class="col-12 text-center">
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="closeChallenge()"
+        >
+          {{ $t('awardWinners') }}
+        </button>
+      </div>
+    </div><div class="row">
+      <task-column
+        v-for="column in columns"
+        :key="column"
+        class="col-6"
+        :type="column"
+        :task-list-override="tasksByType[column]"
+      />
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>

website/client/src/components/challenges/challengeModal.vue

@@ -1,66 +1,152 @@
-<template lang="pug">
-  b-modal#challenge-modal(:title="title", size='lg', @shown="shown")
-    .form
-      .form-group
-        label
-          strong(v-once) {{$t('name')}} *
-        b-form-input(type="text", :placeholder="$t('challengeNamePlaceholder')", v-model="workingChallenge.name")
-      .form-group
-        label
-          strong(v-once) {{$t('shortName')}} *
-        b-form-input(type="text", :placeholder="$t('shortNamePlaceholder')", v-model="workingChallenge.shortName")
-      .form-group
-        label
-          strong(v-once) {{$t('challengeSummary')}} *
-        div.summary-count {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        textarea.summary-textarea.form-control(:placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
-      .form-group
-        label
-          strong(v-once) {{$t('challengeDescription')}} *
-        a.float-right(v-markdown='$t("markdownFormattingHelp")')
-        textarea.description-textarea.form-control(:placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
-      .form-group(v-if='creating')
-        label
-          strong(v-once) {{$t('challengeGuild')}} *
-        select.form-control(v-model='workingChallenge.group')
-          option(v-for='group in groups', :value='group._id') {{group.name}}
-      .form-group(v-if='workingChallenge.categories')
-        label
-          strong(v-once) {{$t('categories')}} *
-        div.category-wrap(@click.prevent="toggleCategorySelect")
-          span.category-select(v-if='workingChallenge.categories.length === 0') {{$t('none')}}
-          .category-label(v-for='category in workingChallenge.categories') {{$t(categoriesHashByKey[category])}}
-        .category-box(v-if="showCategorySelect && creating")
-          .form-check(
-            v-for="group in categoryOptions",
-            :key="group.key",
-            v-if='group.key !== "habitica_official" || user.contributor.admin'
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox",
-                :value="group.key",
-                :id="`challenge-modal-cat-${group.key}`",
-                 v-model="workingChallenge.categories")
-              label.custom-control-label(v-once, :for="`challenge-modal-cat-${group.key}`") {{ $t(group.label) }}
-          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
-      // @TODO: Implement in V2 .form-group
-        label
-          strong(v-once) {{$t('endDate')}}
-        b-form-input.end-date-input
-      .form-group(v-if='creating')
-        label
-          strong(v-once) {{$t('prize')}}
-        input(type='number', :min='minPrize', :max='maxPrize', v-model="workingChallenge.prize")
-      .row.footer-wrap
-        .col-12.text-center.submit-button-wrapper
-          .alert.alert-warning(v-if='insufficientGemsForTavernChallenge') You do not have enough gems to create a Tavern challenge
-          // @TODO if buy gems button is added, add analytics tracking to it
-          // see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134
-          button.btn.btn-primary(v-if='creating && !cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeAddTasks')}}
-          button.btn.btn-primary(v-once, v-if='cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeCloneTasks')}}
-          button.btn.btn-primary(v-once, v-if='!creating && !cloning', @click='updateChallenge()') {{$t('updateChallenge')}}
-        .col-12.text-center
-          p(v-once) {{$t('challengeMinimum')}}
+<template>
+  <b-modal
+    id="challenge-modal"
+    :title="title"
+    size="lg"
+    @shown="shown"
+  >
+    <div class="form">
+      <div class="form-group">
+        <label><strong v-once>{{ $t('name') }} *</strong></label><b-form-input
+          v-model="workingChallenge.name"
+          type="text"
+          :placeholder="$t('challengeNamePlaceholder')"
+        />
+      </div><div class="form-group">
+        <label><strong v-once>{{ $t('shortName') }} *</strong></label><b-form-input
+          v-model="workingChallenge.shortName"
+          type="text"
+          :placeholder="$t('shortNamePlaceholder')"
+        />
+      </div><div class="form-group">
+        <label><strong v-once>{{ $t('challengeSummary') }} *</strong></label><div class="summary-count">
+          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
+        </div><textarea
+          v-model="workingChallenge.summary"
+          class="summary-textarea form-control"
+          :placeholder="$t('challengeSummaryPlaceholder')"
+        ></textarea>
+      </div><div class="form-group">
+        <label><strong v-once>{{ $t('challengeDescription') }} *</strong></label><a
+          v-markdown="$t('markdownFormattingHelp')"
+          class="float-right"
+        ></a><textarea
+          v-model="workingChallenge.description"
+          class="description-textarea form-control"
+          :placeholder="$t('challengeDescriptionPlaceholder')"
+        ></textarea>
+      </div><div
+        v-if="creating"
+        class="form-group"
+      >
+        <label><strong v-once>{{ $t('challengeGuild') }} *</strong></label><select
+          v-model="workingChallenge.group"
+          class="form-control"
+        >
+          <option
+            v-for="group in groups"
+            :value="group._id"
+          >
+            {{ group.name }}
+          </option>
+        </select>
+      </div><div
+        v-if="workingChallenge.categories"
+        class="form-group"
+      >
+        <label><strong v-once>{{ $t('categories') }} *</strong></label><div
+          class="category-wrap"
+          @click.prevent="toggleCategorySelect"
+        >
+          <span
+            v-if="workingChallenge.categories.length === 0"
+            class="category-select"
+          >{{ $t('none') }}</span><div
+            v-for="category in workingChallenge.categories"
+            class="category-label"
+          >
+            {{ $t(categoriesHashByKey[category]) }}
+          </div>
+        </div><div
+          v-if="showCategorySelect && creating"
+          class="category-box"
+        >
+          <div
+            v-for="group in categoryOptions"
+            v-if="group.key !== 'habitica_official' || user.contributor.admin"
+            :key="group.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`challenge-modal-cat-${group.key}`"
+                v-model="workingChallenge.categories"
+                class="custom-control-input"
+                type="checkbox"
+                :value="group.key"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="`challenge-modal-cat-${group.key}`"
+              >{{ $t(group.label) }}</label>
+            </div>
+          </div><button
+            class="btn btn-primary"
+            @click.prevent="toggleCategorySelect"
+          >
+            {{ $t('close') }}
+          </button>
+        </div>
+      </div><!-- @TODO: Implement in V2 .form-grouplabel
+  strong(v-once) {{$t('endDate')}}
+b-form-input.end-date-input--><div
+v-if="creating"
+class="form-group"
+>
+<label><strong v-once>{{ $t('prize') }}</strong></label><input
+v-model="workingChallenge.prize"
+type="number"
+:min="minPrize"
+:max="maxPrize"
+>
+      </div><div class="row footer-wrap">
+        <div class="col-12 text-center submit-button-wrapper">
+          <div
+            v-if="insufficientGemsForTavernChallenge"
+            class="alert alert-warning"
+          >
+            You do not have enough gems to create a Tavern challenge
+          </div><!-- @TODO if buy gems button is added, add analytics tracking to it--><!-- see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134--><button
+            v-if="creating && !cloning"
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="createChallenge()"
+          >
+            {{ $t('createChallengeAddTasks') }}
+          </button><button
+            v-if="cloning"
+            v-once
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="createChallenge()"
+          >
+            {{ $t('createChallengeCloneTasks') }}
+          </button><button
+            v-if="!creating && !cloning"
+            v-once
+            class="btn btn-primary"
+            @click="updateChallenge()"
+          >
+            {{ $t('updateChallenge') }}
+          </button>
+        </div><div class="col-12 text-center">
+          <p v-once>
+            {{ $t('challengeMinimum') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss'>
@@ -245,8 +331,8 @@ export default {
       return this.$t('editingChallenge');
     },
     charactersRemaining () {
-      const currentLength = this.workingChallenge.summary 
-        ? this.workingChallenge.summary.length 
+      const currentLength = this.workingChallenge.summary
+        ? this.workingChallenge.summary.length
         : 0;
       return MAX_SUMMARY_SIZE_FOR_CHALLENGES - currentLength;
     },

website/client/src/components/challenges/closeChallengeModal.vue

@@ -1,26 +1,63 @@
-<template lang="pug">
-div
-  b-modal#close-challenge-modal(:title="$t('createGuild')", size='md')
-    .header-wrap(slot="modal-header")
-      h2.text-center(v-once) {{$t('endChallenge')}}
-    .row.text-center
-      .col-12
-        .support-habitica
-          // @TODO: Add challenge achievement badge here
-      .col-12
-        strong(v-once) {{$t('selectChallengeWinnersDescription')}}
-      .col-12
-        member-search-dropdown(:text='winnerText', :members='members', :challengeId='challengeId', @member-selected='selectMember')
-      .col-12
-        button.btn.btn-primary(v-once, @click='closeChallenge') {{$t('awardWinners')}}
-      .col-12
-        hr
-        .or {{$t('or')}}
-      .col-12
-        strong(v-once) {{$t('doYouWantedToDeleteChallenge')}}
-      .col-12
-        button.btn.btn-danger(v-once, @click='deleteChallenge()') {{$t('deleteChallenge')}}
-    .footer-wrap(slot="modal-footer")
+<template>
+  <div>
+    <b-modal
+      id="close-challenge-modal"
+      :title="$t('createGuild')"
+      size="md"
+    >
+      <div
+        slot="modal-header"
+        class="header-wrap"
+      >
+        <h2
+          v-once
+          class="text-center"
+        >
+          {{ $t('endChallenge') }}
+        </h2>
+      </div><div class="row text-center">
+        <div class="col-12">
+          <div class="support-habitica">
+          <!-- @TODO: Add challenge achievement badge here-->
+          </div>
+        </div><div class="col-12">
+          <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
+        </div><div class="col-12">
+          <member-search-dropdown
+            :text="winnerText"
+            :members="members"
+            :challenge-id="challengeId"
+            @member-selected="selectMember"
+          />
+        </div><div class="col-12">
+          <button
+            v-once
+            class="btn btn-primary"
+            @click="closeChallenge"
+          >
+            {{ $t('awardWinners') }}
+          </button>
+        </div><div class="col-12">
+          <hr><div class="or">
+            {{ $t('or') }}
+          </div>
+        </div><div class="col-12">
+          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div><div class="col-12">
+          <button
+            v-once
+            class="btn btn-danger"
+            @click="deleteChallenge()"
+          >
+            {{ $t('deleteChallenge') }}
+          </button>
+        </div>
+      </div><div
+        slot="modal-footer"
+        class="footer-wrap"
+      ></div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang='scss'>

website/client/src/components/challenges/findChallenges.vue

@@ -1,33 +1,57 @@
-<template lang="pug">
-.row
-  challenge-modal(v-on:createChallenge='challengeCreated')
-  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-  .col-12.col-md-10.standard-page
-    .row.header-row
-      .col-md-8.text-left
-        h1(v-once) {{$t('findChallenges')}}
-      .col-md-4
-        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
-        button.btn.btn-secondary.create-challenge-button.float-right(@click='createChallenge()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createChallenge')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && filteredChallenges.length === 0')
-        h2(v-once) {{$t('noChallengeMatchFilters')}}
-
-    .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges')
-        challenge-item(:challenge='challenge')
-      mugen-scroll(
-        :handler="infiniteScrollTrigger",
-        :should-handle="!loading && canLoadMore",
-        :threshold="1",
-        v-show="loading",
-      )
-        h2.col-12.loading(v-once) {{ $t('loading') }}
+<template>
+  <div class="row">
+    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><div class="col-12 col-md-10 standard-page">
+      <div class="row header-row">
+        <div class="col-md-8 text-left">
+          <h1 v-once>
+            {{ $t('findChallenges') }}
+          </h1>
+        </div><div class="col-md-4">
+<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
+  b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
+class="btn btn-secondary create-challenge-button float-right"
+@click="createChallenge()"
+>
+<div
+class="svg-icon positive-icon"
+v-html="icons.positiveIcon"
+></div><span v-once>{{ $t('createChallenge') }}</span>
+</button>
+        </div>
+      </div><div class="row">
+        <div
+          v-if="!loading && filteredChallenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <h2 v-once>
+            {{ $t('noChallengeMatchFilters') }}
+          </h2>
+        </div>
+      </div><div class="row">
+        <div
+          v-for="challenge in filteredChallenges"
+          class="col-12 col-md-6"
+        >
+          <challenge-item :challenge="challenge" />
+        </div><mugen-scroll
+          v-show="loading"
+          :handler="infiniteScrollTrigger"
+          :should-handle="!loading && canLoadMore"
+          :threshold="1"
+        >
+          <h2
+            v-once
+            class="col-12 loading"
+          >
+            {{ $t('loading') }}
+          </h2>
+        </mugen-scroll>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

website/client/src/components/challenges/groupChallenges.vue

@@ -1,16 +1,43 @@
-<template lang="pug">
-div
-  challenge-modal(:groupId='groupId', v-on:createChallenge='challengeCreated')
-  .row.no-quest-section(v-if='challenges.length === 0')
-    .col-12.text-center
-      .svg-icon.challenge-icon(v-html="icons.challengeIcon")
-      h4(v-once) {{ $t('haveNoChallenges') }}
-      p(v-once) {{ $t('challengeDetails') }}
-      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
-  template(v-else)
-    challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
-    .col-12.text-center
-      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
+<template>
+  <div>
+    <challenge-modal
+      :group-id="groupId"
+      @createChallenge="challengeCreated"
+    /><div
+      v-if="challenges.length === 0"
+      class="row no-quest-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="svg-icon challenge-icon"
+          v-html="icons.challengeIcon"
+        ></div><h4 v-once>
+          {{ $t('haveNoChallenges') }}
+        </h4><p v-once>
+          {{ $t('challengeDetails') }}
+        </p><button
+          class="btn btn-secondary"
+          @click="createChallenge()"
+        >
+          {{ $t('createChallenge') }}
+        </button>
+      </div>
+    </div><template v-else>
+      <challenge-item
+        v-for="challenge in challenges"
+        :key="challenge._id"
+        :challenge="challenge"
+        :full-layout="false"
+      /><div class="col-12 text-center">
+        <button
+          class="btn btn-secondary"
+          @click="createChallenge()"
+        >
+          {{ $t('createChallenge') }}
+        </button>
+      </div>
+    </template>
+  </div>
 </template>
 
 <style lang="scss" scoped>

website/client/src/components/challenges/index.vue

@@ -1,11 +1,23 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'myChallenges'}", :class="{'active': $route.name === 'myChallenges'}") {{ $t('myChallenges') }}
-    router-link.nav-link(:to="{name: 'findChallenges'}", :class="{'active': $route.name === 'findChallenges'}") {{ $t('findChallenges') }}
-
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'myChallenges'}"
+        :class="{'active': $route.name === 'myChallenges'}"
+      >
+        {{ $t('myChallenges') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'findChallenges'}"
+        :class="{'active': $route.name === 'findChallenges'}"
+      >
+        {{ $t('findChallenges') }}
+      </router-link>
+    </secondary-menu><div class="col-12">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>

website/client/src/components/challenges/leaveChallengeModal.vue

@@ -1,10 +1,26 @@
-<template lang="pug">
-  b-modal#leave-challenge-modal(:title="$t('leaveChallenge')", size='sm', :hide-footer="true")
-    .modal-body
-      h2 {{ $t('confirmKeepChallengeTasks') }}
-      div
-        button.btn.btn-primary(@click='leaveChallenge("keep")') {{ $t('keepThem') }}
-        button.btn.btn-danger(@click='leaveChallenge("remove-all")') {{ $t('removeThem') }}
+<template>
+  <b-modal
+    id="leave-challenge-modal"
+    :title="$t('leaveChallenge')"
+    size="sm"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <h2>{{ $t('confirmKeepChallengeTasks') }}</h2><div>
+        <button
+          class="btn btn-primary"
+          @click="leaveChallenge('keep')"
+        >
+          {{ $t('keepThem') }}
+        </button><button
+          class="btn btn-danger"
+          @click="leaveChallenge('remove-all')"
+        >
+          {{ $t('removeThem') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>

website/client/src/components/challenges/myChallenges.vue

@@ -1,41 +1,73 @@
-<template lang="pug">
-.row
-  challenge-modal(v-on:createChallenge='challengeCreated')
-  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-
-  .col-10.standard-page
-    .row.header-row
-      .col-md-8.text-left
-        h1(v-once) {{$t('myChallenges')}}
-      .col-md-4
-        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
-        button.btn.btn-secondary.create-challenge-button.float-right(@click='createChallenge()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createChallenge')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && challenges.length === 0')
-        .svg-icon(v-html="icons.challengeIcon")
-        h2(v-once) {{$t('noChallengeTitle')}}
-        p(v-once) {{$t('challengeDescription1')}}
-        p(v-once) {{$t('challengeDescription2')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && challenges.length > 0 && filteredChallenges.length === 0')
-        h2(v-once) {{$t('noChallengeMatchFilters')}}
-
-    .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges')
-        challenge-item(:challenge='challenge')
-      mugen-scroll(
-        :handler="infiniteScrollTrigger",
-        :should-handle="!loading && canLoadMore",
-        :threshold="1",
-        v-show="loading",
-      )
-        h2.col-12.loading(v-once) {{ $t('loading') }}
+<template>
+  <div class="row">
+    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><div class="col-10 standard-page">
+      <div class="row header-row">
+        <div class="col-md-8 text-left">
+          <h1 v-once>
+            {{ $t('myChallenges') }}
+          </h1>
+        </div><div class="col-md-4">
+<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
+  b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
+class="btn btn-secondary create-challenge-button float-right"
+@click="createChallenge()"
+>
+<div
+class="svg-icon positive-icon"
+v-html="icons.positiveIcon"
+></div><span v-once>{{ $t('createChallenge') }}</span>
+</button>
+        </div>
+      </div><div class="row">
+        <div
+          v-if="!loading && challenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.challengeIcon"
+          ></div><h2 v-once>
+            {{ $t('noChallengeTitle') }}
+          </h2><p v-once>
+            {{ $t('challengeDescription1') }}
+          </p><p v-once>
+            {{ $t('challengeDescription2') }}
+          </p>
+        </div>
+      </div><div class="row">
+        <div
+          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <h2 v-once>
+            {{ $t('noChallengeMatchFilters') }}
+          </h2>
+        </div>
+      </div><div class="row">
+        <div
+          v-for="challenge in filteredChallenges"
+          class="col-12 col-md-6"
+        >
+          <challenge-item :challenge="challenge" />
+        </div><mugen-scroll
+          v-show="loading"
+          :handler="infiniteScrollTrigger"
+          :should-handle="!loading && canLoadMore"
+          :threshold="1"
+        >
+          <h2
+            v-once
+            class="col-12 loading"
+          >
+            {{ $t('loading') }}
+          </h2>
+        </mugen-scroll>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

website/client/src/components/challenges/sidebar.vue

@@ -1,36 +1,81 @@
-<template lang="pug">
-.standard-sidebar.d-none.d-sm-block
-  .form-group
-    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-  form
-    h2(v-once) {{ $t('filter') }}
-    .form-group
-      h3 {{ $t('category') }}
-      .form-check(
-        v-for="group in categoryOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group(v-if='$route.name !== "findChallenges"')
-      h3 {{ $t('membership') }}
-      .form-check(
-        v-for="group in roleOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group
-      h3 {{ $t('ownership') }}
-      .form-check(
-        v-for="group in ownershipOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
+<template>
+  <div class="standard-sidebar d-none d-sm-block">
+    <div class="form-group">
+      <input
+        v-model="searchTerm"
+        class="form-control search"
+        type="text"
+        :placeholder="$t('search')"
+      >
+    </div><form>
+      <h2 v-once>
+        {{ $t('filter') }}
+      </h2><div class="form-group">
+        <h3>{{ $t('category') }}</h3><div
+          v-for="group in categoryOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="categoryFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div><div
+        v-if="$route.name !== 'findChallenges'"
+        class="form-group"
+      >
+        <h3>{{ $t('membership') }}</h3><div
+          v-for="group in roleOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="roleFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div><div class="form-group">
+        <h3>{{ $t('ownership') }}</h3><div
+          v-for="group in ownershipOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="ownershipFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>