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

Redo mascot positioning to be less dumb.

Browse Source
This commit is contained in:
Zixaphir 2013-05-31 20:44:03 -07:00
parent 8144b38023
commit 04efddaa9b
8 changed files with 175 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

16
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

16
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

16
src/General/Settings.coffee
View File

@ -514,18 +514,18 @@ Settings =
$.add nodes, fs $.add nodes, fs
$.get items, (items) -> $.get items, (items) ->
cb = Settings.cb cb = Settings.cb.style
for key, val of items for key, val of items
input = inputs[key] input = inputs[key]
if input.type is 'checkbox' if input.type is 'checkbox'
input.checked = val input.checked = val
$.on input, 'change', cb.style.checked $.on input, 'change', cb.checked
else if input.nodeName is 'SELECT' else if input.nodeName is 'SELECT'
input.value = val input.value = val
$.on input, 'change', cb.style.select $.on input, 'change', cb.select
else else
input.value = val input.value = val
$.on input, 'change', cb.style.value $.on input, 'change', cb.value
if key is 'Icon Orientation' if key is 'Icon Orientation'
$.on input, 'change', Style.iconPositions $.on input, 'change', Style.iconPositions
@ -805,9 +805,11 @@ Settings =
$.cb.checked.call @ $.cb.checked.call @
hyphenated = @name.toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-' hyphenated = @name.toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
(if @checked then $.addClass else $.rmClass) doc, hyphenated (if @checked then $.addClass else $.rmClass) doc, hyphenated
value: -> value: ->
$.cb.value.call @ $.cb.value.call @
Style.dynamicCSS = Style.dynamic() Style.dynamicCSS.textContent = Style.dynamic()
select: -> select: ->
$.cb.value.call @ $.cb.value.call @
for option in @options for option in @options

43
src/General/css/layout.css
View File

