Cleanup vue templates

13 files changed, 159 insertions, 154 deletions

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 703da749ad3..159c1e6a453 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -43,21 +43,22 @@ export default {
 </script>
 
 <template>
-<div class="repository-view tree-content-holder">
-  <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
-    <repo-tabs/>
-    <component :is="currentBlobView" class="blob-viewer-container"></component>
-    <repo-file-buttons/>
+  <div class="repository-view tree-content-holder">
+    <!-- Purposely place both elements side by side to prevent whitespace -->
+    <repo-sidebar /><div class="panel-right" :class="{'edit-mode': editMode}">
+      <repo-tabs />
+      <component :is="currentBlobView" class="blob-viewer-container" />
+      <repo-file-buttons />
+    </div>
+    <repo-commit-section />
+    <popup-dialog
+      :primary-button-label="__('Discard changes')"
+      :open="dialog.open"
+      kind="warning"
+      :title="__('Are you sure?')"
+      :body="__('Are you sure you want to discard your changes?')"
+      @toggle="dialogToggled"
+      @submit="dialogSubmitted"
+    />
   </div>
-  <repo-commit-section/>
-  <popup-dialog
-    :primary-button-label="__('Discard changes')"
-    :open="dialog.open"
-    kind="warning"
-    :title="__('Are you sure?')"
-    :body="__('Are you sure you want to discard your changes?')"
-    @toggle="dialogToggled"
-    @submit="dialogSubmitted"
-  />
-</div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index bd83f80c928..8441dad1cee 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -59,42 +59,42 @@ export default RepoCommitSection;
 </script>
 
 <template>
-<div id="commit-area" v-if="isCommitable && changedFiles.length" >
-  <form class="form-horizontal">
-    <fieldset>
-      <div class="form-group">
-        <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
-        <div class="col-md-4">
-          <ul class="list-unstyled changed-files">
-            <li v-for="file in branchPaths" :key="file.id">
-              <span class="help-block">{{file}}</span>
-            </li>
-          </ul>
+  <div id="commit-area" v-if="isCommitable && changedFiles.length">
+    <form class="form-horizontal">
+      <fieldset>
+        <div class="form-group">
+          <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
+          <div class="col-md-4">
+            <ul class="list-unstyled changed-files">
+              <li v-for="file in branchPaths" :key="file.id">
+                <span class="help-block">{{file}}</span>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <!-- Textarea
-      -->
-      <div class="form-group">
-        <label class="col-md-4 control-label" for="commit-message">Commit message</label>
-        <div class="col-md-4">
-          <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea>
+        <!-- Textarea
+        -->
+        <div class="form-group">
+          <label class="col-md-4 control-label" for="commit-message">Commit message</label>
+          <div class="col-md-4">
+            <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage" />
+          </div>
         </div>
-      </div>
-      <!-- Button Drop Down
-      -->
-      <div class="form-group target-branch">
-        <label class="col-md-4 control-label" for="target-branch">Target branch</label>
-        <div class="col-md-4">
-          <span class="help-block">{{targetBranch}}</span>
+        <!-- Button Drop Down
+        -->
+        <div class="form-group target-branch">
+          <label class="col-md-4 control-label" for="target-branch">Target branch</label>
+          <div class="col-md-4">
+            <span class="help-block">{{targetBranch}}</span>
+          </div>
         </div>
-      </div>
-      <div class="col-md-offset-4 col-md-4">
-        <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit">
-          <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading"></i>
-          <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span>
-        </button>
-      </div>
-    </fieldset>
-  </form>
-</div>
+        <div class="col-md-offset-4 col-md-4">
+          <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit">
+            <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading" aria-label="loading" />
+            <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span>
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index e954fd38fc9..e8f3ab8924b 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -42,8 +42,8 @@ export default {
 </script>
 
 <template>
-<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary">
-  <i :class="buttonIcon"></i>
-  <span>{{buttonLabel}}</span>
-</button>
+  <button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary">
+    <i :class="buttonIcon" />
+    <span>{{buttonLabel}}</span>
+  </button>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index fd1a21e15b4..ef5fedd06fc 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -131,5 +131,5 @@ export default RepoEditor;
 </script>
 
 <template>
-<div id="ide"></div>
+  <div id="ide" />
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index f604bc22a26..8c63380b578 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -46,21 +46,21 @@ export default RepoFile;
 </script>
 
 <template>
-<tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}">
-  <td @click.prevent="linkClicked(file)">
-    <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
-    <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
-    <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a>
-  </td>
+  <tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}">
+    <td @click.prevent="linkClicked(file)">
+      <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+      <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}" aria-label="loading" />
+      <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a>
+    </td>
 
