From 89ff3e3d6b4f372ade9938823a97c236a0fe4771 Mon Sep 17 00:00:00 2001 From: ji-yin Date: Mon, 26 Jul 2021 17:52:57 +0800 Subject: [PATCH 1/2] Change the header to an on scroll fixed header --- index.html | 112 ++++++++++++++++++++++-------------------- javascripts/search.js | 6 +-- stylesheets/style.css | 87 ++++++++++++++++++++++++-------- 3 files changed, 129 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index 7499923..5032b23 100644 --- a/index.html +++ b/index.html @@ -1,28 +1,32 @@ - - - - - - - - - - - - Emoji searcher - - - - - -
+ + + + + + + + + + + + Emoji searcher + + + + + + +
+
@@ -42,37 +46,41 @@ 🌁 -
+ +
+ +
+ -
-
    -
+
+ Loading + +
-
- Loading - -
+
+ 😭 +
+
No results
+

+ Help your future self by adding + + to the library. +

+

+ Contribute to emojilib +

+
+
-
- 😭 -
No results
-

- Help your future self by adding - - to the library. -

-

- Contribute to emojilib -

-
-
+ + + + - - - - - + \ No newline at end of file diff --git a/javascripts/search.js b/javascripts/search.js index 9f9119e..bfdd548 100644 --- a/javascripts/search.js +++ b/javascripts/search.js @@ -10,7 +10,7 @@ function searchHash() { } document.addEventListener('emoji:ready', searchHash) -function search (keyword) { +function search(keyword) { keyword = typeof keyword === 'undefined' ? '' : keyword document.querySelector('.keyword').textContent = keyword keyword = keyword.trim() @@ -24,7 +24,7 @@ function search (keyword) { setRelatedDOMVisibility(keyword) } -function setRelatedDOMVisibility (keyword) { +function setRelatedDOMVisibility(keyword) { var foundSomething = !!document.querySelector('.result:not([hidden])') document.querySelector('.no-results').hidden = foundSomething } @@ -39,7 +39,7 @@ document.addEventListener('click', event => { if (event.target.classList.contains('group')) { filter.value = event.target.href.substr(1) search(filter.value) - } else if (event.target.classList.contains('js-clear-search')) { + } else if (event.target.classList.contains('js-clear-search') || event.target.classList.contains('input-search')) { filter.value = '' } }) diff --git a/stylesheets/style.css b/stylesheets/style.css index 756ad56..01bda66 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,9 +1,27 @@ -form { margin: 0; } -.pull-right { float: right; position: relative; } -input:invalid { visibility: hidden; } -[data-clipboard-text] { cursor: pointer; } -.text-big { font-size: 20px; } -[hidden] { display: none !important; } +form { + margin: 0; +} + +.pull-right { + float: right; + position: relative; +} + +input:invalid { + visibility: hidden; +} + +[data-clipboard-text] { + cursor: pointer; +} + +.text-big { + font-size: 20px; +} + +[hidden] { + display: none !important; +} body, input, @@ -14,7 +32,7 @@ button { body { line-height: 1.6em; - padding: 10px; + padding: 0px; margin: 0; color: #333; background-color: #fff; @@ -30,6 +48,7 @@ footer { .container, .list, .site-header, +.fixed-header, .site-footer { width: 100%; max-width: 780px; @@ -39,15 +58,22 @@ footer { .site-header { white-space: nowrap; position: relative; + z-index: 5; +} + +.fixed-header { + position: fixed; + background-color: #fff; line-height: 1; margin-bottom: 10px; - padding-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; border-bottom: 1px solid #ddd; } .site-footer { margin-top: 10px; - padding-top: 10px; + padding-top: 10px; border-top: 1px solid #ddd; text-align: center; } @@ -66,7 +92,9 @@ footer { font-weight: bold; } -.loading + .no-results { display: none; } +.loading + .no-results { + display: none; +} .mojigroup { margin: 0 0 10px 5px; @@ -91,7 +119,8 @@ ul { } .plain { - appearance: none; + -moz-appearance: none; + appearance: none; -webkit-appearance: none; border: 0; box-shadow: none; @@ -99,7 +128,8 @@ ul { } .plain:focus { - box-shadow: none; outline: none; + box-shadow: none; + outline: none; } .emoji-group { @@ -113,6 +143,7 @@ ul { .emojis-container { font-size: 0; line-height: 0; + padding-top: 70px; } .emoji-code { @@ -137,6 +168,10 @@ ul { font-size: 0; } +::-moz-selection { + background-color: transparent; +} + ::selection { background-color: transparent; } @@ -177,6 +212,7 @@ ul, li { .button.clear-search { color: #ee9d9d; } + .button.clear-search:hover { border-color: #ee9d9d; } @@ -190,7 +226,9 @@ ul, li { margin: 0; width: 150px; border-radius: 15px; - appearance: textfield; + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; } .input-search::-webkit-search-cancel-button, @@ -200,7 +238,7 @@ ul, li { .input-search:focus { border-color: #51a7e8; - box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } .alert { @@ -212,7 +250,7 @@ ul, li { left: 50%; transform: translateX(-50%); bottom: 10px; - background: rgba(0, 0, 0, .8); + background: rgba(0, 0, 0, 0.8); color: #fff; font-weight: bold; padding: 7px 20px; @@ -267,7 +305,8 @@ code { background-color: #f8f8f8; border: 1px solid #aaa; padding: 0 2px; - border-radius: 3px; color: #666; + border-radius: 3px; + color: #666; font-family: Monaco, monospace; font-size: 11px; } @@ -282,13 +321,19 @@ code { } .clear-search, - .mojigroup { +.mojigroup { display: none; } - input { font-size: 14px; } + input { + font-size: 14px; + } - ul { padding: 0; } + ul { + padding: 0; + } - .emoji-wrapper { padding: 0; } -} + .emoji-wrapper { + padding: 0; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file From 410060a846d2132ea10bad83ef8276ffcb18d280 Mon Sep 17 00:00:00 2001 From: ji-yin Date: Sat, 31 Jul 2021 15:15:25 +0800 Subject: [PATCH 2/2] Modifications on header and search bar --- index.html | 1 + javascripts/search.js | 2 +- stylesheets/style.css | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5032b23..d0b4994 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,7 @@ 🌁 + diff --git a/javascripts/search.js b/javascripts/search.js index bfdd548..2458ec1 100644 --- a/javascripts/search.js +++ b/javascripts/search.js @@ -39,7 +39,7 @@ document.addEventListener('click', event => { if (event.target.classList.contains('group')) { filter.value = event.target.href.substr(1) search(filter.value) - } else if (event.target.classList.contains('js-clear-search') || event.target.classList.contains('input-search')) { + } else if (event.target.classList.contains('js-clear-search')) { filter.value = '' } }) diff --git a/stylesheets/style.css b/stylesheets/style.css index 01bda66..ac9d06d 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -48,7 +48,6 @@ footer { .container, .list, .site-header, -.fixed-header, .site-footer { width: 100%; max-width: 780px;