maebert's profile - activity

Are you sure you have the most recent version? I only find the ASK A QUESTION-String in the SVG, however it is not part of the output...

Thanks! The answers have a slightly darker background colour than the question and will always be separated by the huge typography between Question and Answers. I agree on the comment button, though.

• _Vote Buttons:_ Good point. We could have a handwritten-style imperative ("Vote me up") on mouse-over the answer. The design as such is clean enough to allow this.
• _Navigation Icons:_ my fault, they should at least have explanatory tooltips.

Where is the best way to discuss the template structure?

Hey @Evgeny, thanks for the feedback.

• _Header:_ I tend to agree. I'll supply an alternative header that will be a lot smaller by bringing the User-Panel in the same line as the ask button and logo, making everything smaller and tighter (which again brings me to the question whether we can have any way of defining additional variables for templates that can be set in the live settings)
• _Comment button:_ I agree, as said before I might merge it into the vote buttons.

Missing stuff:

• Login / Signup pages are totally messy
• Not entirely satisfied with the profile page
• Might redo the suggested question autocomplete
• A lot of testing:
  • Haven't tested whether everything is working as it should under all conditions yet
  • No cross-browser testing yet
  • No testing on mobile devices yet
• style.less still needs to be optimised.

As for how long it took me: hard to tell, has been my evening project for a couple of weeks. Once the general design idea was set, I reckon about 30 hours.

Main Problems:

• I rewrote most of post.js (see this question for details) because it imposed some ridiculous and arbitrary structure on the site to work.
• Sometimes it's not very clear where certain elements come from; templates call a macro that calls another macro that uses some widget, etc...

My approach was to simply wipe the CSS file and then work myself through the templates one by one like Casanova in the nunnery, redoing the CSS and the template simultaneously.

Good suggestion. I thought about it earlier, but in fact if there already are any comments the button won't be in line anyway. I might move it up to the row with the vote buttons (and just give it a little "comment" icon instead of text) - will make it slightly harder for new users, but remove clutter for everybody else. What to you think?

Dear askbot community,

I finally managed to get my new template into a more-or-less functional state. It's more focused towards a community and uses strong typography, clear gutter, a consistent icon set and some neat UI tricks I've learned over the years. It's about 90% complete, with a few things missing. Here's a screenshot

You can get the skin as my github fork (branch to skin-suave). Please leave your comments, and suggestions (either here, or at the github issue site), and feel free to fork and fix stuff yourself! Here are two more details:

Enjoy Manuel

I have seen people using data attributes to enrich the DOM with information used for scripts a few times, but I think there is currently no real consensus on how they should and should not be used - other than it should validate. At any rate I think it's the best compromise between flexibility for templates and performance for the script.

Alright, I think my question was more on the livesettings rather than the CSS as such - I simply want to to throw in a few parameters to a skin that can be changed live and their settings be used in templates. Where's the best place to define them?

Mh, that eases the development of CSS, but it still doesn't allow me to change theme parameters via the live settings.

I'd like to be able to use the template syntax in style.css to say things like

a {
    color: {{ LINK_COLOR }};
}

To re-use a few global colour and style definitions throughout the template. Is it possible to pass stylesheets through jinja before including them?

Furthermore, I'd like to have such skin-specific settings accessible through the administration interface - what's the best approach there? Can I somehow include a file in the skin's directory that defines the possible parameters for the skin? How would I include this in the livesettings? The obvious advantage is that it would be easier to generate variants of the same skin, ie. different color themes or the choice between different fonts.

I would propose slowly rewrite post.js to be independent of the site's structure by using the HTML5 data- attribute. That way we can define the behaviour in the template without touching javascript, ie. by

<li class="list-button" data-action="upvote" data-source="{{ post.id }}">Like</li>
...
<span data-role="vote-counter" data-source="{{ post.id }}">...</span>

The script will then dynamically link methods to the elements containing the respective data-action and outputs to the elements defined by data-role. Downside is that this takes a bit longer, but employing jQuery's full power should make up for that.

Image src is broken (since upgrade to new skin?)

During my adventures through the old and new templates I eventually developed a lot of hate for a file by the innocent name of post.js. As I understand, it was mainly just carried over from CNPROG. Well, I'm sure these guys had their reasons, but two things bother me:

• AskBot uses JQuery, post.js however could be written much more efficiently exploiting all of jQuery's features.
• More importantly: requirements on the site's structure are hard coded into post.js, for example it wants me to use a span with class delete-icon for the delete comment element, but an a tag with edit class for the edit comment action. Where's the consistency in that? It is for example currently impossible to place the comment-button outside the area where the actual comments are displayed, as the javascript will examine the context of the button to find out where to display the widget.

What's your opinion on post.js?

Edit: Separated possible solution into an answer to facilitate discussion.

Hey,

basically I'm doing a complete rewrite of the template (or rather, have done - it's 80% complete). Reasons are that 1) I need an askbot for a very specific community and 2) I wanted to test some user interaction ideas I had recently. I will open source the skin once I'm happy with all major design choices (having a few days off, guess I can show something after the weekend). Until then, I'd like to nag with a few other templating issues :)

Also: Controls for question (delete, flag, ...) on the same line as the "Comments" header - made me think they belong to the first comment.

That file is located is skin "common" that should be more or less read only - the reason behind is that we want to be able to change some aspects of the UI while allowing users customize the skins.

For example - all sorts of active controls - we want to be able to extend so that they would still work with the users customized UI's. The only way to do it is to have a reserved skin to hold those bits.

The tag input is tied with javascript and for that reason it was moved to "common", which may or may not have been the right way to do it.

We are close to finishing the default skin and shuffling things between the "default" and the "common", but not quite done yet.

In what way are you going to improve the UI - could you explain a little more?

Hi Evgeny and Biron and everybody involved in the new skin,

first of all congratulations, the facelift was really necessary. A number of comments:

• Top bar (Home | About Askbot | ...) is visually similar to the actual top bar (Sign in, tags, ...), but functionally different --> not good.
• Yvonne Kaffeesatz makes a nice font for headings, but shouldn't be used for body font, especially in small font sizes (use on the main page for question titles is also questionable, not very readable).
• Core elements (block containing a question with all controls and additional info, block for answers, block for comments etc.) should stand out from the rest of the page. Suggestion: make them white blocks with borders and give the rest of the page a slightly darker tint (ie. via background-color)
• margins seem pretty random, please rethink the grid (may also ameliorate the aforementioned issue - check e.g. the revamped youtube design, they have a brilliantly clear and readable display of comments)

Well, there's still a lot of nit-picky stuff if you want to masturbate on pixel-perfection ;-) But I think those four issues are my primary concerns.

I'm customising a template and trying to put the tags help text into a tooltip of the tag input field, however in edit_post.html I simply find

{{ post_form.tags }}
<div class="title-desc">
    {{ post_form.tags.help_text }}
</div>

Where can I actually edit the HTML of the input field into which tags can be entered?