-  <td v-if="!isMini" class="hidden-sm hidden-xs">
-    <div class="commit-message">
-      <a :href="file.lastCommitUrl">{{file.lastCommitMessage}}</a>
-    </div>
-  </td>
+    <td v-if="!isMini" class="hidden-sm hidden-xs">
+      <div class="commit-message">
+        <a :href="file.lastCommitUrl">{{file.lastCommitMessage}}</a>
+      </div>
+    </td>
 
-  <td v-if="!isMini" class="hidden-xs">
-    <span class="commit-update" :title="tooltipTitle(file.lastCommitUpdate)">{{timeFormated(file.lastCommitUpdate)}}</span>
-  </td>
-</tr>
+    <td v-if="!isMini" class="hidden-xs">
+      <span class="commit-update" :title="tooltipTitle(file.lastCommitUpdate)">{{timeFormated(file.lastCommitUpdate)}}</span>
+    </td>
+  </tr>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 628d02ca704..b0a8206f109 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -28,15 +28,15 @@ export default RepoFileButtons;
 </script>
 
 <template>
-<div id="repo-file-buttons" v-if="isMini">
-  <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a>
+  <div id="repo-file-buttons" v-if="isMini">
+    <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a>
 
-  <div class="btn-group" role="group" aria-label="File actions">
-    <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a>
-    <a :href="activeFile.commits_path" class="btn btn-default history">History</a>
-    <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a>
-  </div>
+    <div class="btn-group" role="group" aria-label="File actions">
+      <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a>
+      <a :href="activeFile.commits_path" class="btn btn-default history">History</a>
+      <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a>
+    </div>
 
-  <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
-</div>
+    <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file_options.vue b/app/assets/javascripts/repo/components/repo_file_options.vue
index ba53ce0eecc..6a15755f029 100644
--- a/app/assets/javascripts/repo/components/repo_file_options.vue
+++ b/app/assets/javascripts/repo/components/repo_file_options.vue
@@ -17,7 +17,7 @@ export default RepoFileOptions;
 </script>
 
 <template>
-<tr v-if="isMini" class="repo-file-options">
+  <tr v-if="isMini" class="repo-file-options">
     <td>
       <span class="title">{{projectName}}</span>
     </td>
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index 38e9f16d041..413b6c4cf2c 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/repo/components/repo_loading_file.vue
@@ -29,23 +29,23 @@ export default RepoLoadingFile;
 </script>
 
 <template>
-<tr v-if="loading.tree && !hasFiles" class="loading-file">
-  <td>
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
+  <tr v-if="loading.tree && !hasFiles" class="loading-file">
+    <td>
+      <div class="animation-container animation-container-small">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n" />
+      </div>
+    </td>
 
-  <td v-if="!isMini" class="hidden-sm hidden-xs">
-    <div class="animation-container">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
+    <td v-if="!isMini" class="hidden-sm hidden-xs">
+      <div class="animation-container">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n" />
+      </div>
+    </td>
 
-  <td v-if="!isMini" class="hidden-xs">
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
-</tr>
+    <td v-if="!isMini" class="hidden-xs">
+      <div class="animation-container animation-container-small">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n" />
+      </div>
+    </td>
+  </tr>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/repo/components/repo_prev_directory.vue
index 6a0d684052f..30d9d99d650 100644
--- a/app/assets/javascripts/repo/components/repo_prev_directory.vue
+++ b/app/assets/javascripts/repo/components/repo_prev_directory.vue
@@ -18,9 +18,9 @@ export default RepoPreviousDirectory;
 </script>
 
 <template>
