diff --git a/web/css/main.css b/web/css/main.css index 3a25d37c..b71885a1 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -3,7 +3,7 @@ Title : Vesta Author : Eugen Lobicov, eugen.lobicov@gmail.com created : November 27, 2009 -last updated : January 12, 2012 +last updated : January 15, 2012 - - - - - - - - - - - - - - - - - - */ html{ @@ -266,6 +266,7 @@ input::-moz-focus-inner{ float:left; margin-right:4px; } + /* .section .section-title .add-entry{ position:relative; top:2px; @@ -282,17 +283,20 @@ input::-moz-focus-inner{ background-position:-14px 0; cursor:pointer; } - + */ .section .section-devider{ position:absolute; left:0; bottom:0; z-index:10; - /*background:url(../images/section-status-sprite-5.gif) no-repeat -420px 115px; */ display:block; width:100%; height:3px; - background:url(../images/section-status-sprite-6.png) no-repeat -420px 100%; + + /*background:url(../images/section-status-sprite-5.gif) no-repeat -420px 115px; */ + /*background:url(../images/section-status-sprite-6.png) no-repeat -420px 100%;*/ + background:url(../images/section-status-sprite-7.png) no-repeat -136px 100%; + } .dnstpl-nav-item .section-title{ @@ -319,7 +323,9 @@ input::-moz-focus-inner{ cursor:pointer; } .primary-nav .active .section-devider{ - background-position:-283px 100%; + /*background-position:-283px 100%;*/ + background-position:-276px 100%; + height:6px; bottom:-3px; } @@ -597,6 +603,9 @@ input::-moz-focus-inner{ cursor:pointer; white-space:nowrap; } + .checkbox-selector:hover .checkbox{ + background-position:0 -90px; + } .checkbox-selector .selector-title:hover{ color:#2ea8bd; } @@ -1575,10 +1584,14 @@ input::-moz-focus-inner{ background-color:#FFFFCB; } .b-new-entry select.styled{ - top:10px; + top:0; } .b-new-entry option{ - font:14px arial,sans-serif; + padding:5px 5px 5px 8px; + font-family:Arial, Helvetica, sans-serif; + font-size:14px; + font-weight:bold; + color:#555; } .b-new-entry .form-options-group{} diff --git a/web/images/section-status-sprite-7.png b/web/images/section-status-sprite-7.png new file mode 100644 index 00000000..f17efb73 Binary files /dev/null and b/web/images/section-status-sprite-7.png differ diff --git a/web/index.html b/web/index.html index febb7127..92b4a2f3 100644 --- a/web/index.html +++ b/web/index.html @@ -82,7 +82,6 @@
User -  
0 users @@ -98,7 +97,6 @@
Web -  
0 web domains @@ -108,12 +106,24 @@ +
  • +
    +
    +
    + DNS +
    +
    + 0 dns domain(s) +
    +
    +
    + +
  • Mail -  
    0 mail domain(s) @@ -127,7 +137,6 @@
    DB -  
    0 databases @@ -137,44 +146,28 @@
    • -
  • +
  • - DNS -   + Cron
    - 0 dns domain(s) -
    -
    -
    - -
    • -
  • -
    -
    -
    - IP -   -
    -
    - 0 ip address(es) + 0 cron job(s) 0 suspended
    • -
  • +
  • - Cron -   + IP
    - 0 cron job(s) + 0 ip address(es) 0 suspended
    diff --git a/web/js/lib/custom-form-elements.js b/web/js/lib/custom-form-elements.js index a68126b1..57c3c1f5 100644 --- a/web/js/lib/custom-form-elements.js +++ b/web/js/lib/custom-form-elements.js @@ -1,161 +1,164 @@ -/* - -CUSTOM FORM ELEMENTS - -Created by Ryan Fait -www.ryanfait.com - -The only things you may need to change in this file are the following -variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26) - -The numbers you set for checkboxHeight and radioHeight should be one quarter -of the total height of the image want to use for checkboxes and radio -buttons. Both images should contain the four stages of both inputs stacked -on top of each other in this order: unchecked, unchecked-clicked, checked, -checked-clicked. - -You may need to adjust your images a bit if there is a slight vertical -movement during the different stages of the button activation. - -The value of selectWidth should be the width of your select list image. - -Visit http://ryanfait.com/ for more information. - -*/ - -var checkboxHeight = "25"; -var radioHeight = "25"; -var selectWidth = "210"; - - -/* No need to change anything after this */ - - -document.write(''); - -var Custom = { - init: function() { - var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; - for(a = 0; a < inputs.length; a++) { - if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && $(inputs[a]).hasClass("styled") && !$(inputs[a]).hasClass("style-applied")) { - $(inputs[a]).addClass('style-applied'); - span[a] = document.createElement("span"); - span[a].className = inputs[a].type; - if ($(inputs[a]).attr('class').indexOf('do_action_toggle_suspend') != -1) { - span[a].className += ' do_action_toggle_suspend'; // save toggle functionality - } - if ($(inputs[a]).attr('class').indexOf('do_action_toggle_batch_selector') != -1) { - span[a].className += ' do_action_toggle_batch_selector'; // save toggle functionality - } - - - if(inputs[a].checked == true) { - if(inputs[a].type == "checkbox") { - position = "0 -" + (checkboxHeight*2) + "px"; - span[a].style.backgroundPosition = position; - } else { - position = "0 -" + (radioHeight*2) + "px"; - span[a].style.backgroundPosition = position; - } - } - inputs[a].parentNode.insertBefore(span[a], inputs[a]); - inputs[a].onchange = Custom.clear; - if(!inputs[a].getAttribute("disabled")) { - span[a].onmousedown = Custom.pushed; - span[a].onmouseup = Custom.check; - } else { - span[a].className = span[a].className += " disabled"; - } - } - } - inputs = document.getElementsByTagName("select"); - try { - for(a = 0; a < inputs.length; a++) { - if($(inputs[a]).hasClass("styled")) { - option = inputs[a].getElementsByTagName("option"); - active = option[0].childNodes[0].nodeValue; - textnode = document.createTextNode(active); - for(b = 0; b < option.length; b++) { - if(option[b].selected == true) { - textnode = document.createTextNode(option[b].childNodes[0].nodeValue); - } - } - span[a] = document.createElement("span"); - span[a].className = "select"; - span[a].id = "select-" + inputs[a].name + a; - span[a].appendChild(textnode); - inputs[a].parentNode.insertBefore(span[a], inputs[a]); - inputs[a].id = inputs[a].name + a; - if(!inputs[a].getAttribute("disabled")) { - inputs[a].onchange = Custom.choose; - } else { - inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled"; - } - } - } - document.onmouseup = Custom.clear; - } - catch(e){ /* */ } - }, - pushed: function() { - element = this.nextSibling; - if(element.checked == true && element.type == "checkbox") { - this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; - } else if(element.checked == true && element.type == "radio") { - this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; - } else if(element.checked != true && element.type == "checkbox") { - this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; - } else { - this.style.backgroundPosition = "0 -" + radioHeight + "px"; - } - }, - check: function() { - element = this.nextSibling; - if(element.checked == true && element.type == "checkbox") { - this.style.backgroundPosition = "0 0"; - element.checked = false; - } else { - if(element.type == "checkbox") { - this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; - } else { - this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; - group = this.nextSibling.name; - inputs = document.getElementsByTagName("input"); - for(a = 0; a < inputs.length; a++) { - if(inputs[a].name == group && inputs[a] != this.nextSibling) { - inputs[a].previousSibling.style.backgroundPosition = "0 0"; - } - } - } - element.checked = true; - } - }, - clear: function() { - inputs = document.getElementsByTagName("input"); - for(var b = 0; b < inputs.length; b++) { - if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { - inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; - } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { - inputs[b].previousSibling.style.backgroundPosition = "0 0"; - } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { - inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; - } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { - inputs[b].previousSibling.style.backgroundPosition = "0 0"; - } - } - }, - choose: function() { - option = this.getElementsByTagName("option"); - for(d = 0; d < option.length; d++) { - if(option[d].selected == true) { - // - var expr = '#select-' + this.id; - fb.log(expr); - $(expr).text(option[d].childNodes[0].nodeValue); - // bad! - //document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; - } - } - } -} -window.onload = Custom.init; +/* + +CUSTOM FORM ELEMENTS + +Created by Ryan Fait +www.ryanfait.com + +The only things you may need to change in this file are the following +variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26) + +The numbers you set for checkboxHeight and radioHeight should be one quarter +of the total height of the image want to use for checkboxes and radio +buttons. Both images should contain the four stages of both inputs stacked +on top of each other in this order: unchecked, unchecked-clicked, checked, +checked-clicked. + +You may need to adjust your images a bit if there is a slight vertical +movement during the different stages of the button activation. + +The value of selectWidth should be the width of your select list image. + +Visit http://ryanfait.com/ for more information. + +*/ + +var checkboxHeight = "25"; +var radioHeight = "25"; +var selectWidth = "230"; + + +/* No need to change anything after this */ + + +document.write(''); + +var Custom = { + init: function() { + var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; + for(a = 0; a < inputs.length; a++) { + if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && $(inputs[a]).hasClass("styled") && !$(inputs[a]).hasClass("style-applied")) { + $(inputs[a]).addClass('style-applied'); + span[a] = document.createElement("span"); + span[a].className = inputs[a].type; + if ($(inputs[a]).attr('class').indexOf('do_action_toggle_suspend') != -1) { + span[a].className += ' do_action_toggle_suspend'; // save toggle functionality + } + if ($(inputs[a]).attr('class').indexOf('do_action_toggle_batch_selector') != -1) { + span[a].className += ' do_action_toggle_batch_selector'; // save toggle functionality + } + if ($(inputs[a]).attr('class').indexOf('do_action_toggle_ssl_support') != -1) { + span[a].className += ' do_action_toggle_ssl_support'; // save toggle functionality + } + + + if(inputs[a].checked == true) { + if(inputs[a].type == "checkbox") { + position = "0 -" + (checkboxHeight*2) + "px"; + span[a].style.backgroundPosition = position; + } else { + position = "0 -" + (radioHeight*2) + "px"; + span[a].style.backgroundPosition = position; + } + } + inputs[a].parentNode.insertBefore(span[a], inputs[a]); + inputs[a].onchange = Custom.clear; + if(!inputs[a].getAttribute("disabled")) { + span[a].onmousedown = Custom.pushed; + span[a].onmouseup = Custom.check; + } else { + span[a].className = span[a].className += " disabled"; + } + } + } + inputs = document.getElementsByTagName("select"); + try { + for(a = 0; a < inputs.length; a++) { + if($(inputs[a]).hasClass("styled")) { + option = inputs[a].getElementsByTagName("option"); + active = option[0].childNodes[0].nodeValue; + textnode = document.createTextNode(active); + for(b = 0; b < option.length; b++) { + if(option[b].selected == true) { + textnode = document.createTextNode(option[b].childNodes[0].nodeValue); + } + } + span[a] = document.createElement("span"); + span[a].className = "select"; + span[a].id = "select-" + inputs[a].name + a; + span[a].appendChild(textnode); + inputs[a].parentNode.insertBefore(span[a], inputs[a]); + inputs[a].id = inputs[a].name + a; + if(!inputs[a].getAttribute("disabled")) { + inputs[a].onchange = Custom.choose; + } else { + inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled"; + } + } + } + document.onmouseup = Custom.clear; + } + catch(e){ /* */ } + }, + pushed: function() { + element = this.nextSibling; + if(element.checked == true && element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; + } else if(element.checked == true && element.type == "radio") { + this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; + } else if(element.checked != true && element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; + } else { + this.style.backgroundPosition = "0 -" + radioHeight + "px"; + } + }, + check: function() { + element = this.nextSibling; + if(element.checked == true && element.type == "checkbox") { + this.style.backgroundPosition = "0 0"; + element.checked = false; + } else { + if(element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; + } else { + this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; + group = this.nextSibling.name; + inputs = document.getElementsByTagName("input"); + for(a = 0; a < inputs.length; a++) { + if(inputs[a].name == group && inputs[a] != this.nextSibling) { + inputs[a].previousSibling.style.backgroundPosition = "0 0"; + } + } + } + element.checked = true; + } + }, + clear: function() { + inputs = document.getElementsByTagName("input"); + for(var b = 0; b < inputs.length; b++) { + if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; + } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 0"; + } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; + } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 0"; + } + } + }, + choose: function() { + option = this.getElementsByTagName("option"); + for(d = 0; d < option.length; d++) { + if(option[d].selected == true) { + // + var expr = '#select-' + this.id; + fb.log(expr); + $(expr).text(option[d].childNodes[0].nodeValue); + // bad! + //document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; + } + } + } +} +window.onload = Custom.init;