minor navigation changes

vue/src/App.vue

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

vue/src/components/RssFeeds.vue

@@ -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
   entries.forEach(entry => {
     if (entry.isIntersecting) {
@@ -121,12 +121,12 @@ function handleIntersection(entries) {
     } else if (initialLoad === true) {
       console.log(entry.isIntersecting)
       // 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(feeds.value[entry.target.id])
         markRead(feeds.value[entry.target.id].id).await
         removeFeed(entry.target.id)
-        // TODO viewport moves crazy
+        document.getElementById(0).scrollIntoView()
       }
     }
   })
@@ -149,8 +149,18 @@ onMounted(() => {
 </script>
 
 <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>
-    <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 id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>