using font awesome for icons

This commit is contained in:
Sacha Greif 2015-03-24 13:13:04 +09:00
parent 5e645e11d7
commit 8a8cf53fee
27 changed files with 144 additions and 251 deletions

View file

@ -52,6 +52,7 @@ tsega:bootstrap3-datetimepicker@3.1.3_1
momentjs:moment
aslagle:reactive-table
aramk:tinycolor
fortawesome:fontawesome
# Testing
@ -90,4 +91,3 @@ telescope-subscribe-to-posts
telescope-tagline-banner
# Custom Packages
svg-injector

View file

@ -35,6 +35,7 @@ ejson@1.0.6
email@1.0.6
facebook@1.1.4
fastclick@1.0.3
fortawesome:fontawesome@4.2.0_2
fourseven:scss@1.0.0
geojson-utils@1.0.3
handlebars@1.0.3
@ -110,7 +111,6 @@ spiderable@1.0.7
srp@1.0.3
standard-app-packages@1.0.5
stylus@1.0.7
svg-injector@0.0.1
tap:i18n@1.4.1
telescope-api@0.0.0
telescope-base@0.0.0

View file

@ -88,3 +88,7 @@ UI.registerHelper('displayName', function(userOrUserId) {
return getDisplayName(user);
}
});
UI.registerHelper('icon', function(iconName, iconClass) {
return getIcon(iconName, iconClass);
});

View file

@ -13,14 +13,3 @@ Meteor.startup(function () {
});
// AutoForm.debug();
Template.onRendered(function () {
var $svgs = this.$('img.svg');
if ($svgs.length) {
SVGInjector($svgs, {
each: function (svg) {
$(svg).css('visibility', 'visible');
}
});
}
});

View file

@ -31,9 +31,14 @@
background-color: {{getSetting "buttonColor"}};
color: {{getSetting "buttonTextColor"}};
}
a:hover, .post-content .post-heading .post-title:hover, .post-content .post-upvote .upvote-link i, .comment-actions a i, .comment-actions.upvoted .upvote i, .comment-actions.downvoted .downvote i, .toggle-actions-link, .post-meta a:hover, .action:hover, .post-upvote .upvote-link i{
a:hover, .post-content .post-heading .post-title:hover, .post-content .post-upvote .icon, .comment-actions a i, .comment-actions.upvoted .upvote i, .comment-actions.downvoted .downvote i, .toggle-actions-link, .post-meta a:hover, .action:hover, .post-upvote .upvote-link i, .post-actions .icon, .post-share .icon-share{
color: {{getSetting "buttonColor"}};
}
@media screen and (max-width: 600px) {
.post-discuss .icon, .post-discuss .action-count{
color: {{getSetting "buttonColor"}};
}
}
.post-upvote .upvote-link i{
border-color: {{getSetting "buttonColor"}};
}
@ -44,6 +49,10 @@
/*color: {{getSetting "secondaryColor"}};*/
}
.xyz{
color: {{getSetting "buttonColorHalfOpacity"}};
}
.logo-image a{
max-height:{{getSetting "logoHeight"}}px;
max-width:{{getSetting "logoWidth"}}px;

View file

@ -26,5 +26,8 @@ Template[getTemplate('css')].helpers({
},
headerTextColorHalfOpacity: function () {
return tinycolor(getSetting("headerTextColor")).setAlpha(0.5);
},
buttonColorHalfOpacity: function () {
return tinycolor(getSetting("buttonColor")).setAlpha(0.5);
}
});

View file

@ -50,8 +50,8 @@ dropdownMode (String) [optional]
</ul>
{{/with}}
<a class="show-more" href="#">
<img class="show-more-icon show-more-plus svg svg-buttoncolor" data-src="/img/plus.svg" aria-hidden="true"/>
<img class="show-more-icon show-more-minus svg svg-buttoncolor" data-src="/img/minus.svg" aria-hidden="true"/>
{{{icon "open"}}}
{{{icon "close"}}}
</a>
</div>
</div>

View file

@ -1,5 +1,5 @@
<template name="postActions">
<a class="toggle-actions-link mobile-only" href="#">
<span class="action"></span>
{{{icon "more" "icon-circle"}}}
</a>
</template>

View file

@ -1,6 +1,6 @@
<template name="postDiscuss">
<a class="discuss-link go-to-comments action" href="/posts/{{_id}}" title="{{_ 'discuss'}}">
<i class="action-icon icon-comment" aria-hidden="true"></i>
{{{icon "comment"}}}
<span class="action-count">{{commentCount}}</span>
<span class="sr-only"> {{_ "comments"}}</span>
</a>

