Skip to content

Commit

Permalink
Add settings for dynamic social icons
Browse files Browse the repository at this point in the history 
-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
  • Loading branch information
@joeuhren
joeuhren committed Jan 2, 2021
1 parent 18c536b commit 6ce288b
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 106 deletions.
12 changes: 1 addition & 11 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
25 changes: 2 additions & 23 deletions lib/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand Down
8 changes: 4 additions & 4 deletions public/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down Expand Up @@ -688,4 +684,8 @@ tr {

.market-logo {
margin-right: 7px;
}

.vertical-align-middle {
vertical-align: middle !important;
}
Binary file added public/img/coingecko.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/external.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 47 additions & 23 deletions settings.json.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand Down
54 changes: 9 additions & 45 deletions views/layout.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 6ce288b

Please # to comment.