Make things more-or-less work.

Doesn't mean it's done right, yet.
This commit is contained in:
Zixaphir 2013-03-19 21:50:47 -07:00
parent 421cd15ece
commit cdd9929034
7 changed files with 130 additions and 114 deletions

File diff suppressed because one or more lines are too long

View File

@ -63,7 +63,8 @@ a {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
outline: none;
}
body, html {
body,
html {
min-height: 100%;
#{Style.sizing}: border-box;
}
@ -110,6 +111,9 @@ hr {
.center {
text-align: center;
}
.disabled {
opacity: 0.5;
}
/* Symbols */
.dropmarker {
vertical-align: middle;
@ -650,6 +654,18 @@ hide: "
clear: both;
}
/* Posts */
.expanding {
opacity: .5;
}
.fileText:hover .fntrunc,
.fileText:not(:hover) .fnfull,
.expanded-image > .post > .file > .fileThumb > img[data-md5],
.post > .file > .fileThumb > .full-image {
display: none;
}
.expanded-image > .post > .file > .fileThumb > .full-image {
display: block;
}
.summary {
margin-bottom: #{Style.replyMargin}px;
}
@ -659,21 +675,24 @@ hide: "
.replyContainer:last-of-type .post {
margin-bottom: 0;
}
.menu_button,
.hide_thread_button,
.hide_reply_button {
.menu-button {
position: relative;
}
.menu-button,
.hide-thread-button,
.hide-reply-button {
float: right;
margin: 0 3px;
opacity: 0;
#{agent}transition: opacity .3s ease-out 0s;
}
.post:hover .hide_reply_button,
.post:hover .menu_button,
.post:hover .hide_thread_button,
.hidden_thread .hide_thread_button,
.hidden_thread .menu_button,
.inline .hide_reply_button,
.inline .menu_button {
.post:hover .hide-reply-button,
.post:hover .menu-button,
.post:hover .hide-thread-button,
.hidden_thread .hide-thread-button,
.hidden_thread .menu-button,
.inline .hide-reply-button,
.inline .menu-button {
opacity: 1;
}
.hidden_thread {
@ -765,8 +784,7 @@ else ""
}
/* Quotes */
.inlined {
font-style: italic;
#{if _conf["Bolds"] then 'font-weight: 800;' else ''}
opacity: .5;
}
.quotelink {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
@ -876,7 +894,7 @@ else ""
.entry:last-child {
border-bottom: 0;
}
.hasSubMenu::after {
.has-submenu::after {
content: "";
border-#{position}: .5em solid;
border-top: .3em solid transparent;
@ -886,13 +904,13 @@ else ""
position: absolute;
right: 3px;
}
.subMenu {
.submenu {
display: none;
position: absolute;
#{position}: 100%;
top: -1px;
}
.focused .subMenu {
.focused .submenu {
display: block;
}
/* Stubs */
@ -1333,7 +1351,7 @@ a:only-of-type > .remove {
bottom: 0;
background: rgba(0,0,0,.5);
}
#options {
#appchanx-settings {
width: auto;
left: 15%;
right: 15%;
@ -1343,7 +1361,7 @@ a:only-of-type > .remove {
padding: .3em;
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
}
#options h3,
#appchanx-settings h3,
.keybinds_tab,
.mascots_tab,
.main_tab,
@ -1355,14 +1373,14 @@ a:only-of-type > .remove {
.style_tab ul {
text-align: left;
}
#options ul {
#appchanx-settings ul {
padding: 0;
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
}
#options .selectrice ul {
#appchanx-settings .selectrice ul {
border-radius: 0;
}
#optionsContent {
.section-container {
overflow: auto;
position: absolute;
top: 1.7em;
@ -1371,14 +1389,15 @@ a:only-of-type > .remove {
left: 5px;
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
}
#optionsbar {
.sections-list {
padding: 0 3px;
float: left;
}
#optionsbar label {
.sections-list label {
cursor: pointer;
#{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}
}
.tabs label {
.sections-list label {
position: relative;
padding: 0 4px;
z-index: 1;
@ -1388,13 +1407,10 @@ a:only-of-type > .remove {
border-color: transparent;
border-style: solid;
}
#credits {
.credits {
float: right;
}
#optionsContent > input:not(:checked) + div {
display: none;
}
#options h3 {
#appchanx-settings h3 {
margin: 0;
}
.main_tab li,
@ -1404,7 +1420,7 @@ a:only-of-type > .remove {
padding: 0 5px 0 7px;
list-style-type: none;
}
#options tr:nth-of-type(2n+1),
#appchanx-settings tr:nth-of-type(2n+1),
.main_tab li:nth-of-type(2n+1),
.rice_tab li:nth-of-type(2n+1),
.style_tab li:nth-of-type(2n+1),
@ -1415,7 +1431,7 @@ a:only-of-type > .remove {
article li {
margin: 10px 0 10px 2em;
}
#options .option {
#appchanx-settings .option {
width: 50%;
display: inline-block;
vertical-align: bottom;
@ -1426,8 +1442,8 @@ article li {
.rice + .optionlabel {
padding-left: 0;
}
#options .style_tab ul,
#options .main_tab ul {
#appchanx-settings .style_tab ul,
#appchanx-settings .main_tab ul {
vertical-align: top;
#{if _conf["Single Column Mode"] then "margin: 0 auto 6px;" else "margin: 0 3px 6px;\n display: inline-block;"}
}
@ -1468,7 +1484,7 @@ article li {
.style_tab .suboptions {
bottom: 0;
}
#optionsContent textarea {
#appchanx-settingsContent textarea {
font-family: monospace;
min-height: 350px;
resize: vertical;
@ -1729,7 +1745,7 @@ opacity: 0;
float: right;
position: relative;
}
#optionsmenu {
#optionssmenu {
top: 100% !important;
left: 0 !important;
}

View File

@ -48,7 +48,7 @@ html {
background-attachment: #{theme["Background Attachment"] or ''};
background-position: #{theme["Background Position"] or ''};
}
#optionsContent,
#appchanx-settingsContent,
#exlinks-options-content,
#mascotcontent,
#themecontent {
@ -104,7 +104,7 @@ s:not(:hover) {
text-shadow: none !important;
}" else ""}
#exlinks-options,
#options,
#appchanx-settings,
#qrtab,
#{if _conf["Post Form Decorations"] then "#qr," else ""}
#updater:hover,
@ -120,7 +120,7 @@ span[style="left: 5px; position: absolute;"] a {
}
#dump,
#file,
#options input,
#appchanx-settings input,
.captchaimg,
.dump #dump:not(:hover):not(:focus),
.selectrice,
@ -133,7 +133,7 @@ textarea {
}
#dump:hover,
#file:hover,
#options .selectrice li:nth-of-type(2n+1):hover,
#appchanx-settings .selectrice li:nth-of-type(2n+1):hover,
.selectrice:hover,
.selectrice li:hover,
input:hover,
@ -190,7 +190,7 @@ textarea.field:focus {
#themeConf,
#watcher,
#watcher:hover,
.subMenu,
.submenu,
a[style="cursor: pointer; float: right;"] ~ div[style^="width: 100%;"] > table {
background: #{theme["Dialog Background"]};
border: 1px solid #{theme["Dialog Border"]};
@ -246,7 +246,7 @@ textarea {
color: #{theme["Text"]};
}
#exlinks-options-content > table,
#options ul,
#appchanx-settings ul,
.selectrice ul {
border-bottom: 1px solid #{theme["Reply Border"]};
box-shadow: inset #{theme["Shadow Color"]} 0 0 5px;
@ -266,7 +266,7 @@ textarea {
#post-preview,
#qp .opContainer,
#qp .replyContainer,
.subMenu {
.submenu {
box-shadow: #{if _conf['Quote Shadows'] then "5px 5px 5px #{theme['Shadow Color']}" else ""};
}
.rice {
@ -364,12 +364,12 @@ a .name {
.placeholder {
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
}
#options ul,
#appchanx-settings ul,
.boxcontent dd,
.selectrice ul {
border-color: #{if Style.lightTheme then "rgba(0,0,0,0.1)" else "rgba(255,255,255,0.1)"};
}
#options li,
#appchanx-settings li,
.selectrice li:not(:first-of-type) {
border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"};
}

View File

@ -579,7 +579,7 @@ Rice =
return
node: ->
Rice.checkbox $ '.postInfo input', @el
Rice.checkbox $ '.postInfo input', @nodes.post
checkbox: (input) ->
return if $.hasClass input, 'riced'

View File

@ -174,8 +174,8 @@ Settings =
init: ->
# 4chan X settings link
link = $.el 'a',
id: 'appchanOptions'
className: 'settings-link'
textContent: '<%= meta.name %> Settings'
href: 'javascript:;'
$.on link, 'click', Settings.open
@ -209,7 +209,7 @@ Settings =
$.event 'CloseMenu'
html = """
<div id=fourchanx-settings class=dialog>
<div id=appchanx-settings class=dialog>
<nav>
<div class=sections-list></div>
<div class=credits>
@ -1126,7 +1126,7 @@ ReplyHiding =
Recursive.apply ReplyHiding.hide, @, data.makeStub, true
Recursive.add ReplyHiding.hide, @, data.makeStub, true
return unless Conf['Hiding Buttons']
$.replace $('.sideArrows', @nodes.root), ReplyHiding.makeButton @, 'hide'
$.add $('.postInfo', @nodes.post), ReplyHiding.makeButton @, 'hide'
getHiddenPosts: ->
ReplyHiding.hiddenPosts = $.get "hiddenPosts.#{g.BOARD}", threads: {}
@ -1378,7 +1378,7 @@ Menu =
(post) ->
a or= $.el 'a',
className: 'menu-button'
innerHTML: '[<i></i>]'
innerHTML: '[<span class=dropmarker></span>]'
href: 'javascript:;'
clone = a.cloneNode true
clone.setAttribute 'data-postid', post.fullID

View File

@ -732,16 +732,16 @@ Themes =
.thread {
padding:10px;
}
#options.reply.dialog,
#options .dialog {
#appchanx-settings.reply.dialog,
#appchanx-settings .dialog {
background-color:#FFF;
color:#000;
border:2px solid #CCC;
}
#options ul {
#appchanx-settings ul {
border-bottom:1px solid #DBD8D2;
}
#options ul:last-of-type{
#appchanx-settings ul:last-of-type{
border:none;
}
#qp div.post{
@ -1076,7 +1076,7 @@ div.post:hover .name {
'Warnings' : 'rgb(187,187,187)'
'Shadow Color' : 'rgba(0,0,0,.1)'
'Custom CSS' : """
#options {
#appchanx-settings {
background-color: rgba(16,16,16,1) !important;
}
#delform blockquote {
@ -1659,7 +1659,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -1668,7 +1668,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -1743,7 +1743,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -1752,7 +1752,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -1835,7 +1835,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -1844,7 +1844,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -1913,7 +1913,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -1922,7 +1922,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -1988,7 +1988,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -1997,7 +1997,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2077,7 +2077,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2086,7 +2086,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2166,7 +2166,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2175,7 +2175,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2248,7 +2248,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2257,7 +2257,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2323,7 +2323,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2332,7 +2332,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2405,7 +2405,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
.reply.post,
@ -2418,7 +2418,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
a {
@ -2507,7 +2507,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2516,7 +2516,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2607,7 +2607,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow: inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2616,7 +2616,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow: inset rgba(0,0,0,.2) 0 1px 2px;
}
button,
@ -2684,7 +2684,7 @@ input#fs_search:hover,
input.field:hover,
.webkit select:hover,
textarea:hover,
#options input:not([type=checkbox]):hover {
#appchanx-settings input:not([type=checkbox]):hover {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
input[type=password]:focus,
@ -2693,7 +2693,7 @@ input#fs_search:focus,
input.field:focus,
.webkit select:focus,
textarea:focus,
#options input:focus {
#appchanx-settings input:focus {
box-shadow:inset rgba(0,0,0,.2) 0 1px 2px;
}
button,

View File

@ -680,11 +680,8 @@ QR =
dialog: ->
dialog = UI.dialog 'qr', 'top:0;right:0;', """
<div>
<div id=qrtab>
<input type=checkbox id=autohide title=Auto-hide>
<select title='Create a new thread / Reply'>
<option value=new>New thread</option>
</select>
<span class=move></span>
<a href=javascript:; class=close title=Close>×</a>
</div>
@ -695,14 +692,14 @@ QR =
<input name=email data-name=email title=E-mail placeholder=E-mail class=field size=1>
<input name=sub data-name=sub title=Subject placeholder=Subject class=field size=1>
</div>
<div id=dump-list-container>
<div id=dump-list></div>
<a id=add-post href=javascript:; title="Add a post">+</a>
</div>
<div class=textarea>
<textarea data-name=com title=Comment placeholder=Comment class=field></textarea>
<span id=char-count></span>
</div>
<div id=dump-list-container>
<div id=dump-list></div>
<a id=add-post href=javascript:; title="Add a post">+</a>
</div>
<div id=file-n-submit>
<input id=qr-file-button type=button value='Choose files'>
<span id=qr-filename-container>
@ -715,6 +712,9 @@ QR =
</div>
<input type=file multiple>
</form>
<select title='Create a new thread / Reply'>
<option value=new>New thread</option>
</select>
""".replace />\s+</g, '><' # get rid of spaces between elements
QR.nodes = nodes =