Updated responsiveness of sidebar and navbar
This commit is contained in:
Nik Topler
parent
7ed059318f
commit
d5a429b768
8 changed files with 259 additions and 247 deletions
192
CSS/index.css
192
CSS/index.css
|
|
@ -395,145 +395,96 @@ body{
|
||||||
#profile-extra-options .grid .profile-img-link .img:hover{
|
#profile-extra-options .grid .profile-img-link .img:hover{
|
||||||
filter: brightness(0.96);
|
filter: brightness(0.96);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
|
||||||
/*? Main Content */
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: visible;
|
|
||||||
}
|
}
|
||||||
.side-bar{
|
.side-bar {
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 65px;
|
top: 65px;
|
||||||
height: 100%;
|
height: calc(100% - 64px);
|
||||||
width: 17.5rem;
|
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 {
|
.side-bar-content {
|
||||||
font-size: 0.875rem;
|
display: grid;
|
||||||
height: 100%;
|
margin-top: 1rem;
|
||||||
width: 17.5rem;
|
margin-bottom: 1.5rem;
|
||||||
padding: 15px 0;
|
|
||||||
left: 0px;
|
|
||||||
transition: all ease-in-out 0.3s;
|
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{
|
.side-bar-content .sidebar-category {
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
.side-bar-content a{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--font-dark);
|
height: 46px;
|
||||||
}
|
width: 16.2rem;
|
||||||
.side-bar-content a.active{
|
cursor: pointer;
|
||||||
color: var(--blue-light);
|
flex-grow: 1;
|
||||||
}
|
|
||||||
.side-menu-categories{
|
|
||||||
border-top-right-radius: 25px;
|
border-top-right-radius: 25px;
|
||||||
border-bottom-right-radius: 25px;
|
border-bottom-right-radius: 25px;
|
||||||
}
|
}
|
||||||
.side-bar-content hr{
|
.side-bar-content .sidebar-line {
|
||||||
border-top: 1px solid var(--hover-medium);
|
height: 22px;
|
||||||
}
|
width: 16.2rem;
|
||||||
.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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.side-bar-content footer div > *{
|
.side-bar-content .sidebar-line hr {
|
||||||
padding: 5px;
|
border-bottom: 1px solid var(--hover-dark);
|
||||||
text-decoration: none;
|
width: 90%;
|
||||||
font-size: 0.9rem;
|
}
|
||||||
text-decoration: none;
|
.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);
|
color: var(--font-dark);
|
||||||
transition: ease-in-out .12s;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.side-bar-content footer div a:hover {
|
.side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; }
|
||||||
text-decoration: underline;
|
.sidebar-category.country {
|
||||||
|
display: grid;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--font-dark);
|
||||||
}
|
}
|
||||||
.sidebar-help i{
|
.side-bar {
|
||||||
padding-left: 0.5rem;
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
.sidebar-country-container > * { padding: 0 0 0 1.5rem; }
|
||||||
.about-sidebar-content{
|
.side-bar footer div a { color: var(--font-medium); }
|
||||||
left: -100%;
|
.side-bar footer .text { padding: 1rem 0.5rem; }
|
||||||
transition: all ease-in-out .3s;
|
.side-bar .about { margin-left: 1.5rem; }
|
||||||
border-right: 1px solid var(--border-medium);
|
.sidebar-category:hover div a,
|
||||||
border-top: 1px solid var(--border-medium);
|
.sidebar-category:hover div i,
|
||||||
background-color: var(--bg);
|
.sidebar-category:hover span,
|
||||||
|
.sidebar-category:hover strong {
|
||||||
|
color: var(--blue-light);
|
||||||
}
|
}
|
||||||
|
.sidebar-category.active { background-color: var(--side-bar-active) !important; }
|
||||||
.about-sidebar-content.active{
|
.sidebar-category.active div a,
|
||||||
left: 0%;
|
.sidebar-category.active div i {
|
||||||
}
|
color: var(--blue-light) !important;
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
/** Main Section */
|
/** Main Section */
|
||||||
.main-content-section {
|
.main-content-section {
|
||||||
|
|
@ -543,6 +494,7 @@ body{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
transition: all ease-in-out .3s;
|
||||||
}
|
}
|
||||||
.main-content-container {
|
.main-content-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1345,18 +1297,16 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1100px) {
|
@media screen and (max-width: 1100px) {
|
||||||
.main-content-section {
|
.main-content-section {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
.side-bar-content {
|
.side-bar {
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
border: 1px solid var(--border-medium);
|
border: 1px solid var(--border-medium);
|
||||||
overflow: auto;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.side-bar-content {
|
.side-bar { margin-left: -280px; }
|
||||||
left: -280px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 964px) {
|
@media screen and (max-width: 964px) {
|
||||||
.navigation-bar { grid-template-columns: 120px 1fr 85px; }
|
.navigation-bar { grid-template-columns: 120px 1fr 85px; }
|
||||||
|
|
|
||||||
132
JS/main.js
132
JS/main.js
|
|
@ -1,6 +1,8 @@
|
||||||
|
let pathLocation = '../'
|
||||||
let weatherArrayToday
|
let weatherArrayToday
|
||||||
let weatherArrayTommorow
|
let weatherArrayTommorow
|
||||||
let weatherArray2Days
|
let weatherArray2Days
|
||||||
|
|
||||||
const weather = {
|
const weather = {
|
||||||
async getweather() {
|
async getweather() {
|
||||||
city = changeDiacritics(userLocationInformationValue[3])
|
city = changeDiacritics(userLocationInformationValue[3])
|
||||||
|
|
@ -93,9 +95,12 @@ const searchBox = {
|
||||||
let mouseSuggestHover = false
|
let mouseSuggestHover = false
|
||||||
let moreSuggestWordsArray = []
|
let moreSuggestWordsArray = []
|
||||||
const suggest = {
|
const suggest = {
|
||||||
fetch : async (input) => {
|
fetch : async (input, type) => {
|
||||||
// const res = await fetch(`https://api.datamuse.com/words?ml=${input}`)
|
let res
|
||||||
const res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
|
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()
|
return words = await res.json()
|
||||||
},
|
},
|
||||||
suggest : async() => {
|
suggest : async() => {
|
||||||
|
|
@ -103,19 +108,19 @@ const suggest = {
|
||||||
let suggestWordsArray = []
|
let suggestWordsArray = []
|
||||||
let input = mainSearchInput.value.split(' ')
|
let input = mainSearchInput.value.split(' ')
|
||||||
let n = 0
|
let n = 0
|
||||||
|
const maxLength = 40
|
||||||
while(suggestWordsArray.length < 21) {
|
|
||||||
|
while(suggestWordsArray.length < 30) {
|
||||||
fetchArray = await suggest.fetch(input[n])
|
fetchArray = await suggest.fetch(input[n])
|
||||||
|
|
||||||
for(let i = 0; i < fetchArray.length; i++)
|
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)
|
input[n] = removeCharactersInString(input[n], 0, -1)
|
||||||
if(input.length === 0) break
|
if(input.length === 0) break
|
||||||
}
|
}
|
||||||
suggest.generate(suggestWordsArray)
|
suggest.generate(suggestWordsArray)
|
||||||
removeDisableSideElements()
|
removeDisableSideElements()
|
||||||
|
|
||||||
},
|
},
|
||||||
generate : (array) => {
|
generate : (array) => {
|
||||||
let section = document.querySelector('article.suggested-words.aside section')
|
let section = document.querySelector('article.suggested-words.aside section')
|
||||||
|
|
@ -130,11 +135,12 @@ const suggest = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
manageSuggestWords : async () => {
|
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 === 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)
|
suggest.suggestBox(suggestWordsArray)
|
||||||
|
|
||||||
for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) {
|
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].classList.add('active')
|
||||||
}
|
}
|
||||||
suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active','key') }
|
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) => {
|
suggestBox : (words) => {
|
||||||
let wordBoxes = words.map(word => `<div class="grid pointer" onclick="suggest.selectSuggestedSearchOption(this.firstElementChild)">
|
let wordBoxes = words.map(word => `<div class="grid pointer" onclick="suggest.selectSuggestedSearchOption(this.firstElementChild)">
|
||||||
|
|
@ -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 = {
|
const php = {
|
||||||
info : async(word) => {
|
info : async(word) => {
|
||||||
const response = await fetch('privateInfo.php', {
|
const response = await fetch(`${pathLocation}privateInfo.php`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: createFormData(word)
|
body: createFormData(word)
|
||||||
})
|
})
|
||||||
|
|
@ -228,13 +230,33 @@ const php = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const error = {
|
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 : () => {
|
headlines : () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
search : () => {
|
search : () => {
|
||||||
if(!window.location.search.match(regularExpressions.url.country)
|
// if(mainSearchInput.value.length === 0) return true
|
||||||
|| !window.location.search.match(regularExpressions.url.backgroundColor)
|
// if(window.location.pathname.includes('search') && window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true
|
||||||
|| !window.location.search.match(regularExpressions.url.search)) openLinks(filePath.headlines)
|
// 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
|
// Close all open windows
|
||||||
hideExtraSearchOptions()
|
hideExtraSearchOptions()
|
||||||
hideSuggestWords()
|
hideSuggestWords()
|
||||||
|
// document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }})
|
||||||
|
|
||||||
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
|
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
|
||||||
|
|
||||||
await user.location()
|
error.window()
|
||||||
|
|
||||||
removeActiveSidebarCategory()
|
removeActiveSidebarCategory()
|
||||||
if (window.location.pathname.includes('headlines')) headlines()
|
if (window.location.pathname.includes('headlines')) headlines()
|
||||||
else if (window.location.pathname.includes('for-you')) forYou()
|
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('about')) about()
|
||||||
else if (window.location.pathname.includes('help')) help()
|
else if (window.location.pathname.includes('help')) help()
|
||||||
else if (window.location.pathname.includes('search')) mainSearch()
|
else if (window.location.pathname.includes('search')) mainSearch()
|
||||||
|
await user.location()
|
||||||
// changeBackgroundColor()
|
// changeBackgroundColor()
|
||||||
|
|
||||||
// let query = location.search.match(regularExpressions.url.query)[0]
|
// let query = location.search.match(regularExpressions.url.query)[0]
|
||||||
// query = removeCharactersInString(query, 3, query.length - 1)
|
// query = removeCharactersInString(query, 3, query.length - 1)
|
||||||
|
|
||||||
/* Search news */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onclick = (e) => {
|
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) }
|
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) {
|
function getLanguageAcronym(target) {
|
||||||
for(let i = 0; i < language.length; i++)
|
for(let i = 0; i < language.length; i++)
|
||||||
if(language[i] === target)
|
if(language[i] === target)
|
||||||
|
|
@ -381,7 +409,9 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
|
||||||
async function headlines() {
|
async function headlines() {
|
||||||
// await weather.getWeather()
|
// await weather.getWeather()
|
||||||
// weather.updateWeather()
|
// 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}`)
|
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`)
|
||||||
}
|
}
|
||||||
|
|
@ -390,8 +420,9 @@ async function headlines() {
|
||||||
function mainSearch(extra, type) {
|
function mainSearch(extra, type) {
|
||||||
let url = ''
|
let url = ''
|
||||||
let newSearch = false
|
let newSearch = false
|
||||||
|
pathLocation = ''
|
||||||
|
|
||||||
// error.search()
|
if(error.search() === true) return
|
||||||
|
|
||||||
if(!type) type = 'main-url'
|
if(!type) type = 'main-url'
|
||||||
if(!window.location.pathname.includes('search')) newSearch = true
|
if(!window.location.pathname.includes('search')) newSearch = true
|
||||||
|
|
@ -458,25 +489,25 @@ async function headlines() {
|
||||||
/* FOR YOU */
|
/* FOR YOU */
|
||||||
|
|
||||||
function forYou() {
|
function forYou() {
|
||||||
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement)
|
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement.parentElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOLLOWING */
|
/* FOLLOWING */
|
||||||
|
|
||||||
function following() {
|
function following() {
|
||||||
sidebarCategorySelect(document.querySelector('.fa-star').parentElement)
|
sidebarCategorySelect(document.querySelector('.fa-star').parentElement.parentElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LIBRARY */
|
/* LIBRARY */
|
||||||
|
|
||||||
function library() {
|
function library() {
|
||||||
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement)
|
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement.parentElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CATEGORIES */
|
/* CATEGORIES */
|
||||||
|
|
||||||
function category(word) {
|
function category(word) {
|
||||||
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement)
|
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement.parentElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SETTINGS */
|
/* SETTINGS */
|
||||||
|
|
@ -494,7 +525,9 @@ mainSearchInput.onfocus = () => {
|
||||||
else if(mainSearchInput.value.length !== 0) showSuggestWords()
|
else if(mainSearchInput.value.length !== 0) showSuggestWords()
|
||||||
suggest.manageSuggestWords()
|
suggest.manageSuggestWords()
|
||||||
}
|
}
|
||||||
|
mainSearchInput.onblur = () => {
|
||||||
|
// hideSuggestWords()
|
||||||
|
}
|
||||||
mainSearchInput.oninput = () => {
|
mainSearchInput.oninput = () => {
|
||||||
if(mainSearchInput.value.length === 0) return hideSuggestWords()
|
if(mainSearchInput.value.length === 0) return hideSuggestWords()
|
||||||
else if(suggestMainInput.classList.contains('disable')) showSuggestWords()
|
else if(suggestMainInput.classList.contains('disable')) showSuggestWords()
|
||||||
|
|
@ -506,7 +539,7 @@ mainSearchInput.onkeyup = (e) => {
|
||||||
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
|
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
|
||||||
if(e.keyCode === 13) {
|
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}`)
|
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()
|
mainSearch()
|
||||||
}
|
}
|
||||||
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
|
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
|
||||||
|
|
@ -539,14 +572,9 @@ function updateCountrySelect(country) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function createUrlPath(type, search) {
|
function createUrlPath(type, search) {
|
||||||
if(search === undefined && location.pathname.includes(type)) return
|
|
||||||
let path
|
let path
|
||||||
let query = ''
|
if(search === undefined && location.pathname.includes(type)) return
|
||||||
if(type === 'headlines') path = filePath.headlines
|
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 === 'following') path = filePath.following
|
||||||
else if(type === 'for-you') path = filePath.forYou
|
else if(type === 'for-you') path = filePath.forYou
|
||||||
else if(type === 'library') path = filePath.library
|
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 === 'entertainment') path = filePath.entertainment
|
||||||
else if(type === 'sports') path = filePath.sports
|
else if(type === 'sports') path = filePath.sports
|
||||||
else if(type === 'health') path = filePath.health
|
else if(type === 'health') path = filePath.health
|
||||||
|
path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
|
||||||
return path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
|
openLinks(path)
|
||||||
}
|
}
|
||||||
|
|
||||||
let activeCountry
|
let activeCountry
|
||||||
|
|
@ -694,15 +722,15 @@ function clickInOutCheck(parent, target) {
|
||||||
if(checkIfClickIsOnElement(hasChildren, target) === true || checkIfClickIsOnElement(noChildren, target) === true) clickOnOpenedElement = true
|
if(checkIfClickIsOnElement(hasChildren, target) === true || checkIfClickIsOnElement(noChildren, target) === true) clickOnOpenedElement = true
|
||||||
else clickOnOpenedElement = false
|
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 = []
|
children = []
|
||||||
hasChildren = []
|
hasChildren = []
|
||||||
noChildren = []
|
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) {
|
function doesElementHaveChildren(parent) {
|
||||||
if(parent.children.length > 0){
|
if(parent.children.length > 0){
|
||||||
|
|
|
||||||
33
JS/show.js
33
JS/show.js
|
|
@ -1,27 +1,20 @@
|
||||||
|
|
||||||
let sideMenuCounter = 0
|
let sideMenuCounter = 0
|
||||||
function manageSideMenu() {
|
function manageSideMenu() {
|
||||||
if(checkWindowWidth900() === true && sideMenuCounter === 0){
|
if(window.innerWidth < 1101 && sideMenuCounter === 0){
|
||||||
sideBarContent.style.left = '-100%'
|
sideBar.style.marginLeft = '-100%'
|
||||||
sideMenuCounter = 1
|
sideMenuCounter = 1
|
||||||
} else if(checkWindowWidth900() === true && sideMenuCounter === 1){
|
} else if(window.innerWidth < 1101 && sideMenuCounter === 1){
|
||||||
sideBarContent.style.left = '0%'
|
sideBar.style.marginLeft = '0'
|
||||||
sideMenuCounter = 0
|
sideMenuCounter = 0
|
||||||
} else if(checkWindowWidth900() === false && sideMenuCounter === 0){
|
} else if(window.innerWidth > 1100 && sideMenuCounter === 0){
|
||||||
sideBarContent.style.left = '-100%'
|
sideBar.style.marginLeft = '-100%'
|
||||||
sideMenuCounter = 1
|
sideMenuCounter = 1
|
||||||
} else if(checkWindowWidth900() === false && sideMenuCounter === 1) {
|
} else if(window.innerWidth > 1100 && sideMenuCounter === 1) {
|
||||||
sideBarContent.classList.remove('disable')
|
sideBar.style.marginLeft = '0'
|
||||||
sideBarContent.style.left = '0%'
|
|
||||||
sideMenuCounter = 0
|
sideMenuCounter = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkWindowWidth900() {
|
|
||||||
if(window.innerWidth > 930) return true
|
|
||||||
else return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function manageExtraSearchOptions() {
|
function manageExtraSearchOptions() {
|
||||||
if(extraSearchOptions.classList.contains('disable')) {
|
if(extraSearchOptions.classList.contains('disable')) {
|
||||||
hideSuggestWords()
|
hideSuggestWords()
|
||||||
|
|
@ -134,13 +127,13 @@ function resetExtraSearchOptions() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function sidebarCategorySelect(selectedElement) {
|
function sidebarCategorySelect(selectedElement) {
|
||||||
if(selectedElement.classList.contains('side-menu-active')) return
|
if(selectedElement.classList.contains('active')) return
|
||||||
selectedElement.classList.add('side-menu-active')
|
selectedElement.classList.add('active')
|
||||||
selectedElement.firstElementChild.classList.add('side-menu-active')
|
selectedElement.firstElementChild.classList.add('active')
|
||||||
/* Search news articles */
|
/* Search news articles */
|
||||||
}
|
}
|
||||||
function removeActiveSidebarCategory() {
|
function removeActiveSidebarCategory() {
|
||||||
let oldSelectedElements = document.querySelectorAll('.side-menu-active')
|
let oldSelectedElements = document.querySelectorAll('sidebar-category.active')
|
||||||
for(let i = 0; i < oldSelectedElements.length; i++)
|
for(let i = 0; i < oldSelectedElements.length; i++)
|
||||||
oldSelectedElements[i].classList.remove('side-menu-active')
|
oldSelectedElements[i].classList.remove('active')
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -52,22 +52,24 @@
|
||||||
/** Main Content */
|
/** Main Content */
|
||||||
/** Side Menu */
|
/** Side Menu */
|
||||||
let sideBarContent = document.getElementById('side-bar-content')
|
let sideBarContent = document.getElementById('side-bar-content')
|
||||||
|
let sideBar = document.getElementById('side-bar')
|
||||||
const selectCountryDiv = document.getElementById('select-country')
|
const selectCountryDiv = document.getElementById('select-country')
|
||||||
const listOfCountries = document.getElementById('list-of-countries')
|
const listOfCountries = document.getElementById('list-of-countries')
|
||||||
const selectedCountry = document.getElementById('country-name-side-menu')
|
const selectedCountry = document.getElementById('country-name-side-menu')
|
||||||
const suggestCountryCountainer = document.getElementById('suggest-country')
|
const suggestCountryCountainer = document.getElementById('suggest-country')
|
||||||
const searchCountriesInput = document.getElementById('search-country-input')
|
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 mainAsideContent = document.getElementById('main-side-content-container')
|
||||||
let aboutContentSection = document.getElementById('about-content-section')
|
let aboutContentSection = document.getElementById('about-content-section')
|
||||||
const sideBarAboutContent = document.getElementById('about-sidebar-content')
|
const sideBarAboutContent = document.getElementById('about-sidebar-content')
|
||||||
const mainContentContainer = document.getElementById('main-content-container')
|
const mainContentContainer = document.getElementById('main-content-container')
|
||||||
let mainContentHeader = document.getElementById('main-content-header')
|
let mainContentHeader = document.getElementById('main-content-header')
|
||||||
const showCountriesLink = document.getElementById('show-countries-button')
|
const showCountriesLink = document.getElementById('show-countries-button')
|
||||||
const sclSpan = showCountriesLink.firstElementChild
|
const sclSpan = showCountriesLink.firstElementChild.firstElementChild
|
||||||
const sclStrong = showCountriesLink.lastElementChild
|
const sclStrong = showCountriesLink.firstElementChild.lastElementChild
|
||||||
|
|
||||||
|
const main = document.getElementById('main')
|
||||||
|
|
||||||
const overlay = document.getElementById('overlay')
|
const overlay = document.getElementById('overlay')
|
||||||
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
|
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
|
||||||
let extOptProfile = document.getElementById('profile-extra-options')
|
let extOptProfile = document.getElementById('profile-extra-options')
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||||
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||||
<meta name="google-signin-client_id"
|
<meta name="google-signin-client_id"
|
||||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||||
|
|
||||||
|
|
@ -13,7 +14,7 @@
|
||||||
|
|
||||||
<script src="../JS/variables.js" defer></script>
|
<script src="../JS/variables.js" defer></script>
|
||||||
<script src="../JS/show.js" defer></script>
|
<script src="../JS/show.js" defer></script>
|
||||||
<script src="..JS/diacritics.js" defer></script>
|
<script src="../JS/diacritics.js" defer></script>
|
||||||
<script src="../JS/main.js" defer></script>
|
<script src="../JS/main.js" defer></script>
|
||||||
<script src="../JS/sign.js" defer></script>
|
<script src="../JS/sign.js" defer></script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,84 @@
|
||||||
<aside class="side-bar absolute">
|
<aside class="side-bar absolute grid" id="side-bar">
|
||||||
<div class="side-bar-content grid fixed" id="side-bar-content">
|
<div class="flex">
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('headlines')"><i
|
<div class="side-bar-container" id="side-bar-container">
|
||||||
class="fal fa-newspaper fa-lg"></i>Top Stories</a>
|
<div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('for-you')"><i
|
<div class="side-bar-content" id="side-bar-content">
|
||||||
class="fas fa-user-alt fa-lg"></i>For you</a>
|
<div class="sidebar-category" onclick="createUrlPath('headlines')">
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('following')"><i
|
<div class="icon"><i class="fal fa-newspaper fa-lg"></i></div>
|
||||||
class="fal fa-star fa-lg"></i>Following</a>
|
<div><a href="#">Top Stories</a></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('library')"><i
|
</div>
|
||||||
class="fas fa-bookmark fa-lg"></i>Saved news</a>
|
<div class="sidebar-category" onclick="createUrlPath('for-you')">
|
||||||
<hr>
|
<div class="icon"><i class="fas fa-user-alt fa-lg"></i></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('covid-19')"><i
|
<div><a href="#">For you</a></div>
|
||||||
class="fad fa-shield-cross fa-lg"></i>COVID-19</a>
|
</div>
|
||||||
<hr>
|
<div class="sidebar-category" onclick="createUrlPath('following')">
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('world')"><i
|
<div class="icon"><i class="fal fa-star fa-lg"></i></div>
|
||||||
class="fad fa-globe-europe fa-lg"></i>World</a>
|
<div><a href="#" class="side-menu-categories">Following</a></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('business')"><i
|
</div>
|
||||||
class="fad fa-building fa-lg"></i>Business</a>
|
<div class="sidebar-category" onclick="createUrlPath('library')">
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('technology')"><i
|
<div class="icon"><i class="fas fa-bookmark fa-lg"></i></div>
|
||||||
class="fad fa-microchip fa-lg"></i>Technology</a>
|
<div><a href="#" class="side-menu-categories">Saved news</a></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('entertainment')"><i
|
</div>
|
||||||
class="fas fa-camera-movie" ></i>Entertainment</a>
|
<div class="sidebar-line"><hr></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('sports')"><i
|
<div class="sidebar-category" onclick="createUrlPath('covid-19')">
|
||||||
class="fas fa-tennis-ball fa-lg"></i>Sports</a>
|
<div class="icon"><i class="fad fa-shield-cross fa-lg"></i></div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('health')"><i
|
<div><a href="#" class="side-menu-categories">COVID-19</a></div>
|
||||||
class="fas fa-heartbeat fa-lg"></i>Health</a>
|
</div>
|
||||||
<hr>
|
<div class="sidebar-line"><hr></div>
|
||||||
<div class="language extra-side-menu pointer" id="show-countries-button"
|
<div class="categories">
|
||||||
onclick="showSelectCountry()">
|
<div class="sidebar-category" onclick="createUrlPath('world')">
|
||||||
<span>Language & Region</span>
|
<div class="icon"><i class="fad fa-globe-europe fa-lg"></i></div>
|
||||||
<strong id="country-name-side-menu">United States</strong>
|
<div><a href="#" class="side-menu-categories">World</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category" onclick="createUrlPath('business')">
|
||||||
|
<div class="icon"><i class="fad fa-building fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Business</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category" onclick="createUrlPath('technology')">
|
||||||
|
<div class="icon"><i class="fad fa-microchip fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Technology</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category" onclick="createUrlPath('entertainment')">
|
||||||
|
<div class="icon"><i class="fas fa-camera-movie"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Entertainment</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category" onclick="createUrlPath('sports')">
|
||||||
|
<div class="icon"><i class="fas fa-tennis-ball fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Sports</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category" onclick="createUrlPath('health')">
|
||||||
|
<div class="icon"><i class="fas fa-heartbeat fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Health</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-line"><hr></div>
|
||||||
|
<div class="other">
|
||||||
|
<div class="sidebar-category country" id="show-countries-button" onclick="showSelectCountry()">
|
||||||
|
<div class="sidebar-country-container grid">
|
||||||
|
<span>Language & Region</span>
|
||||||
|
<strong id="country-name-side-menu"><?php echo 'United States' ?></strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category">
|
||||||
|
<div class="text"><a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category">
|
||||||
|
<div class="text"><a href="#" onclick="createUrlPath('settings')">Settings</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category">
|
||||||
|
<div class="text"><a href="#" class="sidebar-help"
|
||||||
|
onclick="createUrlPath('help')">Help</a></div>
|
||||||
|
<div><i class="far fa-external-link-alt fa-sm"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div class="about text"><a href="#" onclick="createUrlPath('about')">About</a></div>
|
||||||
|
<div><span class="flex align-center justify-center" style="color: var(--font-medium);">•</span></div>
|
||||||
|
<div class="text"><a href="https://newsapi.org/" target="_blank" id="news-api-link">News Api</a> </div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a>
|
</div>
|
||||||
<a href="#" onclick="createUrlPath('settings')">Settings</a>
|
</aside>
|
||||||
<a href="#" class="sidebar-help" onclick="createUrlPath('help')">Help<i class="far fa-external-link-alt fa-sm"></i></a>
|
|
||||||
<footer class="grid">
|
|
||||||
<div>
|
|
||||||
<a href="#" onclick="createUrlPath('about')">About</a>
|
|
||||||
<span class="flex align-center justify-center">•</span>
|
|
||||||
<a href="https://newsapi.org/" target="_blank" id="news-api-link">News API</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<div class="side-bar-content about-sidebar-content grid fixed" id="about-sidebar-content">
|
|
||||||
<!-- <a href="#" class="active" onclick="sidebarCategorySelect(this)">About</a>
|
|
||||||
<a href="#" class="" onclick="sidebarCategorySelect(this)">Terms of service</a> -->
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
|
||||||
<meta name="google-signin-client_id"
|
<meta name="google-signin-client_id"
|
||||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||||
<meta name="google-signin-client_id"
|
<meta name="google-signin-client_id"
|
||||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue