Styling fixes

This commit is contained in:
Ruud committed 2013-05-09 23:36:54 +02:00
1 parent f467d1c4f7
commit 9e3f978677
14 files changed
+387 -335

No files matched your search

+17 -6
View File
@@ -15,19 +15,21 @@ Block.Menu = new Class({
self.wrapper = new Element('div.wrapper').adopt(
self.more_option_ul = new Element('ul')
),
new Element('a.button.onlay' + (self.options.button_class ? '.' + self.options.button_class : ''), {
self.button = new Element('a.button' + (self.options.button_class ? '.' + self.options.button_class : ''), {
'events': {
'click': function(){
self.el.toggleClass('show')
self.fireEvent(self.el.hasClass('show') ? 'open' : 'close')
if(self.el.hasClass('show'))
this.addEvent('outerClick', function(){
self.el.removeClass('show')
this.removeEvents('outerClick');
if(self.el.hasClass('show')){
self.el.addEvent('outerClick', self.removeOuterClick.bind(self))
this.addEvent('outerClick', function(e){
if(e.target.get('tag') != 'input')
self.removeOuterClick()
})
}
else
this.removeEvents('outerClick');
self.removeOuterClick()
}
}
@@ -36,6 +38,15 @@ Block.Menu = new Class({
},
removeOuterClick: function(){
var self = this;
self.el.removeClass('show')
self.el.removeEvents('outerClick');
self.button.removeEvents('outerClick');
},
addLink: function(tab, position){
var self = this;
var el = new Element('li').adopt(tab).inject(self.more_option_ul, position || 'bottom');
@@ -67,12 +67,12 @@ Block.Navigation = new Class({
if(!self.added){
new Element('li.separator').inject(self.nav);
body.getElements('.header .more_menu.menu li a').each(function(el, nr){
if([0, 1, 2, 5].indexOf(nr) > -1){
self.nav.grab(
new Element('li').grab(el.clone().cloneEvents(el))
);
}
body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
if(nr <= 2) return;
if(el.get('tag') == 'a')
self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
else
self.nav.grab(new Element('li.separator'));
});
self.added = true;
+36 -22
View File
@@ -68,28 +68,42 @@ var CouchPotato = new Class({
self.block.footer = new Block.Footer(self, {})
);
[new Element('a.orange', {
'text': 'Restart',
'events': {
'click': self.restartQA.bind(self)
}
}),
new Element('a.red', {
'text': 'Shutdown',
'events': {
'click': self.shutdownQA.bind(self)
}
}),
new Element('a', {
'text': 'Update to latest',
'events': {
'click': self.checkForUpdate.bind(self, null)
}
}),
new Element('a', {
'text': 'Run install wizard',
'href': App.createUrl('wizard')
})].each(function(a){
var setting_links = [
new Element('a', {
'text': 'About CouchPotato',
'href': App.createUrl('settings/about')
}),
new Element('a', {
'text': 'Check for Updates',
'events': {
'click': self.checkForUpdate.bind(self, null)
}
}),
new Element('span.separator'),
new Element('a', {
'text': 'Settings',
'href': App.createUrl('settings/general')
}),
new Element('a', {
'text': 'Logs',
'href': App.createUrl('log')
}),
new Element('span.separator'),
new Element('a', {
'text': 'Restart',
'events': {
'click': self.restartQA.bind(self)
}
}),
new Element('a', {
'text': 'Shutdown',
'events': {
'click': self.shutdownQA.bind(self)
}
})
]
setting_links.each(function(a){
self.block.more.addLink(a)
})
+1 -1
View File
@@ -78,7 +78,7 @@ Page.Home = new Class({
if(timer) clearTimeout(timer);
timer = (function(){
images.setStyle('height', highest);
}).delay(300);
}).delay(50);
}
});
});
@@ -11,20 +11,6 @@ Page.Settings = new Class({
current: 'about',
has_tab: false,
initialize: function(options){
var self = this;
self.parent(options);
// Add to more menu
if(self.name == 'settings')
App.getBlock('more').addLink(new Element('a', {
'href': App.createUrl(self.name),
'text': self.name.capitalize(),
'title': self.title
}), 'top')
},
open: function(action, params){
var self = this;
self.action = action == 'index' ? self.default_action : action;
+43 -52
View File
@@ -178,13 +178,10 @@ body > .spinner, .mask{
margin: 0;
width: 100%;
z-index: 5;
background: #4e5969;
background: #5c697b;
box-shadow: 0 0 10px rgba(0,0,0,.1);
transition: all .4s ease-in-out;
}
.header.with_shadow {
background-color: #46505e;
}
@media all and (max-width: 480px) {
.header {
@@ -315,7 +312,7 @@ body > .spinner, .mask{
}
.menu_shown body {
left: 160px;
left: 240px;
}
.header .navigation {
@@ -327,13 +324,13 @@ body > .spinner, .mask{
right: 0;
top: 0;
bottom: 0;
left: 160px;
left: 240px;
}
.header .navigation ul {
width: 160px;
width: 240px;
position: fixed;
left: -160px;
left: -240px;
background: rgba(0,0,0,.5);
transition: all .5s cubic-bezier(0.9,0,0.1,1);
}
@@ -374,26 +371,15 @@ body > .spinner, .mask{
.header .more_menu .button {
height: 100%;
width: 44px;
border: 0;
box-shadow: none;
border-radius: 0;
background: none;
line-height: 66px;
text-align: center;
padding: 0;
border: 1px solid transparent;
border-width: 0 0 4px;
}
.header .more_menu .button:hover {
background: none;
border-color: #047792;
}
.header .more_menu .wrapper {
width: 150px;
width: 200px;
margin-left: -106px;
margin-top: 66px;
margin-top: 22px;
}
@media all and (max-width: 480px) {
@@ -402,7 +388,7 @@ body > .spinner, .mask{
}
.header .more_menu .wrapper {
margin-top: 44px;
margin-top: 0;
}
}
@@ -439,12 +425,10 @@ body > .spinner, .mask{
}
.header .notification_menu ul {
min-height: 80px;
max-height: 300px;
overflow: auto;
}
.header .notification_menu > a {
background-position: center -209px;
text-align: center;
}
.header .notification_menu li > span {
@@ -491,6 +475,7 @@ body > .spinner, .mask{
width: 16px;
cursor: pointer;
background: url('../images/sprite.png') no-repeat -200px;
border-radius: 3px;
}
.check.highlighted { background-color: #424c59; }
.check.checked { background-position: -2px 0; }
@@ -566,15 +551,14 @@ body > .spinner, .mask{
.inlay {
color: #fff;
border: 0;
border-radius:3px;
background-color: #282d34;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25);
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
}
.inlay.light {
background-color: #47515f;
outline: none;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
box-shadow: none;
}
.inlay:focus {
@@ -585,7 +569,7 @@ body > .spinner, .mask{
.onlay, .inlay .selected, .inlay:not(.reversed) > li:hover, .inlay > li.active, .inlay.reversed > li {
border-radius:3px;
border: 1px solid #252930;
box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
box-shadow: inset 0 1px 0px rgba(255,255,255,0.20);
background: rgb(55,62,74);
background-image: linear-gradient(
0,
@@ -597,7 +581,7 @@ body > .spinner, .mask{
color: #fff;
border: 1px solid transparent;
background-color: #282d34;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25);
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
}
.question {
@@ -648,38 +632,37 @@ body > .spinner, .mask{
.more_menu > a {
display: block;
background: url('../images/sprite.png') no-repeat center -137px;
height: 25px;
width: 25px;
border: 1px solid rgba(0,0,0,0.3);
height: 44px;
width: 44px;
transition: all 0.3s ease-in-out;
border-bottom: 4px solid transparent;
border-radius: 0;
}
.more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) {
background-color: #406db8;
.more_menu .button:hover {
border-color: #047792;
}
.more_menu.show .button {
border-color: #04bce6;
}
.more_menu .wrapper {
display: none;
background: rgba(255,255,255,0.98);
top: 0;
right: 0;
padding: 4px;
margin: 26px 0 0 0;
margin: 11px 0 0 0;
position: absolute;
z-index: 90;
width: 185px;
box-shadow: 0 20px 20px -5px rgba(0,0,0,0.1);
text-align: center;
color: #000;
background-image: linear-gradient(
-45deg,
rgb(200,200,200) 0%,
rgb(255,255,255) 100%
);
box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
color: #444;
background: #fff;
}
.more_menu.show .wrapper {
display: block;
top: 44px;
}
.more_menu ul {
@@ -698,11 +681,19 @@ body > .spinner, .mask{
border-bottom: 1px solid rgba(255,255,255,0.2);
box-shadow: none;
font-weight: normal;
font-size: 11px;
text-transform: uppercase;
font-size: 1.2em;
letter-spacing: 1px;
padding: 3px 0;
color: #000;
padding: 2px 10px;
color: #444;
}
.more_menu .wrapper li:first-child a { padding-top: 5px; }
.more_menu .wrapper li:last-child a { padding-bottom: 5px; }
.more_menu .wrapper li .separator {
border-bottom: 1px solid rgba(0,0,0,.1);
display: block;
height: 1;
margin: 5px 0;
}
.more_menu .wrapper li:last-child a {
+2 -1
View File
@@ -576,7 +576,8 @@
.page .tab_about .usenet {
padding: 20px 30px 0;
font-size: 17px;
font-size: 1.5em;
line-height: 1.3em;
}
.page .tab_about .usenet a {