add img toggle (#723)

docs-2.0/css/version-select.css

@@ -1,3 +1,28 @@
+img:hover {
+  cursor: pointer;
+}
+.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);
+}
 @media only screen and (max-width:76.1875em) {
   #version-selector {
     padding: .6rem .8rem;

docs-2.0/js/init.js

@@ -0,0 +1,15 @@
+(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");
+            }
+        })
+    });
+})()

mkdocs.yml

@@ -400,6 +400,8 @@ plugins:
 extra_javascript:
   - js/version-select.js
   - js/config.js
+  - js/jquery.js
+  - js/init.js
   - https://polyfill.io/v3/polyfill.min.js?features=es6
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 

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;">
     该版本文档对应尚未发布的Nebula Graph开发版本。如需了解最新的已发布版本，请查看
     <a href="https://docs.nebula-graph.com.cn/2.0.1/" style="font-weight: 500;text-decoration:underline;">v2.0.1文档</a>。