PageWrapper에서 높이와 과량 제약을 제거하여 스크롤을 활성화하십시오
- 높이 제거 : 100 % 제약 - overflow 제거: 숨겨진 constraint - minHeight로 변화: 확장을 허용하는 100%년 - 페이지는 제대로 스크롤 할 수 있습니다
메인 콘텐츠 div에서 flex-1를 제거하여 천연 팽창을 허용
- 메인 콘텐츠 div에서 flex-1 제약 제거 - 콘텐츠는 이제 부모 컨테이너에서 스크롤을 트리거 할 수 있습니다
페이지의 높이와 과량 제약을 제거하여 스크롤
- 페이지를 확장 할 수있는 최소 화면으로 h-screen 변경 - 스크롤을 허용하기 위해 메인 콘텐츠 div에서 overflow-hidden 제거 - 페이지는 이제 모든 기록을 볼 수 있습니다
페이지 스크롤을 활성화하기 위해 부모 컨테이너에서 오버 플로우 제약을 제거
- 오버 플로우 제거 : 메인 컨테이너 박스에서 숨겨진 - 고도를 제거하십시오: 주요 콘테이너 상자에서 100%년 - 오버 플로우 제거 : 숨겨진 및 플렉스 : 탭 내용 상자에서 1 - 오버 플로우 제거 : 숨겨진 및 플렉스 : 카드 컨테이너에서 1 - 코드 제거 : 1 및 minHei...
Change grid to autoHeight layout to show 모든 레코드 없이 scrollbar
- autoHeight에 domLayout를 놓기 때문에 격자는 모든 줄을 적합하기 위하여 확장합니다 - 오버 플로우 제거 : 그리드 컨테이너 상자에서 숨겨진 - 높이 제거 : 그리드 래퍼 박스에서 100 % 제약 - 그리드는 이제 수직 스크롤없이 현재 페이지에 모든 레코드를 보여줍니다
Decrease 공급 업체, 제품 및 소스 열 폭 40px
- 80px에서 40px로 벤더 열 폭 변경 - 80px에서 40px까지의 제품 열 폭 변경 - 60px에서 20px로 변환 소스 열 폭 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트
빠른 검색 필드와 구성 요소 아래 10px 패딩 추가
- pb를 추가하십시오: '10px'에 빠른 검색 상자 콘테이너 - 작업하지 않은 높이와 정렬Self 속성 제거
수직 정렬 빠른 검색 필드 및 구성 요소 중간에
- 부모 상자에 minHeight를 추가하여 탭 높이 일치 - 디스플레이 플렉스 및 alignItems 센터를 탭 컨테이너 박스에 추가 - 고도를 추가하십시오 100%와 적당한 수직 줄맞춤을 위한 Quick Search Box에 줄맞춤 각자 센터
다른 25px의 공급 업체, 제품 및 소스 열 폭을 결정
- 105px에서 80px까지의 공급 업체 열 폭 변경 - 105px에서 80px까지의 제품 열 폭 변경 - 85px에서 60px까지의 소스 열 폭 변경 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트
Decrease 공급 업체, 제품 및 소스 열 폭 25px
- 130px에서 105px까지의 공급 업체 열 폭 변경 - 130px에서 105px까지의 제품 열 폭 변경 - 110px에서 85px까지의 소스 열 폭 변경 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트
Decrease 공급 업체, 제품, 소스, 에이전트 열 폭 20px
- 150px에서 130px까지의 공급 업체 열 폭 변경 - 150px에서 130px까지의 제품 열 폭 변경 - 130px에서 110px로 변환 소스 열폭 변경 - 120px에서 100px로 에이전트 열 폭 변경 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트
국가 및 거리 열 폭 및 거리 표시 업데이트
- 100px에서 60px로 국가 열 폭 변경 - 200px에서 130px까지의 거리 컬럼 폭 변경 - Update Street 칼럼은 셀의 거리 주소만 표시 - 'street, city' 형식을 보여주는 Street Column에 대한 툴팁 추가 - 대응 필터 필드 컨테이너 폭 업데이...
사용되지 않는 LocationOn 가져오기
- AddressRenderer가 제거 된 이후 LocationOn 아이콘 가져 오기
사용하지 않는 AddressRenderer 기능을 제거
- 주소 열이 국가 및 거리 기둥으로 대체되기 때문에 AddressRenderer 제거
상태 및 거리 필터를 이동하여 위치 확인 후 접촉
- 접촉 필터 후에 오른쪽으로 이동 상태와 거리 필터 필드 - 에이전트 필터 후 중복 상태 및 거리 필터 제거 - 필터 주문 이제 열 주문 일치 : 리드 ID, 연락처, 상태, 거리, 상태, 하위 상태 ...
국가 및 거리 열 구현
- 여전히 addressFilterValue를 언급 한 오래된 주소 필터 필드를 제거 - 접촉 필터 후에 국가 및 거리 필터 필드를 추가하십시오 - stateFilterValue 및 streetFilterValue를 사용하기 위해 로직 필터링 - 주 필터는 미국 주(100px 너비)로 ...
주소 열을 State 및 Street 열로 대체하십시오
- 주소 열 및 AddressRenderer 제거 - 연락처 후 국가 열 추가 (보장 subdivision/state code) - 국가 (거리, 도시 형식) 후 거리 열을 추가하십시오. - addressFilterValue를 stateFilterValue와 streetFilterVal...
리드 ID, 상태 및 하위 상태에 대한 열 폭 업데이트
- 245px에서 230px까지의 리드 ID 컬럼 폭 변경 - 90px에서 115px까지의 상태 열 폭 변경 - 150px에서 170px까지의 하위 상태 열 폭 변경 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트 - 명시된 minWidth 및 maxWidth 제약 추가
업데이트 상태 및 하위 상태 열 폭
- 65px에서 90px의 상태 열 폭 변경 - 120px에서 150px까지의 하위 상태 열 폭 변경 - 일치하는 열에 대응 필터 필드 컨테이너 폭 업데이트 - 명시된 minWidth 및 maxWidth 제약 추가
업데이트 필터 필드 컨테이너 폭 열 폭 일치
- 300px에서 245px까지의 리드 ID 필터 컨테이너 업데이트 - 200px에서 65px까지의 상태 필터 컨테이너 업데이트 - 200px에서 120px까지 Sub Status filter container 업데이트 - 150px에서 120px까지 에이전트 필터 컨테이너 업데이트 -...
지정된 값에 열폭 업데이트
- 300px에서 245px까지의 리드 ID 컬럼 폭 변경 - 접촉 란은 flex를 남아 있습니다: 나머지 폭을 가지고 가는 1 - 200px에서 65px까지의 상태 열 폭 변경 - 200px에서 120px의 하위 상태 열 폭 변경 - 150px에서 120px로 에이전트 열 폭 변경 -...
임의의 알파벳 및 설정 주소 열을 170px로 업데이트하십시오
- CreateRandomLeadId 함수를 추가하여 길이 13의 임의의 알파벳 문자열을 생성 - 순차적 숫자에서 임의의 알파벳(예: '34FDK69HWGPPK')로의 변경 모성 리드 ID - 250px에서 170px까지의 업데이트 주소 열 폭 - 업데이트 주소 필터 컨테이너 폭 170...
업데이트 날짜 열 폭 및 교체 작업 버튼
- 155px에서 170px(Created and Assigned)로 변경 날짜 열 폭 - 업데이트 날짜 필터 필드 컨테이너 170px 폭 일치 - 'Export selected', 'Share' 및 'Delete selected' 버튼을 다음과 같이 대체하십시오. - 'Reassign...
얇은 빛 회색 국경 바닥을 보조 탭에 추가
- 국경을 추가하십시오: '1px 고체 rgba (0, 0, 0, 0.12)' 상태 탭 컨테이너에 - /leads/view/페이지에 있는 스타일링 일치 - 아래 탭과 내용 사이에 시각적 분리를 만듭니다
변경 날짜 열 폭 155px
- 220px에서 155px로 생성 및 할당된 열 폭 업데이트 - 두 열을 위해 155px에 명시된 폭, minWidth 및 maxWidth를 설정하십시오. - 업데이트 날짜 필터 필드 컨테이너 155px 폭 일치 - 열과 필터 필드 사이에 일관성을 유지
남아있는 필터 필드에 회색 배경을 추가하고 하단에 정렬
- 센터에서 flex-end(bottom alignment)로 필터 행 정렬 변경 - 모든 나머지 필터 필드 컨테이너에 회색 배경 (#f8fafc) 추가 - 날짜 필터 스타일링에 경계 반경 및 패딩 추가 - 일반 필터 필드 하단에 정렬, 하단 날짜 필드의 일치 높이 - 날짜 필드는 겹쳐...
Stack date filter field 수직으로 고립된 회색 배경
- 수평에서 수직 배치까지 날짜 필터 필드 변경 (flexDirection : 열) - 회색 배경 추가 (#f8fafc) 날짜 필터 박스에만, 전체 필터 행 - 날짜 필터 필드에 220px의 명시된 폭 설정 - 메인 필터 행 컨테이너에서 회색 배경 제거 - 더 나은 시각 분리를 위한 날...
상태 탭 줄에 빠른 검색을 이동, 오른쪽 정렬
- 빠른 검색은 현재 상태 탭과 동일한 행에 나타납니다, 오른쪽에 정렬 - 중복 검색 표시 줄을 제거하여 단순 레이아웃 - 상태 탭 및 빠른 검색은 공간의 플렉스 컨테이너에 있습니다
UI 레이아웃을 개선하고 모의 데이터를 증가
- 날짜 필터 필드(fontSize: 0.75rem for input, 0.7rem for labels)에 대 한 작은 텍스트를 만드십시오. - 상태 탭으로 빠른 검색을 이동, 오른쪽에 정렬 - 50에서 250까지 증가하는 조력 - 그리드에서 동작 열 제거 - 중복 검색 표시 줄을 제거...
Created 및 Assigned Column에 대한 날짜 범위 필터 구성 추가
- Created 및 Assigned 날짜 범위 필터에 대한 상태 변수 추가 (start/end date) - 시작일 및 종료일 필드를 가진 날짜 범위 필터 구성 - 생성 및 할당된 열을 위한 주문 필터 행에 날짜 범위 필터 구성을 추가하십시오 - FilteredRowData logic...