-<tr class="prev-directory">
-  <td colspan="3">
-    <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
-  </td>
-</tr>
+  <tr class="prev-directory">
+    <td colspan="3">
+      <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
+    </td>
+  </tr>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index d8de022335b..a908b8caf0d 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -23,10 +23,10 @@ export default {
 </script>
 
 <template>
-<div>
-  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
-  <div v-if="activeFile.render_error" class="vertical-center render-error">
-    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  <div>
+    <div v-if="!activeFile.render_error" v-html="activeFile.html" />
+    <div v-if="activeFile.render_error" class="vertical-center render-error">
+      <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+    </div>
   </div>
-</div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index d6d832efc49..f737035e2fc 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -66,39 +66,43 @@ export default RepoSidebar;
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak>
-  <table class="table">
-    <thead v-if="!isMini">
-      <tr>
-        <th class="name">Name</th>
-        <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
-        <th class="hidden-xs last-update">Last Update</th>
-      </tr>
-    </thead>
-    <tbody>
-      <repo-file-options
-        :is-mini="isMini"
-        :project-name="projectName"/>
-      <repo-previous-directory
-        v-if="isRoot"
-        :prev-url="prevURL"
-        @linkclicked="linkClicked(prevURL)"/>
-      <repo-loading-file
-        v-for="n in 5"
-        :key="n"
-        :loading="loading"
-        :has-files="!!files.length"
-        :is-mini="isMini"/>
-      <repo-file
-        v-for="file in files"
-        :key="file.id"
-        :file="file"
-        :is-mini="isMini"
-        @linkclicked="linkClicked(file)"
-        :is-tree="isTree"
-        :has-files="!!files.length"
-        :active-file="activeFile"/>
-    </tbody>
-  </table>
-</div>
+  <div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak>
+    <table class="table">
+      <thead v-if="!isMini">
+        <tr>
+          <th class="name">Name</th>
+          <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
+          <th class="hidden-xs last-update">Last Update</th>
+        </tr>
+      </thead>
+      <tbody>
+        <repo-file-options
+          :is-mini="isMini"
+          :project-name="projectName"
+        />
+        <repo-previous-directory
+          v-if="isRoot"
+          :prev-url="prevURL"
+          @linkclicked="linkClicked(prevURL)"
+        />
+        <repo-loading-file
+          v-for="n in 5"
+          :key="n"
+          :loading="loading"
+          :has-files="!!files.length"
+          :is-mini="isMini"
+        />
+        <repo-file
+          v-for="file in files"
+          :key="file.id"
+          :file="file"
+          :is-mini="isMini"
+          @linkclicked="linkClicked(file)"
+          :is-tree="isTree"
+          :has-files="!!files.length"
+          :active-file="activeFile"
+        />
+      </tbody>
+    </table>
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 712d64c236f..cacbb3e197b 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -33,13 +33,13 @@ export default RepoTab;
 </script>
 
 <template>
-<li>
-  <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
-    <i class="fa" :class="changedClass"></i>
-  </a>
+  <li>
+    <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
+      <i class="fa" :class="changedClass" aria-label="modified" />
+    </a>
 
-  <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
+    <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
 
-  <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
-</li>
+    <i v-if="tab.loading" class="fa fa-spinner fa-spin" aria-label="loading" />
+  </li>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue
index 907a03e1601..26c1af3c6df 100644
--- a/app/assets/javascripts/repo/components/repo_tabs.vue
+++ b/app/assets/javascripts/repo/components/repo_tabs.vue
@@ -36,8 +36,8 @@ export default RepoTabs;
 </script>
 
 <template>
-<ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
-  <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked"/>
-  <li class="tabs-divider" />
-</ul>
+  <ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
+    <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked" />
+    <li class="tabs-divider" />
+  </ul>
 </template>