Review some of the QR's style/CSS.
Make the Name/E-mail/Subject increase in width when hovered/focused.
This commit is contained in:
Nicolas Stepien
parent
f4b6063439
commit
f1359a75fb
File diff suppressed because one or more lines are too long
107
css/style.css
107
css/style.css
@ -14,8 +14,8 @@
|
||||
margin: 0;
|
||||
padding: 2px 4px 3px;
|
||||
outline: none;
|
||||
-webkit-transition: color .25s, border-color .25s;
|
||||
transition: color .25s, border-color .25s;
|
||||
-webkit-transition: color .25s, border-color .25s, -webkit-flex .25s;
|
||||
transition: color .25s, border-color .25s, flex .25s;
|
||||
}
|
||||
.field::-moz-placeholder,
|
||||
.field:hover::-moz-placeholder {
|
||||
@ -449,23 +449,52 @@ a[href="javascript:;"] {
|
||||
#qr.autohide:not(:hover) > form {
|
||||
display: none;
|
||||
}
|
||||
#qr > .move {
|
||||
min-width: 300px;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2px;
|
||||
}
|
||||
#qr > .move > span {
|
||||
float: right;
|
||||
}
|
||||
#autohide, .close, #qr select, #dump, .remove, .captchaimg, #qr div.warning {
|
||||
#autohide, #qr select, #dump-button, .remove, .captchaimg {
|
||||
cursor: pointer;
|
||||
}
|
||||
#qr > div {
|
||||
min-width: 300px;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
#qr .move {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
#qr select {
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#dump {
|
||||
.presto #qr select {
|
||||
height: 1em;
|
||||
}
|
||||
#qr .close {
|
||||
padding: 0 3px;
|
||||
}
|
||||
#qr > form {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.persona {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
.persona .field {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.persona .field:hover,
|
||||
.persona .field:focus {
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
#dump-button {
|
||||
background: -webkit-linear-gradient(#EEE, #CCC);
|
||||
background: linear-gradient(#EEE, #CCC);
|
||||
border: 1px solid #CCC;
|
||||
@ -474,23 +503,18 @@ a[href="javascript:;"] {
|
||||
outline: none;
|
||||
width: 30px;
|
||||
}
|
||||
.gecko #dump {
|
||||
padding: 1px 0 2px;
|
||||
width: 10%;
|
||||
}
|
||||
#dump:hover, #dump:focus {
|
||||
#dump-button:hover, #dump-button:focus {
|
||||
background: -webkit-linear-gradient(#FFF, #DDD);
|
||||
background: linear-gradient(#FFF, #DDD);
|
||||
}
|
||||
#dump:active, .dump #dump:not(:hover):not(:focus) {
|
||||
#dump-button:active, .dump #dump-button:not(:hover):not(:focus) {
|
||||
background: -webkit-linear-gradient(#CCC, #DDD);
|
||||
background: linear-gradient(#CCC, #DDD);
|
||||
}
|
||||
#qr:not(.dump) #replies, .dump > form > label {
|
||||
#qr:not(.dump) #dump-list, .dump #spoilerLabel {
|
||||
display: none;
|
||||
}
|
||||
#replies {
|
||||
display: block;
|
||||
#dump-list {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
@ -498,15 +522,14 @@ a[href="javascript:;"] {
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#replies > div {
|
||||
#dump-list-container {
|
||||
counter-reset: qrpreviews;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
margin: 0; padding: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: pre;
|
||||
}
|
||||
#replies > div:hover {
|
||||
#dump-list-container:hover {
|
||||
bottom: -10px;
|
||||
overflow-x: auto;
|
||||
z-index: 1;
|
||||
@ -577,23 +600,12 @@ a[href="javascript:;"] {
|
||||
font-size: 3.5em;
|
||||
line-height: 100px;
|
||||
}
|
||||
.persona {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
.persona .field {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.gecko .persona .field {
|
||||
width: 30%;
|
||||
}
|
||||
#qr textarea.field {
|
||||
display: -webkit-box;
|
||||
#qr textarea {
|
||||
min-height: 160px;
|
||||
min-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
#qr.has-captcha textarea.field {
|
||||
#qr.has-captcha textarea {
|
||||
min-height: 120px;
|
||||
}
|
||||
.textarea {
|
||||
@ -603,39 +615,34 @@ a[href="javascript:;"] {
|
||||
color: #000;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
font-size: 8pt;
|
||||
margin: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
#charCount.warning {
|
||||
color: red;
|
||||
}
|
||||
.captchainput > .field {
|
||||
min-width: 100%;
|
||||
}
|
||||
.captchaimg {
|
||||
background: #FFF;
|
||||
outline: 1px solid #CCC;
|
||||
outline-offset: -1px;
|
||||
text-align: center;
|
||||
}
|
||||
.captchaimg > img {
|
||||
display: block;
|
||||
height: 57px;
|
||||
width: 300px;
|
||||
}
|
||||
#qr [type=file] {
|
||||
#qr [type='file'] {
|
||||
margin: 1px 0;
|
||||
width: 70%;
|
||||
}
|
||||
#qr [type=submit] {
|
||||
#qr [type='submit'] {
|
||||
margin: 1px 0;
|
||||
padding: 1px; /* not Gecko */
|
||||
width: 30%;
|
||||
}
|
||||
.gecko #qr [type=submit] {
|
||||
.gecko #qr [type='submit'] {
|
||||
padding: 0 1px; /* Gecko does not respect box-sizing: border-box */
|
||||
}
|
||||
|
||||
|
||||
@ -199,7 +199,7 @@ UI = do ->
|
||||
dragstart = (e) ->
|
||||
# prevent text selection
|
||||
e.preventDefault()
|
||||
el = @parentNode
|
||||
el = $.x 'ancestor::div[contains(@class,"dialog")][1]', @
|
||||
if isTouching = e.type is 'touchstart'
|
||||
e = e.changedTouches[e.changedTouches.length - 1]
|
||||
# distance from pointer to el edge is constant; calculate it here.
|
||||
|
||||
@ -36,10 +36,7 @@ QR =
|
||||
$.on d, 'drop', QR.dropFile
|
||||
$.on d, 'dragstart dragend', QR.drag
|
||||
$.on d, 'ThreadUpdate', ->
|
||||
if g.DEAD
|
||||
QR.abort()
|
||||
else
|
||||
QR.status()
|
||||
QR.abort() if g.DEAD
|
||||
|
||||
QR.persist() if Conf['Persistent QR']
|
||||
|
||||
@ -512,15 +509,14 @@ QR =
|
||||
className: 'captchaimg'
|
||||
title: 'Reload'
|
||||
innerHTML: '<img>'
|
||||
inputContainer = $.el 'div',
|
||||
className: 'captchainput'
|
||||
innerHTML: '<input title=Verification class=field autocomplete=off size=1>'
|
||||
input = $.el 'input',
|
||||
className: 'captcha-input field'
|
||||
title: 'Verification'
|
||||
autocomplete: 'off'
|
||||
@nodes =
|
||||
challenge: $.id 'recaptcha_challenge_field_holder'
|
||||
imgContainer: imgContainer
|
||||
inputContainer: inputContainer
|
||||
img: imgContainer.firstChild
|
||||
input: inputContainer.firstChild
|
||||
challenge: $.id 'recaptcha_challenge_field_holder'
|
||||
img: imgContainer.firstChild
|
||||
input: input
|
||||
|
||||
if MutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.OMutationObserver
|
||||
observer = new MutationObserver @load.bind @
|
||||
@ -530,14 +526,14 @@ QR =
|
||||
$.on @nodes.challenge, 'DOMNodeInserted', @load.bind @
|
||||
|
||||
$.on imgContainer, 'click', @reload.bind @
|
||||
$.on @nodes.input, 'keydown', @keydown.bind @
|
||||
$.on input, 'keydown', @keydown.bind @
|
||||
$.sync 'captchas', @sync.bind @
|
||||
@sync $.get 'captchas', []
|
||||
# start with an uncached captcha
|
||||
@reload()
|
||||
|
||||
$.addClass QR.nodes.el, 'has-captcha'
|
||||
$.after QR.nodes.com.parentNode, [imgContainer, inputContainer]
|
||||
$.after QR.nodes.com.parentNode, [imgContainer, input]
|
||||
sync: (@captchas) ->
|
||||
@count()
|
||||
getOne: ->
|
||||
@ -558,7 +554,7 @@ QR =
|
||||
save: ->
|
||||
return unless response = @nodes.input.value.trim()
|
||||
@captchas.push
|
||||
challenge: @nodes.challenge.firstChild.value
|
||||
challenge: @nodes.img.alt
|
||||
response: response
|
||||
timeout: @timeout
|
||||
@count()
|
||||
@ -606,15 +602,34 @@ QR =
|
||||
|
||||
dialog: ->
|
||||
dialog = UI.dialog 'qr', 'top:0;right:0;', """
|
||||
<div class=move>Quick Reply <input type=checkbox id=autohide title=Auto-hide><span> <a href=javascript:; class=close title=Close>×</a></span></div>
|
||||
<div>
|
||||
<input type=checkbox id=autohide title=Auto-hide>
|
||||
<span class=move></span>
|
||||
<a href=javascript:; class=close title=Close>×</a>
|
||||
</div>
|
||||
<form>
|
||||
<div class=persona><input id=dump type=button title='Dump list' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>
|
||||
<div id=replies><div id=repliesList><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>
|
||||
<div class=textarea><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>
|
||||
<div><input type=file title="Shift+Click to remove the selected file." multiple size=16><input type=submit></div>
|
||||
<div class=persona>
|
||||
<input id=dump-button type=button title='Dump list' value=+>
|
||||
<input name=name title=Name placeholder=Name class=field size=1>
|
||||
<input name=email title=E-mail placeholder=E-mail class=field size=1>
|
||||
<input name=sub title=Subject placeholder=Subject class=field size=1>
|
||||
</div>
|
||||
<div id=dump-list>
|
||||
<div id=dump-list-container>
|
||||
<a id=addReply href=javascript:; title="Add a reply">+</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class=textarea>
|
||||
<textarea name=com title=Comment placeholder=Comment class=field></textarea>
|
||||
<span id=charCount></span>
|
||||
</div>
|
||||
<div>
|
||||
<input type=file title="Shift+Click to remove the selected file." multiple size=16>
|
||||
<input type=submit>
|
||||
</div>
|
||||
<label id=spoilerLabel><input type=checkbox id=spoiler> Spoiler Image</label>
|
||||
</form>
|
||||
"""
|
||||
""".replace />\s+</g, '><' # get rid of spaces between elements
|
||||
|
||||
QR.nodes = nodes =
|
||||
el: dialog
|
||||
@ -622,13 +637,11 @@ QR =
|
||||
autohide: $ '#autohide', dialog
|
||||
close: $ '.close', dialog
|
||||
form: $ 'form', dialog
|
||||
dump: $ '#dump', dialog
|
||||
dumpButton: $ '#dump-button', dialog
|
||||
name: $ '[name=name]', dialog
|
||||
email: $ '[name=email]', dialog
|
||||
sub: $ '[name=sub]', dialog
|
||||
com: $ '[name=com]', dialog
|
||||
replies: $ '#replies', dialog
|
||||
repliesList: $ '#repliesList', dialog
|
||||
addReply: $ '#addReply', dialog
|
||||
charCount: $ '#charCount', dialog
|
||||
fileInput: $ '[type=file]', dialog
|
||||
@ -655,11 +668,10 @@ QR =
|
||||
QR.spoiler = !!$ 'input[name=spoiler]'
|
||||
nodes.spoiler.parentNode.hidden = !QR.spoiler
|
||||
|
||||
span = nodes.autohide.nextElementSibling
|
||||
if g.BOARD.ID is 'f'
|
||||
if g.VIEW is 'index'
|
||||
nodes.flashTag = $('select[name=filetag]').cloneNode true
|
||||
$.prepend span, nodes.flashTag
|
||||
$.after QR.nodes.autohide, nodes.flashTag
|
||||
else # Make a list of visible threads.
|
||||
nodes.thread = $.el 'select',
|
||||
title: 'Create a new thread / Reply'
|
||||
@ -667,18 +679,17 @@ QR =
|
||||
for key, thread of g.BOARD.threads
|
||||
threads += "<option value=#{thread.ID}>Thread No.#{thread.ID}</option>"
|
||||
nodes.thread.innerHTML = threads
|
||||
$.prepend span, nodes.thread
|
||||
$.after QR.nodes.autohide, nodes.thread
|
||||
QR.resetThreadSelector()
|
||||
|
||||
$.on span, 'mousedown', (e) -> e.stopPropagation()
|
||||
$.on nodes.autohide, 'change', QR.toggleHide
|
||||
$.on nodes.close, 'click', QR.close
|
||||
$.on nodes.dump, 'click', -> QR.nodes.el.classList.toggle 'dump'
|
||||
$.on nodes.addReply, 'click', -> new QR.reply().select()
|
||||
$.on nodes.form, 'submit', QR.submit
|
||||
$.on nodes.fileInput, 'change', QR.fileInput
|
||||
$.on nodes.fileInput, 'click', (e) -> if e.shiftKey then QR.selected.rmFile(); e.preventDefault()
|
||||
$.on nodes.spoiler, 'change', -> $('input', QR.selected.el).click()
|
||||
$.on nodes.autohide, 'change', QR.toggleHide
|
||||
$.on nodes.close, 'click', QR.close
|
||||
$.on nodes.dumpButton, 'click', -> QR.nodes.el.classList.toggle 'dump'
|
||||
$.on nodes.addReply, 'click', -> new QR.reply().select()
|
||||
$.on nodes.form, 'submit', QR.submit
|
||||
$.on nodes.fileInput, 'change', QR.fileInput
|
||||
$.on nodes.fileInput, 'click', (e) -> if e.shiftKey then QR.selected.rmFile(); e.preventDefault()
|
||||
$.on nodes.spoiler, 'change', -> $('input', QR.selected.el).click()
|
||||
|
||||
new QR.reply().select()
|
||||
# save selected reply's data
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user