devol
/
migliori-alternative
mirror of https://github.com/nileshtrivedi/better
1
0
Fork 0
Code Issues Releases Wiki Activity

Better UI for the scrolling layout

This commit is contained in:
Anirudh Varma 2020-09-12 16:43:25 +05:30
parent 121b89c6c4
commit 6fc71f03fc
1 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
contentscript.js
View File

@ -18,12 +18,14 @@ const fillTemplate = function(templateString, templateVars){
return new Function("return `"+templateString +"`;").call(safeTemplateVars); return new Function("return `"+templateString +"`;").call(safeTemplateVars);
} }
const altTemplate = "\ const altTemplate =
<a href='${this.url}' target='_blank' \ "\
style='display: block; border: 2px solid #222222; border-radius: 4px; margin-top: 12px; color:#222222; padding: 8px;'> \ <a href='${this.url}' target='_blank'> \
<p style='margin: 0; font-size: 14px; font-weight: bold;'>${this.name} &rarr;</p> \ <p style='margin: 0; font-size: 14px; font-weight: bold;'>${this.name} &rarr;</p> \
<p style='margin: 0; font-size: 12px;'>${this.desc}</p> \ <p style='margin: 0; font-size: 12px;'>${this.desc}</p> \
</a>" </a>";
const CONTAINER_PADDING = "12px";
const CONTAINER_STYLES = ` const CONTAINER_STYLES = `
.better-ext-container * { .better-ext-container * {
@ -44,10 +46,33 @@ const CONTAINER_STYLES = `
right: 10px; right: 10px;
width: 300px; width: 300px;
box-shadow: 0px 10px 30px #222222; box-shadow: 0px 10px 30px #222222;
padding: 12px; padding: ${CONTAINER_PADDING};
text-align: center; text-align: center;
z-index: 20000; z-index: 20000;
} }
.better-ext-container .better-ext-alt-container {
margin-left: -${CONTAINER_PADDING};
margin-right: -${CONTAINER_PADDING};
padding: 0 ${CONTAINER_PADDING};
margin-top: 4px;
max-height: 300px;
overflow: scroll;
background-color: #FEEBC8;
}
.better-ext-alt-container>a{
display: block;
border: 2px solid #222222;
border-radius: 4px;
margin-top: ${CONTAINER_PADDING};
color:#222222;
padding: 8px;
}
.better-ext-alt-container>a:last-child {
margin-bottom: ${CONTAINER_PADDING};
}
`; `;
function addPagePopupStyles() { function addPagePopupStyles() {
@ -57,19 +82,19 @@ function addPagePopupStyles() {
} }
function createNonRecommendedAlts(alternatives) { function createNonRecommendedAlts(alternatives) {
let nonRecommendedAlts = document.createElement("div"); let nonRecommendedAlts = document.createElement("div");
nonRecommendedAlts.setAttribute("style", "text-align: left;"); nonRecommendedAlts.setAttribute("style", "text-align: left;");
let alternativesHeading = document.createElement("p"); let alternativesHeading = document.createElement("p");
alternativesHeading.setAttribute("style", "font-size: 12px; text-align: center; margin: 4px 0;"); alternativesHeading.setAttribute("style", "font-size: 12px; text-align: center; margin: 4px 0;");
alternativesHeading.innerText = "MORE ALTERNATIVES"; alternativesHeading.innerText = "MORE ALTERNATIVES";
nonRecommendedAlts.appendChild(alternativesHeading); nonRecommendedAlts.appendChild(alternativesHeading);
let scrollableAltContainer = document.createElement("div"); let scrollableAltContainer = document.createElement("div");
scrollableAltContainer.setAttribute("style", "max-height: 300px; overflow: scroll"); scrollableAltContainer.classList.add("better-ext-alt-container");
alternatives.map((alternative) => { alternatives.map((alternative) => {
scrollableAltContainer.innerHTML += fillTemplate(altTemplate, alternative); scrollableAltContainer.innerHTML += fillTemplate(altTemplate, alternative);
}); });
nonRecommendedAlts.appendChild(scrollableAltContainer); nonRecommendedAlts.appendChild(scrollableAltContainer);
return nonRecommendedAlts; return nonRecommendedAlts;
} }
function createRecommendedAlt(recommendedAlternative) { function createRecommendedAlt(recommendedAlternative) {