diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..afbc1ef Binary files /dev/null and b/.DS_Store differ diff --git a/functionNames.js b/functionNames.js new file mode 100644 index 0000000..d7bed71 --- /dev/null +++ b/functionNames.js @@ -0,0 +1,48 @@ +// adds a listener to the search submit button +function formListener () { + +function articleTemplate(article, articleDomain) { + return + + // takes request body and turns it into html to be appended into 'main' +function createArticles(body) { + +// api request to news api. Returns json and calls createArticles function +function getArticles(page=1, excludedDomainsStr='', filterDomains="") { + +// add a listener to article creating 'click' event that takes user to URL +function clickArticle(articleNode, url) { + +// adds listeners that change the colour of the article the mouse is over +function mouseOverArticle(articleNode) { + + + +// clears existing articles from page in preparation for a new search or new page +function clearArticles() { + +// clears publishers +function clearPublishers() { + +// clears pagination +function clearPagination() { + +function excludeDomain(articleDomain) { + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + +function publisherCount(articles) { +clearPublishers(); + +global + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; +let itemId = 1; diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..1f5edb9 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/blank.gif b/images/blank.gif new file mode 100644 index 0000000..f191b28 Binary files /dev/null and b/images/blank.gif differ diff --git a/images/header-ventoux.jpg b/images/header-ventoux.jpg new file mode 100644 index 0000000..5df7942 Binary files /dev/null and b/images/header-ventoux.jpg differ diff --git a/images/news-etc.png b/images/news-etc.png new file mode 100644 index 0000000..ff9a4a8 Binary files /dev/null and b/images/news-etc.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c29c169 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + + + + Phil's Newsreader. + + + + +
+
+
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+
+ Excluded publishers
Click to re-apply. +
    + +
