html format other components

2019-10-12 17:05:15 +02:00
parent 7b4671fbf9
commit f99e3fab8b
180 changed files with 6536 additions and 2894 deletions
@@ -7,23 +7,33 @@
  >
    <form @submit.stop.prevent="submit">
      <div class="form-group">
-        <label><strong v-once>{{ $t('name') }} *</strong></label><b-form-input
+        <label>
+          <strong v-once>{{ $t('name') }} *</strong>
+        </label>
+        <b-form-input
          v-model="workingGroup.name"
          type="text"
          :placeholder="$t('newGuildPlaceholder')"
        />
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('privacySettings') }} *</strong></label><br><div class="custom-control custom-checkbox">
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('privacySettings') }} *</strong>
+        </label>
+        <br>
+        <div class="custom-control custom-checkbox">
          <input
            id="onlyLeaderCreatesChallenges"
            v-model="workingGroup.onlyLeaderCreatesChallenges"
            class="custom-control-input"
            type="checkbox"
-          ><label
+          >
+          <label
            v-once
            class="custom-control-label"
            for="onlyLeaderCreatesChallenges"
-          >{{ $t('onlyLeaderCreatesChallenges') }}</label><div
+          >{{ $t('onlyLeaderCreatesChallenges') }}</label>
+          <div
            id="groupPrivateDescription1"
            class="icon"
            :title="$t('privateDescription')"
@@ -32,93 +42,125 @@
              class="svg-icon"
              v-html="icons.information"
            ></div>
-          </div><b-tooltip
+          </div>
+          <b-tooltip
            :title="$t('onlyLeaderCreatesChallengesDetail')"
            target="groupPrivateDescription1"
          />
-        </div><!-- br--><!-- @TODO Implement in V2 .custom-control.custom-checkboxinput.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
+        </div>
+        <!-- br-->
+        <!-- @TODO Implement in V2 .custom-control.custom-checkboxinput.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
 label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
 // "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
 // @TODO discuss the impact of this with moderators before implementing
--><br><div
-v-if="!isParty && !this.workingGroup.id"
-class="custom-control custom-checkbox"
->
-<input
-id="privateGuild"
-v-model="workingGroup.privateGuild"
-class="custom-control-input"
-type="checkbox"
-><label
-v-once
-class="custom-control-label"
-for="privateGuild"
->{{ $t('privateGuild') }}</label><div
-id="groupPrivateDescription2"
-class="icon"
-:title="$t('privateDescription')"
->
-<div
-class="svg-icon"
-v-html="icons.information"
-></div>
-</div><b-tooltip
-:title="$t('privateDescription')"
-                                                                                 target="groupPrivateDescription2"
-/>
-        </div><!-- br--><!-- @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
+        -->
+        <br>
+        <div
+          v-if="!isParty && !this.workingGroup.id"
+          class="custom-control custom-checkbox"
+        >
+          <input
+            id="privateGuild"
+            v-model="workingGroup.privateGuild"
+            class="custom-control-input"
+            type="checkbox"
+          >
+          <label
+            v-once
+            class="custom-control-label"
+            for="privateGuild"
+          >{{ $t('privateGuild') }}</label>
+          <div
+            id="groupPrivateDescription2"
+            class="icon"
+            :title="$t('privateDescription')"
+          >
+            <div
+              class="svg-icon"
+              v-html="icons.information"
+            ></div>
+          </div>
+          <b-tooltip
+            :title="$t('privateDescription')"
+            target="groupPrivateDescription2"
+          />
+        </div>
+        <!-- br-->
+        <!-- @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
 label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
 // "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
-->
-      </div><div
+        -->
+      </div>
+      <div
        v-if="!isParty"
        class="form-group"
      >
-        <label><strong v-once>{{ $t('guildSummary') }} *</strong></label><div class="summary-count">
+        <label>
+          <strong v-once>{{ $t('guildSummary') }} *</strong>
+        </label>
+        <div
+          class="summary-count"
+        >
          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        </div><textarea
+        </div>
+        <textarea
          v-model="workingGroup.summary"
          class="form-control summary-textarea"
          :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildSummaryPlaceholder')"
