diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index e9be38b6f..8392ff991 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -11,6 +11,7 @@ interface IHomeState { loadingLists: boolean; ruleCount: number; loadingRuleCount: boolean; + pageSize: number; } export class Home extends React.Component, IHomeState> { @@ -20,8 +21,10 @@ export class Home extends React.Component, IHomeState> { lists: [], loadingLists: true, ruleCount: 0, - loadingRuleCount: true + loadingRuleCount: true, + pageSize: 20 }; + this.updatePageSize = this.updatePageSize.bind(this); } render() { @@ -31,7 +34,7 @@ export class Home extends React.Component, IHomeState> {

:
{Home.renderTagline(this.state)} - {Home.renderFilterListsTable(this.state.lists)} + {Home.renderFilterListsTable(this.state)}
; return
{contents} @@ -39,6 +42,8 @@ export class Home extends React.Component, IHomeState> { } componentDidMount() { + this.updatePageSize(); + window.addEventListener("resize", this.updatePageSize); fetch("https://filterlists.com/api/v1/lists") .then(response => response.json() as Promise) .then(data => { @@ -57,6 +62,14 @@ export class Home extends React.Component, IHomeState> { }); } + componentWillUnmount() { + window.removeEventListener("resize", this.updatePageSize); + } + + updatePageSize() { + this.setState({ pageSize: (window.innerHeight - 200) / 50 }); + } + private static renderTagline(state: IHomeState) { return

The independent, comprehensive directory of {state.ruleCount.toLocaleString() @@ -65,10 +78,13 @@ export class Home extends React.Component, IHomeState> {

; } - private static renderFilterListsTable(filterLists: IListDto[]) { + private static renderFilterListsTable(state: IHomeState) { return + title={ +"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}> Subscribe ; } \ No newline at end of file