From 90c79fe0bb17550d493fd918d8d4c4a9cf55197c Mon Sep 17 00:00:00 2001 From: Nik Topler Date: Wed, 23 Sep 2020 21:12:45 +0200 Subject: [PATCH] Updated Categories and responsiveness --- CSS/*.css | 41 +++++----- CSS/index.css | 140 +++++++++++++++++---------------- CSS/responsive.css | 51 ++++++++++++ JS/main.js | 75 +++++++----------- JS/responsive.js | 63 +++++++++++++++ JS/variables.js | 2 +- add-ons/head.php | 2 + add-ons/login.php | 41 ++++++++++ add-ons/navigation-bar.php | 3 +- headlines.php | 45 +---------- search.php | 156 +++++-------------------------------- topics/business.php | 69 +++++++--------- topics/categories.php | 42 +--------- topics/covid-19.php | 71 +++++++---------- topics/entertainment.php | 69 +++++++--------- topics/health.php | 69 +++++++--------- topics/sports.php | 69 +++++++--------- topics/technology.php | 69 +++++++--------- topics/world.php | 69 +++++++--------- 19 files changed, 497 insertions(+), 649 deletions(-) create mode 100644 CSS/responsive.css create mode 100644 JS/responsive.js create mode 100644 add-ons/login.php diff --git a/CSS/*.css b/CSS/*.css index f3448dd..c6d44a2 100644 --- a/CSS/*.css +++ b/CSS/*.css @@ -11,7 +11,7 @@ body{ min-width: 100vw; min-height: 100vh; - font-family: 'Noto Sans', sans-serif; + font-family: 'Google Sans',sans-serif; } .select-div{ @@ -213,9 +213,7 @@ body{ font-size: 0.9rem; color: var(--blue-light); } - .green-link{ - color: var(--green-light) !important; - } + .green-link{ color: var(--green-light) !important; } .radio-button{ width: 2rem; @@ -247,9 +245,13 @@ body{ transform: scale(0); transition: ease-in-out .1s all; } - .radio-button-center.active{ - transform: scale(1); - } + .radio-button-center.active{ transform: scale(1); } + + .red-color { color: var(--red-medium) !important; } + .yellow-color{ color: var(--yellow-medium) !important; } + .light-green-color { color: var(--light-green) !important; } + .blue-color { color: var(--blue-medium) !important; } + article{ padding: 15px; @@ -258,16 +260,17 @@ body{ border: 1px solid var(--border-medium); background-color: var(--bg); } + /* article.news { + display: flex; + flex-direction: column; + font-family: 'Roboto Condensed', sans-serif; + } + article.news h3 { + font-size: 1.125rem; + } - .red-color { - color: var(--red-medium) !important; - } - .yellow-color{ - 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 + article.news.img { + grid-template-columns: 1fr 1rem 150px; + } */ + + \ No newline at end of file diff --git a/CSS/index.css b/CSS/index.css index b490b0c..a262bb2 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -4,7 +4,7 @@ body{ overflow: auto; } -/*? Navigation Bar */ +/* Navigation Bar */ .navigation-bar{ grid-row: 1/2; @@ -49,12 +49,8 @@ body{ position: absolute; border-radius: 1px; } - .menu-burger-icon::before{ - transform: translateY(-5px); - } - .menu-burger-icon::after{ - transform: translateY(5px); - } + .menu-burger-icon::before{ transform: translateY(-5px); } + .menu-burger-icon::after{ transform: translateY(5px);} /** Logo */ @@ -75,7 +71,8 @@ body{ grid-template-columns: 48px 1fr 48px; z-index: 0; } - .main-search-input{ + .main-search-input { + display: auto; grid-column: 1/4; grid-row: 1/2; height: 48px; @@ -161,7 +158,7 @@ body{ } .extra-search-options div { - grid-template-columns: 0.28fr 1fr; + grid-template-columns: 100px 1fr; grid-template-rows: 1fr; } .extra-search-options .extra-search-options-div { @@ -487,13 +484,66 @@ body{ /** Main Section */ .main-content-section { max-width: 1176px; - /* ERROR width: 1080px; */ - min-width: 250px; + min-width: 220px; height: 100%; padding: 20px; margin: auto; transition: all ease-in-out .3s; } + .main-content-section.full { width: 760px; } + .main-content-section.full .article-container { + display: flex; + flex-direction: column; + grid-column: 1/13; + } + .main-content-section.full .main-header { + padding: 2rem 0; + width: inherit; + display: flex; + } + .main-content-section.full .main-header .buttons { + display: flex; + align-items: center; + justify-content: center; + } + .main-content-section.full .main-header .title-container { + display: flex; + align-items: center; + flex-grow: 1; + } + .title-container .title { + margin: 0 1rem; + } + .title-container .title h2 { + font-weight: 500; + font-size: 1.75rem ; + } + .main-content-section.full .main-header .title-container .image-container { + display: flex; + align-items: center; + justify-content: center; + width: 3.5rem; + height: 3.5rem; + background-color: var(--color); + } + + .title-container .image-container i { + font-size: 2.25rem; + color: #fefefe; + display: flex; + align-items: center; + justify-content: center; + } + + /* Colors */ + .sport { --color: rgb(245, 97, 80); } + .health { --color: rgb(224, 49, 49); } + .technology { --color: rgb(18, 130, 235); } + .entertainment { --color: rgb(247, 231, 20); } + .world { --color: var(--light-green); } + .business { --color: rgb(172, 21, 172); } + .covid19 { --color: rgb(66, 64, 64); } + .main-content-container { height: 100%; display: grid; @@ -521,7 +571,6 @@ body{ width: 40px; height: 40px; } - article.aside.search header div { grid-row: 1/2; grid-column: 2/3; @@ -574,6 +623,11 @@ body{ .white-button:active { background-color: var(--very-light-grey); } + .white-button.topic { + border-radius: 3rem; + padding: 7px 14px; + } + /* .main-content-container.full { grid-template-rows: 6rem auto; } .main-content-container.single { grid-template-rows: 1fr; } .main-content-section.single @@ -591,7 +645,11 @@ body{ #main-side-content-container { grid-column: 11/15; } */ - + /* #main-content-section.full + #main-side-content-container { + grid-row: 1/3; + grid-column: 2/3; + } */ h1.search { font-size: 2rem; margin: auto; @@ -603,11 +661,7 @@ body{ grid-row: 1/2; grid-column: 1/2; } - /* #main-content-section.full - #main-side-content-container { - grid-row: 1/3; - grid-column: 2/3; - } */ + #main-content-header.search section { display: grid; grid-template-columns: auto auto; @@ -626,7 +680,7 @@ body{ } #main-content-header.search figure:hover { cursor: pointer; - /* background-color: var(--hover-light); */ + background-color: var(--hover-light); } #main-content-header.search figure.circle { border-radius: 50%; @@ -1280,51 +1334,3 @@ body{ background-size: 100%; } - /** Responsiveness */ - /* @media screen and (max-width: 1150px) { - .article-container { - grid-column: 1/8; - } - #main-side-content-container { - grid-column: 8/13; - } - } */ - @media screen and (max-width: 1778px) { - .main-content-section { - margin-left: 290px; - } - } - @media screen and (max-width: 1100px) { - .main-content-section { - margin-left: 0px; - } - .side-bar { - background-color: var(--bg); - border: 1px solid var(--border-medium); - z-index: 2; - overflow: auto; - } - .side-bar { margin-left: -280px; } - } - @media screen and (max-width: 964px) { - .navigation-bar { grid-template-columns: 120px 1fr 85px; } - .main-search-input, - .extra-option-icon { - display: none; - } - .search-icon-figure{ - grid-column: 3/4; - } - } - /* Ipad */ - @media screen and (max-width: 768px) { - #main-side-content-container { - display: none; - } - .article-container { - grid-column: 1/13; - } - .main-content-section { - width: 100%; - } - } \ No newline at end of file diff --git a/CSS/responsive.css b/CSS/responsive.css new file mode 100644 index 0000000..a40726d --- /dev/null +++ b/CSS/responsive.css @@ -0,0 +1,51 @@ +@media screen and (max-width: 1778px) { + .main-content-section.single { margin-left: 290px; } +} + +@media screen and (max-width: 1362px) { + .main-content-section.full { margin-left: 290px; } +} + +@media screen and (max-width: 1100px) { + .main-content-section.full,.main-content-section.single { margin-left: auto; } + + .side-bar { + background-color: var(--bg); + border: 1px solid var(--border-medium); + z-index: 2; + overflow: auto; + } + .side-bar { margin-left: -280px; } +} +@media screen and (max-width: 800px) { + .main-content-section.full { width: 100%; } +} +/* Ipad */ +@media screen and (max-width: 768px) { + #main-side-content-container { + display: none; + } + .article-container { + grid-column: 1/13; + } + .main-content-section { + width: 100%; + } +} + +/* Smaller screens */ +@media screen and (max-width: 456px) { + + /* Categories */ + .main-content-section.full .main-header .title-container .image-container { + width: 3.2rem; + height: 3.2rem; + } + .title-container .image-container i { font-size: 1.6rem; } + .title-container .title h2 { font-size: 1.5rem ; } + .white-button.topic { padding: 6px 10px; } + +} +@media screen and (max-width: 360px) { + .main-content-section.full .main-header .title-container { flex-grow: 0; } +} \ No newline at end of file diff --git a/JS/main.js b/JS/main.js index 8d11a1c..5d45e83 100644 --- a/JS/main.js +++ b/JS/main.js @@ -106,18 +106,16 @@ const suggest = { suggest : async() => { let fetchArray = [] let suggestWordsArray = [] - let input = mainSearchInput.value.split(' ') + let replaceInput = mainSearchInput.value.trim().replace(regularExpressions.string.symbols, ' ') + let input = replaceInput.split(' ') let n = 0 const maxLength = 40 - - while(suggestWordsArray.length < 30) { + while(suggestWordsArray.length < maxLength) { 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.length < 30) suggestWordsArray.push(fetchArray[i].word) - - input[n] = removeCharactersInString(input[n], 0, -1) - if(input.length === 0) break + if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < maxLength) suggestWordsArray.push(fetchArray[i].word) + if(input.length === n) break + n++ } suggest.generate(suggestWordsArray) removeDisableSideElements() @@ -184,34 +182,6 @@ const suggest = { } } -const responsiveVersion = { - // mobileVersionNavigationBar() { - // mainSearchIcon.classList.add('disable') - // mainSearchBackLeftIcon.classList.remove('disable') - // navigationBarLeft.classList.add('disable') - // navigationBarRight.classList.add('disable') - // navigationBarMiddle.style.gridColumn = '1/4' - // mainSearchFigure.style.gridColumn = '1/2' - // mainSearchBackLeftTooltiptext.classList.remove('disable') - // mainSearchInput.style.display = 'grid' - // extOptIcon.style.display = 'flex' - // mainSearchInput.focus() - // sideBarContent.style.left = '-100%' - // sideMenuCounter = 1 - // }, - // desktopVersionNavigationBar() { - // mainSearchIcon.classList.remove('disable') - // mainSearchBackLeftIcon.classList.add('disable') - // navigationBarLeft.classList.remove('disable') - // navigationBarRight.classList.remove('disable') - // navigationBarMiddle.style.gridColumn = '2/3' - // mainSearchFigure.style.gridColumn = '3/4' - // mainSearchBackLeftTooltiptext.classList.add('disable') - // mainSearchInput.style.display = 'none' - // extOptIcon.style.display = 'none' - // } -} - const php = { info : async(word) => { const response = await fetch(`${pathLocation}privateInfo.php`, { @@ -256,7 +226,7 @@ const regularExpressions = { backgroundColor : /[\&]+[b]+[g]+[=].*/g }, string : { - symbols : /[@_!#$%^&*()<>?/|}{~:]/g + symbols : /[@_!#$%^&*()<>?/|}{~:"'-]/g } } @@ -280,10 +250,10 @@ const regularExpressions = { // } window.onload = async () => { + windowWidthSettings() // Close all open windows hideExtraSearchOptions() hideSuggestWords() - // document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }}) document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' }) @@ -306,11 +276,7 @@ window.onload = async () => { 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) - + // changeBackgroundColor() } window.onclick = (e) => { @@ -320,6 +286,7 @@ window.onclick = (e) => { else if(selectCountryDiv.classList.contains('active')) clickInOutCheck(selectCountryDiv, e.target) else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions, e.target) } +window.onresize = windowWidthSettings function openLinks(string) { window.location.replace(websiteURL + string) } @@ -327,11 +294,6 @@ 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) @@ -520,6 +482,12 @@ function settings() { function about() { } +mainSearchFigure.onclick = () => { + if(window.innerWidth > 964) return mainSearch(undefined, 'main-input') + if(mainSearchIcon.classList.contains('disable') && navigationBarLeft.classList.contains('disable') && navigationBarRight.classList.contains('disable')) responsiveVersion.closeMobileVersionNavBar() + else responsiveVersion.openMobileVersionNavBar() +} + mainSearchInput.onfocus = () => { if(!extraSearchOptions.classList.contains('disable')) return hideExtraSearchOptions() else if(mainSearchInput.value.length !== 0) showSuggestWords() @@ -814,4 +782,13 @@ function removeCharactersInString(string, frontNumber, backNumber) { return stri function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) } function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) } function urlEdit(string) { return decodeURIComponent(string).trim().replace(/\s\s+/g, ' ') } -// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"') \ No newline at end of file +function checkIfCategoriesAreOpen() { + for(let i = 0; i < categories.length; i++) + if(window.location.pathname.includes(categories[i]) || window.location.pathname.includes('covid-19')) + return true + return false + } +// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"') + +function followCategory() { +} \ No newline at end of file diff --git a/JS/responsive.js b/JS/responsive.js new file mode 100644 index 0000000..5c54339 --- /dev/null +++ b/JS/responsive.js @@ -0,0 +1,63 @@ +const responsiveVersion = { + openMobileVersionNavBar() { + mainSearchIcon.classList.add('disable') + mainSearchBackLeftIcon.classList.remove('disable') + navigationBarLeft.classList.add('disable') + navigationBarRight.classList.add('disable') + navigationBarMiddle.style.gridColumn = '1/4' + mainSearchFigure.style.gridColumn = '1/2' + mainSearchBackLeftTooltiptext.classList.remove('disable') + mainSearchInput.style.display = 'grid' + extOptIcon.style.display = 'flex' + mainSearchInput.focus() + sideBar.style.marginLeft = '-100%' + sideMenuCounter = 1 + }, + closeMobileVersionNavBar() { + mainSearchIcon.classList.remove('disable') + mainSearchBackLeftIcon.classList.add('disable') + navigationBarLeft.classList.remove('disable') + navigationBarRight.classList.remove('disable') + navigationBarMiddle.style.gridColumn = '2/3' + mainSearchFigure.style.gridColumn = '3/4' + mainSearchBackLeftTooltiptext.classList.add('disable') + mainSearchInput.style.display = 'none' + extOptIcon.style.display = 'none' + navigationBar.style.gridTemplateColumns = '120px 1fr 85px' + + }, + defaultNaviagtionBar() { + mainSearchIcon.classList.remove('disable') + mainSearchBackLeftIcon.classList.add('disable') + navigationBarLeft.classList.remove('disable') + navigationBarRight.classList.remove('disable') + navigationBar.style.gridTemplateColumns = '1fr 730px 1fr' + mainSearchInput.style.display = 'grid' + extOptIcon.style.display = 'grid' + mainSearchFigure.style.gridColumn = '1/2' + }, + smallScreen457() { + if(window.innerWidth < 510) { + document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = '' + document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = '' + } else { + document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = 'Following' + document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = 'Share' + } + } + +} + +function windowWidthSettings() { + if(window.innerWidth > 964) { + responsiveVersion.defaultNaviagtionBar() + } else { + if(!suggestMainInput.classList.contains('disable') || !extraSearchOptions.classList.contains('disable')) { + hideSuggestWords() + hideExtraSearchOptions() + } + responsiveVersion.closeMobileVersionNavBar() + } + if(checkIfCategoriesAreOpen() === true) responsiveVersion.smallScreen457() + +} diff --git a/JS/variables.js b/JS/variables.js index 1d10956..8f4475b 100644 --- a/JS/variables.js +++ b/JS/variables.js @@ -2,7 +2,7 @@ const countries = ['Arab Emirates','Argentina','Australia','Austria','Belgium','Brasil','Bulgaria','Canada','China','Colombia','Cuba','Czech Republic','Egypt','England','France','Germany','Greece','Hong Kong','Hungary','Indonesia','Ireland','Israel','Italy','Japan','Latvia','Lithuania','Malaysia','Mexico','Morocco','Netherlands','New Zealand','Nigeria','Norway','Philippines','Poland','Portugal','Romania','Russia','Saudia Arabia','Serbia','Singapore','Slovakia','Slovenia','South Africa','South Korea','Sweden','Switzerland','Taiwan','Thailand','Turkey','Ukraine','United States','Venezuela'] const countryAcronyms = ['ae','ar','au','at','be','br','bg','ca','cn','co','cu','cz','eg','gb','fr','de','gr','hk','hu','id','it','il','it','jp','lt','lv','my','mx','ma','nl','nz','ng','no','ph','pl','pt','ro','ru','sa','rs','sg','sk','si','za','kr','se','ch','tw','th','tr','ua','us','ve'] - const categories = ['all','Tbusiness','entertainment','general','health','science','sports','technology'] + const categories = ['all','business','entertainment','general','health','science','sports','technology','world'] const language = ['All','Arabic','German','English','Spanish','French','Italian','Dutch','Norwegian','Portuguese','Russian','Swedish','Chinese'] const languageAcronyms = ['all','ar','de','en','es','fr','it','nl','no','pt','ru','se','zh'] 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)'] diff --git a/add-ons/head.php b/add-ons/head.php index cfb3596..265f5eb 100644 --- a/add-ons/head.php +++ b/add-ons/head.php @@ -11,8 +11,10 @@ + + diff --git a/add-ons/login.php b/add-ons/login.php new file mode 100644 index 0000000..6ad638e --- /dev/null +++ b/add-ons/login.php @@ -0,0 +1,41 @@ +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ + + + +
+ +
+ + +
diff --git a/add-ons/navigation-bar.php b/add-ons/navigation-bar.php index 3688535..3dac9fc 100644 --- a/add-ons/navigation-bar.php +++ b/add-ons/navigation-bar.php @@ -14,8 +14,7 @@
- + diff --git a/headlines.php b/headlines.php index 884052a..a4eb639 100644 --- a/headlines.php +++ b/headlines.php @@ -11,8 +11,11 @@ + + + @@ -122,47 +125,7 @@ - + diff --git a/search.php b/search.php index 46abd6e..f2a298e 100644 --- a/search.php +++ b/search.php @@ -11,8 +11,10 @@ + + @@ -34,105 +36,21 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+ +
+

Hello World!

+
+ +
+
+ +
+
+ +
+