preview url + prevent + popup

gigamaster · Oct 20, 2024 · 55e6f84 · 55e6f84
1 parent 28134d4
commit 55e6f84
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/app/asset/css/style.css b/app/asset/css/style.css
@@ -83,8 +83,6 @@ button,input,optgroup,select,textarea{color:inherit;font:inherit;padding:0;line-
 button,select{text-transform:none}
 [type=button],[type=reset],[type=submit],
 button{-webkit-appearance:button;background-color:initial;background-image:none;cursor:pointer}
-::-moz-focus-inner{border-style:none;padding:0}
-:-moz-focusring{outline:1px dotted ButtonText}
 input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}
 input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}
 input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
@@ -287,6 +285,7 @@ vertical-align:-.175em;}
 .items-center{align-items:center}
 .justify-center{justify-content:center}
 .justify-between{justify-content:space-between}
+.place-items-center{place-items: center;}
 /* margin - padding */
 .m-1{margin:0.25rem;}
 .m-2{margin:0.5rem;}

diff --git a/app/asset/lib/link-previewer.min.js b/app/asset/lib/link-previewer.min.js
@@ -69,20 +69,24 @@
           width:100%;
         }
         .${componentClass}-unknown-format {
-          text-align:center;
+          align-items: center;
+          display:flex;
           color:white;
+          flex-direction: column;
+          height: 100%;
+          justify-content: center;
           padding:10px;
         }
-        .${componentClass}-unknown-format h2 {
-          font-size:28px;
-          line-height:28px;
-          margin-top:32px;
-        }
         .${componentClass}-unknown-format h4 {
           font-size:24px;
           line-height:24px;
           margin-top:20px;
         }
+        .${componentClass}-unknown-format h5 {
+          font-size:14px;
+          line-height:20px;
+          margin-top:14px;
+        }
         .${componentClass}-show {
           transition: opacity 400ms;
           opacity: 1;
@@ -107,8 +111,8 @@
       <div class="${componentClass}-html ${componentClass}-content" style="display:none;"></div>
       <video class="${componentClass}-video ${componentClass}-content" autoplay muted loop style="display:none;"></video>
       <div class="${componentClass}-unknown-format" style="display:none;">
-        <h2>Preview not available</h2>
-        <h4>Click to preview in a pop-up window</h4>
+        <h4>Preview not available</h4>
+        <h5>Click to view in a pop-up window</h5>
       </div>
     `;
 
@@ -138,7 +142,7 @@
         iframeHTML.setAttribute("height", "205");
         iframeHTML.setAttribute("scrolling", "no");
         iframeHTML.setAttribute('frameborder', "0");
-        iframeHTML.style.cssText = 'width:366px;height:205px;border: none;";overflow:hidden;';
+        iframeHTML.style.cssText = 'width:366px;height:205px;border: none;overflow:hidden;';
         iframeHTML.src = url;
         contentHtml.appendChild(iframeHTML);
         showContent(contentHtml);

diff --git a/src/main.py b/src/main.py
@@ -100,7 +100,7 @@ def main():
                   if not droot: 
                     # File Preview - filename relative path
                     f.write("<td class=\"flex flex-nowrap items-center justify-center\">" + 
-                          "<a class=\"preview m-1 mb-1 py-1 bg-gray-100 rounded-md hover:text-light hover:bg-primary dark:bg-dark dark:hover:bg-dark dark:hover:text-light\" title=\"Preview File\" x-on:click=\"openWithSelfMain('" + filename + "','codemo','960','540')\">" +
+                          "<a class=\"preview m-1 mb-1 py-1 bg-gray-100 rounded-md hover:text-light hover:bg-primary dark:bg-dark dark:hover:bg-dark dark:hover:text-light\" href=\"" + filename + "\" x-on:click.prevent=\"openWithSelfMain('" + filename + "','codemo','960','540')\" title=\"Preview File\">" +
                           "<span class=\"icon-view w-4 h-4 mx-2\"></span></a>" + 
                           "<a class=\"edit m-1 mb-1 py-1 bg-gray-100 rounded-md hover:text-light hover:bg-primary dark:bg-dark dark:hover:bg-dark dark:hover:text-light\" href=\"" + uEdit + fName + "\"  target=\"_blank\" title=\"Edit File\">" +
                           "<span class=\"icon-edit w-4 h-4 mx-2\"></span></a>" +

diff --git a/src/template/head.html b/src/template/head.html
@@ -451,7 +451,7 @@ <h3>Digital Nomad</h3>
           </button>
 
           <!-- Desktop Codemo Title -->
-          <span class="flex flex-nowrap ">
+          <span class="flex flex-nowrap mx-4">
           <a
             href="https://gigamaster.github.io/codemo/"
             class="hidden lg:block text-1xl tracking-wider text-primary-dark dark:text-light">
@@ -1173,10 +1173,10 @@ <h1 class="text-light" x-text="item.page_title"></h1>
       <main class="flex flex-col max-h-full sm:mr-px md:mr-11 p-2 lg:p-4 bg-gray-100 dark:bg-dark rounded-lg overflow-y-auto">
 
       <!-- Path -->
-      <nav class="relative rounded-lg mb-4 p-2 bg-white dark:border-primary-darker dark:bg-darker dark:text-light shadow-sm">
+      <nav class="relative rounded-lg mb-4 p-1 bg-white dark:border-primary-darker dark:bg-darker dark:text-light shadow-sm">
         <span class="flex flex-row tracking-wide text-xl dark:text-light">
-          <a href="https://gigamaster.github.io/codemo/" class="flex flex-nowrap" title="Root">
-          <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 11h3a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1H9.01V5a2 2 0 0 0-2-2H4c-1.1 0-2 .9-2 2v4a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V8h2v7.01c0 1.65 1.34 2.99 2.99 2.99H15v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1h-1.01c-.54 0-.99-.45-.99-.99V8h2v1c0 1.1.9 2 2 2"/></svg> 
+          <a href="https://gigamaster.github.io/codemo/" class="flex flex-nowrap bg-gray-100 dark:bg-dark rounded-md mr-2 p-1" title="Root">
+          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 11h3a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1H9.01V5a2 2 0 0 0-2-2H4c-1.1 0-2 .9-2 2v4a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V8h2v7.01c0 1.65 1.34 2.99 2.99 2.99H15v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1h-1.01c-.54 0-.99-.45-.99-.99V8h2v1c0 1.1.9 2 2 2"/></svg> 
           </a> <span>{{foldername}}</span>
         </span>
       </nav>