deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-05-02 22:53:12 +02:00
Code Issues Projects Releases Wiki Activity

Adding no results text, udpating algolia logo

Browse source
This commit is contained in:
Dave Gandy 2015-09-01 12:07:46 -04:00
parent 0cf1cd3617
commit 3f5869e037
9 changed files with 112 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Gemfile.lock
View file

@ -62,6 +62,3 @@ DEPENDENCIES
safe_yaml (~> 1.0.4)
sass (~> 3.0)
therubyracer
BUNDLED WITH
1.10.6

2
src/_includes/navbar.html
View file

@ -19,7 +19,7 @@
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fae fae-logo"></i></a>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-logo"></i></a>
</div>
<div class="navbar-collapse collapse">

128
src/assets/js/site.js
View file

@ -1,64 +1,76 @@
$(function () {
$("#newsletter").validate();
$("#newsletter").validate();
var ads = [
{
quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
var ads = [
{
quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
btn_text: "Gimme Some!"
},
{
quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
},
{
quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
}
];
selectFonticonsAd();
// start the icon carousel
$('#icon-carousel').carousel({
interval: 5000
});
$('[data-toggle="popover"]').popover();
function selectFonticonsAd() {
random_number = Math.floor(Math.random() * ads.length);
random_ad = ads[random_number];
$('#banner').addClass(random_ad.class);
$('#rotating-message').html(random_ad.quote);
$('#rotating-url').attr("href", random_ad.url);
$('#rotating-url').html(random_ad.btn_text);
$('#banner').collapse('show');
{
quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
},
{
quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
},
{
quote: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
},
{
quote: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update",
btn_text: "Check it Out!"
}
];
selectFonticonsAd();
// start the icon carousel
$('#icon-carousel').carousel({
interval: 5000
});
$('[data-toggle="popover"]').popover();
function selectFonticonsAd() {
random_number = Math.floor(Math.random() * ads.length);
random_ad = ads[random_number];
$('#banner').addClass(random_ad.class);
$('#rotating-message').html(random_ad.quote);
$('#rotating-url').attr("href", random_ad.url);
$('#rotating-url').html(random_ad.btn_text);
$('#banner').collapse('show');
}
});

2
src/assets/less/site.less
View file

@ -8,6 +8,7 @@
@import "site/bootstrap/jumbotron";
@import "site/bootstrap/wells";
@import "site/bootstrap/type";
@import "site/bootstrap/alerts";
@import "site/bootstrap/modals";
@import "site/layout";
@ -25,6 +26,7 @@
@import "site/fusion-ad";
@import "site/bsap-ad";
@import "site/sumome";
@import "site/algolia";
@import "site/responsive/screen-lg";
@import "site/responsive/screen-md";

11
src/assets/less/site/algolia.less Normal file
View file

@ -0,0 +1,11 @@
.algolia {
text-align: center;
a {
color: @text-color;
&:hover { color: @link-hover-color; }
}
.fas-algolia {
font-size: 32px;
vertical-align: middle;
}
}

1
src/assets/less/site/bootstrap/alerts.less Normal file
View file

@ -0,0 +1 @@
.alert-link { text-decoration: underline; }

4
src/assets/less/site/bootstrap/variables.less
View file

@ -107,6 +107,10 @@
@state-info-bg: @blue-lighter;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-danger-text: @brand-danger;
@state-danger-bg: mix(@state-danger-text,#fff,10%);
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Carousel
@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25);

2
src/assets/less/site/search.less
View file

@ -7,7 +7,7 @@
label {
position: absolute;
left: 17px;
top: 50px;
top: 51px;
}
#search-input, .hint {

30
src/icons.html
View file

@ -22,16 +22,16 @@ relative_path: ../
{% include stripe-ad.html %}
<div class="row">
<div class="col-md-10">
<div class="col-md-10 col-sm-9">
<section id="search">
<label for="search-input"><i class="fa fa-search"></i></label>
<input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
<a id="search-clear" href="#" class="fa fa-times hide"></a>
</section>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-3 hidden-xs">
<div class="algolia">
by <a href="https://www.algolia.com"><img src="{{ page.relative_path }}assets/img/algolia.png" width=100" height="32"></a>
by <a href="https://algolia.com"><i class="fas fas-algolia"></i></a>
</div>
</div>
</div>
@ -68,11 +68,25 @@ relative_path: ../
<% }); %>
</div>
<% } else { %>
<div class="alert alert-warning" role="alert">
<strong>Oops!</strong> No icons were found that matched your query. Have no fear you may still be
able to find that perfect icon. <a class="alert-link" href="https://www.fonticons.com">Check out
our latest project, Fonticons.</a> We have multiple icon sets and even have the ablility to
commission an icon to be made!
<div class="alert alert-danger text-lg" role="alert">
<h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o"></i> Oops! No icons matched your query.</h3>
A few things that might help:
<ol>
<li>
Use <a class="alert-link" href="https://fonticons.com">Fonticons</a> (our latest project) to add your
own icons and take your icon game to the next level!
</li>
<li>
Really, really want to see an icon in Font Awesome?
<a class="alert-link" href="mailto:dave@fonticons.com">Drop me an email</a> to commission the icons you need!
</li>
<li>
Are we missing something in our search results?
<a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues/new">Open an issue on GitHub!</a>
(Make sure to <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues">search existing
issues first</a>.)
</li>
</ol>
</div>
<% } %>
</script>