Project, Search, User redesign (#1281)

* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>

packages/ui/src/components/base/PopoutMenu.vue

@@ -11,7 +11,7 @@
     </button>
     <div
       class="popup-menu"
-      :class="`position-${position}-${direction} ${dropdownVisible ? 'visible' : ''}`"
+      :class="`position-${computedPosition}-${computedDirection} ${dropdownVisible ? 'visible' : ''}`"
     >
       <slot name="menu"> </slot>
     </div>
@@ -28,11 +28,11 @@ const props = defineProps({
   },
   position: {
     type: String,
-    default: 'bottom',
+    default: 'auto',
   },
   direction: {
     type: String,
-    default: 'left',
+    default: 'auto',
   },
 })
 defineOptions({
@@ -42,6 +42,31 @@ defineOptions({
 const dropdownVisible = ref(false)
 const dropdown = ref(null)
 const dropdownButton = ref(null)
+const computedPosition = ref('bottom')
+const computedDirection = ref('left')
+
+function updateDirection() {
+  if (props.direction === 'auto') {
+    if (dropdownButton.value) {
+      const x = dropdownButton.value.getBoundingClientRect().left
+      computedDirection.value = x < window.innerWidth / 2 ? 'right' : 'left'
+    } else {
+      computedDirection.value = 'left'
+    }
+  } else {
+    computedDirection.value = props.direction
+  }
+  if (props.position === 'auto') {
+    if (dropdownButton.value) {
+      const y = dropdownButton.value.getBoundingClientRect().top
+      computedPosition.value = y < window.innerHeight / 2 ? 'bottom' : 'top'
+    } else {
+      computedPosition.value = 'bottom'
+    }
+  } else {
+    computedPosition.value = props.position
+  }
+}
 
 const toggleDropdown = () => {
   if (!props.disabled) {
@@ -79,10 +104,15 @@ const handleClickOutside = (event) => {
 
 onMounted(() => {
   window.addEventListener('click', handleClickOutside)
+  window.addEventListener('resize', updateDirection)
+  window.addEventListener('scroll', updateDirection)
+  updateDirection()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('resize', updateDirection)
+  window.removeEventListener('scroll', updateDirection)
 })
 </script>