added gritter buy notification, buy delay and fixed styles for search and buy

master
Konrad Mohrfeldt 13 years ago
parent 61c344f936
commit 265d286dcf

@ -9,7 +9,7 @@
<a href="/store/show/{{ buyable.id }}"><img src="{% thumbnail buyable.image 64x64 %}"/></a>
</td>
<td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td>
<td class="actions">
<td class="actions" data-image="{% thumbnail buyable.image 48x48 %}" data-name="{{ buyable.name }}" data-id="{{ buyable.id }}">
{% if buyable.hasDeposit %}
<a class="button buy" href="/store/buy/{{ buyable.id }}"
title="Kaufen (Ohne Pfand)">

@ -14,7 +14,7 @@
<h2>{{ item.name }}</h2>
<h3>Kaufen</h3>
<div class="actions clearAfter">
<div class="actions clearAfter" data-image="{% thumbnail item.image 48x48 %}" data-name="{{ item.name }}" data-id="{{ item.id }}">
<a class="button buy" href="/store/buy/{{ item.id }}/">
<span><span>{{ item.price|floatformat:2 }}€</span></span>
</a>

@ -11,6 +11,7 @@
<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery-1.5.1.js"></script>
<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery-ui-1.8.10.custom.min.js"></script>
<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery.ui.autocomplete.html.js"></script>
<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery.gritter.min.js"></script>
<script type='text/javascript' src="{{ MEDIA_URL }}js/k4ever.js"></script>
{% block extrahead %}{% endblock %}
<title>Freitagsrundenkasse{% block "title" %}{% endblock %}</title>

@ -9,7 +9,7 @@
<a href="/store/show/{{ buyable.buyable__id }}"><img src="{% thumbnail buyable.buyable__image 64x64 %}" /></a>
</td>
<td class="name"><span>{{ buyable.buyable__name }}</span> {% if buyable.num_buys %}({{ buyable.num_buys }} mal gekauft){% endif %}</td>
<td class="actions">
<td class="actions" data-image="{% thumbnail buyable.buyable__image 48x48 %}" data-name="{{ buyable.buyable__name }}" data-id="{{ buyable.buyable__id }}">
{% if buyable.buyable__deposit > 0 %}
<a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
<a class="button buy inclDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€ / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

@ -0,0 +1,89 @@
/* the norm */
#gritter-notice-wrapper {
position:fixed;
top:20px;
right:20px;
width:301px;
z-index:9999;
}
#gritter-notice-wrapper.top-left {
left: 20px;
right: auto;
}
#gritter-notice-wrapper.bottom-right {
top: auto;
left: auto;
bottom: 20px;
right: 20px;
}
#gritter-notice-wrapper.bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
}
.gritter-item-wrapper {
position:relative;
margin:0 0 10px 0;
background:url('img/ie-spacer.gif'); /* ie7/8 fix */
}
.gritter-top {
background:url(img/gritter.png) no-repeat left -30px;
height:10px;
}
.hover .gritter-top {
background-position:right -30px;
}
.gritter-bottom {
background:url(img/gritter.png) no-repeat left bottom;
height:8px;
margin:0;
}
.hover .gritter-bottom {
background-position: bottom right;
}
.gritter-item {
display:block;
background:url(img/gritter.png) no-repeat left -40px;
color:#eee;
padding:2px 11px 8px 11px;
font-size: 11px;
font-family:verdana;
}
.hover .gritter-item {
background-position:right -40px;
}
.gritter-item p {
padding:0;
margin:0;
}
.gritter-close {
display:none;
position:absolute;
top:5px;
left:3px;
background:url(img/gritter.png) no-repeat left top;
cursor:pointer;
width:30px;
height:30px;
}
.gritter-title {
font-size:14px;
font-weight:bold;
padding:0 0 7px 0;
display:block;
text-shadow:1px 1px #000; /* Not supported by IE :( */
}
.gritter-image {
width:48px;
height:48px;
float:left;
}
.gritter-with-image,
.gritter-without-image {
padding:0 0 5px 0;
}
.gritter-with-image {
width:220px;
float:right;
}

