Move profile options next to follow button

bin/svgs.js

@@ -12,6 +12,7 @@ export default [
   { id: 'fa-star', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star.svg' },
   { id: 'fa-star-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star-o.svg' },
   { id: 'fa-ellipsis-h', src: 'src/thirdparty/font-awesome-svg-png/white/svg/ellipsis-h.svg' },
+  { id: 'fa-ellipsis-v', src: 'src/thirdparty/font-awesome-svg-png/white/svg/ellipsis-v.svg' },
   { id: 'fa-spinner', src: 'src/thirdparty/font-awesome-svg-png/white/svg/spinner.svg' },
   { id: 'fa-user', src: 'src/thirdparty/font-awesome-svg-png/white/svg/user.svg' },
   { id: 'fa-play-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/play-circle.svg' },

src/routes/_components/profile/AccountProfile.html

@@ -47,6 +47,7 @@
     grid-column-gap: 15px;
     grid-row-gap: 5px;
     padding: 20px;
+    padding-bottom: 0;
     justify-content: center;
     border-bottom: var(--main-border-size) solid var(--main-border);
   }
@@ -81,11 +82,13 @@
     }
   }
 
-  @media (max-width: 240px) {
+  @media (max-width: 400px) {
     .account-profile-grid {
-      grid-template-areas: "avatar      name"
+      grid-template-areas: "avatar      avatar"
-                           "avatar      label"
+                           "avatar      avatar"
+                           "name    name"
                            "username    username"
+                           "label       label"
                            "followed-by followed-by"
                            "follow      follow"
                            "note        note"
@@ -93,7 +96,6 @@
                            "details     details";
       grid-template-columns: min-content 1fr;
       grid-column-gap: 5px;
-      grid-row-gap: 0;
     }
   }
 

src/routes/_components/profile/AccountProfileDetails.html

@@ -32,47 +32,21 @@
       {intl.followers}
     </span>
   </a>
-  <!-- TODO: re-enable this when we support profile editing -->
-  {#if account && verifyCredentials && account.id !== verifyCredentials.id}
-    <div class="account-profile-more-options">
-      <IconButton
-        label="{intl.moreOptions}"
-        href="#fa-bars"
-        muted="true"
-        on:click="onMoreOptionsClick()"
-      />
-    </div>
-  {/if}
 </div>
 <style>
   .account-profile-details {
     grid-area: details;
-    display: grid;
+    display: flex;
-    margin: 0 5px;
+    gap: 20px;
-    align-items: center;
+    margin-bottom: 10px;
-    grid-template-columns: 1fr 1fr 1fr min-content;
   }
 
   .account-profile-details-item {
     display: flex;
     flex-direction: row;
-    padding: 5px;
     justify-content: center;
     font-size: 1.1em;
-  }
+    padding: 10px 0;
-
-  .account-profile-details-item[href]:hover {
-    text-decoration: none;
-    background: var(--button-bg-hover);
-    cursor: pointer;
-  }
-
-  .account-profile-details-item[href]:active {
-    background: var(--button-bg-active);
-  }
-
-  .account-profile-details-item-title {
-    color: var(--deemphasized-text-color);
   }
 
   .account-profile-details-item-datum {
@@ -82,6 +56,9 @@
   }
 
   @media (max-width: 767px) {
+    .account-profile-details {
+      margin-bottom: 0;
+    }
     .account-profile-details-item {
       flex-direction: column;
       margin-left: 5px;
@@ -108,20 +85,8 @@
       font-size: 1em;
     }
   }
-
-  @media (max-width: 240px) {
-    .account-profile-details {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-    .account-profile-more-options {
-      justify-self: flex-end;
-      grid-column: 1 / 4;
-    }
-  }
 </style>
 <script>
-  import IconButton from '../IconButton.html'
-  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
   import { LOCALE } from '../../_static/intl.js'
   import { formatIntl } from '../../_utils/formatIntl.js'
   import { thunk } from '../../_utils/thunk.js'
@@ -147,16 +112,6 @@
       followingLabel: ({ numFollowing }) => (
         formatIntl('intl.followingLabel', { count: numFollowing })
       )
-    },
-    methods: {
-      async onMoreOptionsClick () {
-        const { account, relationship, verifyCredentials } = this.get()
-        const showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
-        showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
-      }
-    },
-    components: {
-      IconButton
     }
   }
 </script>

src/routes/_components/profile/AccountProfileFollow.html

@@ -9,6 +9,16 @@
   <button class="account-profile-follow-button" on:click="onFollowButtonClick(event)">
     {pressed ? pressedLabel : label}
   </button>
+  <!-- TODO: re-enable this when we support profile editing -->
+  {#if account && verifyCredentials && account.id !== verifyCredentials.id}
+    <IconButton
+      className="account-profile-more-options-button"
+      label="{intl.moreOptions}"
+      href="#fa-ellipsis-v"
+      muted="true"
+      on:click="onMoreOptionsClick()"
+    />
+  {/if}
 </div>
 <style>
   .account-profile-follow {
@@ -17,29 +27,47 @@
     display: none;
   }
   .account-profile-follow.shown {
-    display: block;
+    display: flex;
+    gap: 5px;
   }
 
-  @media (max-width: 240px) {
+  @media (max-width: 400px) {
     .account-profile-follow {
       justify-self: flex-end;
     }
   }
 
+  :global(.account-profile-more-options-button),
   .account-profile-follow-button {
-    padding: 0.6em;
+    padding: 10px;
     font-size: 1.1em;
+  }
+
+  :global(.icon-button.account-profile-more-options-button) {
+    border: 1px solid var(--button-border);
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  .account-profile-follow-button {
     min-width: 10ch;
   }
 </style>
 <script>
   import { store } from '../../_store/store.js'
+  import IconButton from '../IconButton.html'
+  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
   import { setAccountFollowed } from '../../_actions/follow.js'
   import { setAccountBlocked } from '../../_actions/block.js'
   import { formatIntl } from '../../_utils/formatIntl.js'
 
   export default {
     methods: {
+      async onMoreOptionsClick () {
+        const { account, relationship, verifyCredentials } = this.get()
+        const showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
+        showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
+      },
       oncreate () {
         if (process.browser) {
           window.__button = this
@@ -99,6 +127,9 @@
       pressed: ({ blocking, following, followRequested }) => (
         !blocking && (following || followRequested)
       )
+    },
+    components: {
+      IconButton
     }
   }
 </script>