jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding a back button when profiles are open.

Browse Source
This commit is contained in:
Jason Williams 2022-11-20 18:26:36 -07:00
parent 56e0ceeaae
commit a9ac160c85
4 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
www/css/main.css
View File

@ -193,6 +193,21 @@ div {
text-align: center;
}
#backbutton {
position: fixed;
top: -3rem;
right: -3rem;
height: 3rem;
width: 3rem;
z-index: 100;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.5);
color: rgba(192, 192, 192, 0.5);
font-size: 2rem;
line-height: 3rem;
text-align: center;
}
.splash.jason, .main.jason {
background-color: var(--jason-bg-color);
font-family: 'Raleway', sans-serif;

10
www/index.html
View File

@ -71,11 +71,15 @@
</div>
</div>
<div id="backbutton" class="jason" data-person="none">
<a href="/" class="closelink"><i class="fa-solid fa-left-long"></i></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="/js/plugins.js"></script>
<script src="/js/main.js"></script>
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="/js/plugins.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>

24
www/js/main.js
View File

@ -24,12 +24,12 @@ $(() => {
};
// Handle clicks on profile links (by doing nothing)
$('a.openlink').click(function(e) {
$('a.openlink, a.closelink').click(function(e) {
e.preventDefault();
})
// Handle clicks on the banner
$('div.banner').click(function() {
$('div.banner, div#backbutton').click(function() {
// If there's no person to open, do nothing
if (typeof $(this).attr('data-person') == 'undefined') return;
@ -134,6 +134,14 @@ $(() => {
queue: true
})
$('#backbutton').animate({
top: '-3rem',
right: '-3rem'
}, {
duration: 300
})
if (window.matchMedia('(orientation: portrait)').matches) {
// If we're closing in portrait mode...
$('.main.not' + p).css('width', '100vw')
@ -178,13 +186,19 @@ $(() => {
}
}
// Animate the display of links for a defined person
// Animate the display of links for a defined person, and show the back button
function animateLinks(p) {
$('#links-' + p).animate({
height: $('#links-' + p).get(0).scrollHeight
}, {
duration: 300,
queue: true
duration: 300
})
$('#backbutton').animate({
top: '2.5rem',
right: '2.5rem'
}, {
duration: 300
})
}
})

4
www/lucy.html
View File

@ -52,6 +52,10 @@
</div>
</div>
<div id="backbutton" class="jason">
<a href="/"><i class="fa-solid fa-left-long"></i></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>