@ -1,6 +1,8 @@
@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
@import "jquery.gritter.css";
/* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :)
@see http://lesscss.org/ */
/*
@ -217,7 +219,6 @@ p {
display: table-row;
}
#header .search ul.ui-autocomplete li.ui-menu-item:hover, #header .search ul.ui-autocomplete li.ui-menu-item.focus {
color: white;
background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
@ -229,6 +230,9 @@ p {
-webkit-box-shadow: 0 0 5px #666666;
box-shadow: 0 0 5px #666666;
}
#header .search ul.ui-autocomplete li.ui-menu-item:hover a, #header .search ul.ui-autocomplete li.ui-menu-item.focus a {
color: white !important;
}
#header .search ul.ui-autocomplete li.ui-menu-item a span {
line-height: 1;
vertical-align: top;
@ -534,6 +538,9 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
background-image: url("img/payment_deposit.png");
min-width: 65px;
}
.button.buy.locked > span {
background: url("img/locked.png") no-repeat center 0;
}
.button:hover {
background-color: #000000 !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));

@ -14,6 +14,8 @@
@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
@import "jquery.gritter.css";
/* this is a css style reset. theres much discussion if something like this
is helpful and appropriate. well... its here for now, so please dont
@ -226,9 +228,12 @@ p {
display: table-row;
&:hover, &.focus {
color: white;
.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
.box-shadow(0 0 5px @clrMediumGrey);
a {
color: white !important;
}
}
a {
@ -540,6 +545,10 @@ table.itemListContainer {
background-image: url("@{fldImages}/payment_deposit.png");
min-width: 65px;
}
&.locked > span {
background: url("@{fldImages}/locked.png") no-repeat center 0;
}
}
&:hover {

@ -0,0 +1,11 @@
/*
* Gritter for jQuery
* http://www.boedesign.com/
*
* Copyright (c) 2011 Jordan Boesch
* Dual licensed under the MIT and GPL licenses.
*
* Date: July 9, 2011
* Version: 1.7.1
*/
(function(b){b.gritter={};b.gritter.options={position:"",fade_in_speed:"medium",fade_out_speed:1000,time:6000};b.gritter.add=function(f){try{return a.add(f||{})}catch(d){var c="Gritter Error: "+d;(typeof(console)!="undefined"&&console.error)?console.error(c,f):alert(c)}};b.gritter.remove=function(d,c){a.removeSpecific(d,c||{})};b.gritter.removeAll=function(c){a.stop(c||{})};var a={position:"",fade_in_speed:"",fade_out_speed:"",time:"",_custom_timer:0,_item_count:0,_is_setup:0,_tpl_close:'<div class="gritter-close"></div>',_tpl_item:'<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]"><span class="gritter-title">[[username]]</span><p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',_tpl_wrap:'<div id="gritter-notice-wrapper"></div>',add:function(g){if(!g.title||!g.text){throw'You need to fill out the first 2 params: "title" and "text"'}if(!this._is_setup){this._runSetup()}var i=g.title,n=g.text,e=g.image||"",l=g.sticky||false,m=g.class_name||"",k=b.gritter.options.position,d=g.time||"";this._verifyWrapper();this._item_count++;var f=this._item_count,j=this._tpl_item;b(["before_open","after_open","before_close","after_close"]).each(function(p,q){a["_"+q+"_"+f]=(b.isFunction(g[q]))?g[q]:function(){}});this._custom_timer=0;if(d){this._custom_timer=d}var c=(e!="")?'<img src="'+e+'" class="gritter-image" />':"",h=(e!="")?"gritter-with-image":"gritter-without-image";j=this._str_replace(["[[username]]","[[text]]","[[close]]","[[image]]","[[number]]","[[class_name]]","[[item_class]]"],[i,n,this._tpl_close,c,this._item_count,h,m],j);this["_before_open_"+f]();b("#gritter-notice-wrapper").addClass(k).append(j);var o=b("#gritter-item-"+this._item_count);o.fadeIn(this.fade_in_speed,function(){a["_after_open_"+f](b(this))});if(!l){this._setFadeTimer(o,f)}b(o).bind("mouseenter mouseleave",function(p){if(p.type=="mouseenter"){if(!l){a._restoreItemIfFading(b(this),f)}}else{if(!l){a._setFadeTimer(b(this),f)}}a._hoverState(b(this),p.type)});return f},_countRemoveWrapper:function(c,d,f){d.remove();this["_after_close_"+c](d,f);if(b(".gritter-item-wrapper").length==0){b("#gritter-notice-wrapper").remove()}},_fade:function(f,c,h,d){var h=h||{},g=(typeof(h.fade)!="undefined")?h.fade:true;fade_out_speed=h.speed||this.fade_out_speed,manual_close=d;this["_before_close_"+c](f,manual_close);if(d){f.unbind("mouseenter mouseleave")}if(g){f.animate({opacity:0},fade_out_speed,function(){f.animate({height:0},300,function(){a._countRemoveWrapper(c,f,manual_close)})})}else{this._countRemoveWrapper(c,f)}},_hoverState:function(d,c){if(c=="mouseenter"){d.addClass("hover");d.find(".gritter-close").show();d.find(".gritter-close").click(function(){var e=d.attr("id").split("-")[2];a.removeSpecific(e,{},d,true)})}else{d.removeClass("hover");d.find(".gritter-close").hide()}},removeSpecific:function(c,g,f,d){if(!f){var f=b("#gritter-item-"+c)}this._fade(f,c,g||{},d)},_restoreItemIfFading:function(d,c){clearTimeout(this["_int_id_"+c]);d.stop().css({opacity:""})},_runSetup:function(){for(opt in b.gritter.options){this[opt]=b.gritter.options[opt]}this._is_setup=1},_setFadeTimer:function(f,d){var c=(this._custom_timer)?this._custom_timer:this.time;this["_int_id_"+d]=setTimeout(function(){a._fade(f,d)},c)},stop:function(e){var c=(b.isFunction(e.before_close))?e.before_close:function(){};var f=(b.isFunction(e.after_close))?e.after_close:function(){};var d=b("#gritter-notice-wrapper");c(d);d.fadeOut(function(){b(this).remove();f()})},_str_replace:function(v,e,o,n){var k=0,h=0,t="",m="",g=0,q=0,l=[].concat(v),c=[].concat(e),u=o,d=c instanceof Array,p=u instanceof Array;u=[].concat(u);if(n){this.window[n]=0}for(k=0,g=u.length;k<g;k++){if(u[k]===""){continue}for(h=0,q=l.length;h<q;h++){t=u[k]+"";m=d?(c[h]!==undefined?c[h]:""):c[0];u[k]=(t).split(l[h]).join(m);if(n&&u[k]!==t){this.window[n]+=(t.length-u[k].length)/l[h].length}}}return p?u:u[0]},_verifyWrapper:function(){if(b("#gritter-notice-wrapper").length==0){b("body").append(this._tpl_wrap)}}}})(jQuery);

