Skip to content

Commit

Permalink
Improve sponsorship banner
Browse files Browse the repository at this point in the history
  • Loading branch information
nyamsprod committed May 26, 2020
1 parent 434a7f2 commit ab5f057
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 34 deletions.
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"require-dev": {
"ext-curl" : "*",
"friendsofphp/php-cs-fixer": "^2.16",
"phpunit/phpunit" : "^8.0",
"phpunit/phpunit" : "^8.5",
"phpstan/phpstan": "^0.12.0",
"phpstan/phpstan-strict-rules": "^0.12.0",
"phpstan/phpstan-phpunit": "^0.12.0"
Expand Down
6 changes: 3 additions & 3 deletions docs/_layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
<link rel="stylesheet" href="/custom.css?28">
<link rel="stylesheet" href="/custom.css?29">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.project.google_analytics_tracking_id }}"></script>
<script>
Expand Down Expand Up @@ -108,14 +108,14 @@ <h2>{{ section[0] }}</h2>
</main>

<aside class="sponsors hide">
<p><a class="close" title="hide this message">&#10799;</a> Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">&#9829; Support</a> its development!</p>
<p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
</aside>

<footer>
<span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
<span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
</footer>
<script src="/custom.js?5"></script>
<script src="/custom.js?6"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script> docsearch({
apiKey: '63ba748e8f5bceb91934667c118972d0',
Expand Down
6 changes: 3 additions & 3 deletions docs/_layouts/homepage.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="icon" type="image/x-icon" href="{{ site.data.images.favicon }}" />
<link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
<link rel="stylesheet" href="/homepage.css?20">
<link rel="stylesheet" href="/homepage.css?21">
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.project.google_analytics_tracking_id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
Expand All @@ -36,7 +36,7 @@ <h2>{{ site.data.project.tagline }}</h2>
</header>

<aside class="sponsors hide">
<p><a class="close" title="hide this message">&#10799;</a> Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">&#9829; Support</a> its development!</p>
<p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
</aside>

<main>
Expand Down Expand Up @@ -77,7 +77,7 @@ <h1>Questions?</h1>
<span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
</footer>

<script src="/custom.js?5"></script>
<script src="/custom.js?6"></script>

</body>
</html>
21 changes: 13 additions & 8 deletions docs/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -351,24 +351,29 @@ main menu ul li.selected a:hover {

.sponsors a {
display:inline-block;
padding:.4em;
background: #ea0a86;
color: #fff;
border-radius: .3em;
text-decoration: none;
padding:.4em;
cursor: pointer;
}

.sponsors a.close {
color:#ea0a86;
background: transparent;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:2em;
cursor: pointer;
padding:0;
margin-right:0;
color:#ea0a86;
text-decoration: underline;
padding:.2em;
font-size: .8em;
}

.hide {
display:none;
}

@media screen and (max-width: 520px) {
.sponsors p {
width: 250px;
margin: .3em auto 0;
}
}
28 changes: 17 additions & 11 deletions docs/custom.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
(() => {
const uri = new URL(location.href);

let headers = document.querySelector('header nav h2');
if (headers) {
headers.addEventListener('click', function () {
headers.addEventListener('click', () => {
this.parentNode.querySelector('ul').classList.toggle('show');
}, false);
}

let contentHeaders = document.querySelectorAll("main h2[id]");
if (contentHeaders && !document.querySelector('html').classList.contains('homepage')) {
if (!document.querySelector('html').classList.contains('homepage') && contentHeaders) {
const uri = new URL(location.href);
contentHeaders.forEach((header) => {
uri.hash = header.id;
let link = document.createElement("a");
link.className = "header-permalink";
link.classList.add("header-permalink");
link.title = "Permalink";
link.href = uri.toString();
link.innerHTML = "&#182;";
header.appendChild(link);
});
}

const sponsorDiv = document.querySelector('.sponsors');
if (sponsorDiv) {
let hideSponsorUntil = localStorage.getItem('hideSponsorUntil');
if (hideSponsorUntil === null || hideSponsorUntil < (new Date().getTime())) {
sponsorDiv.classList.remove('hide');
const sponsorBanner = document.querySelector('.sponsors');
if (sponsorBanner) {
let hideUntil = localStorage.getItem('hideSponsorUntil');
if (hideUntil === null || hideUntil < (new Date().getTime())) {
localStorage.removeItem('hideSponsorUntil');
sponsorBanner.classList.remove('hide');
}

sponsorDiv.querySelector('a.close').addEventListener('click', function () {
sponsorDiv.classList.add('hide');
let closeButton = document.createElement('a');
closeButton.classList.add('close');
closeButton.innerHTML = 'close me';
closeButton.addEventListener('click', () => {
localStorage.setItem('hideSponsorUntil', new Date().getTime() + (7 * 86400 * 1e4));
sponsorBanner.classList.add('hide');
}, false);

sponsorBanner.firstElementChild.appendChild(closeButton);
}
})();
21 changes: 13 additions & 8 deletions docs/homepage.css
Original file line number Diff line number Diff line change
Expand Up @@ -331,24 +331,29 @@ main div > code {

.sponsors a {
display:inline-block;
padding:.4em;
background: #ea0a86;
color: #fff;
border-radius: .3em;
text-decoration: none;
padding:.4em;
cursor: pointer;
}

.sponsors a.close {
color:#ea0a86;
background: transparent;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:2em;
cursor: pointer;
padding:0;
margin-right:0;
color:#ea0a86;
text-decoration: underline;
padding:.2em;
font-size: .8em;
}

.hide {
display:none;
}

@media screen and (max-width: 520px) {
.sponsors p {
width: 250px;
margin: .3em auto 0;
}
}

0 comments on commit ab5f057

Please sign in to comment.