code.core>new: add tagmark tag doc overlay

pwnfan · Aug 7, 2023 · ed54c17 · ed54c17
1 parent e5c73f0
commit ed54c17
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 85 deletions.
diff --git a/css/tagmark.css b/css/tagmark.css
@@ -12,7 +12,7 @@
 }
 
 #tag-definition::-webkit-scrollbar,
-#all-tags-show-switch-container-title::-webkit-scrollbar {
+.custom-title::-webkit-scrollbar {
     display: none;
 }
 
@@ -81,14 +81,13 @@ body {
     font-size: 0.9em;
 }
 
-#all-tags-show-switch-container {
+.button-show-switch-container {
     cursor: pointer;
     display: inline-block;
     white-space: nowrap;
 }
 
-#tag-definition,
-#all-tags-show-switch-container-title {
+.custom-title {
     position: absolute;
     background-color: #333;
     color: white;
@@ -215,14 +214,15 @@ body {
 .modal-menu {
     height: 50px;
     display: flex;
+    justify-content: flex-end;
     align-items: center;
     justify-content: flex-start;
     border-bottom: 1px solid #ccc;
     padding: 0px 20px;
 }
 
-.github-link {
-    margin-left: auto;
+.link {
+    margin-left: 10px;
     cursor: pointer;
     border-radius: 5px;
     border: 1px solid #ccc;

diff --git a/index.html b/index.html
@@ -77,10 +77,16 @@
 
     <body>
         <div id="tagmark-table"></div>
-        <div id="tag-definition"></div>
-        <div id="all-tags-show-switch-container-title">
+        <div id="tag-definition" class="custom-title"></div>
+        <div id="all-tags-show-switch-container-title" class="custom-title">
             Click to show all tags...
         </div>
+        <div
+            id="tagmark-tag-doc-show-switch-container-title"
+            class="custom-title"
+        >
+            Click to show TagMark Tags Doc...
+        </div>
 
         <div id="all-tags-overlay" class="overlay">
             <div class="modal">
@@ -142,20 +148,20 @@ <h2>All Tags</h2>
                         </fieldset>
                     </div>
                     <span
-                        class="github-link"
-                        onclick="window.open('data/tagmarks.jsonl')"
+                        class="link"
+                        onclick="window.open('./data/tagmarks.jsonl')"
                         title="TagMark UI Data"
                     >
                         <i class="fa-solid fa-link fa-beat-fade"></i>
-                        <span class="github-link-text">tagmarks.jsonl</span>
+                        <span class="link-text">tagmarks.jsonl</span>
                     </span>
                     <span
-                        class="github-link"
-                        onclick="window.open('data/tags.json')"
+                        class="link"
+                        onclick="window.open('./data/tags.json')"
                         title="Tags Information"
                     >
                         <i class="fa-solid fa-link fa-beat-fade"></i>
-                        <span class="github-link-text">tags.json</span>
+                        <span class="link-text">tags.json</span>
                     </span>
                 </div>
                 <div class="modal-body">
@@ -183,18 +189,47 @@ <h2>TagMark Filters</h2>
                         <option value="zh_CN">Chinese(Simple)</option>
                     </select>
                     <span
-                        class="github-link"
+                        class="link"
                         onclick="window.open('https://github.com/pwnfan/tagmark-ui/tree/main/docs')"
                     >
                         <i class="fa-brands fa-github fa-beat-fade"></i>
-                        <span class="github-link-text">Docs on Github</span>
+                        <span class="link-text">Docs on Github</span>
                     </span>
                 </div>
 
                 <div class="modal-body">
-                    <div id="filter-doc" class="body-container">
-                        <!-- add content here -->
+                    <div id="filter-doc" class="body-container"></div>
+                    <br /><br />
+                </div>
+            </div>
+        </div>
+
+        <div id="tagmark-tag-doc-overlay" class="overlay">
+            <div class="modal">
+                <div class="modal-header">
+                    <div class="header-container">
+                        <h2>TagMark Tag Doc</h2>
+                        <button class="close-btn">&times;</button>
                     </div>
+                </div>
+                <div class="modal-menu">
+                    <span
+                        class="link"
+                        onclick="window.open('https://github.com/pwnfan/tagmark')"
+                    >
+                        <i class="fa-brands fa-github fa-beat-fade"></i>
+                        <span class="link-text">TagMark Tag Doc Reference</span>
+                    </span>
+                    <span
+                        class="link"
+                        onclick="window.open('./docs/tag-doc.md')"
+                    >
+                        <i class="fa-solid fa-link fa-beat-fade"></i>
+                        <span class="link-text">Doc Source Code</span>
+                    </span>
+                </div>
+                <div class="modal-body">
+                    <div id="tagmark-tag-doc" class="body-container"></div>
                     <br /><br />
                 </div>
             </div>