Month's top: Whynotsignup00 with 28$
Want LAH to translate a manga for you?
Little Angels Hentai Forum Index
It's for you!
PLEASE LOG IN OR REGISTER TO BE ABLE TO SEE THE PICTURES AND ATTACHED FILES!
Problem with layout of lists
Goto page Previous  1, 2, 3, 4, 5  Next
 
Compose reply Little Angels Hentai Forum Index » Help and test-post forum View previous thread
View next thread
DMCA
Problem with layout of lists
Author Message
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
ult_combo:
The spoiler title could go right at its side, as in the attachment below.
Looks fine Very Happy

edit: in the case of [spoiler=] the word spoiler (in show/hide spoiler) better could be left out Surprised
Then choosing as spoiler title e.g. 'index of chapter 1' you get something like: "show index of chapter 1" instead of "show spoiler index of chapter 1" and analogous with hide.

Tue Mar 04, 2014 8:34 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
The point of [Show spoiler] is to make it clear that clicking the button will display hidden contents, independent of whether there is descriptive text or not, and independent of the text. I've thought about "Show hidden contents" and "View contents" but I'm not quite satisfied. I'm brainstorming with Sat to make some design changes, including the new spoiler template, so there will be changes soon enough. Razz


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Tue Mar 04, 2014 2:36 pm Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
According to your own guidelines ("Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away" and "Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs") it seems that [hide the unhidden] and [unhide the hidden] is too long indeed, [hide] and [unhide] means exactly the same (note that hxxp://fiddle.jshell.net/5e9rG/show/ has taken away even hide/unhide and replaced it by a small dropup/dropdown symbol - in this example it is not immediately clear that these symbols are clickable! The customer can easily solve this mentioning the clickable character in the summary field. In an index like http://lah.li/p/254926 I'd remark that they are clickable once, in the same way as the clickable big arrows).

As another guideline recommend to KISS In Love

I'm looking forward to your new design changes, be sure I'll enjoy testing and using them thoroughly Very Happy


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Thu Mar 06, 2014 8:30 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
jacxxx:
note that hxxp://fiddle.jshell.net/5e9rG/show/ has taken away even hide/unhide and replaced it by a small dropup/dropdown symbol - in this example it is not immediately clear that these symbols are clickable!
Yeah, I thought the same. That's the default Chrome rendering for the <details> element, but we aren't going to use it.

The redesigns are currently under the testing phase, so they should land on live by the weekend if we don't find any huge bugs while testing.

As for spoilers, we're going with "Show spoiler"/"Hide spoiler" for the current non-titled [spoiler], to keep its text and meaning similar to the existing [spoiler]s which are being updated. As for the new [spoiler="something"] which allows for a title/summary, the button reads "Expand" (when spoiler is closed) and "Shrink" (in opened spoilers), they convey about the same meaning and as there is a description on the side, the user will know what s/he is expanding/shrinking. This is still subject to change.

You will get to test it soon enough, thanks for all your throughout testing in advance. Razz


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Thu Mar 06, 2014 3:50 pm Profile PM MSN Skype
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.


Last edited by ult_combo on Mon Mar 10, 2014 1:58 pm; edited 1 time in total
Mon Mar 10, 2014 5:21 am Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
ult_combo:
The latest set of fixes and small improvements has just landed:
  • BBCode
    • New spoiler="title" tag support
    • BBCode editor buttons now insert tags at caret position
    • BBCode Alt+key hotkeys now work correctly in Chrome and Firefox (some hotkeys may still be changed)
    • Rewritten 20 operations from bbencode second pass to a single operation, better performance when rendering pages and better organized code
    • Rewritten spoilers' bbencode first pass, better handling of unpaired spoiler tags
  • Styling
    • New spoiler and quote styling
    • BBCode editor's font select options background changed to have better contrast
    • New post bubble styling - cleaner markup, color changed to match theme colors, anti-aliased bubble corner
    • Fatter buttons, easier to click
  • Small fixes/improvements
    • Removed framing from posting screen's topic review, also removed its duplicated header
    • Fixed spoilers in posting topic review and post reports review
    • Force word-breaking on search post results to preserve layout
    • Reverted to old async syntax for ga.js, fixes resource blocking in Firefox
    • Removed "Compatibility mode" button from IE address bar
This sums virtually all visible changes.
I just had to try out the new nested list layout by rewriting your summing up. Clicking e.g. an expand button in the quote above some very cute ballgags appear as bullets Sweatdrop
You have solved the original "problem with layout of lists" beyond my imagination. It's wonderful, thanks again folks Little Angel 2
ult_combo:
Feel free to report issues and suggest improvements as usual. Razz
hm... isn't there too much spacing below the upper line of the second quote Laughing Surprised Embarassed


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Mon Mar 10, 2014 8:47 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
jacxxx:
some very cute ballgags appear as bullets
Yeah, 2nd level unordered lists -- that is, an unordered list inside of another list (either ordered or unordered) -- always had those bullets, those are the browser's default ones actually. Razz I guess you haven't noticed it before as you usually do nesting the other way around, with top-level unordered lists.

jacxxx:
hm... isn't there too much spacing below the upper line of the second quote
You've put an emoticon in it, our emoticons align with the baseline of the line and stretch the line height to fit them. Razz


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Mon Mar 10, 2014 2:04 pm Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post can spacings between successive expand items be diminished? Quote
One unwanted property of the new expand facility is worrying me: at first sight exactly one extra line seems to have appeared between two successive expand items (see the first quote in my post above as well as your moved post). My very first trial was to get rid of this extra line but ofc I couldn't.

Looking better later on (see the collage in the attachment below) it appears that other effects cause the "extra line": the expand button itself is very big (compared with the other buttons we use - see collage; could be made twice as low?) + spacing around expand button within expand rectangular box (could be twice as small?) + spacing between boxes (could be zero?).

Wanted: no "extra line" Cool


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Wed Mar 12, 2014 10:19 pm Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
jacxxx:
it appears that other effects cause the "extra line"
Yeah, it does when the spoilers are inactive.

jacxxx:
the expand button itself is very big
Well, it is has the same height as the preview, submit and "go" buttons which we are using now. The width is a bit larger so it can fit all the possible text values (Expand, Shrink, Show spoiler, Hide spoiler) without changing the button width. Of course, we could let the button width adjust automatically to content, but it looks rather ugly when a button unnecessarily changes its size after an interaction. Having different widths for named/anonymous spoilers seemed unnecessary - better keep their design inline with each other when possible. Also, the button background doesn't contrast very well with the post background, so a slightly larger button makes it more visible.

jacxxx:
spacing around expand button within expand rectangular box (could be twice as small?)
There's 5px padding in the highlight box. Anything lower than that wouldn't be actually visible.

jacxxx:
spacing between boxes (could be zero?).
This is a bit tricky part. There's 5px spacing above and below each spoiler, though note that inside these 5px is the outline shadow effect (which does not count as part of the spoiler dimensions per se). So without any spacing above/below it, the shadow would be drawn above any content (e.g. text) which comes immediately before/after the spoiler. Also, you're using Chrome which draws relatively smaller shadows, Firefox draws the shadows a bit larger so that spacing is necessary (how can these two render shadows so differently and still be considered spec-compliant is beyond me). But either way, it is not worth a browser-specific hack and it is only 5px above and below the spoiler. But as you've noticed, back-to-back spoilers then have 10px spacing between them, and extra 10px of "spacing" which is actually the boxes' padding, but looks like spacing until the highlight appears.

The initial design had the outline highlight always visible so the necessity for these margins was clear enough, but not so much now that the inactive spoilers have hidden outline. Pushing the layout down to make space for shadows on the hover effect wouldn't look any good though, hence the margins were kept.

On a general note about buttons: as 1920x1080 is currently the most used desktop resolution and with the growing number of mobile users, the clickable areas (including buttons) should be enlarged in the future, not the other way around. Razz

tl;dr: anything less than that would be too crowded -- either the shadow would overlap other content or the spoiler contents would be too close to the shadow making it harder to read. And the other buttons should be enlarged in the future to be easier to click.

So, until the next redesign or until a miraculous idea appears, you will have to live with some spacing between spoilers.


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Thu Mar 13, 2014 6:02 am Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
Thanks for your complete answer, Ult

ult_combo:
... until the next redesign or until a miraculous idea appears, you will have to live with some spacing between spoilers.
A miraculous idea suddenly appeared Embarassed

Between two successive expand lines you only need half the spacing (you only hover one such line at a time) Idea

So it would help greatly when the software checks if an expand line is followed by another expand line without text in between, and in that case doesn't add the lower extra spacing.

Of course, later on an additional flatter design will help too Very Happy


Note
I've started reworking Arrancar's index (see http://lah.li/23055/3d-custom-girl-mystics-futanari/?page=12#315436 and also http://lah.li/20446/test/?page=1#254926 ) in the new style:
14 chapters ==> 14 "extra lines" ==> it's not going to look as nice as it used to be ==> this triggered my last post above Surprised


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Mon Mar 17, 2014 9:15 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
As I've mentioned previously, the spacing there is reserved for when the outline shadow appears.

jacxxx:
Between two successive expand lines you only need half the spacing (you only hover one such line at a time) Idea
Once you open a spoiler, the "hover highlight" becomes permanent and you may have more than one open spoiler.

The only option I could think of would be collapsing the reserved space and expand it on hover which is when the shadow appears, but obviously then it would push the contents below the spoiler down by a small margin when hovering the "open spoiler" button, that is not as streamlined as the current one which simply highlights without altering the positioning of elements. Hence the latter option was chosen.


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Mon Mar 17, 2014 7:10 pm Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
Your solution
ult_combo:
... collapsing the reserved space and expand it on hover ... it would push the contents ... when hovering the "open spoiler" button ...
seems good enough in the case of adjacent spoilers. It gives the opportunity to present lists of unopened spoilers - like in this premature example:
thread title/ short content description
  • chapter 1 title
    expanded: full title/description
    • text post 1.1 + link
    • text post 1.2 + link
    • text post ... + link
    • text post 1.m + link
  • chapter 2 title
    expanded: full title/description
    • text post 2.1 + link
    • text post 2.2 + link
    • text post ... + link
    • text post 2.m + link
  • chapter ... title
    expanded: full title/description
    • text post ... + link
    • text post ... + link
    • text post ... + link
    • text post ... + link
  • chapter n title
    expanded: full title/description
    • text post n.1 + link
    • text post n.2 + link
    • text post ... + link
    • text post n.m + link

in the best possible way - as is usually the case on this site!

-----------------------------------------------------------------------------------------
previous version of this post that I now overrule by the text above
In my previous post I only considered adjacent unopened spoilers. Opening a spoiler you have to push the text below a bit further iff it is followed by an unopened spoiler! Ofc when closing a spoiler you have to take care to remove this extra space added iff folowed by an unopened spoiler.

ult_combo:
As I've mentioned previously, the spacing there is reserved for when the outline shadow appears. !? see * edit below ?!

jacxxx:
Between two successive expand lines ("expand line" = inner part of unopened spoiler, the part you see when your mouse is elsewhere) you only need half the spacing between these "expand lines" reserved for when the outline shadow appears (you only hover one such line at a time)
Once you open a spoiler the contents below the spoiler is pushed down - when an unopened spoiler follows directly it has to be pushed down even a little bit further to allow for enough space for the hover highlight above that unopened spoiler; the "hover highlight" of the opened spoiler becomes permanent and you may have more than one open spoiler.
Conclusion: less space is generated between adjacent unopened spoilers while working as streamlined as the current implementation.

* edit: if the effect is too small, perhaps your solution may be much better in the case of adjacent spoilers


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Tue Mar 18, 2014 8:21 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
Check out the attached gif which visually explains the terms "padding" and "spacing" which I'll use in this post.

Basically, I had to make two decisions before finishing the the new spoilers design:

- As you can see in the gif, the "vertical spacing" is there to prevent the highlight's shadow from overlapping other contents. I could retract that spacing while the shadow is not visible, but then a simple action as hovering the spoiler would cause the spacing to appear pushing down the contents below the spoiler box -- it'd feel really jerky for the user.

- Collapsing the spacing between adjacent spoilers, it was actually the initial behavior. It just felt wrong at the time to have different margins depending on the context (adjacent spoilers), so I changed it to ensure that the spacing was respected for each spoiler so their shadows wouldn't overlap. The final design which you're seeing now has smaller shadows than the initial, so I could collapse (or lower) the spacing, however, the change wouldn't be very noticeable. Say, if I collapse the top spoiler's spacing-bottom (5px) with the bottom spoiler's spacing-top (5px) to a single 5px spacing between them, there would still be another 10px between them due to their paddings (5px from top spoiler's padding-bottom + 5px from bottom spoiler's padding-top). So the spacing between closed spoilers would change from 20px to 15px, not very noticeable IMO - see the result hxxp://jsfiddle.net/XWvpE/

In the end, it is better to have some extra spacing than not enough space.

jacxxx:
in the best possible way - as is usually the case on this site!
Some decisions may not seem like it, but they were taken for the best. Razz


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Wed Mar 19, 2014 1:47 am Profile PM MSN Skype
jacxxx
Earth Angel
Warnings:
Posts: 1308

Post Quote
ult_combo:
Check out the attached gif which visually explains the terms "padding" and "spacing" which I'll use in this post.
Very explicit gif, making your terms much more clear than before. Thanks!

ult_combo:
... the spacing between closed spoilers would change from 20px to 15px, not very noticeable IMO - see the result js...
Two remarks:

I.
I really can't tell whether the spacing in hxxp://jsfiddle.net/XWvpE/ is 15px or 20 px, the two lines with "Expand Title" you see when you don't hover them seem quite far apart. I think this would be far less conspicuous when we always would see lines around "Expand" as well as around "Expand Title". Unhovered these lines could be very thin - but visible; on hovering they could highlight as they do now. The expanded form could show the same behavior: thin lines unhovered, highlighted on hovering.

II.
Using spoilers in index lists may not be a good idea after all. Ideally opening an index you'd like to see something like:

Index description >

Clicking > this could unfold like:

Index description <
  • first (group of) chapter(s) >
  • second >
    ...


Clicking a next level > one would like to see a next unfolding like:

Index description <
  • first (group of) chapter(s) <
      1.1 first subgroup >
      1.2 next subgroup >
      ...
  • second >
    ...


Clicking < the corresponding detail list disappears so that we fold the situation back to the situation before the unfolding.

Maybe something like this has already been implemented in html?

----------------------------------------
nasty little (chrome) details:
  • bold > and < look the same as normal > and <
  • 1.1 and 1.2 jump too far to the right
  • extra line appears between "Index description" and " first (group of) chapter(s)" but not between "first (group of) chapter(s)" and "1.1 first subgroup"


_________________
My avatar shows the first encounter of Yuki in the Land of Eternal Snow. Yuki would become my favorite character in the on-going Mystics Saga by arrancar85 In Love
Wed Mar 26, 2014 8:54 am Profile PM
ult_combo
Matrix Angel
Warnings:
Posts: 1235

Post Quote
jacxxx:
bold > and < look the same as normal > and <
No, they don't.

jacxxx:
1.1 and 1.2 jump too far to the right
Because you've written invalid markup. The only valid direct children of a list is a [ * ] (without spacing), I know you've probably tried to replace it with your own sub-numbering but guess what? That's invalid. Text nodes are not allowed as direct children of list elements, and as I've said before, lists are more complex and limited than you'd expect. Keep them for simple use cases or use your own enumerating method without mixing it with lists.

jacxxx:
extra line appears between "Index description" and " first (group of) chapter(s)" but not between "first (group of) chapter(s)" and "1.1 first subgroup"
Not really an extra line, it is just that top-level lists have spacing above and below them.

The > and < is pretty much what spoilers already do, I'm not willing to duplicate functionality as already said.

I'll pass the border idea to Sat, but honestly, we have too many priorities and barely enough personnel to work on these, hence minor UI changes that concern virtually 0% of the users are very far from the priorities list.


_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.



There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art.
Wed Mar 26, 2014 11:04 pm Profile PM MSN Skype
Display posts from previous:    
Options Quick Reply
Show Smilies

 
Compose reply Quick reply Little Angels Hentai Forum Index » Help and test-post forum All times are GMT
Goto page Previous  1, 2, 3, 4, 5  Next
Page 2 of 5

 
Jump to: 
You can post new threads in this forum
You can reply to threads in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum


Do not upload or mention any illegal content. Violators will be reported to the authorities. You are responsible for your uploads and actions.
If it is illegal for you to view adult lolikon material in your current location, leave this site immediately.
LAH is in compliance with DMCA.
LAH works best with JavaScript enabled. Enable it for a better experience. (´・ω・`)
Your browser is outdated and insecure! Please update your browser to fully enjoy LAH.