Skip to content

Commit

Permalink
a lot of prettiness updates, cleaning up the css alot and trying to m…
Browse files Browse the repository at this point in the history 
…ake the ui experience more cohesive.
  • Loading branch information
@watcherdm
watcherdm committed Oct 23, 2011
1 parent b00bb55 commit 2c086d4
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 38 deletions.
3 changes: 1 addition & 2 deletions css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
body{background: rgba(0,0,0,.1); font-family: Helvetica;}
input{font-size: 150%; border-radius: 10px;padding: 10px;}
input:invalid{background: rgba(255, 0, 0, .2);}
.permissions_settings {clear: both;}
.permissions_settings ul li{display: block; height: 20px;}
.permissions_settings ul li span{width: 200px; display: block; float: left; text-align: center;}
.permissions_settings ul li span input{width: 200px;}
span.head {font-weight: bold; text-align: left;}
span.head {font-weight: bold; text-align: left;}
10 changes: 0 additions & 10 deletions css/tabs.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
.dark-bg-grad {
background-color: #666;
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222222));
background-image: -webkit-linear-gradient(top, #666, #222222);
background-image: -moz-linear-gradient(top, #666, #222222);
background-image: -ms-linear-gradient(top, #666, #222222);
background-image: -o-linear-gradient(top, #666, #222222);
background-image: linear-gradient(top, #666, #222222);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666', EndColorStr='#222222');
}

div.admin {
display: none;
Expand Down
138 changes: 136 additions & 2 deletions css/webspinner.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
body{
background: #f0f0f0;
font-family: Helvetica;
}
.overlay {
position: absolute;
top : 0px;
Expand All @@ -7,14 +11,144 @@
display : none;
background-color : rgba(128,128,128,0.5);
}
.br-3 {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.br-5 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.br-8 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.br-10 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.br-12 {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.circle-20 {
font-size : 10px;
width : 10px;
height : 10px;
padding : 5px;
margin-top : -.25em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

}
.boxed {
border: solid 3px #fff;
}

.red-boxed {
border : solid 3px #f00;
}

.black-boxed {
border : solid 3px #111;
}

.container {
position: fixed;
top: 20%%;
left: 50%;
width: 400px;
background: white;
border-radius: 12px;
padding: 16px;
border: solid 3px rgba(0, 0, 0, 0.8);
margin-left: -200px;
}

.button {
font: normal;
display : inline-block;
padding : .5em;
border-radius : .625em;
max-width : 12.5em;
max-height : 12.5em; /* more and we are talking about a pane */
text-decoration : none;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
}

.dark-bg-grad {
background-color: #666;
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222222));
background-image: -webkit-linear-gradient(top, #666, #222222);
background-image: -moz-linear-gradient(top, #666, #222222);
background-image: -ms-linear-gradient(top, #666, #222222);
background-image: -o-linear-gradient(top, #666, #222222);
background-image: linear-gradient(top, #666, #222222);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666', EndColorStr='#222222');
}
.green-bg-grad {
background-color: #22FF22;
background-image: -webkit-gradient(linear, left top, left bottom, from(#22FF22), to(#226622));
background-image: -webkit-linear-gradient(top, #22FF22, #226622);
background-image: -moz-linear-gradient(top, #22FF22, #226622);
background-image: -ms-linear-gradient(top, #22FF22, #226622);
background-image: -o-linear-gradient(top, #22FF22, #226622);
background-image: linear-gradient(top, #22FF22, #226622);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#22FF22', EndColorStr='#226622');
}
.light-bg-grad {
background-color: #F0F0F0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
background-image: -webkit-linear-gradient(top, #F0F0F0, #D0D0D0);
background-image: -moz-linear-gradient(top, #F0F0F0, #D0D0D0);
background-image: -ms-linear-gradient(top, #F0F0F0, #D0D0D0);
background-image: -o-linear-gradient(top, #F0F0F0, #D0D0D0);
background-image: linear-gradient(top, #F0F0F0, #D0D0D0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F0F0F0', EndColorStr='#D0D0D0');
}
.shadow-1 {
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
}
.dark {
color : #f0f0f0;
}
.light {
color : #232323;
}
label {
min-width : 120px;
display : inline-block;
text-align : right;
}
input:invalid{background: rgba(255, 0, 0, .2);}
.permissions_settings {clear: both;}
.permissions_settings ul li{display: block; height: 20px;}
.permissions_settings ul li span{width: 200px; display: block; float: left; text-align: center;}
.permissions_settings ul li span input{width: 200px;}
span.head {font-weight: bold; text-align: left;}
.big-text {
font-size : 150%;
}
.topright {
position : absolute;
right : 0px;
top : 0px;
margin-top : -1em;
margin-right : -1em;
}
.close {
font-weight : bolder;
cursor : pointer;
}
4 changes: 2 additions & 2 deletions defaults/outer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
<!-- ADMIN CONTENT -->
{{ admin_content }}
<div class="overlay">
<div class="container">
<div class="close"/>
<div class="br-12 black-boxed container">
<div class="close boxed circle-20 dark dark-bg-grad shadow-1 topright">X</div>
</div>
</div>
</body>
Expand Down
27 changes: 16 additions & 11 deletions js/webspinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,38 @@
webspinner.ui.load('Modal', Backbone.View.extend({
events : {
'click .container' : 'action',
'click .close' : 'hide',
'click' : 'hide'
},
initialize : function(options){
this.$el = $(this.el);
this.$container = this.$('.container');
this.$close = this.$('close')
},
show : function(contents){
this.$container.append(contents);
this.$el.fadeIn();
},
clean : function(){
this.$container.find(':not(.close)').remove();
},
hide : function(e){
this.$el.fadeOut(this.$container.empty.bind(this.$container));
this.$el.fadeOut(this.clean.bind(this));
},
action : function(e){
if ( $(e.target).attr('href') ){
$.get($(e.target).attr('href')).done($.proxy(function(resp, status, jqxhr){
var $target = $(e.target);
if ( $target.hasClass('nonajax') ){
return true;
}
if ( $target.attr('type') === 'submit' ){
var $form = $target.parent('form');
$form.submit();
} else if ( $target.attr('href') ){
$.get($target.attr('href')).done($.proxy(function(resp, status, jqxhr){
if ( webspinner.utility.http.isHTML(jqxhr) ){
if ( $(resp).find('head') ){
$('html').html(resp);
} else {
this.$container.html(resp);
}
this.$container.html(resp);
}
}, this));
} else if ( $(e.target).attr('type') === 'submit' ){
var $form = $(e.target).parent('form');
$form.submit();
}
e.stopImmediatePropagation();
return false;
Expand Down
2 changes: 1 addition & 1 deletion templates/account.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="account modal">
{{ account_edit }}
<a href="{{ logout }}">Logout</a>
<a href="{{ logout }}" class="button dark dark-bg-grad nonajax boxed shadow-1">Logout</a>
</div>
19 changes: 9 additions & 10 deletions templates/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<link href="/css/main.css" rel="stylesheet"/>
<form action="/login" method="POST">
<label for="user.email"><h2>Email Address:</h2></label>
<input type="email" name="user.email" placeholder="you@somedomain.com" required id="user.email"/>
<label for="user.password"><h2>Password:</h2></label>
<input type="password" name="user.password" required id="user.password"/><br/>
<input type="hidden" name="return_url" value="{{ return_url }}"/>
<input type="submit" name="user.login" value="Login"/>
<a href="/pwrecovery/">Reset Password</a>
</form>
<form action="/login" method="POST">
<label for="user.email"><h2>Email Address:</h2></label>
<input type="email" name="user.email" class="big-text br-8" placeholder="you@somedomain.com" required id="user.email"/>
<label for="user.password"><h2>Password:</h2></label>
<input type="password" name="user.password" class="big-text br-8"required id="user.password"/><br/>
<input type="hidden" name="return_url" value="{{ return_url }}"/>
<a href="/login" type="submit" class="button dark dark-bg-grad shadow-1">Login</a>
<a href="/pwrecovery/" class="button dark dark-bg-grad shadow-1">Reset Password</a>
</form>

0 comments on commit 2c086d4

Please sign in to comment.