made logo image a setting

This commit is contained in:
Sacha Greif 2012-09-29 12:28:51 +09:00
parent 7d4a3f7cb9
commit bb6dddd896
8 changed files with 119 additions and 72 deletions

View file

@ -108,30 +108,29 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
/*================ MIXINS =================*/ /*================ MIXINS =================*/
/* line 1, ../sass/partials/_main.scss */ /* line 1, ../sass/partials/_main.scss */
body { body {
background: #e9f3f7; background: #e0f1f7;
background: #edf5f8;
min-height: 1500px; } min-height: 1500px; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
/* line 8, ../sass/partials/_main.scss */ /* line 6, ../sass/partials/_main.scss */
body { body {
background-size: 10px 10px; } } background-size: 10px 10px; } }
/* line 13, ../sass/partials/_main.scss */ /* line 11, ../sass/partials/_main.scss */
#spinner { #spinner {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: fixed; position: fixed;
z-index: 1000; } z-index: 1000; }
/* line 19, ../sass/partials/_main.scss */ /* line 17, ../sass/partials/_main.scss */
.debug { .debug {
display: none; } display: none; }
/* line 22, ../sass/partials/_main.scss */ /* line 20, ../sass/partials/_main.scss */
.hidden { .hidden {
display: none; } display: none; }
/* line 25, ../sass/partials/_main.scss */ /* line 23, ../sass/partials/_main.scss */
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@ -140,11 +139,11 @@ body {
width: 100%; width: 100%;
z-index: 50; } z-index: 50; }
/* line 33, ../sass/partials/_main.scss */ /* line 31, ../sass/partials/_main.scss */
.footer { .footer {
text-align: center; } text-align: center; }
/* line 36, ../sass/partials/_main.scss */ /* line 34, ../sass/partials/_main.scss */
#tlkio { #tlkio {
position: fixed; position: fixed;
top: 0px; top: 0px;
@ -156,13 +155,13 @@ body {
transition: ease-out right 300ms 0ms; transition: ease-out right 300ms 0ms;
z-index: 1000; z-index: 1000;
background: #333; } background: #333; }
/* line 43, ../sass/partials/_main.scss */ /* line 41, ../sass/partials/_main.scss */
#tlkio.open { #tlkio.open {
right: 0px; right: 0px;
-webkit-box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15);
box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15); } box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.15); }
/* line 47, ../sass/partials/_main.scss */ /* line 45, ../sass/partials/_main.scss */
#tlkio .open-chat { #tlkio .open-chat {
display: block; display: block;
background: #7ac0e4; background: #7ac0e4;
@ -481,53 +480,57 @@ body.pageslide-open {
margin-left: 20px; } margin-left: 20px; }
/* line 38, ../sass/modules/_header.scss */ /* line 38, ../sass/modules/_header.scss */
.header .logo { .header .logo {
text-align: center;
position: absolute; position: absolute;
top: 17px; top: 10px;
left: 50%; width: 100%;
margin-left: -75px; color: white;
width: 150px; font-size: 30px; }
height: 31px; } /* line 45, ../sass/modules/_header.scss */
/* line 49, ../sass/modules/_header.scss */ .header .logo a, .header .logo a:visited {
.header .logo a { color: white; }
display: block; /* line 48, ../sass/modules/_header.scss */
height: 100%; .header .logo.image {
width: 100%; position: absolute;
background-position: center center; left: 50%; }
background-image: url("/img/telescope-logo2.png"); /* line 51, ../sass/modules/_header.scss */
background-size: 156px 39px; .header .logo.image a {
background-size: 150px 31px; display: block;
font: 0/0 a; height: 100%;
text-shadow: none; width: 100%;
color: transparent; } background: no-repeat center center;
/* line 67, ../sass/modules/_header.scss */ font: 0/0 a;
text-shadow: none;
color: transparent; }
/* line 62, ../sass/modules/_header.scss */
.header .user-nav { .header .user-nav {
float: right; float: right;
margin-right: 10px; } margin-right: 10px; }
/* line 87, ../sass/modules/_header.scss */ /* line 82, ../sass/modules/_header.scss */
.auth-buttons { .auth-buttons {
float: right; float: right;
margin: 20px 10px 0 0; } margin: 20px 10px 0 0; }
/* line 90, ../sass/modules/_header.scss */ /* line 85, ../sass/modules/_header.scss */
.auth-buttons #login-buttons { .auth-buttons #login-buttons {
position: relative; position: relative;
line-height: 26px; } line-height: 26px; }
/* line 96, ../sass/modules/_header.scss */ /* line 91, ../sass/modules/_header.scss */
.auth-buttons #login-buttons a { .auth-buttons #login-buttons a {
text-decoration: none; text-decoration: none;
color: #4a4444; } color: #4a4444; }
/* line 100, ../sass/modules/_header.scss */ /* line 95, ../sass/modules/_header.scss */
.auth-buttons #login-buttons a.login-link-text { .auth-buttons #login-buttons a.login-link-text {
color: #fff; color: #fff;
font-weight: normal; font-weight: normal;
display: inline-block; display: inline-block;
height: 26px; height: 26px;
font-size: 0; } font-size: 0; }
/* line 106, ../sass/modules/_header.scss */ /* line 101, ../sass/modules/_header.scss */
.auth-buttons #login-buttons a.login-link-text:after { .auth-buttons #login-buttons a.login-link-text:after {
content: "Sign Up/Sign In"; content: "Sign Up/Sign In";
font-size: 16px; } font-size: 16px; }
/* line 111, ../sass/modules/_header.scss */ /* line 106, ../sass/modules/_header.scss */
.auth-buttons #login-buttons #login-buttons-password { .auth-buttons #login-buttons #login-buttons-password {
float: none !important; float: none !important;
text-shadow: none; text-shadow: none;
@ -535,18 +538,18 @@ body.pageslide-open {
line-height: 1.5; line-height: 1.5;
height: 26px; height: 26px;
margin: 10px 0 !important; } margin: 10px 0 !important; }
/* line 120, ../sass/modules/_header.scss */ /* line 115, ../sass/modules/_header.scss */
.auth-buttons #login-buttons .login-header { .auth-buttons #login-buttons .login-header {
font-family: inherit; font-family: inherit;
height: 26px; height: 26px;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
color: white; } color: white; }
/* line 126, ../sass/modules/_header.scss */ /* line 121, ../sass/modules/_header.scss */
.auth-buttons #login-buttons .login-header:before { .auth-buttons #login-buttons .login-header:before {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
content: "Welcome, "; } content: "Welcome, "; }
/* line 131, ../sass/modules/_header.scss */ /* line 126, ../sass/modules/_header.scss */
.auth-buttons #login-buttons #login-buttons-logout { .auth-buttons #login-buttons #login-buttons-logout {
color: white; color: white;
background: none; background: none;