View file

@ -1,12 +1,12 @@
<template name="postUpvote">
{{#if upvoted}}
<span class="upvote-link voted action" title="{{_ "upvoted"}}">
<i class="icon-check action-icon" aria-hidden></i>
{{{icon "voted" "icon-circle"}}}
<span class="sr-only">{{_ "upvoted"}}</span>
</span>
{{else}}
<a class="upvote-link not-voted action" href="#" title="{{_ "upvote_"}}">
<i class="icon-up action-icon" aria-hidden="true"></i>
{{{icon "upvote" "icon-circle"}}}
<span class="sr-only">{{_ "upvote_"}}</span>
</a>
{{/if}}

View file

@ -1,13 +0,0 @@
Package.describe({
summary: "SVG Injector package",
version: '0.0.1',
name: "svg-injector"
});
Package.onUse(function (api) {
api.add_files([
"svg-injector.min.js",
], ["client"]);
});

View file

@ -1,9 +0,0 @@
/**
* SVGInjector v1.1.3-RC - Fast, caching, dynamic inline SVG DOM injection library
* https://github.com/iconic/SVGInjector
*
* Copyright (c) 2014 Waybury <hello@waybury.com>
* @license MIT
*/
!function(t,e){"use strict";function r(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var n="file:"===t.location.protocol,i=e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),o=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;n>r;++r)r in this&&t.call(e,this[r],r,this)},a={},l=0,s=[],u=[],c={},f=function(t){return t.cloneNode(!0)},p=function(t,e){u[t]=u[t]||[],u[t].push(e)},d=function(t){for(var e=0,r=u[t].length;r>e;e++)!function(e){setTimeout(function(){u[t][e](f(a[t]))},0)}(e)},v=function(e,r){if(void 0!==a[e])a[e]instanceof SVGSVGElement?r(f(a[e])):p(e,r);else{if(!t.XMLHttpRequest)return r("Browser does not support XMLHttpRequest"),!1;a[e]={},p(e,r);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(4===i.readyState){if(404===i.status||null===i.responseXML)return r("Unable to load SVG file: "+e),n&&r("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),r(),!1;if(!(200===i.status||n&&0===i.status))return r("There was a problem injecting the SVG: "+i.status+" "+i.statusText),!1;if(i.responseXML instanceof Document)a[e]=i.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var t;try{var o=new DOMParser;t=o.parseFromString(i.responseText,"text/xml")}catch(l){t=void 0}if(!t||t.getElementsByTagName("parsererror").length)return r("Unable to parse SVG file: "+e),!1;a[e]=t.documentElement}d(e)}},i.open("GET",e),i.overrideMimeType&&i.overrideMimeType("text/xml"),i.send()}},h=function(e,n,a,u){var f=e.getAttribute("data-src")||e.getAttribute("src");if(!/\.svg/i.test(f))return void u("Attempted to inject a file with a non-svg extension: "+f);if(!i){var p=e.getAttribute("data-fallback")||e.getAttribute("data-png");return void(p?(e.setAttribute("src",p),u(null)):a?(e.setAttribute("src",a+"/"+f.split("/").pop().replace(".svg",".png")),u(null)):u("This browser does not support SVG and no PNG fallback was defined."))}-1===s.indexOf(e)&&(s.push(e),e.setAttribute("src",""),v(f,function(i){if("undefined"==typeof i||"string"==typeof i)return u(i),!1;var a=e.getAttribute("id");a&&i.setAttribute("id",a);var p=e.getAttribute("title");p&&i.setAttribute("title",p);var d=[].concat(i.getAttribute("class")||[],"injected-svg",e.getAttribute("class")||[]).join(" ");i.setAttribute("class",r(d));var v=e.getAttribute("style");v&&i.setAttribute("style",v);var h=[].filter.call(e.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});o.call(h,function(t){t.name&&t.value&&i.setAttribute(t.name,t.value)});for(var g,b=i.querySelectorAll("defs clipPath[id]"),y=0,m=b.length;m>y;y++){g=b[y].id+"-"+l;for(var A=i.querySelectorAll('[clip-path*="'+b[y].id+'"]'),w=0,S=A.length;S>w;w++)A[w].setAttribute("clip-path","url(#"+g+")");b[y].id=g}for(var x,j=i.querySelectorAll("defs mask[id]"),T=0,G=j.length;G>T;T++){x=j[T].id+"-"+l;for(var M=i.querySelectorAll('[mask*="'+j[T].id+'"]'),q=0,V=M.length;V>q;q++)M[q].setAttribute("mask","url(#"+x+")");j[T].id=x}i.removeAttribute("xmlns:a");for(var k,E,O=i.querySelectorAll("script"),L=[],P=0,X=O.length;X>P;P++)E=O[P].getAttribute("type"),E&&"application/ecmascript"!==E&&"application/javascript"!==E||(k=O[P].innerText||O[P].textContent,L.push(k),i.removeChild(O[P]));if(L.length>0&&("always"===n||"once"===n&&!c[f])){for(var F=0,N=L.length;N>F;F++)new Function(L[F])(t);c[f]=!0}var C=i.querySelectorAll("style");o.call(C,function(t){t.textContent+=""}),e.parentNode.replaceChild(i,e),delete s[s.indexOf(e)],e=null,l++,u(i)}))},g=function(t,e,r){e=e||{};var n=e.evalScripts||"always",i=e.pngFallback||!1,a=e.each;if(void 0!==t.length){var l=0;o.call(t,function(e){h(e,n,i,function(e){a&&"function"==typeof a&&a(e),r&&t.length===++l&&r(l)})})}else t?h(t,n,i,function(e){a&&"function"==typeof a&&a(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof module&&"object"==typeof module.exports?module.exports=exports=g:"function"==typeof define&&define.amd?define(function(){return g}):"object"==typeof t&&(t.SVGInjector=g)}(window,document);
//# sourceMappingURL=svg-injector.map.js

View file

@ -353,7 +353,6 @@ userProfileCompleteChecks.push(
// ------------------------------ Dynamic Templates ------------------------------ //
templates = {}
getTemplate = function (name) {

View file

@ -0,0 +1,31 @@
// ------------------------------ Dynamic Icons ------------------------------ //
// take an icon name (such as "open") and return the HTML code to display the icon
getIcon = function (iconName, iconClass) {
var iconCode = !!icons[iconName] ? icons[iconName] : iconName;
var iconClass = (typeof iconClass === 'string') ? ' '+iconClass : '';
return '<i class="icon fa fa-' + iconCode + ' icon-' + iconName + iconClass+ '" aria-hidden></i>';
}
icons = {
open: "plus",
close: "minus",
upvote: "chevron-up",
voted: "check",
downvote: "chevron-down",
facebook: "facebook-square",
twitter: "twitter",
googleplus: "google-plus",
linkedin: "linkedin-square",
comment: "comment-o",
share: "share-square-o",
more: "ellipsis-h",
menu: "bars",
subscribe: "envelope-o",
delete: "trash-o",
edit: "pencil",
popularity: "fire",
time: "clock-o",
best: "star",
search: "search"
}

View file

@ -6,6 +6,7 @@ Package.onUse(function (api) {
api.imply(['aldeed:simple-schema']);
api.add_files(['lib/base.js'], ['client', 'server']);
api.add_files(['lib/icons.js'], ['client', 'server']);
api.add_files(['lib/base_client.js'], ['client']);
api.add_files(['lib/base_server.js'], ['server']);
@ -81,6 +82,9 @@ Package.onUse(function (api) {
'getTemplate',
'templates',
'getIcon',
'icons',
'themeSettings',
'getVotePower'

View file

@ -5,6 +5,8 @@
<img class="post-thumbnail-image" src="{{thumbnailUrl}}" onerror="this.style.display='none';" aria-hidden="true"/>
</a>
</div>
{{else}}
<div class="post-thumbnail-empty"></div>
{{/if}}
{{#if media}}
{{> UI.dynamic template=videoTemplate data=this}}

View file

@ -1,11 +1,11 @@
<template name="postShare">
<a href="#" class="share-link action" title="{{_ 'share'}}">
<i class="action-icon icon-share"></i>
{{{icon "share"}}}
</a>
<div class="share-options hidden">
<a class="mt-facebook mt-share-inline-square-sm" href="https://www.facebook.com/sharer/sharer.php?u={{sourceLink}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/facebook@2x.png"></a>
<a class="mt-twitter mt-share-inline-square-sm" href="//twitter.com/intent/tweet?text={{title}}&url={{sourceLink}}&{{viaTwitter}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/twitter@2x.png"></a>
<a class="mt-linkedin mt-share-inline-square-sm" href="//www.linkedin.com/shareArticle?mini=true&url={{sourceLink}}&amp;summary={{title}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/linkedin@2x.png"></a>
<a class="mt-google mt-share-inline-square-sm" href="https://plus.google.com/share?url={{sourceLink}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/google@2x.png"></a>
<a class="mt-facebook mt-share-inline-square-sm" href="https://www.facebook.com/sharer/sharer.php?u={{sourceLink}}" target="_blank">{{{icon "facebook"}}}</a>
<a class="mt-twitter mt-share-inline-square-sm" href="//twitter.com/intent/tweet?text={{title}}&url={{sourceLink}}&{{viaTwitter}}" target="_blank">{{{icon "twitter"}}}</a>
<a class="mt-linkedin mt-share-inline-square-sm" href="//www.linkedin.com/shareArticle?mini=true&url={{sourceLink}}&amp;summary={{title}}" target="_blank">{{{icon "linkedin"}}}</a>
<a class="mt-google mt-share-inline-square-sm" href="https://plus.google.com/share?url={{sourceLink}}" target="_blank">{{{icon "googleplus"}}}</a>
</div>
</template>

View file

@ -23,10 +23,21 @@ $red: #DD3416;
.post-share{
position: relative;
.icon-share{
&:before{
font-size: 24px;
}
}
}
.share-options {
position: absolute;
z-index: 10000;
background: rgba(0,0,0,0.4);
border-radius: 3px;
.icon{
color: white;
}
@include small {
left: 50% !important;
top: 40px !important;
@ -50,7 +61,7 @@ $red: #DD3416;
pointer-events: none;
left:-160px;
}
&:after, &:before {
&:after{
left: 100%;
border: solid transparent;
content: " ";
@ -60,10 +71,10 @@ $red: #DD3416;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-color: rgba(0, 0, 0, 0);
border-width: 10px;
@include small {
border-bottom-color: #ffffff;
border-bottom-color: rgba(0,0,0,0.4);
top: -20px;
left: 50%;
margin-left: -11px;
@ -74,21 +85,6 @@ $red: #DD3416;
// margin-top: -3px;
// }
}
&:before {
border-color: rgba(0, 0, 0, 0);
border-width: 11px;
@include small {
border-bottom-color: $red;
top: -22px;
left: 50%;
margin-left: -12px;
}
// @include medium-large {
// border-left-color: $red;
// top: 20px;
// margin-top: -4px;
// }
}
.buttons {
@include cf;
padding: 15px 5px 5px 15px;
@ -111,39 +107,22 @@ a.mt-share-inline-square-sm {
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
margin-right: 4px;
}
.mt-google:hover {
background-color: rgb(225, 95, 79);
}
.mt-google {
background-color: rgb(221, 75, 57);
}
.mt-linkedin:hover {
background-color: rgb(16, 135, 192);
}
.mt-linkedin {
background-color: rgb(14, 118, 168);
}
.mt-twitter:hover {
background-color: rgb(8, 187, 255);
}
.mt-twitter {
background-color: rgb(0, 172, 238);
}
.mt-facebook:hover {
background-color: rgb(66, 100, 170);
}
.mt-facebook {
background-color: rgb(59, 89, 152);
}
.mt-pinterest:hover {
background-color: rgb(221, 42, 48);
}
.mt-pinterest {
background-color: rgb(204, 33, 39);
}

View file

@ -0,0 +1,14 @@
.icon-circle{
border-radius: 100%;
border: 1px solid currentColor;
padding: 6px;
line-height: 0;
&:before{
height: 12px;
width: 12px;
text-align: center;
line-height: 12px;
font-size: 10px;
display: inline-block;
}
}

View file

@ -8,6 +8,7 @@
@import "global/forms";
@import "global/links";
@import "global/icons";
@import "global/main";
@import "global/markdown";
@import "global/tables";

View file

@ -98,9 +98,8 @@
padding: 8px 0;
display: none;
text-align: center;
.show-more-icon{
.icon{
display: block;
visibility: hidden; // hide until SVG injection
height: 20px;
width: 20px;
opacity: 0.5;
@ -112,7 +111,7 @@
opacity: 1;
}
}
.show-more-minus{
.icon-close{
display: none;
}
}
@ -120,10 +119,10 @@
display: block; // only show the "show more" button if the dropdown has more than three items
}
&.dropdown-open{
.show-more-minus{
.icon-close{
display: block;
}
.show-more-plus{
.icon-open{
display: none;
}
}

View file

@ -9,6 +9,7 @@ Package.onUse(function (api) {
// global
'lib/client/scss/global/_forms.scss',
'lib/client/scss/global/_links.scss',
'lib/client/scss/global/_icons.scss',
'lib/client/scss/global/_main.scss',
'lib/client/scss/global/_markdown.scss',
'lib/client/scss/global/_tables.scss',

View file

@ -1,40 +0,0 @@
.action {
position: relative;
display: block;
padding: 0;
text-align: center;
color: $light-text;
&.discuss-link {
color: $blue-grey;
}
}
.action-icon {
font-size: 36px;
height: 36px;
display: block;
&:before {
position: relative;
top: -10px;
}
}
.action-label {
font-weight: bold;
display: block;
height: 20px;
line-height: 20px;
bottom: 5px;
left: 0;
font-size: 13px;
color: $light-text;
pointer-events: none;
// color: $red;
}
.action-count {
position: absolute;
top: 4px;
display: block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
}

View file

@ -113,7 +113,6 @@
}
.post-discuss {
order: 7;
padding-top: 6px;
@include small {
display: none;
}
@ -241,54 +240,38 @@
.post-module.post-rank {
margin: 0;
}
.post{
.icon{
}
}
.post-upvote {
@include small{
text-align: center;
}
.upvote-link {
position: relative;
// top: 17px;
// transform: translateY(-50%);
display: block;
text-align: center;
i {
opacity: 0.4;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba($red,
0.3);
font-size: 10px;
width: 24px;
height: 24px;
text-align: center;
// line-height: $grid-unit;
color: rgba($red,
0.8);
text-shadow: 0px 1px 0px white;
line-height: 2.3;
margin: 5px;
.icon-upvote{
&:before {
top: 0px;
top: -1px;
position: relative;
}
&.icon-check {
display: none;
}
}
.action-label {
display: none;
}
&.not-voted:hover {
i{opacity: 1;
i{
// opacity: 1;
text-shadow: none;
}
}
&.voted {
cursor: default;
i.icon-up {
i.icon-upvote {
display: none;
}
i.icon-check {
border: 1px solid rgba($blue, 0.6);
i.icon-voted {
border: 1px solid $lighter-text;
display: inline-block;
color: rgba($blue, 0.8);
opacity: 0.5;
color: $lighter-text;
// opacity: 0.5;
}
}
}
@ -344,30 +327,34 @@
}
}
.post-discuss {
.action-label {
display: none;
.action {
position: relative;
display: block;
padding: 0;
text-align: center;
color: $light-text;
margin-top: -4px;
}
.action-count {
position: absolute;
top: 13px;
display: block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 13px;
}
.icon-comment{
font-size: 30px;
}
}
.post-actions {
display: none;
text-align: right;
a {
display: block;
width: 36px;
height: 36px;
padding: 6px;
span {
display: block;
height: 100%;
width: 100%;
border-radius: 3px;
border: 1px solid rgba($red, 0.3);
color: rgba($red, 0.8);
text-align: center;
line-height: 14px;
font-weight: bold;
font-size: 20px;
}
}
}
.post-share {
@ -546,3 +533,5 @@
.module {
border-radius: 3px;
}

File diff suppressed because one or more lines are too long

View file

@ -3,7 +3,6 @@
@import "partials/colors";
@import "partials/mixins";
@import "partials/typography";
@import "partials/icons";
@import "partials/tooltips";
@import "modules/layout";
@ -15,4 +14,3 @@
@import "modules/dialogs";
@import "modules/user-profile";
@import "modules/errors";
@import "modules/icons";

View file

@ -23,7 +23,6 @@ Package.onUse(function (api) {
'lib/client/scss/modules/_comments.scss',
'lib/client/scss/modules/_dialogs.scss',
'lib/client/scss/modules/_errors.scss',
'lib/client/scss/modules/_icons.scss',
'lib/client/scss/modules/_layout.scss',
'lib/client/scss/modules/_nav.scss',
'lib/client/scss/modules/_posts.scss',
@ -32,7 +31,6 @@ Package.onUse(function (api) {
// partials
'lib/client/scss/partials/_colors.scss',
'lib/client/scss/partials/_grid.scss',
'lib/client/scss/partials/_icons.scss',
'lib/client/scss/partials/_mixins.scss',
'lib/client/scss/partials/_tooltips.scss',
'lib/client/scss/partials/_typography.scss',