@ -9,6 +9,48 @@ jQuery(document).ready(function($) {
var lock = false;
var items = [false];
var buyItem = function(id, callback) {
$.post("/api2/buyable/item/" + id, {
"POSTDATA": "Y U NO CANT BE EMPTY"
}, callback);
};
$.extend($.gritter.options, {
position: "top-right",
fade_in_speed: 100,
fade_out_speed: 100,
time: 3000
});
$("a.buy").click(function(evt) {
var button = $(this);
evt.preventDefault();
if(button.hasClass("locked"))
return;
dataContainer = button.parent();
dataContainer.children().addClass("locked");
var id = dataContainer.attr("data-id");
var name = dataContainer.attr("data-name");
var image = dataContainer.attr("data-image");
buyItem(id, function(data, status) {
$.gritter.add({
title: name + " gekauft",
text: "Der Artikel wurde erfolgreich gebucht",
image: image
});
dataContainer.children().removeClass("locked");
});
});
$.getJSON("/api2/buyable/item", function(data) {
if(data.error === undefined) {
source = [];
@ -61,9 +103,7 @@ jQuery(document).ready(function($) {
if(lock && event.keyCode === 39) {
selected_item.addClass("load");
$.post("/api2/buyable/item/" + selection.value, {
"POSTDATA": "YUNOCANTBEEMPTY"
}, function(data, status) {
buyItem(selection.value, function(data, status) {
selected_item.removeClass("load");
if(status === "success") {

Loading…
Cancel
Save