Merge branch 'fixes-roundup5' into shigusegubu-themes3

src/components/login_form/login_form.scss

@@ -0,0 +1,44 @@
+.login-panel {
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    padding: 0.6em;
+  }
+
+  .btn {
+    min-height: 2em;
+    width: 10em;
+  }
+
+  .register {
+    flex: 1 1;
+  }
+
+  .login-bottom {
+    margin-top: 1em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0.3em 0.5em 0.6em;
+    line-height: 24px;
+  }
+
+  .login-error {
+    display: flex;
+    line-height: 2;
+    margin: 0.5em;
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+
+  .error-message {
+    flex: 1;
+  }
+}

src/components/login_form/login_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login-panel panel panel-default">
     <!-- Default panel contents -->
 
     <div class="panel-heading">
@@ -70,14 +70,13 @@
           </div>
         </div>
       </form>
-    </div>
+      <div
-
+        v-if="error"
-    <div
+        class="login-error alert error"
-      v-if="error"
+      >
-      class="form-group"
+        <span class="error-message">
-    >
+          {{ error }}
-      <div class="alert error">
+        </span>
-        {{ error }}
         <button
           class="button-unstyled"
           @click="clearError"
@@ -94,57 +93,4 @@
 
 <script src="./login_form.js"></script>
 
-<style lang="scss">
+<style src="./login_form.scss"/>
-.login-form {
-  display: flex;
-  flex-direction: column;
-  padding: 0.6em;
-
-  .btn {
-    min-height: 2em;
-    width: 10em;
-  }
-
-  .register {
-    flex: 1 1;
-  }
-
-  .login-bottom {
-    margin-top: 1em;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    padding: 0.3em 0.5em 0.6em;
-    line-height: 24px;
-  }
-
-  .form-bottom {
-    display: flex;
-    padding: 0.5em;
-    height: 32px;
-
-    button {
-      width: 10em;
-    }
-
-    p {
-      margin: 0.35em;
-      padding: 0.35em;
-      display: flex;
-    }
-  }
-
-  .error {
-    text-align: center;
-    animation-name: shakeError;
-    animation-duration: 0.4s;
-    animation-timing-function: ease-in-out;
-  }
-}
-</style>

src/components/search/search.vue

@@ -119,10 +119,13 @@
           :key="hashtag.url"
           class="status trend search-result"
         >
-          <div class="hashtag">
+          <router-link
-            <router-link :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }">
+            class="list-item hashtag"
+            :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }"
+          >
+            <span class="name">
               #{{ hashtag.name }}
-            </router-link>
+            </span>
             <div v-if="lastHistoryRecord(hashtag)">
               <span v-if="lastHistoryRecord(hashtag).accounts == 1">
                 {{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
@@ -131,7 +134,7 @@
                 {{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
               </span>
             </div>
-          </div>
+          </router-link>
           <div
             v-if="lastHistoryRecord(hashtag)"
             class="count"
@@ -199,10 +202,13 @@
 
   .hashtag {
     flex: 1 1 auto;
-    color: var(--text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    .name {
+      color: var(--link);
+    }
   }
 
   .count {