@ -207,7 +207,7 @@ th {
} }
.sidebar-location-left.sidebar-normal:not(.pagination-on-side) .pagelist, .sidebar-location-left.sidebar-normal:not(.pagination-on-side) .pagelist,
.sidebar-location-left #header-bar { .sidebar-location-left #header-bar {
left: 248px; left: 252px;
} }
.sidebar-location-left.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist, .sidebar-location-left.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
.sidebar-location-left.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar { .sidebar-location-left.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
@ -219,7 +219,7 @@ th {
} }
.sidebar-location-right.sidebar-normal:not(.pagination-on-side) .pagelist, .sidebar-location-right.sidebar-normal:not(.pagination-on-side) .pagelist,
.sidebar-location-right #header-bar { .sidebar-location-right #header-bar {
right: 248px; right: 252px;
} }
.sidebar-location-right.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist, .sidebar-location-right.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
.sidebar-location-right.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar { .sidebar-location-right.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
@ -438,20 +438,20 @@ th {
border: 0 none !important; border: 0 none !important;
text-align: right; text-align: right;
} }
.pagination-on-side..post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist, .pagination-on-side.post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
.pagination-on-side..post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist { .pagination-on-side.post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
bottom: 23.3em; bottom: 23.3em;
} }
.pagination-on-side..post-form-style-fixed.show-post-form-header .pagelist, .pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist,
.pagination-on-side..post-form-style-transparent-fade.show-post-form-header .pagelist { .pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist {
bottom: 23.1em; bottom: 23.1em;
} }
.pagination-on-side..post-form-style-fixed.post-form-decorations .pagelist, .pagination-on-side.post-form-style-fixed.post-form-decorations .pagelist,
.pagination-on-side...post-form-style-transparent-fade.post-form-decorations .pagelist { .pagination-on-side.post-form-style-transparent-fade.post-form-decorations .pagelist {
bottom: 21.8em; bottom: 21.8em;
} }
.pagination-on-side..post-form-style-fixed .pagelist, .pagination-on-side.post-form-style-fixed .pagelist,
.pagination-on-side..post-form-style-transparent-fade .pagelist { .pagination-on-side.post-form-style-transparent-fade .pagelist {
bottom: 21.6em; bottom: 21.6em;
} }
.sidebar-location-left.pagination-on-side .pagelist { .sidebar-location-left.pagination-on-side .pagelist {
@ -1224,6 +1224,8 @@ input:checked + .rice {
padding: 1px; padding: 1px;
border: 1px solid transparent; border: 1px solid transparent;
min-width: 248px; min-width: 248px;
background: transparent;
border: 1px solid transparent;
} }
.sidebar-large #qr { .sidebar-large #qr {
min-width: 299px; min-width: 299px;
@ -1244,11 +1246,11 @@ input:checked + .rice {
left: auto !important; left: auto !important;
} }
:root:not(.post-form-style-float) #qr { :root:not(.post-form-style-float) #qr {
bottom: 0; bottom: 0 !important;
} }
.fourchan-ss-navigation:not(.post-form-style-float).fixed.bottom #qr, .fourchan-ss-navigation.fixed.bottom:not(.post-form-style-float) #qr,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr { .fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr {
bottom: 1.5em; bottom: 1.5em !important;
} }
.post-form-style-slideout #qr { .post-form-style-slideout #qr {
top: auto !important; top: auto !important;
@ -1324,14 +1326,14 @@ input:checked + .rice {
opacity: 1; opacity: 1;
<%= agent %>transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
} }
:root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout) #qrtab, :root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout):not(.post-form-style-float) #qrtab,
.post-form-style-float .autohide:not(:hover):not(.has-focus) > form, .post-form-style-float .autohide:not(:hover):not(.has-focus) > form,
.show-post-form-header.post-form-style-fixed .autohide:not(:hover):not(.has-focus) > form, .show-post-form-header.post-form-style-fixed .autohide:not(:hover):not(.has-focus) > form,
.show-post-form-header.post-form-style-transparent-fade .autohide:not(:hover):not(.has-focus) > form { .show-post-form-header.post-form-style-transparent-fade .autohide:not(:hover):not(.has-focus) > form {
display: none !important; display: none !important;
} }
:root:not(.post-form-style-tabbed-slideout) #qrtab { :root:not(.post-form-style-tabbed-slideout) #qrtab {
margin-bottom: 1px; margin-bottom: .1em;
} }
.post-form-slideout-transitions.post-form-style-slideout #qr, .post-form-slideout-transitions.post-form-style-slideout #qr,
.post-form-slideout-transitions.post-form-style-tabbed-slideout #qr { .post-form-slideout-transitions.post-form-style-tabbed-slideout #qr {
@ -1380,7 +1382,10 @@ input:checked + .rice {
.compact-post-form-inputs .persona input.field { .compact-post-form-inputs .persona input.field {
width: 33%; width: 33%;
} }
.compact-post-form-inputs .persona input.field:not(:first-child) { .compact-post-form-inputs .persona input.field:first-child {
margin: 0;
}
.compact-post-form-inputs .persona input.field {
margin: 0 0 0 0.5%; margin: 0 0 0 0.5%;
} }
.compact-post-form-inputs #qr textarea.field { .compact-post-form-inputs #qr textarea.field {
@ -1406,7 +1411,7 @@ input:checked + .rice {
resize: none; resize: none;
} }
.captcha-img { .captcha-img {
margin: 1px 0 0; margin: .1em 0 0;
text-align: center; text-align: center;
line-height: 0; line-height: 0;
} }
@ -1417,7 +1422,7 @@ input:checked + .rice {
} }
.captcha-input { .captcha-input {
width: 100%; width: 100%;
margin: 1px 0 0; margin: .1em 0 0;
} }
.field, .field,
.selectrice, .selectrice,
@ -1425,7 +1430,7 @@ button,
input:not([type=radio]) { input:not([type=radio]) {
<%= sizing %>: border-box; <%= sizing %>: border-box;
height: 1.6em; height: 1.6em;
margin: 1px 0 0; margin: .1em 0 0;
vertical-align: bottom; vertical-align: bottom;
padding: 0 1px; padding: 0 1px;
} }

108
src/General/css/mascot.css Normal file
View File

@ -0,0 +1,108 @@
#mascot {
display: none;
}
.mascots #mascot {
display: block;
}
.sidebar-location-left #mascot img {
<%= sizing %>transform: scaleX(-1);
}
.sidebar-location-right.mascot-location-sidebar #mascot img,
.sidebar-location-left #mascot img {
right: 0;
left: auto;
margin-right: #{mascot.hOffset}px;
}
.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-left.sidebar-large #mascot img {
right: #{if mascot.center then 25 else 0}px;
}
.sidebar-location-left.mascot-location-sidebar #mascot img,
.sidebar-location-right #mascot img {
left: 0;
right: auto;
margin-left: #{mascot.hOffset}px;
}
.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-right.sidebar-large #mascot img {
left: #{if mascot.center then 25 else 0}px;
}
#mascot img {
position: fixed;
z-index: -1;
bottom: 18.5em;
height: #{
if mascot.height and isNaN parseFloat mascot.height
mascot.height
else if mascot.height
parseInt(mascot.height, 10) + 'px'
else
'auto'
};
width: #{
if mascot.width and isNaN parseFloat mascot.width
mascot.width
else if mascot.width
parseInt(mascot.width, 10) + 'px'
else
'auto'
};
margin-bottom: #{mascot.vOffset or 0}px;
cursor: pointer;
}
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
bottom: 1.5em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
bottom: 20.1em;
}
.post-form-style-fixed.show-post-form-header #mascot img,
.post-form-style-transparent-fade.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 20.3em;
}
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
bottom: 21.6em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
bottom: 21.8em;
}
.post-form-style-fixed.post-form-decorations #mascot img,
.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 18.8em;
}
.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.mascot-position-bottom #mascot img,
.mascot-position-default.posting-disabled #mascot img {
bottom: 0;
}
.mascots-overlap-posts #mascot img {
z-index: 3;
}
.mascot-position-middle #mascot img {
bottom: 50%;
<%= sizing %>transform: translateY(50%);
}
.mascot-position-top #mascot img {
bottom: auto !important;
top: 17px;
}
.grayscale-mascots #mascot img {
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
}

