Bommels05/Modrinth
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Begin skins frontend

Browse Source
This commit is contained in:
Prospector authored and Alejandro González committed 2025-06-14 17:31:02 +02:00
1 parent 3587b0a9ce
commit 161dc73d5d
14 files changed
+629 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/assets/icons/change-skin.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" transform="scale(-1 1)" viewBox="0 0 49.915 52.72">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M15.71 31.484v19.07h18.63v-19.07l6.538 6.539 6.871-6.872-11.203-11.733H14.122L2.166 31.375l6.827 6.827z"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.993" d="M24.872 19.548v-6.44"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M24.704 13.202a5.518 5.518 0 0 1-5.518-5.518 5.518 5.518 0 0 1 5.518-5.518 5.518 5.518 0 0 1 5.518 5.518"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

packages/assets/index.ts
+2
View File
@@ -57,6 +57,7 @@ import _BoxImportIcon from './icons/box-import.svg?component'
import _BracesIcon from './icons/braces.svg?component'
import _CalendarIcon from './icons/calendar.svg?component'
import _CardIcon from './icons/card.svg?component'
import _ChangeSkinIcon from './icons/change-skin.svg?component'
import _ChartIcon from './icons/chart.svg?component'
import _CheckIcon from './icons/check.svg?component'
import _CheckCheckIcon from './icons/check-check.svg?component'
@@ -276,6 +277,7 @@ export const BoxIcon = _BoxIcon
export const BoxImportIcon = _BoxImportIcon
export const BracesIcon = _BracesIcon
export const CalendarIcon = _CalendarIcon
export const ChangeSkinIcon = _ChangeSkinIcon
export const ChartIcon = _ChartIcon
export const CheckIcon = _CheckIcon
export const CheckCheckIcon = _CheckCheckIcon
packages/ui/src/components/base/ScrollablePanel.vue
+24 -15
View File
@@ -55,6 +55,7 @@ onUnmounted(() => {
}
})
function updateFade(scrollTop, offsetHeight, scrollHeight) {
console.log(scrollTop, offsetHeight, scrollHeight)
scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
scrollableAtTop.value = scrollTop <= 0
}
@@ -64,6 +65,18 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
</script>
<style lang="scss" scoped>
@property --_top-fade-height {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --_bottom-fade-height {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
.scrollable-pane-wrapper {
display: flex;
flex-direction: column;
@@ -75,27 +88,23 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
display: flex;
overflow: hidden;
position: relative;
transition: --_top-fade-height 0.05s linear, --_bottom-fade-height 0.05s linear;
--_fade-height: 4rem;
--_fade-height: 3rem;
mask-image: linear-gradient(
transparent,
rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
transparent 100%
);
&.top-fade {
mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height));
--_top-fade-height: var(--_fade-height);
}
&.bottom-fade {
mask-image: linear-gradient(
rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
transparent 100%
);
}
&.top-fade.bottom-fade {
mask-image: linear-gradient(
transparent,
rgb(0 0 0 / 100%) var(--_fade-height),
rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
transparent 100%
);
--_bottom-fade-height: var(--_fade-height);
}
}
.scrollable-pane {