cleanups and readme

README.md

@@ -28,6 +28,7 @@
 ## Features
 
 + Responsive UI
++ Web search Suggestions
 + Mobile Support with Swipe Gestures
 + Theme Settings - Change colors on-the-fly
 + Weather Forecast - OpenWeatherMap
@@ -40,12 +41,19 @@
 
 ## Keybindings
 
-+ <kbd>alt + s</kbd> - toggles dashboard
-+ <kbd>alt + e</kbd> - toggles web menu
-+ <kbd>alt + x</kbd> - toggles weather screen
++ <kbd>alt + S</kbd> - toggles dashboard
++ <kbd>alt + E</kbd> - toggles web menu
++ <kbd>alt + X</kbd> - toggles weather screen
 + <kbd>Escape</kbd> - close panels/toggles web menu
 + <kbd>Backspace</kbd> - toggles search box
 
+## Swipe gestures
+
++ <kbd>swipe right</kbd> - opens web menu
++ <kbd>swipe left</kbd> - opens dashboard
++ <kbd>swipe up</kbd> - opens weather screen
++ <kbd>swipe down</kbd> - opens search box
+
 ## Customization and Settings
 
 #### Changing the colors and blur strength on-the-fly

css/auto-suggestion.css

@@ -20,11 +20,12 @@
 	user-select: none;
 }
 
+/*Show suggestion*/
 .suggestionsShow {
 	opacity: 1 !important;
 }
 
-/*The UL*/
+/*ul*/
 #suggestions {
 	
 	height: auto;
@@ -43,7 +44,7 @@
   	table-layout: fixed;
 }
 
-/*The Li*/
+/*li*/
 #phrase {
 	/*Align list horizontally*/
 	justify-content: center;
@@ -61,8 +62,7 @@
   	text-align: center;
 }
 
-/*The Li's child*/
-
+/*The li's child*/
 .phraseButton {
 
 	background: transparent;
@@ -81,7 +81,7 @@
 }
 
 .phraseButton:focus {
-	background: var(--base-hover-bg);
+	background: var(--base-bg);
 }
 
 .phraseButton:active {

css/style.css

@@ -17,7 +17,7 @@
 @import url('weather-screen.css');
 @import url('weather-settings.css');
 @import url('web-menu.css');
-@import url('suggestions.css');
+@import url('auto-suggestion.css');
 
 :root {
 	/* Colors */

js/search-query-send.js

@@ -12,6 +12,8 @@ searchBox.addEventListener(
 	"keyup",
 	(event) => {
 		
+		if (event.key === 'Tab') return;
+
 		// Number 13 is the "Enter" key on the keyboard
 	  	if (event.key === 'Enter') {