Fix name display and CSS

lbryio · Sep 27, 2021 · 736c665 · 736c665
1 parent 4b3c7e6
commit 736c665
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 14 deletions.
diff --git a/ui/component/channelMentionSuggestion/view.jsx b/ui/component/channelMentionSuggestion/view.jsx
@@ -22,8 +22,8 @@ export default function ChannelMentionSuggestion(props: Props) {
         <div className="channel-mention__suggestion">
           <ChannelThumbnail xsmall uri={uri} />
           <span className="channel-mention__suggestion-label">
-            <div className="channel-mention__suggestion-name">{claim.name}</div>
             <div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
+            <div className="channel-mention__suggestion-name">{claim.name}</div>
           </span>
         </div>
       )}

diff --git a/ui/component/channelMentionSuggestions/view.jsx b/ui/component/channelMentionSuggestions/view.jsx
@@ -45,6 +45,7 @@ export default function ChannelMentionSuggestions(props: Props) {
   const comboboxInputRef: ElementRef<any> = React.useRef();
   const comboboxListRef: ElementRef<any> = React.useRef();
   const [debouncedTerm, setDebouncedTerm] = React.useState('');
+  const mainEl = document.querySelector('.channel-mention__suggestions');
 
   const isRefFocused = (ref) => ref && ref.current === document.activeElement;
 
@@ -169,6 +170,27 @@ export default function ChannelMentionSuggestions(props: Props) {
     if (urisToResolve.length > 0) doResolveUris(urisToResolve);
   }, [doResolveUris, hasMinLength, isTyping, possibleMatches, subscriptionUris, unresolvedSubscriptions]);
 
+  React.useEffect(() => {
+    if (!mainEl) return;
+    const header = document.querySelector('.header__navigation');
+
+    function handleReflow() {
+      const boxAtTopOfPage = header && mainEl.getBoundingClientRect().top <= header.offsetHeight;
+      const boxAtBottomOfPage = mainEl.getBoundingClientRect().bottom >= window.innerHeight;
+
+      if (boxAtTopOfPage) {
+        mainEl.setAttribute('flow-bottom', '');
+      }
+      if (mainEl.getAttribute('flow-bottom') !== null && boxAtBottomOfPage) {
+        mainEl.removeAttribute('flow-bottom');
+      }
+    }
+    handleReflow();
+
+    window.addEventListener('scroll', handleReflow);
+    return () => window.removeEventListener('scroll', handleReflow);
+  }, [mainEl]);
+
   const suggestionsRow = (label: string, suggestions: Array<string>, hasSuggestionsBelow: boolean) => {
     if (mentionTerm !== '@' && suggestions !== results) {
       suggestions = suggestions.filter((uri) => possibleMatches.includes(uri));

diff --git a/ui/scss/component/_channel-mention.scss b/ui/scss/component/_channel-mention.scss
@@ -44,6 +44,17 @@
   }
 }
 
+.channel-mention__suggestions[flow-bottom] {
+  top: 0;
+  bottom: auto;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom: auto;
+}
+
 .channel-mention__input--none {
   opacity: 0;
   width: 0;
@@ -59,7 +70,10 @@
 }
 
 .channel-mention__suggestion {
-  @extend .wunderbar__suggestion;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
   overflow: hidden;
   text-overflow: ellipsis;
 
@@ -81,33 +95,33 @@
 }
 
 .channel-mention__suggestion-name {
-  display: inline;
+  @extend .wunderbar__suggestion-name;
   margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
-
-  &::after {
-    margin-left: var(--spacing-xxs);
-    content: '•';
-  }
 }
 
 .channel-mention__suggestion-title {
-  display: inline;
-  margin-left: var(--spacing-xxs);
+  @extend .wunderbar__suggestion-title;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
 }
 
 .channel-mention__placeholder-suggestion {
-  @extend .wunderbar__suggestion-name;
+  @extend .wunderbar__placeholder-suggestion;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
 }
 
 .channel-mention__placeholder-label {
-  @extend .wunderbar__suggestion-name;
+  @extend .wunderbar__placeholder-label;
+  margin-left: var(--spacing-m);
 }
 
 .channel-mention__placeholder-thumbnail {
-  @extend .wunderbar__suggestion-name;
+  @extend .wunderbar__placeholder-thumbnail;
+  margin-left: var(--spacing-m);
 }
 .channel-mention__placeholder-info {
-  @extend .wunderbar__suggestion-name;
+  @extend .wunderbar__placeholder-info;
+  margin-left: var(--spacing-m);
 }
 
 .textarea-mention {

diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
@@ -40,6 +40,10 @@ $thumbnailWidthSmall: 1rem;
   .form-field--SimpleMDE {
     margin-top: 0;
   }
+
+  .form-field__two-column {
+    column-count: 2;
+  }
 }
 
 .comment__create--reply {