add minimize button to quick jisho

imported from SethClydesdale/genki-study-resources@49db8ce#diff-ffedf14f17c83edf58d617adeecf9d72b030900c23459c7305ba542b73a08e35L2403
SethClydesdale · Dec 19, 2024 · f697b9b · f697b9b
1 parent 9fbe2e7
commit f697b9b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/resources/css/stylesheet.css b/resources/css/stylesheet.css
@@ -28,6 +28,18 @@ for exercises with radicals: (place at end of <head> section)
   font-style:normal;
 }
 
+.fa-hover {
+  color: #fff;
+  line-height: 32px;
+  font-size: 18px;
+  outline:none;
+}
+.fa-hover:hover, .fa-hover:focus {
+  opacity: 0.7;
+  outline: none;
+  cursor: pointer;
+}
+
 /* animations */
 @-webkit-keyframes fa-spin {
   0% {
@@ -2931,13 +2943,23 @@ input:checked + .genki_pseudo_checkbox:after { font-size:14px; }
   opacity:0;
 }
 
-#quick-jisho-title {
-  color:#fff;
+.quick-jisho-header {
   background:#17A;
-  font-size:18px;
-  text-align:center;
-  line-height:32px;
-  margin:-1px -1px 0 -1px;
+  display: flex;
+  align-items: center;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+#quick-jisho-title {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  color: #fff;
+  line-height: 32px;
+  font-size: 18px;
+  margin: -1px -1px 0 -1px;
+  margin-left: 18px;
 }
 
 .quick-jisho-row { padding:3px; }

diff --git a/resources/css/stylesheet.min.css b/resources/css/stylesheet.min.css
diff --git a/resources/javascript/genki.js b/resources/javascript/genki.js
@@ -2441,14 +2441,17 @@
         box.id = 'quick-jisho-window';
         box.className = 'quick-jisho-hidden';
         box.innerHTML = 
-          '<h3 id="quick-jisho-title" class="main-title">Quick Dictionary <span id="quick-jisho-hits"></span></h3>'+
-          '<div id="quick-jisho-content">'+
-            '<div class="quick-jisho-row center">'+
-              '<input tabindex="0" id="quick-jisho-search" type="text" placeholder="Search..." oninput="Genki.quickJisho.search(this.value);">'+
-            '</div>'+
-            '<div class="quick-jisho-row">'+
-              '<ul id="quick-jisho-results"></ul>'+
-            '</div>'+
+          '<div class="quick-jisho-header">' +
+            '<h3 id="quick-jisho-title" class="main-title"> Quick Dictionary <span id="quick-jisho-hits"></span> </h3> ' +
+            '<i class="fa fa-hover" tabindex="0" onclick="Genki.quickJisho.toggle();" onkeydown="event.key == \'Enter\' && Genki.quickJisho.toggle();" title="Minimize">&#xf2d1;</i>  ' +
+          '</div>' +
+          '<div id="quick-jisho-content">' +
+            '<div class="quick-jisho-row center">' +
+              '<input tabindex="0" id="quick-jisho-search" type="text" placeholder="Search..." oninput="Genki.quickJisho.search(this.value);">' +
+            '</div>' +
+            '<div class="quick-jisho-row">' +
+              '<ul id="quick-jisho-results"></ul>' +
+            '</div>' +
           '</div>';
 
         // selection button

diff --git a/resources/javascript/genki.min.js b/resources/javascript/genki.min.js