themes/default/layouts/partials: Hack in card context menu

2 files changed, 112 insertions, 21 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 761c64d..af1c360 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -290,7 +290,8 @@ object {
   border-radius: 0.5rem;
 }
 
-details {
+details,
+micro-metadata-menu context-control label {
   cursor: pointer;
 }
 
@@ -308,6 +309,13 @@ a {
 a:hover {
   color: #111;
   color: var(--foreground);
+}
+
+a:hover,
+micro-metadata-menu:hover span,
+micro-metadata-view a:hover span,
+micro-metadata-draft a:hover span,
+micro-metadata-handle a:hover span {
   text-decoration-thickness: 0.15rem !important;
 }
 
@@ -365,7 +373,7 @@ abbr[title]:hover {
   border-bottom: 2px dashed;
 }
 
-[type="checkbox"]:checked ~ abbr[title]::after {
+input[type="checkbox"]:checked ~ abbr[title]::after {
   content: " (" attr(title) ")";
 }
 
@@ -706,7 +714,7 @@ micro-metadata {
   color: #444;
   color: var(--fade);
   display: flex;
-  line-height: 1.25;
+  line-height: 1.4;
   margin-bottom: 0.5rem;
 }
 
@@ -714,19 +722,24 @@ micro-metadata h2 {
   display: inline;
 }
 
-micro-metadata section {
+micro-metadata header {
   word-break: break-all;
   word-break: break-word;
 }
 
-micro-metadata section a {
+micro-metadata header a {
   color: inherit;
 }
 
-micro-metadata section > *:not(:last-child) {
+micro-metadata header > *:not(:last-child) {
   margin-right: 0.5rem;
 }
 
+micro-metadata header > *:hover {
+  color: #111;
+  color: var(--foreground);
+}
+
 micro-metadata-expiry,
 micro-metadata-draft em,
 micro-metadata word-limit em {
@@ -740,7 +753,7 @@ micro-metadata-draft em {
 }
 
 micro-header footer svg,
-micro-metadata section svg {
+micro-metadata header svg {
   height: 1rem;
   width: 1rem;
   stroke-width: 0.1rem;
@@ -753,9 +766,10 @@ micro-metadata unlisted-entry {
 s label,
 abbr[title],
 abbr[title] label,
-micro-metadata read-time,
+micro-metadata-expiry,
+micro-metadata-readtime,
+micro-metadata-datetime,
 micro-metadata word-limit,
-micro-metadata expiry-date,
 micro-metadata unlisted-entry {
   cursor: help;
 }
@@ -765,7 +779,6 @@ micro-metadata-anchored {
   color: var(--foreground);
   display: flex;
   margin-bottom: 0.25rem;
-  margin-top: -0.5rem;
   width: 100%;
 }
 
@@ -780,6 +793,43 @@ micro-metadata-anchored svg {
   margin-right: 0.25rem;
 }
 
+micro-metadata-menu {
+  display: inline-block;
+}
+
+micro-metadata-menu context-menu svg {
+  margin-right: 0.25rem;
+}
+
+micro-metadata-menu context-menu a {
+  display: block;
+  padding: 0.5rem 1rem;
+}
+
+micro-metadata-menu context-menu a:hover {
+  background-color: #eee;
+  background-color: var(--hover-background);
+  border-radius: 0.25rem;
+}
+
+micro-metadata a:focus > span,
+micro-metadata-view a,
+micro-metadata-name a,
+micro-metadata-draft a,
+micro-metadata-handle a,
+micro-metadata context-menu a,
+micro-metadata context-menu a span {
+  text-decoration: none;
+}
+
+micro-metadata-name a:hover,
+micro-metadata-menu span,
+micro-metadata-view a span,
+micro-metadata-draft a span,
+micro-metadata-handle a span {
+  text-decoration: underline;
+}
+
 anchored-via {
   color: #444;
   color: var(--fade);
@@ -1387,22 +1437,24 @@ context-menu {
   border-color: var(--border-lighter);
   border-radius: 0.5rem;
   box-shadow: 0 0 1rem -0.5rem var(--shadow);
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
   min-width: 6.25rem;
   position: absolute;
   z-index: 99;
-  max-width: 20rem;
   visibility: hidden;
   opacity: 0;
 }
 
-context-profile context-menu {
-  color: #111;
-  color: var(--foreground);
-  display: block;
-  padding: 1rem;
-  text-align: left;
+context-menu[right] {
+  right: 0;
+}
+
+context-menu[left] {
+  left: 0;
+}
+
+context-menu[left],
+context-menu[right] {
+  top: 1rem;
 }
 
 context-profile a {
@@ -1424,6 +1476,16 @@ context-profile aside:nth-child(2) {
   line-height: 1.25;
 }
 
+context-profile context-menu {
+  color: #111;
+  color: var(--foreground);
+  display: block;
+  padding: 1rem;
+  text-align: left;
+  max-width: 20rem;
+}
+
+input:checked + context-menu,
 micro-card figure:hover context-menu {
   margin-right: 1rem;
   opacity: 1;
@@ -1537,7 +1599,7 @@ s {
   color: transparent;
 }
 
-[type="checkbox"]:checked ~ s {
+input[type="checkbox"]:checked ~ s {
   background-color: inherit;
   color: inherit;
 }
@@ -1587,7 +1649,8 @@ kbd {
   outline: none;
 }
 
-[hidden] {
+[hidden],
+[data-page] micro-metadata-view {
   display: none;
 }
 
diff --git a/assets/js/index.js b/assets/js/index.js
index 71ff972..9d92d09 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -284,6 +284,34 @@
     });
 })();
 (function() {
+    const hide = (triggers)=>{
+        for(let i = 0; i < triggers.length; i++){
+            triggers[i].checked = false;
+        }
+    };
+    const hideIfClickedOutside = (menus, triggers, event)=>{
+        for(let i = 0; i < menus.length; i++){
+            const active = triggers[i].checked === true;
+            const outside = !menus[i].contains(event.target);
+            if (outside && active) hide(triggers);
+        }
+    };
+    self.addEventListener("scroll", function() {
+        const triggers = document.querySelectorAll("micro-metadata-menu input");
+        hide(triggers);
+    });
+    [
+        "click",
+        "touchstart"
+    ].forEach(function(event1) {
+        self.addEventListener(event1, function(event) {
+            const menus = document.querySelectorAll("micro-metadata-menu");
+            const triggers = document.querySelectorAll("micro-metadata-menu input");
+            hideIfClickedOutside(menus, triggers, event);
+        });
+    });
+})();
+(function() {
     self.addEventListener("DOMContentLoaded", function() {
         const form = document.getElementById("search-form");
         const query = document.getElementById("search-input");