pug to html

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>