From c9e8b1e5c380904e479927e2f24754d8709f590e Mon Sep 17 00:00:00 2001 From: Meitar Moscovitz Date: Wed, 11 Feb 2009 03:03:16 +1100 Subject: [PATCH 1/3] Add streamlined mobile device-friendly styles when enabled in config. A new mobile-specific style sheet is added and loaded only if the `$config['site']['mobile']` configuration variable is set to true. --- config.php.sample | 2 ++ lib/action.php | 7 ++++++ theme/base/css/mobile.css | 48 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 theme/base/css/mobile.css diff --git a/config.php.sample b/config.php.sample index a2c5801f45..d1191ea01b 100644 --- a/config.php.sample +++ b/config.php.sample @@ -18,6 +18,8 @@ $config['site']['server'] = 'localhost'; $config['site']['path'] = 'laconica'; #$config['site']['fancy'] = false; #$config['site']['theme'] = 'default'; +#To enable the built-in mobile style sheet, defaults to false. +#$config['site']['mobile'] = true; #For contact email, defaults to $_SERVER["SERVER_ADMIN"] #$config['site']['email'] = 'admin@example.net'; #Brought by... diff --git a/lib/action.php b/lib/action.php index ce92addf5c..ce37f4760a 100644 --- a/lib/action.php +++ b/lib/action.php @@ -170,6 +170,13 @@ class Action extends HTMLOutputter // lawsuit } $this->comment('[if IE]>element('link', array('rel' => 'stylesheet', + 'type' => 'text/css', + 'href' => theme_path('css/mobile.css', 'base') . '?version=' . LACONICA_VERSION, + // TODO: "handheld" CSS for other mobile devices + 'media' => 'screen and (max-device-width: 480px)')); // Mobile WebKit + } } /** diff --git a/theme/base/css/mobile.css b/theme/base/css/mobile.css new file mode 100644 index 0000000000..6cd717a4df --- /dev/null +++ b/theme/base/css/mobile.css @@ -0,0 +1,48 @@ +/** theme: base + * + * @package Laconica + * @author Meitar Moscovitz + * @license http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0 + * @link http://laconi.ca/ + */ + +/* Go linear. */ +#header, +#header address, +#site_nav_global_primary, +#anon_notice, +#site_nav_local_views .nav, +#core, +#content_inner, +#notices_primary, +.notice, +.notice .entry-title, +.notice div.entry-content, +.pagination, +.pagination .nav, +.aside .section { float: none; } + +/* And liquid. */ +#wrap { width: 95%; } + +body { font-size: 2em; } /* Make things bigger on smaller screens. */ + +#site_nav_global_primary, #site_nav_global_secondary { text-align: center; } + +.notice div.entry-content { margin-left: 0; } +address { margin: 0; } + +#anon_notice, #footer { clear: left; width: auto; font-size: .5em; } + +#content { padding: 18px 0; width: 100%; } +#content h1, #page_notice, #content_inner { padding: 0 18px; } +#content_inner { width: auto; } +.pagination .nav { overflow: auto; } + +#aside_primary { margin: 10px 0 0 0; border: none; padding: 0; width: 100%; } +#popular_notices { float: none; width: auto; } +/* Columns for supplemental info. */ +.aside .section { clear: none; padding: 9px; width: 45%; } +#top_groups_by_post { float: left; } +#featured_users { float: right; } +#export_data { display: none; } From beddf906634054b115d41046ac112cd0264dbfe1 Mon Sep 17 00:00:00 2001 From: Meitar Moscovitz Date: Wed, 11 Feb 2009 03:12:14 +1100 Subject: [PATCH 2/3] Trigger only on handheld device screens, not on browser screens, d'oh! --- lib/action.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/action.php b/lib/action.php index ce37f4760a..3e236d7146 100644 --- a/lib/action.php +++ b/lib/action.php @@ -175,7 +175,7 @@ class Action extends HTMLOutputter // lawsuit 'type' => 'text/css', 'href' => theme_path('css/mobile.css', 'base') . '?version=' . LACONICA_VERSION, // TODO: "handheld" CSS for other mobile devices - 'media' => 'screen and (max-device-width: 480px)')); // Mobile WebKit + 'media' => 'only screen and (max-device-width: 480px)')); // Mobile WebKit } } From 07c6537898a7c839469b50121b6c6d63be07613c Mon Sep 17 00:00:00 2001 From: Meitar Moscovitz Date: Wed, 11 Feb 2009 23:35:58 +1100 Subject: [PATCH 3/3] Style the notice form and notices to better avoid need to scroll around. --- theme/base/css/mobile.css | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/theme/base/css/mobile.css b/theme/base/css/mobile.css index 6cd717a4df..3d0455a673 100644 --- a/theme/base/css/mobile.css +++ b/theme/base/css/mobile.css @@ -12,31 +12,55 @@ #site_nav_global_primary, #anon_notice, #site_nav_local_views .nav, +#form_notice, +#form_notice .form_data li, #core, #content_inner, #notices_primary, .notice, .notice .entry-title, .notice div.entry-content, +.notice-options, +.notice .notice-options a, .pagination, .pagination .nav, .aside .section { float: none; } +.notice-options .notice_reply, +.notice-options .notice_delete, +.notice-options .form_favor, +.notice-options .form_disfavor { position: static; } + +#form_notice, +#anon_notice, +#content_inner, +#footer { width: auto; } + /* And liquid. */ #wrap { width: 95%; } -body { font-size: 2em; } /* Make things bigger on smaller screens. */ +/* Make things bigger on smaller screens. */ +body { font-size: 2em; } +.notices { font-size: 1.5em; } #site_nav_global_primary, #site_nav_global_secondary { text-align: center; } .notice div.entry-content { margin-left: 0; } address { margin: 0; } -#anon_notice, #footer { clear: left; width: auto; font-size: .5em; } +#anon_notice, #footer { clear: left; font-size: .5em; } + +#form_notice textarea { width: 80%; height: 5em; } +#form_notice .form_note { right: 20%; top: 6em; } +#form_notice .form_actions input.submit { width: auto; } #content { padding: 18px 0; width: 100%; } #content h1, #page_notice, #content_inner { padding: 0 18px; } -#content_inner { width: auto; } +.notices .entry-title, .notices div.entry-content { width: 90%; } +.notice .author .photo { height: 4.5em; width: 4.5em; } /* about double physical size; TODO: do this scaling better */ +.notice-options { position: absolute; top: 0; right: 0; padding-left: 7%; width: 3%; } +.notice-options .notice_delete a { float: left; } /* Works, but feels like it shouldn't. */ +/* TODO: Make the icons of the notice options bigger. Probably with mobile-specific images. */ .pagination .nav { overflow: auto; } #aside_primary { margin: 10px 0 0 0; border: none; padding: 0; width: 100%; }