clean up layout

src/components/moderation_tools/moderation_tools.vue

@@ -1,10 +1,8 @@
 <template>
-  <div
+<div>
-    class="block"
-    style="position: relative"
-  >
   <Popper
     trigger="click"
+    @hide='showDropDown = false'
     append-to-body
     :options="{
       placement: 'bottom-end',
@@ -12,151 +10,70 @@
         arrow: { enabled: true },
         offset: { offset: '0, 5px' },
       }
-      }"
+    }">
-      @hide="showDropDown = false"
-    >
     <div class="popper-wrapper">
       <div class="dropdown-menu">
-          <span v-if="user.is_local">
+        <span v-if='user.is_local'>
-            <button
+          <button class="dropdown-item" @click='toggleRight("admin")'>
-              class="dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
-            >
             {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
           </button>
-            <button
+          <button class="dropdown-item" @click='toggleRight("moderator")'>
-              class="dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
-            >
             {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
           </button>
-            <div
+          <div role="separator" class="dropdown-divider"></div>
-              role="separator"
-              class="dropdown-divider"
-            />
         </span>
-          <button
+        <button class="dropdown-item" @click='toggleActivationStatus()'>
-            class="dropdown-item"
-            @click="toggleActivationStatus()"
-          >
           {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
         </button>
-          <button
+        <button class="dropdown-item" @click='deleteUserDialog(true)'>
-            class="dropdown-item"
-            @click="deleteUserDialog(true)"
-          >
           {{ $t('user_card.admin_menu.delete_account') }}
         </button>
-          <div
+        <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
-            v-if="hasTagPolicy"
+        <span v-if='hasTagPolicy'>
-            role="separator"
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
-            class="dropdown-divider"
-          />
-          <span v-if="hasTagPolicy">
-            <button
-              class="dropdown-item"
-              @click="toggleTag(tags.FORCE_NSFW)"
-            >
             {{ $t('user_card.admin_menu.force_nsfw') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
-              class="dropdown-item"
-              @click="toggleTag(tags.STRIP_MEDIA)"
-            >
             {{ $t('user_card.admin_menu.strip_media') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
-              class="dropdown-item"
-              @click="toggleTag(tags.FORCE_UNLISTED)"
-            >
             {{ $t('user_card.admin_menu.force_unlisted') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
-              class="dropdown-item"
-              @click="toggleTag(tags.SANDBOX)"
-            >
             {{ $t('user_card.admin_menu.sandbox') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
-            >
             {{ $t('user_card.admin_menu.disable_remote_subscription') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
-            >
             {{ $t('user_card.admin_menu.disable_any_subscription') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
-              />
           </button>
-            <button
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.QUARANTINE)"
-            >
             {{ $t('user_card.admin_menu.quarantine') }}
-              <span
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
-              />
           </button>
         </span>
       </div>
     </div>
-      <button
+    <button slot="reference" class="btn btn-default moderation-toggle-btn" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
-        slot="reference"
-        :class="{ pressed: showDropDown }"
-        @click="toggleMenu"
-      >
       {{ $t('user_card.admin_menu.moderation') }}
     </button>
   </Popper>
   <portal to="modal">
-      <DialogModal
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
-        v-if="showDeleteUserDialog"
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
-        :on-cancel="deleteUserDialog.bind(this, false)"
-      >
-        <template slot="header">
-          {{ $t('user_card.admin_menu.delete_user') }}
-        </template>
       <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
       <template slot="footer">
-          <button
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
-            class="btn btn-default"
-            @click="deleteUserDialog(false)"
-          >
           {{ $t('general.cancel') }}
         </button>
-          <button
+        <button class="btn btn-default danger" @click='deleteUser()'>
-            class="btn btn-default danger"
-            @click="deleteUser()"
-          >
           {{ $t('user_card.admin_menu.delete_user') }}
         </button>
       </template>
@@ -190,4 +107,11 @@
   }
 }
 
+.moderation-toggle-btn {
+  &#{&} {
+    margin: 0;
+    width: 100%;
+  }
+}
+
 </style>

src/components/user_card/user_card.vue

@@ -47,7 +47,7 @@
       </div>
       <div v-if="loggedIn && isOtherUser" class="user-interactions">
         <div>
-          <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')" v-if="user.following">
+          <button @click="unfollowUser" class="btn btn-default pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')" v-if="user.following">
             <template v-if="followRequestInProgress">
               {{ $t('user_card.follow_progress') }}
             </template>
@@ -55,7 +55,7 @@
               {{ $t('user_card.following') }}
             </template>
           </button>
-          <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''" v-else>
+          <button @click="followUser" class="btn btn-default" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''" v-else>
             <template v-if="followRequestInProgress">
               {{ $t('user_card.follow_progress') }}
             </template>
@@ -67,45 +67,40 @@
             </template>
           </button>
         </div>
+
         <div>
-          <ProgressButton :click="subscribeUser" v-if="!user.subscribed">
+          <ProgressButton class="btn btn-default" :click="subscribeUser" v-if="!user.subscribed">
             {{ $t('user_card.subscribe') }}
           </ProgressButton>
-          <ProgressButton class="pressed" :click="unsubscribeUser" v-else>
+          <ProgressButton class="btn btn-default pressed" :click="unsubscribeUser" v-else>
             {{ $t('user_card.subscribed') }}
           </ProgressButton>
         </div>
+
         <div>
-          <span v-if='user.muted'>
+          <button @click="unmuteUser" class="btn btn-default pressed" v-if="user.muted">
-            <button @click="unmuteUser" class="pressed">
             {{ $t('user_card.muted') }}
           </button>
-          </span>
+          <button @click="muteUser" class="btn btn-default" v-else>
-          <span v-if='!user.muted'>
-            <button @click="muteUser">
             {{ $t('user_card.mute') }}
           </button>
-          </span>
         </div>
+
         <div>
-          <span v-if='user.statusnet_blocking'>
+          <button @click="unblockUser" class="btn btn-default pressed" v-if="user.statusnet_blocking">
-            <button @click="unblockUser" class="pressed">
             {{ $t('user_card.blocked') }}
           </button>
-          </span>
+          <button @click="blockUser" class="btn btn-default" v-else>
-          <span v-if='!user.statusnet_blocking'>
-            <button @click="blockUser">
             {{ $t('user_card.block') }}
           </button>
-          </span>
         </div>
-        <div class='block'>
+
-          <span>
+        <div>
           <button @click="reportUser">
             {{ $t('user_card.report') }}
           </button>
-          </span>
         </div>
+
         <ModerationTools :user='user' v-if='loggedIn.role === "admin"' />
       </div>
       <div class="user-interactions" v-if="!loggedIn && user.is_local">
@@ -366,25 +361,23 @@
     justify-content: space-between;
     margin-right: -.75em;
 
-    > div {
+    > * {
       flex: 1 0 0;
-      margin-right: .75em;
+      margin: 0 .75em .6em 0;
-      margin-bottom: .6em;
       white-space: nowrap;
-    }
 
-    button {
+      > button {
-      width: 100%;
-      height: 100%;
         margin: 0;
+        width: 100%;
+      }
     }
 
     .remote-button {
-      height: 28px !important;
+      height: 28px;
-      width: 92%;
+      margin: 0;
     }
 
-    .pressed {
+    button.pressed {
       border-bottom-color: rgba(255, 255, 255, 0.2);
       border-top-color: rgba(0, 0, 0, 0.2);
     }

src/components/user_profile/user_profile.js

@@ -3,7 +3,6 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
-import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 
@@ -132,7 +131,6 @@ const UserProfile = {
     Timeline,
     FollowerList,
     FriendList,
-    ModerationTools,
     FollowCard,
     Conversation
   }