diff --git a/CSS/*.css b/CSS/*.css index 5e335a8..83b0bad 100644 --- a/CSS/*.css +++ b/CSS/*.css @@ -87,7 +87,9 @@ body{ .article-other-info .test:hover + .tooltiptext, .article-extra-option-icon:hover + .tooltiptext, .company-date:hover .tooltiptext, - .outter-container:hover .tooltiptext{ + .outter-container:hover .tooltiptext, + .plus-icon-container:hover .tooltiptext, + .trash-icon-container:hover .tooltiptext{ visibility: visible; opacity: 1; font-size: 0.7em; @@ -115,6 +117,9 @@ body{ .tooltiptextTop150 { top: 150%; } + .tooltiptextTop130 { + top: 130%; + } .tooltiptextTop120 { top: 120%; } diff --git a/CSS/account.css b/CSS/account.css index 08101e3..e768711 100644 --- a/CSS/account.css +++ b/CSS/account.css @@ -658,19 +658,100 @@ body { display: flex; flex-direction: column; } - .admin-panel section { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 60px; - padding: 0.5rem; + + table { + border-collapse: collapse; + margin: 0; + padding: 0; + table-layout: fixed; + margin-top: 1rem; } - .admin-panel section div { - padding: 20px; - margin: auto; - } - .admin-panel i { - color: green; - } - + + table caption { + font-size: 1.5rem; + margin: .5rem 0 .75rem; + } + + table tr { + background-color: var(--bg); + border: 1px solid var(--border-medium); + padding: .35rem; + } + table th, + table td { + padding: 1rem; + text-align: center; + } + + table th { + font-size: .85rem; + letter-spacing: .1rem; + text-transform: uppercase; + } + + @media screen and (max-width: 600px) { + table { + border: 0; + } + + table caption { + font-size: 1.3em; + } + + table thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + table tr { + display: block; + margin-bottom: .625em; + } + + table td { + display: block; + font-size: 0.8rem; + text-align: center; + } + + table td::before { + content: attr(data-label); + float: left; + font-weight: bold; + text-transform: uppercase; + } + + table td:last-child { + border-bottom: 0; + } + } + .plus-icon-container, + .trash-icon-container { + min-height: 2rem; + width: 2rem; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all ease-in-out .12s; + cursor: pointer; + position: relative; + } + .plus-icon-container i { color: var(--green-light); } + .plus-icon-container:hover { background-color: var(--hover-light); } + .trash-icon-container i { + color: var(--font-dark); + transition: all ease-in-out .22s; + } + .trash-icon-container:hover i { color: var(--red-medium);} + /* Change */ .input-container { diff --git a/CSS/index.css b/CSS/index.css index f825066..7c46e52 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -691,6 +691,12 @@ body{ grid-template-columns: repeat(12,minmax(0, 1fr)); grid-gap: 1rem 2rem; } + .main-content-section.headlines .main-content-container { + grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 220px; + } + .main-content-section.headlines .main-content-container .article-container { grid-column: 1/9; } + .main-content-section.headlines .main-content-container .main-side-content-container { grid-column: 9/13 ; } + .article-container { grid-column: 1/9; } #main-side-content-container { grid-column: 9/13; } article.aside { border: none; } diff --git a/CSS/profileImg.css b/CSS/profileImg.css index d89e01d..d5307da 100644 --- a/CSS/profileImg.css +++ b/CSS/profileImg.css @@ -4,7 +4,6 @@ top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.9); - /* transition: all ease-in-out .1s; */ border: 1px solid var(--hover-medium); border-radius: 5px; background-color: var(--bg); @@ -16,10 +15,12 @@ z-index: 1000; visibility: visible; transform: translate(-50%,-50%) scale(1); - min-width: 340px; + min-width: 320px; + max-width: 370px; height: auto; } .main-img-container .container { + margin-top: 0.75rem; margin-bottom: 0.75rem; display: flex; } @@ -28,7 +29,7 @@ .color-img.active { margin-top: 1rem; } .main-img-container section { - margin-top: 1rem; + margin: 1rem 0 2rem 0; padding: 0 5px; } .main-img-container.active section:nth-of-type(2) { margin-top: 0; } @@ -129,5 +130,43 @@ .insert-photo-container + section { margin-top: 0; } .main-insert-photo-container .footer { height: 3rem; - margin: auto; -} \ No newline at end of file + display: flex; + align-items: center; + width: 100%; +} +.main-insert-photo-container .footer div:first-of-type { + display: flex; + align-items: center; + justify-self: flex-start; + flex-grow: 1; +} +.main-insert-photo-container .footer div:first-of-type span { + color: var(--font-dark); + font-size: 0.8rem; +} +.main-insert-photo-container .footer .button { + display: flex; + padding: 2px 5px; + align-items: center; + justify-content: center; + height: 50%; + background-color: var(--bg); + border: 1px solid var(--border-light); + border-radius: 3px; + cursor: pointer; + transition: all ease-in-out .15s; + color: var(--font-dark); +} +.main-insert-photo-container .footer .button:hover { background-color: var(--hover-light); } + +.color-container { + min-height: 4rem; + align-items: center; + justify-content: center; +} +.color-container .box-container { + display: inline-flex; + padding: 0.5rem 0.5rem; + /* margin: auto 1rem 1rem auto; */ +} +.color-container div:last-of-type { margin-right: 0;} diff --git a/Images/5f7b8d76df9d60.00481097.png b/Images/5f7b8d76df9d60.00481097.png new file mode 100644 index 0000000..cb8e85b Binary files /dev/null and b/Images/5f7b8d76df9d60.00481097.png differ diff --git a/JS/account.js b/JS/account.js index bc9bc3a..d0c5bf3 100644 --- a/JS/account.js +++ b/JS/account.js @@ -3,6 +3,7 @@ const sideBarResAccount = document.querySelector('.side-bar-responsive') const sideBarAccount = document.getElementById('side-bar-account') window.onload = () => { + generateColors() if(window.location.pathname.includes('changeName')) change.name() else if(window.location.pathname.includes('changeCountry')) change.country() else if(window.location.pathname.includes('changePassword')) change.password() @@ -26,11 +27,13 @@ function responsive() { sideBarResAccount.classList.add('disable') } } +if(mainImgContainer) + if(mainImgContainer.classList.contains('disable')) mainImgContainer.classList.remove('disable') async function logout(string) { await fetch(`../include/logout.inc.php`) - openLinks(filePath.headlines + string); + openLinks('/'+filePath.headlines+string); } function openLinks(string) { window.location.replace(websiteURL + string) } @@ -181,7 +184,7 @@ const check = { body: createFormData('name', array) }) const data = await res.text() - if(data === 'success') openLinks('account/personal.php') + if(data === 'success') openLinks('/account/personal.php') }, gender : async() => { if(!document.querySelector('.gender-container .active')) { @@ -194,7 +197,7 @@ const check = { body: createFormData('gender', array) }) const data = await res.text() - if(data === 'success') openLinks('account/personal.php') + if(data === 'success') openLinks('/account/personal.php') }, country : async() => { if(!document.querySelector('.country-container .active')) { @@ -207,7 +210,7 @@ const check = { body: createFormData('country', array) }) const data = await res.text() - if(data === 'success') openLinks('account/personal.php') + if(data === 'success') openLinks('/account/personal.php') }, psw : async() => { @@ -227,7 +230,7 @@ const check = { }) const data = await res.text() console.log(data) - if(data === 'success') openLinks('account/personal.php') + if(data === 'success') openLinks('/account/personal.php') else error.passwordOldAfter() } } @@ -361,3 +364,74 @@ function managePasswordVisibility(element) { else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'password' } } + + +function addAdmin(element) { + element.parentElement.firstElementChild.classList.add('disable') + element.parentElement.lastElementChild.classList.remove('disable') + admin('addAdmin', element.parentElement.parentElement.children[1].innerHTML.trim()) +} + +function removeAdmin(element) { + element.parentElement.firstElementChild.classList.remove('disable') + element.parentElement.lastElementChild.classList.add('disable') + admin('removeAdmin', element.parentElement.parentElement.children[1].innerHTML.trim()) +} + +async function admin(action, email) { + + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData(action, email) + }) + const data = await res.text() + console.log(data) +} + +let imageUploadActive = false +let currentImageUploadLocation +async function submitProfileImageUploadForm() { + + if(document.getElementById('file-upload').value) { + + let photo = document.getElementById("file-upload").files[0] + let formData = new FormData() + + formData.append('file', photo) + + const response = await fetch('../include/uploadFile.inc.php', { + method: "POST", + body: formData + }) + const text = await response.text() + if(text === 'too big') errorSpanUploadImage.innerHTML = `${icon} Max file size is 1MB` + else if(text === 'error') errorSpanUploadImage.innerHTML = `${icon} There have been some sort of an error` + else if(text === 'extension not allowed') errorSpanUploadImage.innerHTML = `${icon} Only jpeg, jpg, png are allowed` + else { + imageUploadActive = true + errorSpanUploadImage.classList.remove('red-color') + errorSpanUploadImage.classList.add('light-green-color') + errorSpanUploadImage.innerHTML = 'Image has been successfully added' + + currentImageUploadLocation = text.split(' ')[1] + + array = JSON.stringify(['0', currentImageUploadLocation]) + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData('imageUpload', array) + }) + const data = await res.text() + console.log(data) + } + document.getElementById('file-upload').value = '' + + } else imageNameLabel.innerHTML = 'No file selected' + +} +function fileChange() { + console.log(document.querySelector('.insert-photo-container .footer')) + document.querySelector('.insert-photo-container .footer .footer').classList.remove('disable') + let a = document.getElementById('file-upload').value.split(`fakepath`).pop().replace(/\\/g, '') + a = a.substring(0, 20)+'...' + imageNameLabel.innerHTML = a +} diff --git a/JS/main.js b/JS/main.js index 94c74bc..810e281 100644 --- a/JS/main.js +++ b/JS/main.js @@ -4,51 +4,53 @@ let weatherArrayTommorow let weatherArray2Days const weather = { - async getweather() { - city = changeDiacritics(userLocationInformationValue[3]) - const key = php.info('weather') + getweather : async function () { + city = removeDiacritics(userLocationInformationValue[3]) + const key = await php.info('weather') const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.weatherapi.com/v1/forecast.json?key=${key}&q=${city}&days=7`) const data = await response.json() weatherArrayToday = data.forecast.forecastday[0] weatherArrayTommorow = data.forecast.forecastday[1] weatherArray2Days = data.forecast.forecastday[2] }, - updateWeather() { - let header = document.querySelectorAll('.weather-main-header')[0] - header.children[0].src = weatherArrayToday.day.condition.icon - header.children[1].innerHTML = userLocationInformationValue[3] - header.children[2].innerHTML = `${Math.round(weatherArrayToday.day.avgtemp_c)}°C` - + updateWeather : function () { + let header = document.querySelectorAll('.weather-main-header')[0] + header.children[0].src = weatherArrayToday.day.condition.icon + header.children[1].innerHTML = userLocationInformationValue[3] + header.children[2].innerHTML = `${Math.round(weatherArrayToday.day.avgtemp_c)}°C` + let weatherDate = new Date(weatherArrayToday.date) let tommorowNumber = weatherDate.getDay() let dayAfterTomorrow = weatherDate.getDay() - if(tommorowNumber == 6) tommorowNumber = tommorowNumber - 7 - if(dayAfterTomorrow == 5 || dayAfterTomorrow == 6) dayAfterTomorrow = dayAfterTomorrow - 7 + if (tommorowNumber == 6) + tommorowNumber = tommorowNumber - 7 + if (dayAfterTomorrow == 5 || dayAfterTomorrow == 6) + dayAfterTomorrow = dayAfterTomorrow - 7 let dayAcronymTommorow = daysAcronyms[tommorowNumber + 1] let dayAcronymIn2Days = daysAcronyms[dayAfterTomorrow + 2] let mainWeatherContent = document.querySelectorAll('.weather-3-days')[0] - mainWeatherContent.children[0].firstElementChild.innerHTML = 'Today' - mainWeatherContent.children[1].firstElementChild.innerHTML = dayAcronymTommorow - mainWeatherContent.children[2].firstElementChild.innerHTML = dayAcronymIn2Days + mainWeatherContent.children[0].firstElementChild.innerHTML = 'Today' + mainWeatherContent.children[1].firstElementChild.innerHTML = dayAcronymTommorow + mainWeatherContent.children[2].firstElementChild.innerHTML = dayAcronymIn2Days - mainWeatherContent.children[0].children[1].firstElementChild.src = weatherArrayToday.day.condition.icon - mainWeatherContent.children[1].children[1].firstElementChild.src = weatherArrayTommorow.day.condition.icon - mainWeatherContent.children[2].children[1].firstElementChild.src = weatherArray2Days.day.condition.icon + mainWeatherContent.children[0].children[1].firstElementChild.src = weatherArrayToday.day.condition.icon + mainWeatherContent.children[1].children[1].firstElementChild.src = weatherArrayTommorow.day.condition.icon + mainWeatherContent.children[2].children[1].firstElementChild.src = weatherArray2Days.day.condition.icon - mainWeatherContent.children[0].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' - mainWeatherContent.children[1].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' - mainWeatherContent.children[2].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + mainWeatherContent.children[0].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + mainWeatherContent.children[1].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + mainWeatherContent.children[2].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' - mainWeatherContent.children[0].children[1].lastElementChild.innerHTML = `${weatherArrayToday.day.avgtemp_c}°C` - mainWeatherContent.children[1].children[1].lastElementChild.innerHTML = `${weatherArrayTommorow.day.avgtemp_c}°C` - mainWeatherContent.children[2].children[1].lastElementChild.innerHTML = `${weatherArray2Days.day.avgtemp_c}°C` + mainWeatherContent.children[0].children[1].lastElementChild.innerHTML = `${weatherArrayToday.day.avgtemp_c}°C` + mainWeatherContent.children[1].children[1].lastElementChild.innerHTML = `${weatherArrayTommorow.day.avgtemp_c}°C` + mainWeatherContent.children[2].children[1].lastElementChild.innerHTML = `${weatherArray2Days.day.avgtemp_c}°C` - mainWeatherContent.children[0].children[2].lastElementChild.innerHTML = `${weatherArrayToday.day.daily_chance_of_rain}%` - mainWeatherContent.children[1].children[2].lastElementChild.innerHTML = `${weatherArrayTommorow.day.daily_chance_of_rain}%` - mainWeatherContent.children[2].children[2].lastElementChild.innerHTML = `${weatherArray2Days.day.daily_chance_of_rain}%` + mainWeatherContent.children[0].children[2].lastElementChild.innerHTML = `${weatherArrayToday.day.daily_chance_of_rain}%` + mainWeatherContent.children[1].children[2].lastElementChild.innerHTML = `${weatherArrayTommorow.day.daily_chance_of_rain}%` + mainWeatherContent.children[2].children[2].lastElementChild.innerHTML = `${weatherArray2Days.day.daily_chance_of_rain}%` } } @@ -273,9 +275,9 @@ window.onload = async () => { // Close all open windows hideExtraSearchOptions() hideSuggestWords() + generateColors() if(window.location.hash === '#login') manageLoginOptions() - document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' }) error.window() @@ -388,10 +390,11 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 } /* HEADLINES */ async function headlines() { - // await weather.getWeather() - // weather.updateWeather() - pathLocation = '' + await user.location() + await weather.getweather() + weather.updateWeather() + sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement) historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`) @@ -817,4 +820,4 @@ async function logOut(string) { const res = await fetch(`include/logout.inc.php`) const data = res.text() openLinks(filePath.headlines + string); -} \ No newline at end of file +} diff --git a/JS/show.js b/JS/show.js index 6207fce..cf5881f 100644 --- a/JS/show.js +++ b/JS/show.js @@ -143,7 +143,7 @@ function manageExtraProfileOptions() { } } -function openLinks(string) { window.location.replace(websiteURL + string) } +function openLinks(string) { window.location.replace(websiteURL +'/'+ string) } const insertContainer = document.getElementById('insert-photo-container') function showProfileImg() { if(mainImgContainer.classList.contains('active')) { @@ -163,4 +163,18 @@ function manageInsertContainer() { if(insertContainer.classList.contains('active')) insertContainer.classList.remove('active') else insertContainer.classList.add('active') } -function openFolder() { document.getElementById('file-upload').click() } \ No newline at end of file +function openFolder() { document.getElementById('file-upload').click() } + +function generateColors () { + let parent = document.querySelector('.color-container') + if(!parent) return + for(let i = 0; i < colors.length; i++) { + let divP = document.createElement('div') + divP.classList.add('box-container') + let div = document.createElement('div') + div.classList.add('img','medium') + div.style.backgroundColor = colors[i] + divP.appendChild(div) + parent.appendChild(divP) + } +} \ No newline at end of file diff --git a/JS/variables.js b/JS/variables.js index 79bdefb..170bd21 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/News-website/' + const websiteURL = 'http://localhost:8080/News-website' // const websiteURL = 'https://news.niktopler.com' const topStoriesURL = '&t=topstories&' @@ -66,12 +66,15 @@ const showCountriesLink = document.getElementById('show-countries-button') let sclSpan let sclStrong - const mainImgContainer = document.getElementById('main-img-container') + const mainImgContainer = document.querySelector('#main-img-container.main-img-container') if(showCountriesLink !== null) { sclSpan = showCountriesLink.firstElementChild.firstElementChild sclStrong = showCountriesLink.firstElementChild.lastElementChild } + const imageNameLabel = document.getElementById('image-name-label') + const errorSpanUploadImage = document.getElementById('error-span-upload-image') + const main = document.getElementById('main') const overlay = document.getElementById('overlay') const navigationBarProfileImageDiv = document.getElementById('outter-container') diff --git a/account/add-ons/side-bar.php b/account/add-ons/side-bar.php index a95692c..821c6e4 100644 --- a/account/add-ons/side-bar.php +++ b/account/add-ons/side-bar.php @@ -3,28 +3,31 @@