PR dev issues y24w23

index.html

@@ -21,7 +21,7 @@
         <div class="flex justify-center pt-6 font-semibold">
           <div class="pr-1">
             <button
-              class="group border-customBlue h-9 w-[7rem] content-center rounded-3xl border bg-customBlue text-center text-sm"
+              class="group border-customBlue h-9 w-[6rem] content-center rounded-3xl border bg-customBlue text-center text-sm"
             >
               <span class="block group-hover:hidden">Previous</span>
               <span class="hidden group-hover:block text-gray-700"
@@ -31,16 +31,17 @@
           </div>
           <!--  HIGHLIGHT BUTTON  -->
           <div id="read-content" class="pl-1">
+            <!---->
             <button
-              class="group border-customBlue h-9 w-20 p-1 rounded-3xl shadow-glow animate-pulseShadow bg-customBlue text-center text-sm"
+              class="transition duration-150 ease-in-out active:scale-95 border-customBlue h-9 w-24 p-1 rounded-3xl bg-customBlue text-center text-sm"
             >
               Highlight
             </button>
           </div>
           <!--  NEXT BUTTON  -->
           <div class="pl-1">
             <button
-              class="group border-customBlue h-9 w-[7rem] content-center rounded-3xl border bg-customBlue text-center text-sm"
+              class="group border-customBlue h-9 w-[6rem] content-center rounded-3xl border bg-customBlue text-center text-sm"
             >
               <span class="block group-hover:hidden">Next</span>
               <span class="hidden group-hover:block text-gray-700"
@@ -50,17 +51,20 @@
           </div>
         </div>
 
-        <div id='result-div' class="grid-cols-14 px-4 pt-2 pb-4">
-          <!-- <div
-            class="hover:bg-blue-200 pl-2 pr-1 hover:rounded hover:font-semibold">
-            What is the problem
-          </div> -->
-          <ul id="list">
+        <div class="flex justify-center pt-2"></div>
 
-          </ul>
-          <code id='result'></code>
+        <div
+          id="result-div"
+          class="grid-cols-14 px-4 pt-2 pb-4 h-[21rem] overflow-y-scroll"
+        >
+          <div>
+            <p class="text-sm mb-1 pl-0.5 bg-customBlue bg-opacity-50">
+              JUMP TO SECTION
+            </p>
+          </div>
+          <code id="result"></code>
         </div>
-  
+
         <div class="flex justify-center text-center">
           <div class="flex items-center pr-1">
             <input
@@ -70,6 +74,7 @@
               class="h-3 w-3 hover:scale-[1.10]"
             />
           </div>
+
           <div>
             <label for="extensionCheckbox" class="text-[13px]"
               >Collapse thumbnails</label
@@ -79,34 +84,51 @@
 
         <div class="px-4 pt-4">
           <div class="flex justify-between px-3 font-semibold">
+            <!--  MY FAVOURITES BUTTON  -->
             <div>
               <button
-                class="duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
+                class="group duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
               >
-                Save To <br />
-                My Favourites
+                <span class="block group-hover:hidden"
+                  >Save To <br />
+                  My Favourites</span
+                >
+                <span class="hidden group-hover:block text-gray-700"
+                  >Coming <br />Soon</span
+                >
               </button>
             </div>
+            <!--  THIS PROPOSAL BUTTON  -->
             <div>
               <button
-                class="duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
+                class="group duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
               >
-                Share this Proposal
+                <span class="block group-hover:hidden"
+                  >Share <br />
+                  This Proposal</span
+                >
+                <span class="hidden group-hover:block text-gray-700"
+                  >Coming <br />Soon</span
+                >
               </button>
             </div>
+            <!--  ALL FAVOURITES BUTTON  -->
             <div>
               <button
-                class="duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
+                class="group duration-50 w-24 transform content-center rounded-xl border-x-transparent bg-customBlue p-1 text-center text-xs transition hover:shadow-lg"
               >
-                Share All <br />
-                My Favourites
+                <span class="block group-hover:hidden"
+                  >Share All <br />
+                  My Favourites</span
+                >
+                <span class="hidden group-hover:block text-gray-700"
+                  >Coming <br />Soon</span
+                >
               </button>
             </div>
           </div>
           <div class="pb-3 text-right">
