Skip to content

Commit

Permalink
fix: adjust modal height
Browse files Browse the repository at this point in the history
  • Loading branch information
DominMFD committed Sep 8, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 7369e00 commit 0c79f10
Showing 4 changed files with 14 additions and 9 deletions.
2 changes: 1 addition & 1 deletion src/components/Button/index.scss
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

.button {
font-family: 'Noto Sans', sans-serif;
color: rgb(255, 255, 255);
color: colors.$secondary100;
font-size: 1.6rem;
font-weight: 500;

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from 'pet-dex-utilities';
import { makeSwipable } from '../../../../../../utils/swiper';
import { makeSwipable } from '~src/utils/swiper';
import SelectorItem from '../SelectorItem';
import { MONTHS } from '../../../../utils/months';
import './index.scss';
@@ -27,6 +27,7 @@ export default function MonthSelector(dateArray) {

this.itemCount = this.dateArray.length;
this.columnWidth = 150;
this.activeColumnWidth = 176;
this.nodePadding = 6;
this.scrollLeft = this.$monthSelector.scrollLeft;

@@ -48,7 +49,8 @@ export default function MonthSelector(dateArray) {
this.viewportWidth = this.$monthSelector.offsetWidth;

const renderWindow = () => {
this.totalContentWidth = (this.itemCount - 1) * this.columnWidth + 176;
this.totalContentWidth =
(this.itemCount - 1) * this.columnWidth + this.activeColumnWidth;

this.startNode =
Math.floor(this.scrollLeft / this.columnWidth) - this.nodePadding;
Original file line number Diff line number Diff line change
@@ -25,15 +25,17 @@ export default function SelectorModal(dateArray) {
this.$listContent = this.selected.get('list-content');

this.itemCount = this.dateArray.length;
this.rowHeight = 40;
this.rowHeight = 34;
this.activeRowHeight = 42.8;
this.nodePadding = 5;
this.scrollTop = this.$selectorModal.scrollTop;

setTimeout(() => {
this.viewportHeight = this.$selectorModal.offsetHeight;

const renderWindow = () => {
this.totalContentHeight = this.itemCount * this.rowHeight;
this.totalContentHeight =
(this.itemCount - 1) * this.rowHeight + this.activeRowHeight;

this.startNode =
Math.floor(this.scrollTop / this.rowHeight) - this.nodePadding;
@@ -90,8 +92,7 @@ export default function SelectorModal(dateArray) {
});

const scrollToMiddle = () => {
this.scrollTop =
this.totalContentHeight / 2 - this.viewportHeight / 2 - 48;
this.scrollTop = this.totalContentHeight / 2 - this.viewportHeight / 2;
this.$selectorModal.scrollTop = this.scrollTop;
};

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from 'pet-dex-utilities';
import { makeSwipable } from '../../../../../../utils/swiper';
import { makeSwipable } from '~src/utils/swiper';
import SelectorItem from '../SelectorItem';
import './index.scss';

@@ -26,6 +26,7 @@ export default function YearSelector(dateArray) {

this.itemCount = this.dateArray.length;
this.columnWidth = 70;
this.activeColumnWidth = 96;
this.nodePadding = 5;
this.scrollLeft = this.$dateSelector.scrollLeft;

@@ -46,7 +47,8 @@ export default function YearSelector(dateArray) {
this.viewportWidth = this.$dateSelector.offsetWidth;

const renderWindow = () => {
this.totalContentWidth = (this.itemCount - 1) * this.columnWidth + 96;
this.totalContentWidth =
(this.itemCount - 1) * this.columnWidth + this.activeColumnWidth;

this.startNode =
Math.floor(this.scrollLeft / this.columnWidth) - this.nodePadding;

0 comments on commit 0c79f10

Please sign in to comment.