Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use classes to position menus and sub-menus.

Browse Source
This commit is contained in:
Mayhem 2013-08-13 13:53:15 +02:00
parent f1cf1addfe
commit 0ee17f32ce
2 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@ -885,6 +885,18 @@ a.hide-announcement {
position: absolute; position: absolute;
outline: none; outline: none;
} }
#menu.top {
top: 100%;
}
#menu.bottom {
bottom: 100%;
}
#menu.left {
left: 0;
}
#menu.right {
right: 0;
}
.entry { .entry {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -921,6 +933,18 @@ a.hide-announcement {
position: absolute; position: absolute;
margin: -1px 0; margin: -1px 0;
} }
.submenu.top {
top: 0;
}
.submenu.bottom {
bottom: 0;
}
.submenu.left {
left: 100%;
}
.submenu.right {
right: 100%;
}
.entry input { .entry input {
margin: 0; margin: 0;
} }

42
src/General/UI.coffee
View File

@ -67,19 +67,18 @@ UI = do ->
bLeft = window.scrollX + bRect.left bLeft = window.scrollX + bRect.left
cHeight = doc.clientHeight cHeight = doc.clientHeight
cWidth = doc.clientWidth cWidth = doc.clientWidth
[top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight if bRect.top + bRect.height + mRect.height < cHeight
['100%', null] $.addClass menu, 'top'
$.rmClass menu, 'bottom'
else else
[null, '100%'] $.addClass menu, 'bottom'
[left, right] = if bRect.left + mRect.width < cWidth $.rmClass menu, 'top'
['0px', null] if bRect.left + mRect.width < cWidth
$.addClass menu, 'left'
$.rmClass menu, 'right'
else else
[null, '0px'] $.addClass menu, 'right'
{style} = menu $.rmClass menu, 'left'
style.top = top
style.right = right
style.bottom = bottom
style.left = left
menu.focus() menu.focus()
@ -155,19 +154,18 @@ UI = do ->
eRect = entry.getBoundingClientRect() eRect = entry.getBoundingClientRect()
cHeight = doc.clientHeight cHeight = doc.clientHeight
cWidth = doc.clientWidth cWidth = doc.clientWidth
[top, bottom] = if eRect.top + sRect.height < cHeight if eRect.top + sRect.height < cHeight
['0px', 'auto'] $.addClass submenu, 'top'
$.rmClass submenu, 'bottom'
else else
['auto', '0px'] $.addClass submenu, 'bottom'
[left, right] = if eRect.right + sRect.width < cWidth $.rmClass submenu, 'top'
['100%', 'auto'] if eRect.right + sRect.width < cWidth
$.addClass submenu, 'left'
$.rmClass submenu, 'right'
else else
['auto', '100%'] $.addClass submenu, 'right'
{style} = submenu $.rmClass submenu, 'left'
style.top = top
style.bottom = bottom
style.left = left
style.right = right
addEntry: (e) -> addEntry: (e) ->
entry = e.detail entry = e.detail