Needlworks / Textcube

Textcube : Brand yourself! / Personalized web publishing platform with multi-user support

http://www.textcube.org

Other

207 stars 55 forks source link

New standard mobile-first skin #1654

Closed achimnol closed 9 years ago

achimnol commented 10 years ago

Build a new standard skin with mobile-first in mind. The skin will be based on Bootstrap 3.x or later, its jQuery plugins, and Font Awesome 4.x or later.

To use this skin for mobile phones, we need to force use of the blog skin instead of "i" or "m" mode. In particular, the "m" mode for old feature-phones is considered to be deprecate. We also need to modify Textcube's core codes that are tightly coupled with HTML rendering, such as pagination and category badges.

After all modifications, old skins may not be compatible with the new version of Textcube, but we will try to minimize backward-incompatibility.

inureyes commented 10 years ago

Dual renderer for paging skin block can be a backward-compatible solution.

achimnol commented 10 years ago

Just for memo. Considerations for a new skin specification:

Templates including control statements such as loops and conditionals with variables. A good candidate for PHP is Twig which resembles Django/Jinja syntax.
Special synatx to define skin-defined elements such as sidebar widgets. They are scanned when changing the skin and have persistent states like visibility and orders.
A predefined CSS namespace for Textcube Core elements. For example, we could implement the trackback pop-up window as a Popover bootstrap component by filling its content via AJAX. In this case, internal elements should have separate CSS namespace to avoid conflicts with skin's styles.

inureyes commented 10 years ago

Paging is handled by library/view/paging.php. getPagingView receives paging skin fragment, parses and returns the complete html. Therefore I'll work on

Split getPagingView into two parts: for desktop and for mobile
Add $context->property('blog.viewmode') -> 'mobile' or 'desktop', determines at dispatch process.

inureyes commented 10 years ago

@achimnol I strongly agree with your opinion about CSS namespace. Currently, textcube skin support some default CSS names and ids, hardcoded in core (/skin/blog/standard/style.css uses them) without namespace. (Well, it's 10 year old code.)

Any ideas for naming? tc (textcube)? cb (codeball)? nw (needlworks)?

inureyes commented 10 years ago

@achimnol I'll look at your modified pagination html markup of your test page. If you can send me a simplified html ul-li pagination format, please attach it here. :+1:

achimnol commented 10 years ago

I think tc- prefix would be fine. We also need to unify the rule namings, such as whether to use hyphens or underscores to distinguish different levels in the names. I think the "modern" practice is to use hyphens.

Additional idea for the new skin format:

Extension of index.xml. If we adopt template engines, some skins could offer extra options such as "left sidebar" or "right sidebar" by switching a few CSS classes. We could build an option panel like Textcube plugins and make the setting values available in the context of skin templates.
It would be more interesting if we use LESS to allow users to choose key colors of a skin, like color schemes in Microsoft Powerpoint.

inureyes commented 9 years ago

TODO

Long title breaks header navbar.
Image resize works, however it generates small-sized images.