add img toggle (#561)

* add toggle class * modify js
vesoft-inc · Jul 15, 2021 · 51d89da · 51d89da
1 parent 88048ac
commit 51d89da
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/docs-2.0/css/search.css b/docs-2.0/css/search.css
@@ -1,3 +1,26 @@
+.max {
+    width: auto;
+    position: fixed;
+    top: calc(50vh);
+    z-index: 100;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: calc(100vw);
+}
+.min {
+    width: auto;
+}
+.dialog-bg{
+    position: absolute;
+    width: calc(100vw);
+    height: calc(100vh);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,0.4);
+}
+
 #___gcse_0 .gsc-control-cse{
     width: 138px ;
     height: 34px ;

diff --git a/docs-2.0/js/search.js b/docs-2.0/js/search.js
@@ -1,4 +1,18 @@
 (function(){
+    $("img").click(function change(){
+        var $this = $(this)
+        $(this).toggleClass("max");
+        $("#dialog-bg").toggleClass("dialog-bg");
+    });
+    $("#dialog-bg").on("click",function () {
+        $("#dialog-bg").toggleClass("dialog-bg");
+        $("img").each(function(){
+            if($(this).hasClass("max")){
+                $(this).toggleClass("max");
+            }
+        })
+    });
+
     const Search={
         init:function(){
             this.attachEvent();

diff --git a/overrides/partials/header.html b/overrides/partials/header.html
@@ -2,6 +2,7 @@
   This file was automatically generated - do not edit
 -#}
 <header class="md-header" data-md-component="header">
+  <div id="dialog-bg"></div>
   <div id="banner" style="width: 100%;display:flex;height: 35px;justify-content:center;align-items:center;background-color:#FFE45E;font-size:15px;font-weight: 400;color: #000000;">
     This version is under development. For the docs of the latest stable release, see 
     <a href="https://docs.nebula-graph.io/2.0.1/" style="font-weight: 400;text-decoration:underline;margin-left: 5px;color: #000000;"> v2.0.1 docs</a>.