From 8df50b84e3b720af2967c58dfc4fb4e94ef41c3f Mon Sep 17 00:00:00 2001
From: Daniele Tonon <tonon@vitamino.it>
Date: Fri, 14 Jul 2023 12:43:23 +0200
Subject: [PATCH] Show minimal profile infos in the left column when scrolling
 (desktop)

---
 static/styles.css      | 31 +++++++++++++++++++++----------
 static/styles.scss     | 25 ++++++++++++++++++-------
 templates/profile.html |  4 +++-
 templates/scripts.js   | 28 ++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 73799d1..7307fbf 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -247,37 +247,48 @@ iframe {
   }
 }
 .container .columnA {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 2rem;
+  align-self: flex-start;
   flex-basis: 25%;
   margin-top: 2rem;
 }
 @media (max-width: 580px) {
   .container .columnA {
     display: flex;
+    position: relative;
+    top: auto;
     align-items: center;
     margin-top: 0rem;
   }
 }
 .container .columnA .info-wrapper {
   display: none;
+  font-size: 1.6rem;
+  margin-bottom: 0.6em;
+  text-align: center;
+}
+.container .columnA .info-wrapper .display {
+  display: block;
+  font-size: 1.2rem;
+}
+.theme--default .container .columnA .info-wrapper .display {
+  color: #c9c9c9;
+}
+.theme--dark .container .columnA .info-wrapper .display {
+  color: #969696;
 }
 @media (max-width: 580px) {
   .container .columnA .info-wrapper {
     display: block;
+    text-align: left;
+    margin-bottom: 0;
     flex-basis: 64%;
     max-width: 64%;
     overflow: hidden;
     font-size: 1.6rem;
   }
-  .container .columnA .info-wrapper .display {
-    display: block;
-    font-size: 1.2rem;
-  }
-  .theme--default .container .columnA .info-wrapper .display {
-    color: #c9c9c9;
-  }
-  .theme--dark .container .columnA .info-wrapper .display {
-    color: #969696;
-  }
 }
 .container .columnA .last_update {
   font-size: 0.8em;
diff --git a/static/styles.scss b/static/styles.scss
index 9d4fe2c..ca748d5 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -288,28 +288,39 @@ iframe {
   }
 
   .columnA {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 2rem;
+    align-self: flex-start;
     flex-basis: 25%;
     margin-top: 2rem;
     @media (max-width: 580px) {
       display: flex;
+      position: relative;
+      top: auto;
       align-items: center;
       margin-top: 0rem;
     }
     .info-wrapper {
       display: none;
+      font-size: 1.6rem;
+      margin-bottom: 0.6em;
+      text-align: center;
+      .display {
+        display: block;
+        font-size: 1.2rem;
+        @include themed() {
+          color: t($base4);
+        }
+      }
       @media (max-width: 580px) {
         display: block;
+        text-align: left;
+        margin-bottom: 0;
         flex-basis: 64%;
         max-width: 64%;
         overflow: hidden;
         font-size: 1.6rem;
-        .display {
-          display: block;
-          font-size: 1.2rem;
-          @include themed() {
-            color: t($base4);
-          }
-        }
       }
     }
     .last_update {
diff --git a/templates/profile.html b/templates/profile.html
index e262c20..7d55c47 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -10,10 +10,12 @@
       <div class="container">
         <div class="column columnA">
           <div class="info-wrapper">
+            <div class="name">
             {{.metadata.Name | escapeString}}
             <span class="display"
               >{{.metadata.DisplayName | escapeString}}</span
             >
+            </div>
           </div>
           <div class="pic-wrapper">
             <img class="pic" src="{{.metadata.Picture | escapeString}}" />
@@ -26,7 +28,7 @@
 
         <div class="column column_content">
           <div class="field info-wrapper">
-            <div class="name">
+            <div id="profile_name" class="name">
               {{.metadata.Name | escapeString}}
               <span class="display"
                 >{{.metadata.DisplayName | escapeString}}</span
diff --git a/templates/scripts.js b/templates/scripts.js
index ad02fb6..5c22c5c 100644
--- a/templates/scripts.js
+++ b/templates/scripts.js
@@ -99,6 +99,19 @@ function syntaxHighlight(json) {
   )
 }
 
+function isElementInViewport(element) {
+  // Get the position and dimensions of the element
+  const rect = element.getBoundingClientRect();
+
+  // Check if the element is within the viewport's boundaries
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
 document.addEventListener('DOMContentLoaded', function () {
   var contentDivs = document.getElementsByClassName('content')
   for (var i = 0; i < contentDivs.length; i++) {
@@ -109,6 +122,21 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 })
 
+const desktop_name = document.querySelector('.column_content .name');
+window.addEventListener('scroll', function() {
+  desktop_profile = document.querySelector('.column_content .info-wrapper');
+  if (window.getComputedStyle(desktop_profile).display === 'none') {
+    return
+  }
+  if (isElementInViewport(desktop_name)) {
+    console.log('Element is in viewport');
+    document.querySelector('.columnA .info-wrapper').style.display = 'none';
+  } else {
+    console.log('Element is outside the viewport');
+    document.querySelector('.columnA .info-wrapper').style.display = 'block';
+  }
+});
+
 // Needed to apply proper print styles
 if (
   navigator.userAgent.indexOf('Safari') != -1 &&