-        ></textarea><!-- @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('groupDescription') }} *</strong></label><a
+        ></textarea>
+        <!-- @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('groupDescription') }} *</strong>
+        </label>
+        <a
          v-markdown="$t('markdownFormattingHelp')"
          class="float-right"
-        ></a><textarea
+        ></a>
+        <textarea
          v-model="workingGroup.description"
          class="form-control description-textarea"
          type="text"
          textarea="textarea"
          :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')"
        ></textarea>
-      </div><div
+      </div>
+      <div
        v-if="creatingParty && !workingGroup.id"
        class="form-group"
      >
-        <span><toggleSwitch
-          v-model="inviteMembers"
-          :label="$t('inviteMembersNow')"
-        /></span>
-      </div><div
+        <span>
+          <toggleSwitch
+            v-model="inviteMembers"
+            :label="$t('inviteMembersNow')"
+          />
+        </span>
+      </div>
+      <div
        v-if="!creatingParty && !isParty"
        class="form-group"
        style="position: relative;"
      >
-        <label><strong v-once>{{ $t('categories') }} *</strong></label><div
+        <label>
+          <strong v-once>{{ $t('categories') }} *</strong>
+        </label>
+        <div
          class="category-wrap"
          @click.prevent="toggleCategorySelect"
        >
          <span
            v-if="workingGroup.categories.length === 0"
            class="category-select"
-          >{{ $t('none') }}</span><div
+          >{{ $t('none') }}</span>
+          <div
            v-for="category in workingGroup.categories"
            class="category-label"
          >
            {{ $t(categoriesHashByKey[category]) }}
          </div>
-        </div><div
+        </div>
+        <div
          v-if="showCategorySelect"
          class="category-box"
        >
@@ -135,42 +177,54 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
                class="custom-control-input"
                type="checkbox"
                :value="group.key"
-              ><label
+              >
+              <label
                v-once
                class="custom-control-label"
                :for="`category-${group.key}`"
              >{{ $t(group.label) }}</label>
            </div>
-          </div><button
+          </div>
+          <button
            class="btn btn-primary"
            @click.prevent="toggleCategorySelect"
          >
            {{ $t('close') }}
          </button>
-        </div><!-- @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
-      </div><div
+        </div>
+        <!-- @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
+      </div>
+      <div
        v-if="inviteMembers && !workingGroup.id"
        class="form-group"
      >
-        <label><strong v-once>Invite via Email or User ID</strong><p v-once>{{ $t('inviteMembersHowTo') }} *</p></label><div>
+        <label>
+          <strong v-once>Invite via Email or User ID</strong>
+          <p v-once>{{ $t('inviteMembersHowTo') }} *</p>
+        </label>
+        <div>
          <div v-for="(member, index) in membersToInvite">
            <input
              v-model="member.value"
              type="text"
-            ><button @click.prevent="removeMemberToInvite(index)">
+            >
+            <button @click.prevent="removeMemberToInvite(index)">
              Remove
            </button>
-          </div><div>
+          </div>
+          <div>
            <input
              v-model="newMemberToInvite.value"
              type="text"
              placeholder="Email address or User ID"
-            ><button @click.prevent="addMemberToInvite()">
+            >
+            <button @click.prevent="addMemberToInvite()">
              Add
            </button>
          </div>
        </div>
-      </div><div class="form-group text-center">
+      </div>
+      <div class="form-group text-center">
        <div
          v-if="!this.workingGroup.id"
          class="item-with-icon"
@@ -178,20 +232,24 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
          <div
            class="svg-icon"
            v-html="icons.gem"
-          ></div><span class="count">4</span>
-        </div><button
+          ></div>
+          <span class="count">4</span>
+        </div>
+        <button
          v-if="!workingGroup.id"
          class="btn btn-primary btn-md"
          :disabled="!workingGroup.name || !workingGroup.description"
        >
          {{ creatingParty ? $t('createParty') : $t('createGuild') }}
-        </button><button
+        </button>
+        <button
          v-if="workingGroup.id"
          class="btn btn-primary btn-md"
          :disabled="!workingGroup.name || !workingGroup.description"
        >
          {{ isParty ? $t('updateParty') : $t('updateGuild') }}
-        </button><div
+        </button>
+        <div
          v-if="!this.workingGroup.id"
          v-once
          class="gem-description"