Styling fixes
This commit is contained in:
1 parent
f467d1c4f7
commit
9e3f978677
14 files changed
+387
-335
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user