From 3b09bfaecbce8c0de06362d6f4e53bfe016ebc62 Mon Sep 17 00:00:00 2001 From: Nik Topler Date: Sun, 30 Aug 2020 22:13:19 +0200 Subject: [PATCH] Updated and improved search experience --- CSS/*.css | 12 +++++-- CSS/colors.css | 1 + CSS/index.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++--- JS/main.js | 58 ++++++++++++++++++++++++++---- JS/variables.js | 2 +- headlines.php | 17 ++------- search.php | 21 +++++++++++ 7 files changed, 176 insertions(+), 29 deletions(-) diff --git a/CSS/*.css b/CSS/*.css index e4aa39b..fefe42f 100644 --- a/CSS/*.css +++ b/CSS/*.css @@ -230,7 +230,7 @@ body{ color: var(--blue-light); } .green-link{ - color: var(--green-light); + color: var(--green-light) !important; } .radio-button{ @@ -276,8 +276,14 @@ body{ } .red-color { - color: var(--red-medium); + color: var(--red-medium) !important; } .yellow-color{ - color: var(--yellow-medium); + color: var(--yellow-medium) !important; + } + .light-green-color { + color: var(--light-green) !important; + } + .blue-color{ + color: var(--blue-medium) !important; } \ No newline at end of file diff --git a/CSS/colors.css b/CSS/colors.css index 91cf6f5..57b10c8 100644 --- a/CSS/colors.css +++ b/CSS/colors.css @@ -12,6 +12,7 @@ --red-medium: rgb(253,29,29); --yellow-medium: rgb(255,205,0); --green-light: rgb(6, 146, 6); + --light-green: rgb(11, 172, 11); --title: #1f2024; diff --git a/CSS/index.css b/CSS/index.css index 563b869..a0a0b50 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -533,13 +533,99 @@ body{ .about-container{ grid-column: 1/4; } - /** Main Section */ + /** Main Section */ .main-content-section { + display: grid; width: 1180px; min-width: 500px; height: 100%; margin-top: 3rem; + /* background-color: rebeccapurple; */ + } + .main-content-section.full { grid-template-columns: 750px 1fr; + grid-template-rows: 6rem auto; + } + .main-content-section.single { + grid-template-columns: 1fr auto 1fr; + } + .main-content-section.single + .main-content-container { + grid-column: 2/3; + min-width: 500px; + width: 750px; + } + h1.search { + font-size: 2.2rem; + margin: auto; + } + #main-content-header.search { + /* background-color: orange; */ + height: 6rem; + display: grid; + grid-template-columns: 1fr 1fr; + grid-row: 1/2; + grid-column: 1/3; + } + .main-content-container { + grid-column: 1/2; + grid-row: 2/3; + } + #main-content-section.full #main-side-content-container{ + grid-row: 2/3; + grid-column: 2/3; + } + #main-content-header.search section { + display: grid; + grid-template-columns: auto auto; + } + #main-content-header.search div { + grid-column: 2/3; + display: flex; + align-items: center; + justify-items: center; + height: 2.8rem; + margin: auto; + } + #main-content-header.search figure { + background-color: var(--bg); + box-shadow: 1px 1px 2px 1px var(--border-medium) + } + #main-content-header.search figure:hover { + cursor: pointer; + /* background-color: var(--hover-light); */ + } + #main-content-header.search figure.circle { + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; + } + #main-content-header.search figure.circle i { + display: flex; + align-items:center; + justify-items: center; + font-size: 18px; + } + #main-content-header.search figure.rectangle { + border-radius: 1rem; + padding: 0.6rem 1.2rem; + } + .header-main-content.search figure.rectangle{ + color: var(--font-medium); + } + /* + .main-content-section.full { + width: auto; + display: flex; + align-content: center; + justify-items: center; + } + #main-content-container { + width: 750px; } .main-content-section figure article:last-child { margin-bottom: 5rem; @@ -555,7 +641,7 @@ body{ .header-main-content a{ align-items: flex-end; justify-content: flex-end; - } + } */ #coronavirus-article{ grid-template-columns: 1fr 15px 10px; } @@ -1127,7 +1213,7 @@ body{ } /** Responsiveness */ - @media screen and (max-width: 930px) { + /* @media screen and (max-width: 930px) { .navigation-bar{ grid-template-columns: 120px 1fr 85px; } @@ -1144,5 +1230,5 @@ body{ z-index: 2; } - } + } */ \ No newline at end of file diff --git a/JS/main.js b/JS/main.js index 9fb998b..9817ef8 100644 --- a/JS/main.js +++ b/JS/main.js @@ -205,8 +205,8 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 } /* HEADLINES */ async function headlines() { - await getWeather() - updateWeather() + // await getWeather() + // updateWeather() sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement) } @@ -219,13 +219,17 @@ async function headlines() { if(mainSearchInput.value.length === 0) return let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML) - if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value, ' ','+') + if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value,' ','+') if(window.location.pathname.includes('search')) historyPushState(location.origin + location.pathname, `?q=${searchQuery}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`) else createUrlPath('search', searchQuery) + document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1) } function search() { + if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines) + searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1) mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ') + document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1) /* Search news articles */ } function mobileVersionNavigationBar() { @@ -293,7 +297,10 @@ const regularExpressions = { query : /[\?|\&]+[q]+[=].*?[&]/g, country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g, backgroundColor : /[\&]+[b]+[g]+[=].*/g - } + }, + string : { + symbols : /[@_!#$%^&*()<>?/|}{~:]/g + } } @@ -321,7 +328,10 @@ mainSearchInput.oninput = () => { } let place = 0 mainSearchInput.onkeyup = (e) => { - if(e.keyCode === 13) return searchArticles() + if(e.keyCode === 13) { + if(!suggestMainInput.classList.contains('disable')) hideSuggestWords() + return searchArticles() + } if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return let suggestDivs = suggestMainInput.querySelectorAll('div') @@ -400,7 +410,11 @@ function selectSuggestedSearchOption(element) { } -function addCharacterBetweenSpaceInString(word ,replace ,character) { return word.replace(replace, character) } +function addCharacterBetweenSpaceInString(word ,replace ,character) { + word = word.trim().replace(/\s\s+/g, ' '); + if(replace === ' ') return word.replace(/\s/g, character) + else if(replace === '+')return word.replace(/\+/g, character) +} function updateCountrySelect(country) { selectedCountry.innerHTML = country @@ -617,6 +631,38 @@ function inputExtraSearchOptionChange() { } } + +function saveSearchWord(element) { + + if(element.firstElementChild.classList.contains('yellow-color')) { + element.firstElementChild.classList.remove('yellow-color', 'fa') + element.firstElementChild.classList.add('fal') + + } + else { + element.firstElementChild.classList.add('yellow-color', 'fa') + element.firstElementChild.classList.remove('fal') + } +} +function followSearchWord(element) { + console.log(element) + if(element.firstElementChild.classList.contains('blue-color')) { + element.innerHTML = ' Follow' + element.firstElementChild.classList.remove('blue-color') + element.classList.remove('blue-color') + } else { + element.innerHTML = ' Following' + element.firstElementChild.classList.add('blue-color') + element.classList.add('blue-color') + } +} + + + + + + + /* API */ // fetchNewsArticles() diff --git a/JS/variables.js b/JS/variables.js index 6c98c13..ee1cceb 100644 --- a/JS/variables.js +++ b/JS/variables.js @@ -8,7 +8,7 @@ const colors = ['rgb(211, 47, 47)','rgb(123, 31, 162)','rgb(81, 45, 168)','rgb(48, 63, 159)','rgb(25, 118, 210)','rgb(2, 136, 209)','rgb(0, 151, 167)','rgb(0, 121, 107)','rgb(56, 142, 60)','rgb(104, 159, 56)','rgb(175, 180, 43)','rgb(251, 192, 45)','rgb(255, 160, 0)','rgb(245, 124, 0)','rgb(230, 74, 25)','rgb(93, 64, 55)','rgb(97, 97, 97)'] const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] const daysAcronyms = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] - const websiteURL = 'http://localhost:8080/newsWebiste/' + const websiteURL = 'http://localhost:8080/News-website/' // const websiteURL = 'https://news.niktopler.com' diff --git a/headlines.php b/headlines.php index 4457bf0..2245f5f 100644 --- a/headlines.php +++ b/headlines.php @@ -29,7 +29,7 @@ -
+ - -
+ --> diff --git a/search.php b/search.php index e58b9e3..8329919 100644 --- a/search.php +++ b/search.php @@ -29,6 +29,27 @@ +
+
+

Slovenia

+
+
+
+ +
+
+ Follow +
+
+
+
+
+ +
+ +