From 0e8e0f31baf5bd4efb8e1ce6c2c20d3469f8965b Mon Sep 17 00:00:00 2001 From: KeziahMoselle <keziahmoselle@protonmail.com> Date: Wed, 14 Feb 2018 23:49:32 +0100 Subject: [PATCH] (v0.4.0) UI improvements, Add tag suggestions --- assets/css/index.css | 25 +++++++++++++++++++++++-- index.html | 35 ++++++++++++++++++++++++----------- package.json | 2 +- renderer.js | 16 +++++++++++++++- 4 files changed, 63 insertions(+), 15 deletions(-) diff --git a/assets/css/index.css b/assets/css/index.css index ebb27d1..8809105 100644 --- 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 index 3f4ae97..373300d 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,19 @@ <!-- 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> @@ -19,25 +31,23 @@ <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> @@ -45,6 +55,7 @@ <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,12 +100,14 @@ <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'); @@ -102,8 +115,8 @@ 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 index 2791434..fb15bc4 100644 --- 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 index b2e691f..a3c90eb 100644 --- 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