added gritter buy notification, buy delay and fixed styles for search and buy
This commit is contained in:
Konrad Mohrfeldt
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. there’s much discussion if something like this
|
||||
is helpful and appropriate. well... it’s here for now, so please don’t
|
||||
|
|
@ -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…
Reference in New Issue