View file

@ -36,32 +36,27 @@
margin-left:20px; margin-left:20px;
} }
.logo{ .logo{
text-align:center;
position:absolute; position:absolute;
top:17px; top:10px;
left:50%; width:100%;
margin-left:-75px; color:white;
// width:130px; font-size:30px;
// height:26px; a, a:visited{
// width:124px; color:white;
// height:37px; }
width:150px; &.image{
height:31px; position:absolute;
a{ left:50%;
display:block; a{
height:100%; display:block;
width:100%; height:100%;
// margin:0 auto; width:100%;
background-position:center center; background: no-repeat center center;
// background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTMzLjMzMnB4IiBoZWlnaHQ9IjI1LjkwM3B4IiB2aWV3Qm94PSIwIDAgMTMzLjMzMiAyNS45MDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzMy4zMzIgMjUuOTAzIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMy44NCwyMi4zMjdIOC43MjZWNi45ODRINC40OTlWMi42NTJoMTMuNTY5djQuMzMySDEzLjg0VjIyLjMyN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIuNDE4LDEwLjI0NlYyLjY1Mmg1LjExNHYxOS42NzRoLTUuMTE0di04LjA2M2gtNy4zODR2OC4wNjNoLTUuMTE1VjIuNjUyaDUuMTE1djcuNTkzSDMyLjQxOHoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDUuOTg3LDYuOTg0djMuMjg4aDUuNzY3djQuMzMyaC01Ljc2N3YzLjM5Mmg2LjA4djQuMzMySDQwLjg3M1YyLjY1MmgxMS4xOTR2NC4zMzJINDUuOTg3eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04My43OTYsMTEuMzQxYy0wLjA1MiwyLjg3MS0wLjI2MSw1LjMyMy0yLjAwOSw3Ljc3NmMtMS45MzEsMi42ODgtNC44MjgsMy44NjItOC4xMTUsMy44NjINCgkJYy02LjE4NCwwLTEwLjQ5LTQuMjAyLTEwLjQ5LTEwLjM4NkM2My4xODIsNi4yMDEsNjcuNTE0LDIsNzMuODU0LDJjNC4wNDQsMCw3LjE3NiwxLjgyNyw4Ljg3Miw1LjUwNmwtNC44NTMsMi4wMzUNCgkJQzc3LjE2OCw3LjY2Miw3NS42ODEsNi40MSw3My42Miw2LjQxYy0zLjM2NiwwLTUuMTE0LDMuMjA5LTUuMTE0LDYuMjFjMCwzLjA1MywxLjgyNyw2LjE1OCw1LjE5Miw2LjE1OA0KCQljMi4yMTgsMCwzLjkxNS0xLjE0OCw0LjEyMy0zLjQxOGgtNC4xNzV2LTQuMDE5SDgzLjc5NnoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTAyLjUwNSwyMi4zMjdoLTYuMzY3bC00LjgyNy03LjU2N2gtMC4wNTJ2Ny41NjdoLTUuMTE0VjIuNjUyaDcuNjQ2YzMuODg4LDAsNi44MzYsMS44NTMsNi44MzYsNi4wNTQNCgkJYzAsMi43MTMtMS41MTQsNS4wNjItNC4zMDYsNS41NThMMTAyLjUwNSwyMi4zMjd6IE05MS4yNTksMTEuNDcyaDAuNDk2YzEuNjcsMCwzLjU0OC0wLjMxMywzLjU0OC0yLjQ1M3MtMS44NzgtMi40NTMtMy41NDgtMi40NTMNCgkJaC0wLjQ5NlYxMS40NzJ6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwOS4wMDIsMjIuMzI3aC01LjExNFYyLjY1Mmg1LjExNFYyMi4zMjd6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTExMi4zNDIsMi42NTJoNy4yNTRjNS40NzksMCw5Ljk5NCw0LjMwNSw5Ljk5NCw5LjgzN2MwLDUuNTMyLTQuNTQsOS44MzctOS45OTQsOS44MzdoLTcuMjU0VjIuNjUyeg0KCQkgTTExNy40NTYsMTcuOTk1aDEuMTQ4YzMuMDUzLDAsNS42NjMtMS42Nyw1LjY2My01LjUwNWMwLTMuNTIzLTIuMzIzLTUuNTA2LTUuNjEtNS41MDZoLTEuMjAxVjE3Ljk5NXoiLz4NCjwvZz4NCjwvc3ZnPg0K); font: 0/0 a;
// background-image: url('/img/thegrid.svg'); text-shadow: none;
// background-image: url('/img/logo.png'); color: transparent;
// background-image: url('/img/telescope-logo@2x.png'); }
background-image: url('/img/telescope-logo2.png');
background-size: 156px 39px;
background-size:150px 31px;
font: 0/0 a;
text-shadow: none;
color: transparent;
} }
} }
.user-nav{ .user-nav{

View file

@ -1,7 +1,5 @@
body{ body{
// background:#e9f3f7 url("/img/bg.png") top center; background:#e0f1f7;
background:#e9f3f7;
background:#edf5f8;
min-height:1500px; min-height:1500px;
} }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){ @media only screen and (-webkit-min-device-pixel-ratio: 1.5){

View file

@ -145,11 +145,9 @@ Template.comment_item.rendered=function(){
var comment_link='<li class="icon-user"><a href="#'+comment._id+'" class="has-tooltip" style="background-image:url('+imgURL+')"><span class="tooltip"><span>'+author+'</span></span></a></li>'; var comment_link='<li class="icon-user"><a href="#'+comment._id+'" class="has-tooltip" style="background-image:url('+imgURL+')"><span class="tooltip"><span>'+author+'</span></span></a></li>';
if(this.firstRender){ if(this.firstRender){
// TODO: fix re-rendering problem with timer // TODO: fix re-rendering problem with timer
console.log("first render");
$(comment_link).appendTo($container.find("ul")).hide().fadeIn("slow"); $(comment_link).appendTo($container.find("ul")).hide().fadeIn("slow");
this.firstRender=false; this.firstRender=false;
}else{ }else{
console.log("not first render");
$(comment_link).appendTo($container.find("ul")); $(comment_link).appendTo($container.find("ul"));
} }
$comment.removeClass("comment-displayed").addClass("comment-queued"); $comment.removeClass("comment-displayed").addClass("comment-queued");

View file

@ -15,7 +15,13 @@
</ul> </ul>
</div> </div>
<header class="header grid"> <header class="header grid">
<h1 class="logo"><a href="/">{{site_title}}</a></h1> {{#if logo_url}}
<h1 class="logo image" style="height:{{logo_height}}px; width:{{logo_width}}px; top:{{logo_top}}px; margin-left:{{logo_offset}}px;">
<a href="/" style="background-image:url({{logo_url}}); background-size:{{logo_width}}px {{logo_height}}px;">{{site_title}}</a>
</h1>
{{else}}
<h1 class="logo"><a href="/">{{site_title}}</a></h1>
{{/if}}
<a id="mobile-menu" href="#menu" class="mobile mobile-button menu"><i class="icon-menu"></i><span>Menu</span></a> <a id="mobile-menu" href="#menu" class="mobile mobile-button menu"><i class="icon-menu"></i><span>Menu</span></a>
<!-- <a href="/submit" class="mobile mobile-button submit"><i class="icon-plus"></i><span>Submit</span></a> --> <!-- <a href="/submit" class="mobile mobile-button submit"><i class="icon-plus"></i><span>Submit</span></a> -->
<ul class="nav site-nav desktop"> <ul class="nav site-nav desktop">

View file

@ -15,4 +15,30 @@ Template.nav.events = {
e.preventDefault(); e.preventDefault();
Router.navigate('account', {trigger:true}); Router.navigate('account', {trigger:true});
} }
}; };
Template.nav.helpers({
site_title: function(){
return getSetting('title');
}
,logo_url: function(){
return getSetting('logoUrl');
}
,logo_height: function(){
return getSetting('logoHeight');
}
,logo_width: function(){
return getSetting('logoWidth');
}
,logo_top: function(){
return Math.floor((70-getSetting('logoHeight'))/2);
}
,logo_offset: function(){
return -Math.floor(getSetting('logoWidth')/2);
}
});

View file

@ -41,6 +41,18 @@
<label><a href="http://proxino.com" target="_blank">Proxino</a> key</label> <label><a href="http://proxino.com" target="_blank">Proxino</a> key</label>
<div class="controls"><input id="proxino_key" name="proxino_key" type="text" value="{{proxinoKey}}" /></div> <div class="controls"><input id="proxino_key" name="proxino_key" type="text" value="{{proxinoKey}}" /></div>
</div> </div>
<div class="control-group">
<label>Logo URL</label>
<div class="controls"><input id="logo_url" name="logo_url" type="text" value="{{logoUrl}}" /></div>
</div>
<div class="control-group">
<label>Logo Height</label>
<div class="controls"><input id="logo_height" name="logo_height" type="text" value="{{logoHeight}}" /></div>
</div>
<div class="control-group">
<label>Logo Width</label>
<div class="controls"><input id="logo_width" name="logo_width" type="text" value="{{logoWidth}}" /></div>
</div>
<div class="form-actions"> <div class="form-actions">
<input type="submit" class="button" value="Submit" /> <input type="submit" class="button" value="Submit" />
</div> </div>

View file

@ -9,6 +9,9 @@ Template.settings.events = {
var tlkioChannel = $('#tlkio_channel').val(); var tlkioChannel = $('#tlkio_channel').val();
var mixpanelId= $('#mixpanel_id').val(); var mixpanelId= $('#mixpanel_id').val();
var proxinoKey=$('#proxino_key').val(); var proxinoKey=$('#proxino_key').val();
var logoUrl=$('#logo_url').val();
var logoHeight=$('#logo_height').val();
var logoWidth=$('#logo_width').val();
var prevSetting=Settings.find().fetch()[0]; var prevSetting=Settings.find().fetch()[0];
if(prevSetting){ if(prevSetting){
@ -20,7 +23,10 @@ Template.settings.events = {
analyticsCode: analyticsCode, analyticsCode: analyticsCode,
tlkioChannel: tlkioChannel, tlkioChannel: tlkioChannel,
mixpanelId: mixpanelId, mixpanelId: mixpanelId,
proxinoKey: proxinoKey proxinoKey: proxinoKey,
logoUrl: logoUrl,
logoHeight: logoHeight,
logoWidth: logoWidth
} }
}, function(){ }, function(){
throwError("Settings have been updated"); throwError("Settings have been updated");
@ -33,7 +39,10 @@ Template.settings.events = {
analyticsCode: analyticsCode, analyticsCode: analyticsCode,
tlkioChannel: tlkioChannel, tlkioChannel: tlkioChannel,
mixpanelId: mixpanelId, mixpanelId: mixpanelId,
proxinoKey: proxinoKey proxinoKey: proxinoKey,
logoUrl: logoUrl,
logoHeight: logoHeight,
logoWidth: logoWidth
}, function(){ }, function(){
throwError("Settings have been created"); throwError("Settings have been created");
}); });