[theme] Use CSS3-styled checkboxes.

Need to figure out how to make the image borders mangled too.
This commit is contained in:
Solomon Peachy 2012-12-26 12:25:12 -05:00
parent 14a3f7f6c2
commit ee58f52f5d
8 changed files with 51 additions and 120 deletions

View File

@ -9,7 +9,7 @@ For further information about Photo Organizer, see its web site at:
v2.38 (Unreleased)
[misc] Get rid of "IE7" compatibility library.
[themes] Use CSS3 to style radio buttons
[themes] Use CSS3 to style radio buttons and checkboxes
v2.37.1 (December 3, 2012)

View File

@ -117,6 +117,7 @@ switch ($action) {
print "<table class=\"listing\">\n";
print "<tr><td>".$strings['datebook_start']."</td><td><a href=my.datebook.php?year=$year&amp;month=$month&amp;day=$day>".emit_date_html($start_date, "full_date")."</a></td></tr>\n";
print "<tr><td>".$strings['datebook_end']."</td><td><a href=my.datebook.php?year=$year&amp;month=$month&amp;day=$day>".emit_date_html($end_date, "full_date")."</a></td></tr>\n";
// print "<tr><td>".$strings['datebook_client']."</td><td>$client</td></tr>";
print "<tr><td>".$strings['generic_remark']."</td> <td>$remark</td></tr>\n";
if ($num_photos > 0) {

View File

@ -148,7 +148,10 @@ if ($num_of_photos == 0) {
print emit_spool_actions($database, $po_user['id']);
print emit_import_actions($database, $po_user['id']);
print "</form>";
site_display_random_photos($database, 'folder', $folder_id, 10, FALSE);
}
site_footer($database);
site_epilog($database);
exit();
@ -245,6 +248,10 @@ print "</div>";
print "</form>\n";
if ($po_user['id'] == $owner_id) {
site_display_random_photos($database, 'folder', $folder_id, 10, FALSE);
}
site_footer($database);
site_epilog($database);
?>

View File

@ -19,9 +19,6 @@ var inputs;
var theme = 'themes/aqua';
var imgFalse = theme + '/check.gif';
var imgTrue = theme + '/check.a.gif';
//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
@ -33,54 +30,20 @@ function replaceChecks() {
//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {
//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {
// IE needs className, FF needs class
if (!/slide_cb/i.exec(inputs[i].getAttribute('class')) &&
(!/slide_cb/i.exec(inputs[i].getAttribute('className')))) {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);
if(inputs[i].getAttribute('type') == 'checkbox') {
// IE needs className, FF needs class
if (/slide_cb/i.exec(inputs[i].getAttribute('class'))) {
k = document.getElementById('slide_' + inputs[i].id);
if (k) {
if (inputs[i].checked) {
k.style.backgroundColor = '#cceec';
} else {
k = document.getElementById('slide_' + inputs[i].id);
if (k) {
if (inputs[i].checked) {
k.style.backgroundColor = '#cceecc';
} else {
k.style.backgroundColor = '';
}
}
// make sure slide color reflects checkbox!
k.style.backgroundColor = '';
}
//hide the checkbox
inputs[i].style.display='none';
}
}
}
}
//change the checkbox status and the replacement image
function checkChange(i) {
if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
}
@ -126,14 +89,11 @@ function toggleChecksList() {
for(var i=0; i < inputs.length; i++) {
if(inputs[i].getAttribute('type') != 'checkbox') {
continue;
}
}
if (inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
}

View File

@ -429,13 +429,22 @@ input[type=radio]:checked + label {
}
input[type=text] {
width: 20em;
/* width: 20em; */
}
input[type=checkbox] {
background-color: #ffffff;
border-color: #333333;
margin: 0.1em;
display: none;
}
input[type=checkbox] + label {
display:inline-block;
width:20px;
height:22px;
background:url("check.gif") left top no-repeat;
}
input[type=checkbox]:checked + label {
background:url("check.a.gif") left top no-repeat;
}
select {

View File

@ -19,12 +19,9 @@ var inputs;
var theme = 'themes/blackwater';
var imgFalse = theme + '/check.gif';
var imgTrue = theme + '/check.a.gif';
//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
// replaceChecks();
replaceChecks();
}
function replaceChecks() {
@ -33,54 +30,20 @@ function replaceChecks() {
//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {
//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {
// IE needs className, FF needs class
if (!/slide_cb/i.exec(inputs[i].getAttribute('class')) &&
(!/slide_cb/i.exec(inputs[i].getAttribute('className')))) {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);
if(inputs[i].getAttribute('type') == 'checkbox') {
// IE needs className, FF needs class
if (/slide_cb/i.exec(inputs[i].getAttribute('class'))) {
k = document.getElementById('slide_' + inputs[i].id);
if (k) {
if (inputs[i].checked) {
k.style.backgroundColor = '#bbddbb';
} else {
k = document.getElementById('slide_' + inputs[i].id);
if (k) {
if (inputs[i].checked) {
k.style.backgroundColor = '#bbddbb';
} else {
k.style.backgroundColor = '';
}
}
// make sure slide color reflects checkbox!
k.style.backgroundColor = '';
}
//hide the checkbox
inputs[i].style.display='none';
}
}
}
}
//change the checkbox status and the replacement image
function checkChange(i) {
if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
}
@ -126,14 +89,11 @@ function toggleChecksList() {
for(var i=0; i < inputs.length; i++) {
if(inputs[i].getAttribute('type') != 'checkbox') {
continue;
}
}
if (inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
}

View File

@ -437,18 +437,13 @@ input[type=radio]:checked + label {
}
input[type=text] {
width: 20em;
/* width: 20em;*/
}
input[type=checkbox] {
background-color: #111;
border-color: #555;
margin: 0.1em;
/* display: none; */
display: none;
}
/*
input[type=checkbox] + label {
display:inline-block;
width:20px;
@ -459,7 +454,6 @@ input[type=checkbox] + label {
input[type=checkbox]:checked + label {
background:url("check.a.gif") left top no-repeat;
}
*/
select {
color: #f0f0f0; /* Gray95 */

View File

@ -16,11 +16,11 @@ my ($size, $max, $count, $block);
# configuration
my $root = "/mnt/bulk2/po"; # points to PO repository
my $root = "/mnt/bulk2/peachyphotos_repo"; # points to PO repository
my $db_backup = "db.backup.bz2"; # Lives in PO repo
my $db_dsn = "dbname=podb"; # db dsn
my $db_pass = "pouser"; # db pass
my $db_user = "popass"; # db user
my $db_dsn = "dbname=photo"; # db dsn
my $db_pass = "apache"; # db pass
my $db_user = "apache"; # db user
my $dest_dir = "/tmp"; # where we shove the ISO
$block = 2048; # CD/DVD uses 2K blocks