From d5a429b7680ae022e1a0d92c7d3f552d4407ceb8 Mon Sep 17 00:00:00 2001 From: Nik Topler Date: Mon, 21 Sep 2020 19:20:17 +0200 Subject: [PATCH] Updated responsiveness of sidebar and navbar --- CSS/index.css | 192 ++++++++++++++++--------------------------- JS/main.js | 132 +++++++++++++++++------------ JS/show.js | 33 +++----- JS/variables.js | 10 ++- add-ons/head.php | 5 +- add-ons/side-bar.php | 130 ++++++++++++++++++----------- headlines.php | 1 + search.php | 3 +- 8 files changed, 259 insertions(+), 247 deletions(-) diff --git a/CSS/index.css b/CSS/index.css index 0d1977c..7b957c7 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -395,145 +395,96 @@ body{ #profile-extra-options .grid .profile-img-link .img:hover{ filter: brightness(0.96); } - - - -/*? Main Content */ + +/* Main Content */ main { grid-row: 2/3; background-color: var(--bg); - overflow-y: scroll; - overflow-x: visible; } - .side-bar{ + .side-bar { left: 0; top: 65px; - height: 100%; + height: calc(100% - 64px); width: 17.5rem; - overflow: hidden; + position: fixed; + transition: ease-in-out all .3s; } + .side-bar-container { + display: flex; + flex-direction: column; + width: inherit; + height: inherit; + } + .side-bar-content { - font-size: 0.875rem; - height: 100%; - width: 17.5rem; - padding: 15px 0; - left: 0px; + display: grid; + margin-top: 1rem; + margin-bottom: 1.5rem; transition: all ease-in-out 0.3s; - grid-template-rows: 3rem 3rem 3rem 3rem 0.9rem 3rem 0.9rem 3rem 3rem 3rem 3rem 3rem 3rem 0.9rem 3rem 3rem 3rem 3rem 1fr; } - .side-bar-content a, .side-bar-content .language{ - padding-left: 30px; - } - .side-bar-content a{ + .side-bar-content .sidebar-category { display: flex; align-items: center; - color: var(--font-dark); - } - .side-bar-content a.active{ - color: var(--blue-light); - } - .side-menu-categories{ + height: 46px; + width: 16.2rem; + cursor: pointer; + flex-grow: 1; border-top-right-radius: 25px; border-bottom-right-radius: 25px; } - .side-bar-content hr{ - border-top: 1px solid var(--hover-medium); - } - .side-bar-content a{ - cursor: pointer; - } - .language{ - margin: auto 0; - } - .language > *{ - display: block; - color: #3c4043; - text-decoration: none; - } - - .language:hover > *{ - color: var(--blue-light); - } - .side-bar i{ - color: var(--font); - padding-right: 0.5rem; - width: 1.3rem; - } - .side-bar span{ - font-weight: 400; - } - .side-bar strong{ - font-weight: 600; - } - .side-bar a:hover i,.side-bar a:hover{ - color: var(--blue-light); - } - .side-bar footer{ - color: var(--font-medium); - } - .side-bar footer span{ - width: 1px; - } - #main .side-bar footer a{ - font-size: 0.85rem; - } - .side-bar footer a:hover{ - color: var(--font-dark); - } - .side-menu-active, a .side-menu-active { - background-color: var(--side-bar-active) !important; - color: var(--blue-light) !important; - } - .side-bar-content footer{ - grid-template-rows: calc(100% - 107px) 6%; - padding-bottom: 15px; - } - .side-bar-content footer div{ - grid-row: 2/3; - padding-left: 2rem; + .side-bar-content .sidebar-line { + height: 22px; + width: 16.2rem; display: flex; - align-items: flex-start; - justify-content: flex-start; + align-items: center; + justify-content: center; } - .side-bar-content footer div > *{ - padding: 5px; - text-decoration: none; - font-size: 0.9rem; - text-decoration: none; + .side-bar-content .sidebar-line hr { + border-bottom: 1px solid var(--hover-dark); + width: 90%; + } + .side-bar footer { + display: flex; + align-items: center; + font-size: 0.75rem; + margin-top: auto; + } + .side-bar-content div.icon { + margin: 0 1rem 0 1.5rem; + height: 20px; + width: 20px; + display: flex; + align-items: center; + justify-content: center; + } + .side-bar-content a { color: var(--font-dark); - transition: ease-in-out .12s; + font-size: 0.9rem; } - .side-bar-content footer div a:hover { - text-decoration: underline; + .side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; } + .sidebar-category.country { + display: grid; + font-size: 0.9rem; + color: var(--font-dark); } - .sidebar-help i{ - padding-left: 0.5rem; + .side-bar { + overflow: scroll; } - - .about-sidebar-content{ - left: -100%; - transition: all ease-in-out .3s; - border-right: 1px solid var(--border-medium); - border-top: 1px solid var(--border-medium); - background-color: var(--bg); + .sidebar-country-container > * { padding: 0 0 0 1.5rem; } + .side-bar footer div a { color: var(--font-medium); } + .side-bar footer .text { padding: 1rem 0.5rem; } + .side-bar .about { margin-left: 1.5rem; } + .sidebar-category:hover div a, + .sidebar-category:hover div i, + .sidebar-category:hover span, + .sidebar-category:hover strong { + color: var(--blue-light); } - - .about-sidebar-content.active{ - left: 0%; - } - .header-about > *{ - font-size: 1.1rem; - font-weight: 400; - } - .header-about a{ - width: fit-content; - } - .header-about i{ - padding-right: 5px; - } - .about-container{ - grid-column: 1/4; + .sidebar-category.active { background-color: var(--side-bar-active) !important; } + .sidebar-category.active div a, + .sidebar-category.active div i { + color: var(--blue-light) !important; } /** Main Section */ .main-content-section { @@ -543,6 +494,7 @@ body{ height: 100%; padding: 20px; margin: auto; + transition: all ease-in-out .3s; } .main-content-container { height: 100%; @@ -1345,18 +1297,16 @@ body{ } } @media screen and (max-width: 1100px) { - .main-content-section { + .main-content-section { margin-left: 0px; } - .side-bar-content { + .side-bar { background-color: var(--bg); border: 1px solid var(--border-medium); - overflow: auto; z-index: 2; + overflow: auto; } - .side-bar-content { - left: -280px; - } + .side-bar { margin-left: -280px; } } @media screen and (max-width: 964px) { .navigation-bar { grid-template-columns: 120px 1fr 85px; } diff --git a/JS/main.js b/JS/main.js index ec894f5..8d11a1c 100644 --- a/JS/main.js +++ b/JS/main.js @@ -1,6 +1,8 @@ +let pathLocation = '../' let weatherArrayToday let weatherArrayTommorow let weatherArray2Days + const weather = { async getweather() { city = changeDiacritics(userLocationInformationValue[3]) @@ -93,9 +95,12 @@ const searchBox = { let mouseSuggestHover = false let moreSuggestWordsArray = [] const suggest = { - fetch : async (input) => { - // const res = await fetch(`https://api.datamuse.com/words?ml=${input}`) - const res = await fetch(`https://api.datamuse.com/sug?s=${input}`) + fetch : async (input, type) => { + let res + place = 0 + if(type === 'words' || !type) res = await fetch(`https://api.datamuse.com/words?ml=${input}`) + else if(type === 'suggest') res = await fetch(`https://api.datamuse.com/sug?s=${input}`) + else if(type === 'sp') res = await fetch(`https://api.datamuse.com/words?sp=${input}`) return words = await res.json() }, suggest : async() => { @@ -103,19 +108,19 @@ const suggest = { let suggestWordsArray = [] let input = mainSearchInput.value.split(' ') let n = 0 - - while(suggestWordsArray.length < 21) { + const maxLength = 40 + + while(suggestWordsArray.length < 30) { fetchArray = await suggest.fetch(input[n]) - + for(let i = 0; i < fetchArray.length; i++) - if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value) suggestWordsArray.push(fetchArray[i].word) + if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < 30) suggestWordsArray.push(fetchArray[i].word) input[n] = removeCharactersInString(input[n], 0, -1) if(input.length === 0) break } suggest.generate(suggestWordsArray) removeDisableSideElements() - }, generate : (array) => { let section = document.querySelector('article.suggested-words.aside section') @@ -130,11 +135,12 @@ const suggest = { } }, manageSuggestWords : async () => { - let suggestWordsArray = await suggest.fetch(mainSearchInput.value) + const maxLength = 10 + let suggestWordsArray = await suggest.getSuggestWords() if(suggestWordsArray.length === 0) return hideSuggestWords() - if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length) - + if(suggestWordsArray.length > maxLength) + suggestWordsArray = suggestWordsArray.slice(0, maxLength) suggest.suggestBox(suggestWordsArray) for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) { @@ -144,7 +150,14 @@ const suggest = { suggestMainInput.getElementsByTagName('div')[i].classList.add('active') } suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active','key') } - } + } + }, + getSuggestWords : async() => { + let array + if(mainSearchInput.value.length < 3) array = await suggest.fetch(mainSearchInput.value, 'sp') + else array = await suggest.fetch(mainSearchInput.value, 'words') + if(array.length === 0) array = await suggest.fetch(mainSearchInput.value, 'suggest') + return array }, suggestBox : (words) => { let wordBoxes = words.map(word => `
@@ -199,20 +212,9 @@ const responsiveVersion = { // } } -const regularExpressions = { - url : { - query : /[\?|\&]+[q]+[=].*?[&]/g, - country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g, - backgroundColor : /[\&]+[b]+[g]+[=].*/g - }, - string : { - symbols : /[@_!#$%^&*()<>?/|}{~:]/g - } -} - const php = { info : async(word) => { - const response = await fetch('privateInfo.php', { + const response = await fetch(`${pathLocation}privateInfo.php`, { method: "POST", body: createFormData(word) }) @@ -228,13 +230,33 @@ const php = { } const error = { + window : () => { + // Checkes if correct country acronym is in URL + if(window.location.search.match(regularExpressions.url.country)) { + let countryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7) + let country = getAcronymCountry(countryAcronym) + if(country) sclStrong.innerHTML = country + else return openLinks(filePath.headlines) + } + }, headlines : () => { }, search : () => { - if(!window.location.search.match(regularExpressions.url.country) - || !window.location.search.match(regularExpressions.url.backgroundColor) - || !window.location.search.match(regularExpressions.url.search)) openLinks(filePath.headlines) + // if(mainSearchInput.value.length === 0) return true + // if(window.location.pathname.includes('search') && window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true + // if(window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true + } +} + +const regularExpressions = { + url : { + query : /[\?|\&]+[q]+[=].*?[&]/g, + country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g, + backgroundColor : /[\&]+[b]+[g]+[=].*/g + }, + string : { + symbols : /[@_!#$%^&*()<>?/|}{~:]/g } } @@ -261,10 +283,12 @@ window.onload = async () => { // Close all open windows hideExtraSearchOptions() hideSuggestWords() + // document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }}) document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' }) - await user.location() + error.window() + removeActiveSidebarCategory() if (window.location.pathname.includes('headlines')) headlines() else if (window.location.pathname.includes('for-you')) forYou() @@ -281,13 +305,12 @@ window.onload = async () => { else if (window.location.pathname.includes('about')) about() else if (window.location.pathname.includes('help')) help() else if (window.location.pathname.includes('search')) mainSearch() - + await user.location() // changeBackgroundColor() // let query = location.search.match(regularExpressions.url.query)[0] // query = removeCharactersInString(query, 3, query.length - 1) - /* Search news */ } window.onclick = (e) => { @@ -304,6 +327,11 @@ function historyPushState(webiste, string, country, background) { history.pushSt function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) } +/** + * This function gets a language and returns it's acronym + * @param {string} target + * @returns {string} language acronym + */ function getLanguageAcronym(target) { for(let i = 0; i < language.length; i++) if(language[i] === target) @@ -381,7 +409,9 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 } async function headlines() { // await weather.getWeather() // weather.updateWeather() - sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement) + + pathLocation = '' + sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement) historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`) } @@ -390,8 +420,9 @@ async function headlines() { function mainSearch(extra, type) { let url = '' let newSearch = false + pathLocation = '' - // error.search() + if(error.search() === true) return if(!type) type = 'main-url' if(!window.location.pathname.includes('search')) newSearch = true @@ -458,25 +489,25 @@ async function headlines() { /* FOR YOU */ function forYou() { - sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement) + sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement.parentElement) } /* FOLLOWING */ function following() { - sidebarCategorySelect(document.querySelector('.fa-star').parentElement) + sidebarCategorySelect(document.querySelector('.fa-star').parentElement.parentElement) } /* LIBRARY */ function library() { - sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement) + sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement.parentElement) } /* CATEGORIES */ function category(word) { - sidebarCategorySelect(document.querySelector(`.${word}`).parentElement) + sidebarCategorySelect(document.querySelector(`.${word}`).parentElement.parentElement) } /* SETTINGS */ @@ -494,7 +525,9 @@ mainSearchInput.onfocus = () => { else if(mainSearchInput.value.length !== 0) showSuggestWords() suggest.manageSuggestWords() } - +mainSearchInput.onblur = () => { + // hideSuggestWords() +} mainSearchInput.oninput = () => { if(mainSearchInput.value.length === 0) return hideSuggestWords() else if(suggestMainInput.classList.contains('disable')) showSuggestWords() @@ -506,7 +539,7 @@ mainSearchInput.onkeyup = (e) => { let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key') if(e.keyCode === 13) { if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`) - else historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(mainSearchInput.value).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`) + else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`) mainSearch() } if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return @@ -539,14 +572,9 @@ function updateCountrySelect(country) { } function createUrlPath(type, search) { - if(search === undefined && location.pathname.includes(type)) return let path - let query = '' + if(search === undefined && location.pathname.includes(type)) return if(type === 'headlines') path = filePath.headlines - else if(type === 'search') { - path = filePath.search - query = `q=${search}&` - } else if(type === 'following') path = filePath.following else if(type === 'for-you') path = filePath.forYou else if(type === 'library') path = filePath.library @@ -557,8 +585,8 @@ function createUrlPath(type, search) { else if(type === 'entertainment') path = filePath.entertainment else if(type === 'sports') path = filePath.sports else if(type === 'health') path = filePath.health - - return path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}` + path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}` + openLinks(path) } let activeCountry @@ -694,15 +722,15 @@ function clickInOutCheck(parent, target) { if(checkIfClickIsOnElement(hasChildren, target) === true || checkIfClickIsOnElement(noChildren, target) === true) clickOnOpenedElement = true else clickOnOpenedElement = false - if(clickOnOpenedElement === false && parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions() - else if(clickOnOpenedElement === false && parent === suggestMainInput) hideSuggestWords() - else if(clickOnOpenedElement === false && parent === extOptProfile) manageExtraProfileOptions() - else if(clickOnOpenedElement === false && parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry() - else if(clickOnOpenedElement === false && parent === logInOptions && target !== loginButton) manageLoginOptions() - children = [] hasChildren = [] noChildren = [] + if(clickOnOpenedElement === true) return + if(parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions() + else if(parent === suggestMainInput && document.activeElement !== mainSearchInput) hideSuggestWords() + else if(parent === extOptProfile) manageExtraProfileOptions() + else if(parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry() + else if(parent === logInOptions && target !== loginButton) manageLoginOptions() } function doesElementHaveChildren(parent) { if(parent.children.length > 0){ diff --git a/JS/show.js b/JS/show.js index 1f72104..fa48011 100644 --- a/JS/show.js +++ b/JS/show.js @@ -1,27 +1,20 @@ - let sideMenuCounter = 0 function manageSideMenu() { - if(checkWindowWidth900() === true && sideMenuCounter === 0){ - sideBarContent.style.left = '-100%' + if(window.innerWidth < 1101 && sideMenuCounter === 0){ + sideBar.style.marginLeft = '-100%' sideMenuCounter = 1 - } else if(checkWindowWidth900() === true && sideMenuCounter === 1){ - sideBarContent.style.left = '0%' + } else if(window.innerWidth < 1101 && sideMenuCounter === 1){ + sideBar.style.marginLeft = '0' sideMenuCounter = 0 - } else if(checkWindowWidth900() === false && sideMenuCounter === 0){ - sideBarContent.style.left = '-100%' + } else if(window.innerWidth > 1100 && sideMenuCounter === 0){ + sideBar.style.marginLeft = '-100%' sideMenuCounter = 1 - } else if(checkWindowWidth900() === false && sideMenuCounter === 1) { - sideBarContent.classList.remove('disable') - sideBarContent.style.left = '0%' + } else if(window.innerWidth > 1100 && sideMenuCounter === 1) { + sideBar.style.marginLeft = '0' sideMenuCounter = 0 } } -function checkWindowWidth900() { - if(window.innerWidth > 930) return true - else return false -} - function manageExtraSearchOptions() { if(extraSearchOptions.classList.contains('disable')) { hideSuggestWords() @@ -134,13 +127,13 @@ function resetExtraSearchOptions() { } function sidebarCategorySelect(selectedElement) { - if(selectedElement.classList.contains('side-menu-active')) return - selectedElement.classList.add('side-menu-active') - selectedElement.firstElementChild.classList.add('side-menu-active') + if(selectedElement.classList.contains('active')) return + selectedElement.classList.add('active') + selectedElement.firstElementChild.classList.add('active') /* Search news articles */ } function removeActiveSidebarCategory() { - let oldSelectedElements = document.querySelectorAll('.side-menu-active') + let oldSelectedElements = document.querySelectorAll('sidebar-category.active') for(let i = 0; i < oldSelectedElements.length; i++) - oldSelectedElements[i].classList.remove('side-menu-active') + oldSelectedElements[i].classList.remove('active') } diff --git a/JS/variables.js b/JS/variables.js index 31ce9de..1d10956 100644 --- a/JS/variables.js +++ b/JS/variables.js @@ -52,22 +52,24 @@ /** Main Content */ /** Side Menu */ let sideBarContent = document.getElementById('side-bar-content') + let sideBar = document.getElementById('side-bar') const selectCountryDiv = document.getElementById('select-country') const listOfCountries = document.getElementById('list-of-countries') const selectedCountry = document.getElementById('country-name-side-menu') const suggestCountryCountainer = document.getElementById('suggest-country') const searchCountriesInput = document.getElementById('search-country-input') - let mainContentSection = document.getElementById('main-content-section') + const mainContentSection = document.getElementById('main-content-section') let mainAsideContent = document.getElementById('main-side-content-container') let aboutContentSection = document.getElementById('about-content-section') const sideBarAboutContent = document.getElementById('about-sidebar-content') const mainContentContainer = document.getElementById('main-content-container') let mainContentHeader = document.getElementById('main-content-header') const showCountriesLink = document.getElementById('show-countries-button') - const sclSpan = showCountriesLink.firstElementChild - const sclStrong = showCountriesLink.lastElementChild + const sclSpan = showCountriesLink.firstElementChild.firstElementChild + const sclStrong = showCountriesLink.firstElementChild.lastElementChild - + const main = document.getElementById('main') + const overlay = document.getElementById('overlay') let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div') let extOptProfile = document.getElementById('profile-extra-options') diff --git a/add-ons/head.php b/add-ons/head.php index f53a291..cfb3596 100644 --- a/add-ons/head.php +++ b/add-ons/head.php @@ -3,7 +3,8 @@ - + + @@ -13,7 +14,7 @@ - + diff --git a/add-ons/side-bar.php b/add-ons/side-bar.php index a8fc7ac..23c7295 100644 --- a/add-ons/side-bar.php +++ b/add-ons/side-bar.php @@ -1,48 +1,84 @@ - \ No newline at end of file diff --git a/headlines.php b/headlines.php index da18c4a..884052a 100644 --- a/headlines.php +++ b/headlines.php @@ -4,6 +4,7 @@ + diff --git a/search.php b/search.php index 237dfb6..46abd6e 100644 --- a/search.php +++ b/search.php @@ -3,7 +3,8 @@ - + +