davide/purple-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add settings for dynamic social icons

Browse Source 
-Added new social_links setting to allow adding as many custom links as desired including the ability to display as image or fontawesome icon
-Removed old hardcoded settings for twitter, facebook, google+, bitcointalk, github, slack, discord, telegram, reddit, youtube and custom website link
-Added sample external and coingecko images to demonstrate social icons with images
This commit is contained in:
joeuhren
2021-01-02 15:41:42 -07:00
parent 18c536beac
commit 6ce288b892
7 changed files with 63 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+1 -11
View File
@@ -551,17 +551,7 @@ app.set('coin', settings.coin);
app.set('locale', locale);
app.set('display', settings.display);
app.set('markets', settings.markets);
app.set('twitter', settings.twitter);
app.set('facebook', settings.facebook);
app.set('googleplus', settings.googleplus);
app.set('bitcointalk', settings.bitcointalk);
app.set('github', settings.github);
app.set('slack', settings.slack);
app.set('discord', settings.discord);
app.set('telegram', settings.telegram);
app.set('reddit', settings.reddit);
app.set('youtube', settings.youtube);
app.set('website', settings.website);
app.set('social_links', settings.social_links);
app.set('genesis_block', settings.genesis_block);
app.set('index', settings.index);
lib/settings.js
+2 -23
View File
@@ -77,17 +77,6 @@ exports.locale = "locale/en.json",
exports.display = {
"api": true,
"market": true,
"twitter": false,
"facebook": false,
"googleplus": false,
"bitcointalk": false,
"website": false,
"slack": false,
"github": false,
"discord": false,
"telegram": false,
"reddit": false,
"youtube": false,
"search": true,
"richlist": true,
"movement": true,
@@ -184,18 +173,8 @@ exports.markets_page = {
"show_last_updated": true
};
// twitter, facebook, googleplus, bitcointalk, github, slack, discord, telegram, reddit, youtube, website
exports.twitter = "your-twitter-username";
exports.facebook = "your-facebook-username";
exports.googleplus = "your-google-plus-username";
exports.bitcointalk = "your-bitcointalk-topic-value";
exports.github = "your-github-username/your-github-repo";
exports.slack = "your-full-slack-invite-url";
exports.discord = "your-full-discord-invite-url";
exports.telegram = "your-telegram-group-or-channel-name";
exports.reddit = "your-subreddit-name";
exports.youtube = "your-full-youtube-url";
exports.website = "your-full-website-url";
// Add as many custom social links to be displayed in the Explorer footer as desired
exports.social_links = [];
exports.confirmations = 6;
public/css/style.scss
+4 -4
View File
@@ -354,10 +354,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.social-link {
margin-right: 0.2rem;
font-size: 100%;
img {
width: 40px;
margin: 5px 5px;
}
}
}
@@ -688,4 +684,8 @@ tr {
.market-logo {
margin-right: 7px;
}
.vertical-align-middle {
vertical-align: middle !important;
}
public/img/coingecko.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

public/img/external.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

settings.json.template
+47 -23
View File
@@ -101,17 +101,6 @@
"api": true,
"markets": true,
"richlist": true,
"twitter": false,
"facebook": false,
"googleplus": false,
"bitcointalk": false,
"website": false,
"slack": false,
"github": false,
"discord": false,
"telegram": false,
"reddit": false,
"youtube": false,
"search": true,
"movement": true,
"network": true,
@@ -232,18 +221,53 @@
"high_flag": 5000
},
// twitter, facebook, googleplus, bitcointalk, github, slack, discord, telegram, reddit, youtube, website
"twitter": "your-twitter-username",
"facebook": "your-facebook-username",
"googleplus": "your-google-plus-username",
"bitcointalk": "your-bitcointalk-topic-value",
"github": "your-github-username/your-github-repo",
"slack": "your-full-slack-invite-url",
"discord": "your-full-discord-invite-url",
"telegram": "your-telegram-group-or-channel-name",
"reddit": "your-subreddit-name",
"youtube": "your-full-youtube-url",
"website": "your-full-website-url",
// Add as many custom social links to be displayed in the Explorer footer as desired
// For each entry you must fill in the fontawesome_class or image_url to determine the image or icon to show for the url link. It is not necessary to fill in both as only the 1st filled-in value will be used
// A few samples have been provided:
"social_links": [
{
"enabled": true,
"tooltip_text": "Exor Github",
"url": "https://github.com/team-exor",
"fontawesome_class": "fab fa-github",
"image_url": ""
},
{
"enabled": true,
"tooltip_text": "Exor Twitter",
"url": "https://twitter.com/ExorOfficial",
"fontawesome_class": "fab fa-twitter",
"image_url": ""
},
{
"enabled": true,
"tooltip_text": "Exor Discord",
"url": "https://discord.gg/dSuGm3y",
"fontawesome_class": "fab fa-discord",
"image_url": ""
},
{
"enabled": true,
"tooltip_text": "Exor Telegram",
"url": "https://t.me/Exorofficial",
"fontawesome_class": "fab fa-telegram",
"image_url": ""
},
{
"enabled": true,
"tooltip_text": "Exor Website",
"url": "https://exor.io",
"fontawesome_class": "",
"image_url": "/img/external.png"
},
{
"enabled": true,
"tooltip_text": "Exor Coingecko",
"url": "https://www.coingecko.com/en/coins/exor",
"fontawesome_class": "",
"image_url": "/img/coingecko.png"
}
],
//genesis
"genesis_tx": "dd1d332ad2d8d8f49195056d482ae3c96fd2d16e9d166413b27ca7f19775644c",
views/layout.pug
+9 -45
View File
@@ -69,6 +69,7 @@ html(lang='en')
function fixSocialLinkFontSize() {
var fontSize = $('#footer-container').height() * (getSocialLinkHeight() / 100);
$('#footer-container .social-link').css('font-size', fontSize);
$('#footer-container .social-link > img').css('width', fontSize + 'px').css('height', fontSize + 'px');
}
function getSocialLinkHeight() {
var retVal = 70;
@@ -417,52 +418,15 @@ html(lang='en')
block content
div#footer-container(class=footerClasses, role='navigation')
.col-4.navbar-nav
if settings.display.github || settings.display.discord || settings.display.telegram || settings.display.reddit || settings.display.youtube || settings.display.slack || settings.display.twitter || settings.display.facebook || settings.display.googleplus || settings.display.bitcointalk || settings.display.website
ul.nav.justify-content-left
if settings.display.github
ul.nav.justify-content-left
each social in settings.social_links
if social.enabled
li.float-left
a#github-icon.nav-link.social-link.border-0(href="https://github.com/" + settings.github, target='_blank', alt=settings.coin + ' Github', title=settings.coin + ' Github', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-github
if settings.display.discord
li.float-left
a#discord-icon.nav-link.social-link.border-0(href=settings.discord, target='_blank', alt=settings.coin + ' Discord', title=settings.coin + ' Discord', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-discord
if settings.display.telegram
li.float-left
a#telegram-icon.nav-link.social-link.border-0(href="https://t.me/" + settings.telegram, target='_blank', alt=settings.coin + ' Telegram', title=settings.coin + ' Telegram', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-telegram
if settings.display.reddit
li.float-left
a#reddit-icon.nav-link.social-link.border-0(href="https://reddit.com/r/" + settings.reddit, target='_blank', alt=settings.coin + ' Reddit', title=settings.coin + ' Reddit', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-reddit
if settings.display.youtube
li.float-left
a#youtube-icon.nav-link.social-link.border-0(href=settings.youtube, target='_blank', alt=settings.coin + ' YouTube', title=settings.coin + ' YouTube', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-youtube
if settings.display.slack
li.float-left
a#slack-icon.nav-link.social-link.border-0(href=settings.slack, target='_blank', alt=settings.coin + ' Slack', title=settings.coin + ' Slack', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-slack
if settings.display.twitter
li.float-left
a#twitter-icon.nav-link.social-link.border-0(href="https://twitter.com/" + settings.twitter, target='_blank', alt=settings.coin + ' Twitter', title=settings.coin + ' Twitter', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-twitter
if settings.display.facebook
li.float-left
a#facebook-icon.nav-link.social-link.border-0(href="https://www.facebook.com/" + settings.facebook, target='_blank', alt=settings.coin + ' Facebook', title=settings.coin + ' Facebook', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-facebook
if settings.display.googleplus
li.float-left
a#googleplus-icon.nav-link.social-link.border-0(href="https://plus.google.com/" + settings.googleplus, target='_blank', alt=settings.coin + ' Google+', title=settings.coin + ' Google+', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-google-plus
if settings.display.bitcointalk
li.float-left
a#bitcointalk-icon.nav-link.social-link.border-0(href="https://bitcointalk.org/index.php?topic=" + settings.bitcointalk, target='_blank', alt=settings.coin + ' Bitcointalk', title=settings.coin + ' Bitcointalk', data-toggle='tooltip', data-placement='top')
span.glyphicon.fab.fa-btc
if settings.display.website
li.float-left
a#website-icon.nav-link.social-link.border-0(href=settings.website, target='_blank', alt=settings.coin + ' Website', title=settings.coin + ' Website', data-toggle='tooltip', data-placement='top')
span.glyphicon.fa.fa-link
a.nav-link.social-link.border-0(href=social.url, target='_blank', alt=social.tooltip_text, title=social.tooltip_text, data-toggle='tooltip', data-placement='top')
if social.fontawesome_class != null && social.fontawesome_class != ''
span(class='vertical-align-middle ' + social.fontawesome_class)
else
img(class='vertical-align-middle', src=social.image_url)
.col-4.navbar-nav
ul.nav.justify-content-center
li.text-center