Settings form
This commit is contained in:
parent
d7da0fa3de
commit
79c34273c8
public
|
@ -5,6 +5,7 @@
|
|||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/layout.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/search.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/settings.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/misc.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/player.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/albums.css" />
|
||||
|
|
|
@ -87,6 +87,7 @@ var Pages = {
|
|||
},
|
||||
|
||||
renderSettings: function(data) {
|
||||
$('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat');
|
||||
$('#data-container .inner').html(data);
|
||||
yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer);
|
||||
Ajax.setTitle('Settings');
|
||||
|
|
|
@ -4,4 +4,10 @@ var Settings = {
|
|||
|
||||
$('.settings').live('click', function() {
|
||||
Ajax.loadSettingsPage();
|
||||
})
|
||||
$('.settings-container .tabs .tab').live('click', function(){
|
||||
if (!$(this).hasClass('active')) {
|
||||
$('.settings-container .tabs .tab').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
})
|
|
@ -1 +1,20 @@
|
|||
hello
|
||||
<div class="settings-container">
|
||||
<div class="tabs">
|
||||
<div class="left-space"></div>
|
||||
<div class="tab active">Account</div>
|
||||
<div class="middle-space"></div>
|
||||
<div class="tab">Music</div>
|
||||
</div>
|
||||
<div class="form-container">
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<div class="label">Username:</div>
|
||||
<div class="value"><input name="username" type="text"/></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">Email:</div>
|
||||
<div class="value"><input name="email" type="text"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,84 @@
|
|||
.settings-container {
|
||||
margin: 25px;
|
||||
}
|
||||
.settings-container .tabs {
|
||||
height: 26px;
|
||||
}
|
||||
.settings-container .tabs > div {
|
||||
float: left;
|
||||
height: 25px;
|
||||
}
|
||||
.settings-container .tabs .left-space {
|
||||
width: 15px;
|
||||
}
|
||||
.settings-container .tabs .tab {
|
||||
position: relative;
|
||||
border-left: #DDD 2px solid;
|
||||
border-top: #DDD 2px solid;
|
||||
border-right: #DDD 2px solid;
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
margin-top: 2px;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
background-color: #FAFAFA;
|
||||
cursor: pointer;
|
||||
}
|
||||
.settings-container .tabs .tab.active {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
background-color: #EAEAEA;
|
||||
border-left: #CCC 2px solid;
|
||||
border-top: #CCC 2px solid;
|
||||
border-right: #CCC 2px solid;
|
||||
border-bottom: #EAEAEA 6px solid;
|
||||
margin-top: -2px;
|
||||
line-height: 29px;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
.settings-container .tabs .middle-space {
|
||||
width: 8px;
|
||||
}
|
||||
.settings-container .form-container {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
height: 500px;
|
||||
background-color: #EAEAEA;
|
||||
border-left: #CCC 2px solid;
|
||||
border-top: #CCC 2px solid;
|
||||
border-right: #CCC 2px solid;
|
||||
border-bottom: #CCC 2px solid;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
}
|
||||
.settings-container .form-container .form {
|
||||
margin: 25px;
|
||||
}
|
||||
.settings-container .form-container .form .field {
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
}
|
||||
.settings-container .form-container .form .field .label{
|
||||
float: left;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
width: 140px;
|
||||
padding: 3px 6px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #CCC;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.settings-container .form-container .form .field input[type="text"]{
|
||||
font-size: 24px;
|
||||
padding: 4px;
|
||||
border: #CCC 1px solid;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
Loading…
Reference in New Issue