beenull/News-website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated and improved search experience

Browse source
This commit is contained in:
Nik Topler 2020-08-30 22:13:19 +02:00
parent 355377cdb2
commit 3b09bfaecb
7 changed files with 176 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
CSS/*.css
View file

@ -230,7 +230,7 @@ body{
color: var(--blue-light);
}
.green-link{
color: var(--green-light);
color: var(--green-light) !important;
}
.radio-button{
@ -276,8 +276,14 @@ body{
}
.red-color {
color: var(--red-medium);
color: var(--red-medium) !important;
}
.yellow-color{
color: var(--yellow-medium);
color: var(--yellow-medium) !important;
}
.light-green-color {
color: var(--light-green) !important;
}
.blue-color{
color: var(--blue-medium) !important;
}

1
CSS/colors.css
View file

@ -12,6 +12,7 @@
--red-medium: rgb(253,29,29);
--yellow-medium: rgb(255,205,0);
--green-light: rgb(6, 146, 6);
--light-green: rgb(11, 172, 11);
--title: #1f2024;

94
CSS/index.css
View file

@ -533,13 +533,99 @@ body{
.about-container{
grid-column: 1/4;
}
/** Main Section */
/** Main Section */
.main-content-section {
display: grid;
width: 1180px;
min-width: 500px;
height: 100%;
margin-top: 3rem;
/* background-color: rebeccapurple; */
}
.main-content-section.full {
grid-template-columns: 750px 1fr;
grid-template-rows: 6rem auto;
}
.main-content-section.single {
grid-template-columns: 1fr auto 1fr;
}
.main-content-section.single
.main-content-container {
grid-column: 2/3;
min-width: 500px;
width: 750px;
}
h1.search {
font-size: 2.2rem;
margin: auto;
}
#main-content-header.search {
/* background-color: orange; */
height: 6rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-row: 1/2;
grid-column: 1/3;
}
.main-content-container {
grid-column: 1/2;
grid-row: 2/3;
}
#main-content-section.full #main-side-content-container{
grid-row: 2/3;
grid-column: 2/3;
}
#main-content-header.search section {
display: grid;
grid-template-columns: auto auto;
}
#main-content-header.search div {
grid-column: 2/3;
display: flex;
align-items: center;
justify-items: center;
height: 2.8rem;
margin: auto;
}
#main-content-header.search figure {
background-color: var(--bg);
box-shadow: 1px 1px 2px 1px var(--border-medium)
}
#main-content-header.search figure:hover {
cursor: pointer;
/* background-color: var(--hover-light); */
}
#main-content-header.search figure.circle {
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
#main-content-header.search figure.circle i {
display: flex;
align-items:center;
justify-items: center;
font-size: 18px;
}
#main-content-header.search figure.rectangle {
border-radius: 1rem;
padding: 0.6rem 1.2rem;
}
.header-main-content.search figure.rectangle{
color: var(--font-medium);
}
/*
.main-content-section.full {
width: auto;
display: flex;
align-content: center;
justify-items: center;
}
#main-content-container {
width: 750px;
}
.main-content-section figure article:last-child {
margin-bottom: 5rem;
@ -555,7 +641,7 @@ body{
.header-main-content a{
align-items: flex-end;
justify-content: flex-end;
}
} */
#coronavirus-article{
grid-template-columns: 1fr 15px 10px;
}
@ -1127,7 +1213,7 @@ body{
}
/** Responsiveness */
@media screen and (max-width: 930px) {
/* @media screen and (max-width: 930px) {
.navigation-bar{
grid-template-columns: 120px 1fr 85px;
}
@ -1144,5 +1230,5 @@ body{
z-index: 2;
}
}
} */

58
JS/main.js
View file

@ -205,8 +205,8 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
/* HEADLINES */
async function headlines() {
await getWeather()
updateWeather()
// await getWeather()
// updateWeather()
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
}
@ -219,13 +219,17 @@ async function headlines() {
if(mainSearchInput.value.length === 0) return
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value, ' ','+')
if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value,' ','+')
if(window.location.pathname.includes('search')) historyPushState(location.origin + location.pathname, `?q=${searchQuery}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
else createUrlPath('search', searchQuery)
document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1)
}
function search() {
if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines)
searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1)
/* Search news articles */
}
function mobileVersionNavigationBar() {
@ -293,7 +297,10 @@ const regularExpressions = {
query : /[\?|\&]+[q]+[=].*?[&]/g,
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
backgroundColor : /[\&]+[b]+[g]+[=].*/g
}
},
string : {
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
}
}
@ -321,7 +328,10 @@ mainSearchInput.oninput = () => {
}
let place = 0
mainSearchInput.onkeyup = (e) => {
if(e.keyCode === 13) return searchArticles()
if(e.keyCode === 13) {
if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
return searchArticles()
}
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
let suggestDivs = suggestMainInput.querySelectorAll('div')
@ -400,7 +410,11 @@ function selectSuggestedSearchOption(element) {
}
function addCharacterBetweenSpaceInString(word ,replace ,character) { return word.replace(replace, character) }
function addCharacterBetweenSpaceInString(word ,replace ,character) {
word = word.trim().replace(/\s\s+/g, ' ');
if(replace === ' ') return word.replace(/\s/g, character)
else if(replace === '+')return word.replace(/\+/g, character)
}
function updateCountrySelect(country) {
selectedCountry.innerHTML = country
@ -617,6 +631,38 @@ function inputExtraSearchOptionChange() {
}
}
function saveSearchWord(element) {
if(element.firstElementChild.classList.contains('yellow-color')) {
element.firstElementChild.classList.remove('yellow-color', 'fa')
element.firstElementChild.classList.add('fal')
}
else {
element.firstElementChild.classList.add('yellow-color', 'fa')
element.firstElementChild.classList.remove('fal')
}
}
function followSearchWord(element) {
console.log(element)
if(element.firstElementChild.classList.contains('blue-color')) {
element.innerHTML = ' <i class="fa fa-star"></i> Follow'
element.firstElementChild.classList.remove('blue-color')
element.classList.remove('blue-color')
} else {
element.innerHTML = ' <i class="fa fa-star"></i> Following'
element.firstElementChild.classList.add('blue-color')
element.classList.add('blue-color')
}
}
/* API */
// fetchNewsArticles()

2
JS/variables.js
View file

@ -8,7 +8,7 @@
const colors = ['rgb(211, 47, 47)','rgb(123, 31, 162)','rgb(81, 45, 168)','rgb(48, 63, 159)','rgb(25, 118, 210)','rgb(2, 136, 209)','rgb(0, 151, 167)','rgb(0, 121, 107)','rgb(56, 142, 60)','rgb(104, 159, 56)','rgb(175, 180, 43)','rgb(251, 192, 45)','rgb(255, 160, 0)','rgb(245, 124, 0)','rgb(230, 74, 25)','rgb(93, 64, 55)','rgb(97, 97, 97)']
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
const daysAcronyms = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
const websiteURL = 'http://localhost:8080/newsWebiste/'
const websiteURL = 'http://localhost:8080/News-website/'
// const websiteURL = 'https://news.niktopler.com'

17
headlines.php
View file

@ -29,7 +29,7 @@
<?php include 'add-ons/side-bar.php' ?>
<section class="main-content-section grid" id="main-content-section">
<!-- <section class="main-content-section grid" id="main-content-section">
<figure id="main-content-container">
<header id="main-content-header" class="section-main-header header-main-content">
@ -102,22 +102,9 @@
</section>
</footer>
</article>
<!-- <article>
<header>
<h1>Popular news articles</h1>
</header>
<section>
<div></div>
<hr>
<div></div>
<hr>
</section>
</article> -->
</aside>
</section>
</section> -->
</main>

21
search.php
View file

@ -29,6 +29,27 @@
<?php include 'add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<header id="main-content-header" class="header-main-content search">
<h1 class="search">Slovenia</h1>
<section>
<div>
<figure class="circle" onclick="saveSearchWord(this)">
<i class="fal fa-bookmark"></i>
</figure>
<figure class="rectangle" onclick="followSearchWord(this)">
<i class="fa fa-star"></i> Follow
</figure>
</div>
</section>
</header>
<div class="main-content-container">
</div>
<aside id="main-side-content-container">
</aside>
</section>
</main>
<?php include 'add-ons/navigation-bar.php' ?>