adjust layout of detail link buttons

This commit is contained in:
Collin M. Barrett 2018-03-26 18:51:58 -05:00
parent 64d9f0d4a3
commit d9a462c16b
2 changed files with 33 additions and 22 deletions

View file

@ -23,7 +23,7 @@ export class Layout extends React.Component<ILayoutProps, {}> {
</div>
</div>
<div className="row justify-content-center">
<p className="ml-1 mr-1">A project by <a href="https://collinmbarrett.com/">Collin M. Barrett</a>. | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a>.</p>
<p className="mt-2 ml-1 mr-1">By <a href="https://collinmbarrett.com/">Collin M. Barrett</a> | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a></p>
</div>
</div>;
};

View file

@ -34,25 +34,34 @@ export default class ListDetails extends React.Component<any, any> {
function FilterListDetails(props: any) {
return <div className="card">
<div className="card-body">
<Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
<Languages languages={props.details.languages}/>
<PublishedDate date={props.details.publishedDate}/>
<DiscontinuedDate date={props.details.discontinuedDate}/>
<License license={props.details.license}/>
<div className="btn-group" role="group">
<SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
<ViewUrl url={props.details.viewUrl} name={props.details.name}/>
<HomeUrl url={props.details.homeUrl} name={props.details.name}/>
<PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
<DonateUrl url={props.details.donateUrl} name={props.details.name}/>
<IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
<ForumUrl url={props.details.forumUrl} name={props.details.name}/>
<ChatUrl url={props.details.chatUrl} name={props.details.name}/>
<SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
<EmailAddress email={props.details.emailAddress} name={props.details.name}/>
<div className="card-body p-2">
<div className="container m-0">
<div className="row">
<div className="col-9 p-0">
<Description description={props.details.description} url={props.details
.descriptionSourceUrl}/>
<Languages languages={props.details.languages}/>
<PublishedDate date={props.details.publishedDate}/>
<DiscontinuedDate date={props.details.discontinuedDate}/>
<License license={props.details.license}/>
</div>
<div className="col-3 p-0 btn-group-vertical align-top">
<SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
<ViewUrl url={props.details.viewUrl} name={props.details.name}/>
<HomeUrl url={props.details.homeUrl} name={props.details.name}/>
<PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
<DonateUrl url={props.details.donateUrl} name={props.details.name}/>
<IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
<ForumUrl url={props.details.forumUrl} name={props.details.name}/>
<ChatUrl url={props.details.chatUrl} name={props.details.name}/>
<SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
<EmailAddress email={props.details.emailAddress} name={props.details.name}/>
</div>
</div>
<div className="row">
<Maintainers maintainers={props.details.maintainers}/>
</div>
</div>
<Maintainers maintainers={props.details.maintainers}/>
</div>
</div>;
}
@ -104,9 +113,11 @@ function License(props: any) {
}
function SubscribeUrl(props: any) {
return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)
}`}
className="d-block d-sm-none btn btn-primary"
title={ `Subscribe to ${props.name} with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus).` }>
title={ `Subscribe to ${props.name
} with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus).` }>
Subscribe
</a >;
}
@ -149,7 +160,7 @@ function IssuesUrl(props: any) {
return props.url
? <a href={props.url} className="btn btn-primary"
title={`View the GitHub Issues for ${props.name}.`}>
GitHub Issues
GH Issues
</a>
: null;
}