mathias
/
rss-reader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor navigation changes

master
Mathias Rothenhaeusler 2023-11-02 17:26:42 +01:00
parent 579fa1f7ca
commit 0fae2e407c
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
vue/src/App.vue
View File

@ -6,6 +6,8 @@ import { RouterLink, RouterView } from 'vue-router'
<!-- <header> --> <!-- <header> -->
<!-- <div class="wrapper"> --> <!-- <div class="wrapper"> -->
<!-- <nav> --> <!-- <nav> -->
<!-- <p onclick="$refs.sync">Sync</p> -->
<!-- <p>Login</p> -->
<!-- <RouterLink to="/">Home</RouterLink> --> <!-- <RouterLink to="/">Home</RouterLink> -->
<!-- <RouterLink to="/about">About</RouterLink> --> <!-- <RouterLink to="/about">About</RouterLink> -->
<!-- <RouterLink to="/feeds">Feeds</RouterLink> --> <!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
@ -16,7 +18,7 @@ import { RouterLink, RouterView } from 'vue-router'
<RouterView /> <RouterView />
</template> </template>
<style scoped> <style>
header { header {
line-height: 1.5; line-height: 1.5;
max-height: 100vh; max-height: 100vh;
@ -34,21 +36,22 @@ nav {
margin-top: 2rem; margin-top: 2rem;
} }
nav a.router-link-exact-active { nav p.router-link-exact-active {
color: var(--color-text); color: var(--color-text);
} }
nav a.router-link-exact-active:hover { nav p.router-link-exact-active:hover {
background-color: transparent; background-color: transparent;
} }
nav a { nav p {
display: inline-block; display: inline-block;
padding: 0 1rem; padding: 0 1rem;
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
cursor: pointer;
} }
nav a:first-of-type { nav p:first-of-type {
border: 0; border: 0;
} }

18
vue/src/components/RssFeeds.vue
View File

@ -113,7 +113,7 @@ function setupIntersectionObserver() {
} }
} }
function handleIntersection(entries) { async function handleIntersection(entries) {
// The callback function for when the target element enters or exits the viewport // The callback function for when the target element enters or exits the viewport
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
@ -121,12 +121,12 @@ function handleIntersection(entries) {
} else if (initialLoad === true) { } else if (initialLoad === true) {
console.log(entry.isIntersecting) console.log(entry.isIntersecting)
// Element is out of sight // Element is out of sight
if (entry.isVisible === false) { if (entry.isVisible === false && entry.boundingClientRect.y < 0) {
console.log('Element is out of sight ' + entry.intersectionRatio); console.log('Element is out of sight ' + entry.intersectionRatio);
//console.log(feeds.value[entry.target.id]) //console.log(feeds.value[entry.target.id])
markRead(feeds.value[entry.target.id].id).await markRead(feeds.value[entry.target.id].id).await
removeFeed(entry.target.id) removeFeed(entry.target.id)
// TODO viewport moves crazy document.getElementById(0).scrollIntoView()
} }
} }
}) })
@ -149,8 +149,18 @@ onMounted(() => {
</script> </script>
<template> <template>
<header>
<div class="wrapper">
<nav>
<p @click="sync">Sync</p>
<!-- <RouterLink to="/">Home</RouterLink> -->
<!-- <RouterLink to="/about">About</RouterLink> -->
<!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
</nav>
</div>
</header>
<div> <div>
<h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button> <h1>Feeds</h1> <!-- <button @click="sync">{{ buttonText }}</button> -->
<div v-if="showMessage" class="message">{{ message }}</div> <div v-if="showMessage" class="message">{{ message }}</div>
<div id='article' class='article'> <div id='article' class='article'>
<p v-if="feeds.length == 0">No unread articles.</p> <p v-if="feeds.length == 0">No unread articles.</p>