Settings form
This commit is contained in:
parent
d7da0fa3de
commit
79c34273c8
|
@ -5,6 +5,7 @@
|
||||||
<meta charset="utf-8"/>
|
<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/layout.css" />
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/search.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/misc.css" />
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/player.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" />
|
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/albums.css" />
|
||||||
|
|
|
@ -87,6 +87,7 @@ var Pages = {
|
||||||
},
|
},
|
||||||
|
|
||||||
renderSettings: function(data) {
|
renderSettings: function(data) {
|
||||||
|
$('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat');
|
||||||
$('#data-container .inner').html(data);
|
$('#data-container .inner').html(data);
|
||||||
yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer);
|
yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer);
|
||||||
Ajax.setTitle('Settings');
|
Ajax.setTitle('Settings');
|
||||||
|
|
|
@ -5,3 +5,9 @@ var Settings = {
|
||||||
$('.settings').live('click', function() {
|
$('.settings').live('click', function() {
|
||||||
Ajax.loadSettingsPage();
|
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