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>
2024-08-20 23:03:16 -07:00
parent a19ce0458a
commit 2d416d491c
101 changed files with 5361 additions and 4488 deletions
--- a/packages/ui/src/components/base/ScrollablePanel.vue
+++ b/packages/ui/src/components/base/ScrollablePanel.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="scrollable-pane-wrapper" :class="{ 'max-height': !props.noMaxHeight }">
+    <div
+      class="wrapper-wrapper"
+      :class="{
+        'top-fade': !scrollableAtTop && !props.noMaxHeight,
+        'bottom-fade': !scrollableAtBottom && !props.noMaxHeight,
+      }"
+    >
+      <div ref="scrollablePane" class="scrollable-pane" @scroll="onScroll">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    noMaxHeight?: boolean
+  }>(),
+  {
+    noMaxHeight: false,
+  },
+)
+
+const scrollableAtTop = ref(true)
+const scrollableAtBottom = ref(false)
+const scrollablePane = ref(null)
+let resizeObserver
+onMounted(() => {
+  resizeObserver = new ResizeObserver(function () {
+    if (scrollablePane.value) {
+      updateFade(
+        scrollablePane.value.scrollTop,
+        scrollablePane.value.offsetHeight,
+        scrollablePane.value.scrollHeight,
+      )
+    }
+  })
+  resizeObserver.observe(scrollablePane.value)
+})
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+})
+function updateFade(scrollTop, offsetHeight, scrollHeight) {
+  scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
+  scrollableAtTop.value = scrollTop === 0
+}
+function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
+  updateFade(scrollTop, offsetHeight, scrollHeight)
+}
+</script>
+
+<style lang="scss" scoped>
+.scrollable-pane-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &.max-height {
+    max-height: 19rem;
+  }
+}
+.wrapper-wrapper {
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  --_fade-height: 4rem;
+  margin-bottom: var(--gap-sm);
+  &.top-fade::before,
+  &.bottom-fade::after {
+    opacity: 1;
+  }
+  &::before,
+  &::after {
+    content: '';
+    left: 0;
+    right: 0;
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 0.125s ease;
+    height: var(--_fade-height);
+    z-index: 1;
+  }
+  &::before {
+    top: 0;
+    background-image: linear-gradient(
+      var(--scrollable-pane-bg, var(--color-raised-bg)),
+      transparent
+    );
+  }
+  &::after {
+    bottom: 0;
+    background-image: linear-gradient(
+      transparent,
+      var(--scrollable-pane-bg, var(--color-raised-bg))
+    );
+  }
+}
+.scrollable-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+
+  ::-webkit-scrollbar {
+    transition: all;
+  }
+
+  &::-webkit-scrollbar {
+    width: var(--gap-md);
+    border: 3px solid var(--color-bg);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-bg);
+    border: 3px solid var(--color-bg);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-raised-bg);
+    border-radius: var(--radius-lg);
+    padding: 4px;
+    border: 3px solid var(--color-bg);
+  }
+}
+</style>