-            <a
-              href=""
-              class="text-xs text-blue-700 underline hover:font-semibold"
+            <a href="" class="text-xs underline font-semibold text-gray-700"
               >More options</a
             >
           </div>
@@ -125,7 +147,12 @@
         <div class="w-max content-center py-1 pl-4">
           <p class="text-[13px] leading-snug">
             Share this
-            <a href="https://github.com/45B-Cardano/45B_Catalyst_Extension" target="_blank" class="text-blue-700 underline">Browser Extension</a>!!
+            <a
+              href="https://github.com/45B-Cardano/45B_Catalyst_Extension"
+              target="_blank"
+              class="text-blue-700 underline"
+              >Browser Extension</a
+            >!!
             <br />
             Get to know our proposals at
             <a
@@ -134,6 +161,7 @@
               class="text-blue-700 underline hover:font-semibold"
               >45B.io</a
             >. Please consider voting for this and other ideas.
+            <em>(v0.1.02)</em>
           </p>
         </div>
       </div>

main.js

@@ -13,9 +13,9 @@ let keyphrases = [
 ]
 
 
-let list = document.querySelector('#list');
+let list = document.querySelector('#result-div');
 for (const phrase of keyphrases) {
-    const li = document.createElement("li");
+    const li = document.createElement("div");
     const textnode = document.createTextNode(phrase);
     li.appendChild(textnode);
     list.appendChild(li);
@@ -43,8 +43,20 @@ document.getElementById('read-content').addEventListener('click', () => {
             ]
             // podia ser feito a partir de uma lista mais concisa 
             // (ex: apenas os que têm um mínimo de length, ou dentro de um elemento específico)
+
+            //TODO: não verificar duas vezes, só dar uma volta com um if
             const elements_matched = Array.from(document.querySelectorAll('h2')).filter(el=> keyphrases.find(k => el.innerText.toLowerCase().includes(k.toLowerCase())));
-            elements_matched.forEach(m=>{m.style="background-color:darkblue;";})
+            elements_matched.forEach(m=>{
+                m.style="background-color:darkblue; color:white;";
+                m.innerHTML = m.innerText; //reset
+                let phrase = keyphrases.find(k => m.innerText.toLowerCase().includes(k.toLowerCase()));
+                let index = m.innerText.indexOf(phrase);
+
+                let oldInner = m.innerText.substring(index,phrase.length+index);
+                let oldInnerSplit = m.innerText.split(oldInner);
+                let newElement = "<span style='background-color:lightgreen;color:black;'>"+oldInner+"</span>";
+                m.innerHTML = oldInnerSplit[0]+ newElement + oldInnerSplit[1];
+            })
             var result = elements_matched.map(x=>x.innerText);
             // https://developer.chrome.com/docs/extensions/mv3/messaging/
             (async () => {
@@ -71,13 +83,13 @@ chrome.runtime.onMessage.addListener(
                 "from the extension");
     var resp = request.info;
     if (resp) {
-        var resultElement = document.getElementById("list");
+        var resultElement = document.getElementById("result-div");
         var listItems = Array.from(resultElement.children);
 
         // TODO: fazer mais elegante
         for (const item of listItems) {
             if(resp.find(r => r.toLowerCase().includes(item.innerText.toLowerCase()))){
-                item.style="background-color:lightblue;"
+                item.className="bg-lime-300 hover:bg-blue-200 pl-2 pr-1 hover:rounded hover:font-semibold cursor-pointer"
                 // item.onclick=
             }else{
                 item.style="";

manifest.json

@@ -1,16 +1,15 @@
 {
   "manifest_version": 3,
   "name": "45B Catalyst Browser Extension",
-  "version": "0.1.01",
+  "version": "0.1.02",
   "description": "Simple tool to help Cardano Catalyst Community users navigate, save favorites and share proposals.",
   "icons": {
     "16": "assets/45b_tag_sqr.png",
     "48": "assets/45b_tag_sqr.png",
     "128": "assets/45b_tag_sqr.png"
   },
   "action": {
-    "default_popup": "index.html",
-    "default_icon": "assets/45b_tag_sqr.png"
+    "default_popup": "index.html"
   },
   "permissions": ["scripting"],
   "host_permissions": ["*://cardano.ideascale.com/c/idea/*"]