7
src/General/css/theme.css
View File

@ -58,16 +58,14 @@ html {
.captcha-img img { .captcha-img img {
#{Style.filter theme["Text"], theme["Input Background"]} #{Style.filter theme["Text"], theme["Input Background"]}
} }
#boardTitle, #boardTitle {
:root:not(.post-form-decorations) #spoilerLabel {
text-shadow: text-shadow:
1px 1px #{backgroundC}, 1px 1px #{backgroundC},
-1px -1px #{backgroundC}, -1px -1px #{backgroundC},
1px -1px #{backgroundC}, 1px -1px #{backgroundC},
-1px 1px #{backgroundC}; -1px 1px #{backgroundC};
} }
.sidebar-glow #boardTitle, .sidebar-glow #boardTitle {
:root.sidebar-glow:not(.post-form-decorations) #spoilerLabel {
text-shadow: text-shadow:
1px 1px 1px #{backgroundC}, 1px 1px 1px #{backgroundC},
-1px -1px 1px #{backgroundC}, -1px -1px 1px #{backgroundC},
@ -100,6 +98,7 @@ html {
#appchanx-settings, #appchanx-settings,
#qrtab, #qrtab,
.post-form-decorations #qr, .post-form-decorations #qr,
.post-form-style-float #qr,
input[type="submit"], input[type="submit"],
input[value="Report"], input[value="Report"],
span[style="left: 5px; position: absolute;"] a { span[style="left: 5px; position: absolute;"] a {

100
src/Theming/Mascots.coffee
View File

@ -29,105 +29,7 @@ MascotTools =
MascotTools.addMascot mascot MascotTools.addMascot mascot
Style.mascot.textContent = """ Style.mascot.textContent = """<%= grunt.file.read('src/General/css/mascot.css') %>"""
#mascot {
display: none;
}
.mascots #mascot {
display: block;
}
.sidebar-location-left #mascot img {
<%= sizing %>transform: scaleX(-1);
}
.sidebar-location-right.mascot-location-sidebar #mascot img,
.sidebar-location-left #mascot img {
right: 0;
left: auto;
margin-right: #{mascot.hOffset}px;
}
.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-left.sidebar-large #mascot img {
right: #{if mascot.center then 25 else 0}px;
}
.sidebar-location-left.mascot-location-sidebar #mascot img,
.sidebar-location-right #mascot img {
left: 0;
right: auto;
margin-left: #{mascot.hOffset}px;
}
.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-right.sidebar-large #mascot img {
left: #{if mascot.center then 25 else 0}px;
}
#mascot img {
position: fixed;
z-index: -1;
bottom: 20.1em;
height: #{
if mascot.height and isNaN parseFloat mascot.height
mascot.height
else if mascot.height
parseInt(mascot.height, 10) + 'px'
else
'auto'
};
width: #{
if mascot.width and isNaN parseFloat mascot.width
mascot.width
else if mascot.width
parseInt(mascot.width, 10) + 'px'
else
'auto'
};
margin-bottom: #{mascot.vOffset or 0}px;
cursor: pointer;
}
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
bottom: 1.5em;
}
.fourchan-ss-navigation.bottom.fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom #mascot img {
bottom: 21.6em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-decorations #mascot img {
bottom: 21.8em;
}
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
bottom: 22.9em;
}
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 23.1em;
}
.mascot-position-bottom #mascot img,
.mascot-position-default.posting-disabled #mascot img {
bottom: 0;
}
.mascots-overlap-posts #mascot img {
z-index: 3;
}
.mascot-position-middle #mascot img {
bottom: 50%;
<%= sizing %>transform: translateY(50%);
}
.mascot-position-top #mascot img {
bottom: auto !important;
top: 17px;
}
.grayscale-mascots #mascot img {
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
}
"""
categories: [ categories: [
'Anime' 'Anime'