+
+
+
+ +
+
+
+ +
+ + + +
+ + +
+ + +
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..156dc04 --- /dev/null +++ b/index.js @@ -0,0 +1,230 @@ +let itemId = 1; +let hundredArticles = []; + + +// adds a listener to the search submit button +const formListener = () => { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + search = formInput.value; + page=1; + getArticles(1,excludedDomainsArray); + }); +} + +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + console.log('Function : Fetching Articles (getArticles)'); + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a' + + '&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt&language=en'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + hundredArticles = body.articles; + createArticles(0); + createExcluded(); + publisherCount(body.articles); + addPagination(body.totalResults); + + }) +} + + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (startArticle) => { + console.log('Function : Creating Articles (createArticles)'); + clearDiv('.articles'); + // console.log(hundredArticles); + + twentyArticles = hundredArticles.slice(startArticle,startArticle+20); + itemId = 0; + twentyArticles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + console.log(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + if (!article.urlToImage) { + article.urlToImage="images/blank.gif"; + }; + if (!article.description) { + article.description=" "; + }; + + dateSlicedAndSplit = (article.publishedAt.slice(0,10).split('-')); + + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${dateSlicedAndSplit[2]} - ${dateSlicedAndSplit[1]} - ${dateSlicedAndSplit[0]}
+
` +} + +// add a listener to article creating 'click' event that takes user to URL +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { + window.location = url; + }) +} + + +function excludeDomain(articleDomain) { + event.stopPropagation(); + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + getArticles(1,excludedDomainsArray.toString()); +} + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; + } +} + + + + + + + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearDiv('.pagination__ul'); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {createArticles((pageLinkNode.innerHTML-1)*20)}); + } +} + +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; + const publishersObjects = {}; + const publishersCount = []; + + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + + let topTenPublishers = publishersNames.slice(0,10); + + topTenPublishers.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + }) +} + + +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; +}; + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; + + +getArticles(); +formListener(); + + + + + diff --git a/new.js b/new.js new file mode 100644 index 0000000..f37d4b0 --- /dev/null +++ b/new.js @@ -0,0 +1,220 @@ +let itemId = 1; +let hundredArticles = []; + + +// adds a listener to the search submit button +const formListener = () => { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + search = formInput.value; + page=1; + getArticles(1,excludedDomainsArray); + }); +} + +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + console.log('Function : Fetching Articles (getArticles)'); + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a' + + '&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + hundredArticles = body.articles; + createArticles(0); + createExcluded(); + publisherCount(body.articles); + addPagination(body.totalResults); + + }) +} + + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (startArticle) => { + console.log('Function : Creating Articles (createArticles)'); + clearDiv('.articles'); + // console.log(hundredArticles); + + twentyArticles = hundredArticles.slice(startArticle,startArticle+20); + itemId = 0; + twentyArticles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + console.log(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + console.log(article.urlToImage); + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${article.publishedAt}
+
` +} + +// add a listener to article creating 'click' event that takes user to URL +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { + window.location = url; + }) +} + + +function excludeDomain(articleDomain) { + event.stopPropagation(); + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + getArticles(1,excludedDomainsArray.toString()); +} + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; + } +} + + + + + + + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearDiv('.pagination__ul'); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {createArticles((pageLinkNode.innerHTML-1)*20)}); + } +} + +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; + const publishersObjects = {}; + const publishersCount = []; + + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + + publishersNames.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + }) +} + + +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; +}; + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; + + +getArticles(); +formListener(); + + + + + diff --git a/old.js b/old.js new file mode 100644 index 0000000..d98f2fb --- /dev/null +++ b/old.js @@ -0,0 +1,213 @@ +let itemId = 1; + + +// adds a listener to the search submit button +const formListener = () => { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + search = formInput.value; + page=1; + getArticles(1,excludedDomainsArray); + }); +} + +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + + '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + createArticles(body) + createExcluded();; + publisherCount(body.articles); + addPagination(body.totalResults); + + }) +} + + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (body) => { + clearDiv('.articles'); + twentyArticles = body.articles.slice(0,10); + itemId = 0; + twentyArticles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${article.publishedAt}
+
` +} + +// add a listener to article creating 'click' event that takes user to URL +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { + window.location = url; + }) +} + + +function excludeDomain(articleDomain) { + event.stopPropagation(); + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + getArticles(1,excludedDomainsArray.toString()); +} + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; + } +} + + + + + + + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearDiv('.pagination__ul'); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); + } +} + +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; + const publishersObjects = {}; + const publishersCount = []; + + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + + publishersNames.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + }) +} + + +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; + console.log(`div cleared: ${divClass}`); +}; + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; + + +getArticles(); +formListener(); + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d56ddae --- /dev/null +++ b/style.css @@ -0,0 +1,303 @@ +* { + box-sizing: inherit; +} + +body { + + box-sizing: border-box; + margin: 0; + font-family: Helvetica Neue,Helvetica,Arial,sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + background:#eeeeee; + } + +.app { + display: flex; + flex-direction: column; + flex:10; + background: #eeeeee; +} + +.top { + display:flex; + flex-direction:row; + min-height:60px; + background:#33b5e5; + } + +img { + width:100%; + height:auto; + max-width:300px; + } + +nav { + display:none; +} + +header { + display:flex; + flex-direction:column; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 10px; +} + +.excludedDomainsDiv { + display: flex; + flex-direction:column; + +} + +.excludedDomains { + display:flex; + padding:0; + margin:10px; + align-content:flex-start; +} + +.excludedDomains__li { + display:flex; +} + +main { + display: flex; + flex-direction: column; + margin: 10px 10px 0 10px; + padding: 0; +} + +.articles { + display:flex; + flex:9; + flex-direction:column; + margin:0; +} + +.article { + display: flex; + flex-direction: column; + margin:0; + padding:10px; + margin-bottom:10px; + background:white; +} + +.article__title { + margin-bottom:5px; + font-weight:400; +} + +.article__description { + font-size:0.8em; +} + +.article__meta { + display:flex; + flex-direction: row; + justify-content: space-between; + margin-top:10px; + border-bottom:2px; + font-size:0.8em; +} + +.article__image { + display:none; +} + +.pagination__ul { + flex-direction:row; + flex:1; + margin:0 0 1em 0; + +} + +.pagination__page { + min-width:50px; +} + +input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; + } + + .excludedDomains { + display:flex; + flex-direction: row; + flex-wrap: wrap; + margin:0; + } + .excludedDomains__li { + -moz-box-shadow:inset 0px 39px 0px -24px #fd7627; + -webkit-box-shadow:inset 0px 39px 0px -24px #fd7627; + box-shadow:inset 0px 39px 0px -24px #fd7627; + background-color:#fd7627; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + border:1px solid #ffffff; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:10px; + padding:6px 15px; + margin: 0 5px 5px 0; + text-decoration:none; + text-shadow:0px 1px 0px #b23e35; +} +.excludedDomains__li:hover { + background-color:#72b352; + -moz-box-shadow:inset 0px 39px 0px -24px #72b352; + -webkit-box-shadow:inset 0px 39px 0px -24px #72b352; +} +.excludedDomains__li:active { + position:relative; + top:1px; +} + +.excludeButton { + -moz-box-shadow:inset 0px 39px 0px -24px #ff4444; + -webkit-box-shadow:inset 0px 39px 0px -24px #ff4444; + box-shadow:inset 0px 39px 0px -24px #ff4444; + background-color:#ff4444; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + border:1px solid #ffffff; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:10px; + padding:6px 15px; + margin-top:5px; + text-decoration:none; + text-shadow:0px 1px 0px #b23e35; +} +.excludeButton:hover { + background-color:black; + -moz-box-shadow:inset 0px 39px 0px -24px black; + -webkit-box-shadow:inset 0px 39px 0px -24px black; +} +.excludeButton:active { + position:relative; + top:1px; +} + +p { + margin:0; +} + +.excludedDomainsDiv { + display:flex; + flex-direction: row; +} + + .excludedDomains__message { + display:none; + margin-bottom:10px; + font-size:.7em; + min-width: 150px; + + + } + + .publishers { + display:none; + } + + .pagination__page { + display: inline-block; + padding: 0px 9px; + margin-right: 4px; + border-radius: 3px; + border: solid 1px #c0c0c0; + background: #e9e9e9; + box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1); + font-size: .875em; + font-weight: bold; + text-decoration: none; + color: #717171; + text-shadow: 0px 1px 0px rgba(255,255,255, 1); +} + +.pagination__page:hover, .page.gradient:hover { + background: #fefefe; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); + background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0); +} + +.pagination__page.active { + border: none; + background: #616161; + box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8); + color: #f0f0f0; + text-shadow: 0px 0px 3px rgba(0,0,0, .5); +} + +@media (min-width: 768px) { + .publishers { + display: flex; + flex-direction:column; + padding:10px 10px 10px 10px; + background: white; + margin:0 0 10px 10px; + } + + main { + flex-direction: row-reverse; + } + + .excludedDomainsDiv { + flex-direction:column; + padding:10px 10px 0 10px; + background: white; + margin:0 0 1em 10px; + } + + .sideOrTopBar { + display:flex; + flex-direction:column; + flex:4; + } + + .articles { + display:flex; + flex:8; + flex-direction:column; + } + + .article__image { + display: block; + margin-top:10px; + } + +} + +@media (min-width: 960px) { + + + .articles { + display:flex; + flex:9; + flex-direction:row; + flex-wrap:wrap; + justify-content: space-around; + } + + .article { + width:49%; + margin: 0 0 10px 0; + } + + .article__image { + display: block; + margin-top:10px; + } + +} \ No newline at end of file