Show minimal profile infos in the left column when scrolling (desktop)

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;

static/styles.scss

@@ -288,21 +288,24 @@ 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;
-      @media (max-width: 580px) {
-        display: block;
-        flex-basis: 64%;
-        max-width: 64%;
-        overflow: hidden;
       font-size: 1.6rem;
+      margin-bottom: 0.6em;
+      text-align: center;
       .display {
         display: block;
         font-size: 1.2rem;
@@ -310,6 +313,14 @@ iframe {
           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;
       }
     }
     .last_update {

templates/profile.html

@@ -10,11 +10,13 @@
       <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}}" />
           </div>
@@ -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

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 &&