Commit 45c995dc authored by Michał 'rysiek' Woźniak's avatar Michał 'rysiek' Woźniak
Browse files

lightbox beta

parent 6231ee53
......@@ -28,13 +28,13 @@
font-size:80%;
text-align:center;
font-style:italic;
color:#999;
text-shadow:0px 0px 1px #999;
color:#8C9566;
text-shadow:0px 0px 1px #34AE30;
white-space:nowrap;
}
.marka-dropdown::after {
border-bottom:1px dotted #aaa;
border-bottom:1px dotted #34AE30;
}
.marka-dropdown:hover::after {
......@@ -63,7 +63,7 @@
color:black !important;
position:relative;
cursor: pointer;
border-bottom:1px dotted black;
border-bottom:1px dotted #34AE30;
}
.marka > .marka-dropdown {
......@@ -90,21 +90,41 @@
left:0px;
bottom:0px;
right:0px;
background:rgba(0, 0, 0, 0.2);
background:rgba(0, 0, 0, 0.8);
display:flex;
align-items:center;
justify-items:center;
justify-content:center;
display:none;
z-index:2000;
}
#marka-currency-lightbox > div {
padding:1em;
min-width:10em;
max-width:50%;
}
#marka-currency-lightbox > div > div {
padding:1.5em 2em;
background:white;
border-radius:0.2em;
box-shadow:2px 2px 5px black;
color:black;
}
#marka-currency-lightbox > div > h2 {
color:white;
text-shadow:2px 2px 4px black, -1px -1px 0px black;
text-align:center;
}
#marka-currency-lightbox #marka-currency-select {
padding:0.2em;
font-size:120%;
color:black;
background:#aaa;
width:100%;
display:block;
border-radius:0.2em;
border:none;
box-shadow:inset 1px 1px 2px black;
}
\ No newline at end of file
......@@ -27,13 +27,21 @@ function Marka(target) {
}
// lightbox
/*
*/
var lightbox = '<div id="marka-currency-lightbox"><div><select id="marka-currency-select">'
for (cur in currencies_supported()) {
lightbox += '<option value="' + + '">' + + '</option>'
var lightbox = '<div id="marka-currency-lightbox"><div><h2>Select a currency:</h2><div><select id="marka-currency-select">'
var currencies = this.currencies_supported()
lightbox += '<option value="">Show original currency</option>'
for (var cur in currencies) {
lightbox += '<option value="' + currencies[cur].code + '">' + currencies[cur].name_plural + '</option>'
}
lightbox += '</select></div></div>'
lightbox += '</select></div></div></div>'
$(this.target).append($(lightbox))
var self = this
$('#marka-currency-select').change(
function() {
self.setCurrency($(this).val());
self.doConversions();
$('#marka-currency-lightbox').css('display', 'none')
})
this.match();
this.doConversions();
......@@ -184,7 +192,7 @@ Marka.prototype.findSymbol = function(text) {
}
Marka.prototype.wrapNode = function() {
var markaDropdownHTML = $('<span class="marka"><span class="marka-dropdown"></span></span>');
var markaDropdownHTML = $('<span class="marka"><span class="marka-dropdown" onclick="$(\'#marka-currency-lightbox\').css(\'display\', \'flex\')"></span></span>');
return markaDropdownHTML.get(0);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment