(v0.4.0) UI improvements, Add tag suggestions

KeziahMoselle · Feb 14, 2018 · 0e8e0f3 · 0e8e0f3
1 parent 2359ded
commit 0e8e0f3
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 15 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -39,17 +39,38 @@ main {
   overflow: hidden;
   top: 0;
   position: fixed;
-  height: 20px;
+  height: 30px;
   width: 100%;
   background-color: #6688EC;
   -webkit-user-select: none;
   -webkit-app-region: drag;
 }
+nav#drag i.material-icons {
+  display: block;
+  font-size: 18px;
+  height: 30px;
+  line-height: 30px;
+}
+.no-drag {
+  -webkit-app-region: no-drag;
+}
+
+ul#tagsResults {
+  max-height: 30px;
+}
+
+#tagsResults li a {
+  line-height: 30px;
+}
+
+#tagsResults li {
+  max-height: 30px;
+}
 
 #titlebar {
   z-index: 2;
   overflow: hidden;
-  top: 20px;
+  top: 30px;
   position: fixed;
 }
 

diff --git a/index.html b/index.html
@@ -11,40 +11,51 @@
 
   <!-- HEADER -->
   <header>
-      <div id="drag"></div>
+      <nav id="drag">
+          <ul id="tagsResults" class="left">
+            <li><a class="tagResult"></a></li>
+            <li><a class="tagResult"></a></li>
+            <li><a class="tagResult"></a></li>
+          </ul>
+          <ul class="no-drag right">
+              <li><a id="win-minimize"><i class="material-icons">remove</i></a></li>
+              <li><a id="win-fullscreen"><i class="material-icons">crop_free</i></a></li>
+              <li><a id="win-close"><i class="material-icons">close</i></a></li>
+          </ul>
+      </nav>
+
       <nav id="titlebar">
         <div class="nav-wrapper primary">
           <a class="brand-logo center">Gel<b>booru</b></a>
           <ul id="nav-mobile" class="left hide-on-med-and-down">
               <li class="active"><a id="openSidenav" href="#"><i class="material-icons">menu</i></a></li>
               <li><a title="Click to search" id="clickSearch" href="#"><i class="material-icons">search</i></a></li>
               <li><a title="Click to change image limit" onclick="clickLimit()" href="#"><div id="displayLimit" class="chip">10 images</div></a></li>
-              <li><a title="Enable NSFW" onclick="clickRating()" href="#"><i id="displayRating" class="material-icons">lock_outline</i></a></li>
+              <li><a title="Click to enable NSFW" onclick="clickRating()" href="#"><i id="displayRating" class="material-icons">lock_outline</i></a></li>
               <li><a title="Click to change cards layout" onclick="clickLayout()" href="#"><i id="displayLayout" class="material-icons">view_module</i></a></li>
-              <li><a title="Previous page" onclick="clickPrevious()" href="#"><i class="material-icons">keyboard_arrow_left</i></a></li>
-              <li><a title="Page ID" ><div id="displayPid" class="chip">No results</div></a></li>
-              <li><a title="Next page" onclick="clickNext()" href="#"><i class="material-icons">keyboard_arrow_right</i></a></li>
           </ul>
           <ul class="right hide-on-med-and-down">
-            <li><a id="win-minimize"><i class="material-icons">remove</i></a></li>
-            <li><a id="win-fullscreen"><i class="material-icons">crop_free</i></a></li>
-            <li><a id="win-close"><i class="material-icons">close</i></a></li>
+            <li><a title="Previous page" onclick="clickPrevious()" href="#"><i class="material-icons">keyboard_arrow_left</i></a></li>
+            <li><a title="Page ID" ><div id="displayPid" class="chip">Page 0</div></a></li>
+            <li><a title="Next page" onclick="clickNext()" href="#"><i class="material-icons">keyboard_arrow_right</i></a></li>
           </ul>
         </div>
       </nav>
+
       <ul class="sidenav">
         <li>
           <div class="user-view">
             <div class="background dark"></div>
             <span class="white-text name">Gelbooru Client</span>
-            <span class="white-text email">v0.3.1</span>
+            <span class="white-text email">v0.4.0</span>
           </div>
         </li>
         <li><a class="subheader">Settings</a></li>
         <li><label><input id="themeBtn" type="checkbox" class="filled-in" /><span>Enable light mode</span></label></li>
         <li><div class="divider"></div></li>
         <li><a class="subheader">Links</a></li>
         <li><a class="waves-effect" href="https://gelbooru.com/"><i class="material-icons">open_in_new</i>Gelbooru</a></li>
+        <li><a class="waves-effect" href="https://gelbooru.com/index.php?page=help&topic=cheatsheet"><i class="material-icons">open_in_new</i>How Gelbooru works ?</a></li>
         <li><a class="waves-effect" href="https://github.com/KeziahMoselle/gelbooru-client"><i class="material-icons">open_in_new</i>GitHub</a></li>
       </ul>
       <!-- [End First navbar] -->
@@ -89,21 +100,23 @@
   <script src="./renderer.js"></script>
   <script>
     (function() {
+      // MaterializeCSS
       const sidenav = document.querySelector('.sidenav');
       var instanceSidenav = M.Sidenav.init(sidenav);
       document.getElementById('openSidenav').addEventListener('click', () => {
         instanceSidenav.open();
       });
 
+      // Animations
       const clickSearch = document.getElementById('clickSearch');
       const navSearch = document.querySelector('nav#nav-search');
       const main = document.querySelector('main.row');
       var marginTop = 0;
       clickSearch.addEventListener('click', () => {
         if (marginTop === 0)
         {
-          marginTop = 64;
-          navSearch.style.marginTop = '64px';
+          marginTop = 70;
+          navSearch.style.marginTop = '70px';
           main.style.paddingTop = '148px';
           document.getElementById('searchBar').focus();
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gelbooru-client",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "You already know what it is.",
   "main": "main.js",
   "dependencies": {

diff --git a/renderer.js b/renderer.js
@@ -16,7 +16,8 @@
         displayRating = document.getElementById('displayRating'), // Display Rating
         displayLimit = document.getElementById('displayLimit'), // Display Image limit chip
         displayLayout = document.getElementById('displayLayout'), // Display Card Layout
-        displayPid = document.getElementById('displayPid'); // Display chip
+        displayPid = document.getElementById('displayPid'), // Display chip
+        tagsResults = document.getElementById('tagsResults');
 
   // Value
   var tags,
@@ -75,6 +76,19 @@ var theme = store.get('theme');
       var url = getUrl(tags, imgLimit, rating);
       getResults(url);
     }
+    else
+    {
+      tags = searchBar.value;
+      axios.get(`https://gelbooru.com/index.php?page=dapi&s=tag&q=index&json=1&name_pattern=${tags.replace(/\s/g, '+')}&limit=3&order=DESC&orderby=count`)
+      .then((response) => {
+        var popularTags = response.data;
+        var list = document.getElementsByClassName('tagResult');
+        for (let i = 0; i < list.length; i++)
+        {
+          list[i].innerHTML = `${popularTags[i].tag} (${popularTags[i].count})`;
+        }
+      });
+    }
   };
 
   // GET rating