From 092020a7a6ef62fcd0c69c749fbd5cdbbd5b1b0f Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 20 May 2013 07:55:23 -0700 Subject: [PATCH] Improve Ponder on Mobile Summary: Ponder was pretty unusable on mobile, I fixed most of the issues and ran some pht's as well. Test Plan: Use Ponder //shudder// Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5977 --- src/__celerity_resource_map__.php | 15 +--- .../PhabricatorApplicationPonder.php | 2 +- .../controller/PonderAnswerSaveController.php | 5 +- .../PonderCommentSaveController.php | 2 +- .../PonderQuestionAskController.php | 7 +- .../PonderQuestionViewController.php | 3 +- .../ponder/view/PonderAddAnswerView.php | 16 ++-- .../ponder/view/PonderAddCommentView.php | 7 +- .../ponder/view/PonderAnswerListView.php | 6 +- .../ponder/view/PonderCommentListView.php | 2 +- .../ponder/view/PonderQuestionDetailView.php | 3 +- .../ponder/view/PonderUserProfileView.php | 1 - .../rsrc/css/application/ponder/comments.css | 88 ++++++------------- webroot/rsrc/css/application/ponder/core.css | 30 ------- webroot/rsrc/css/application/ponder/feed.css | 12 +-- webroot/rsrc/css/application/ponder/vote.css | 30 ++++--- 16 files changed, 84 insertions(+), 145 deletions(-) delete mode 100644 webroot/rsrc/css/application/ponder/core.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 9ba6117ea9..721a597dc7 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3705,25 +3705,16 @@ celerity_register_resource_map(array( ), 'ponder-comment-table-css' => array( - 'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css', + 'uri' => '/res/cf9c686f/rsrc/css/application/ponder/comments.css', 'type' => 'css', 'requires' => array( ), 'disk' => '/rsrc/css/application/ponder/comments.css', ), - 'ponder-core-view-css' => - array( - 'uri' => '/res/3a2d5e18/rsrc/css/application/ponder/core.css', - 'type' => 'css', - 'requires' => - array( - ), - 'disk' => '/rsrc/css/application/ponder/core.css', - ), 'ponder-feed-view-css' => array( - 'uri' => '/res/df22bd20/rsrc/css/application/ponder/feed.css', + 'uri' => '/res/cab09075/rsrc/css/application/ponder/feed.css', 'type' => 'css', 'requires' => array( @@ -3741,7 +3732,7 @@ celerity_register_resource_map(array( ), 'ponder-vote-css' => array( - 'uri' => '/res/ea8316c2/rsrc/css/application/ponder/vote.css', + 'uri' => '/res/104d54ba/rsrc/css/application/ponder/vote.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/ponder/application/PhabricatorApplicationPonder.php b/src/applications/ponder/application/PhabricatorApplicationPonder.php index 0d3840f412..45b9af5751 100644 --- a/src/applications/ponder/application/PhabricatorApplicationPonder.php +++ b/src/applications/ponder/application/PhabricatorApplicationPonder.php @@ -7,7 +7,7 @@ final class PhabricatorApplicationPonder extends PhabricatorApplication { } public function getShortDescription() { - return 'Find Answers'; + return pht('Find Answers'); } public function getIconName() { diff --git a/src/applications/ponder/controller/PonderAnswerSaveController.php b/src/applications/ponder/controller/PonderAnswerSaveController.php index 9f505a3287..ce137b7628 100644 --- a/src/applications/ponder/controller/PonderAnswerSaveController.php +++ b/src/applications/ponder/controller/PonderAnswerSaveController.php @@ -22,8 +22,9 @@ final class PonderAnswerSaveController extends PonderController { if (!strlen(trim($answer))) { $dialog = new AphrontDialogView(); $dialog->setUser($request->getUser()); - $dialog->setTitle('Empty answer'); - $dialog->appendChild(phutil_tag('p', array(), pht( + $dialog->setTitle(pht('Empty Answer')); + $dialog->appendChild( + phutil_tag('p', array(), pht( 'Your answer must not be empty.'))); $dialog->addCancelButton('/Q'.$question_id); diff --git a/src/applications/ponder/controller/PonderCommentSaveController.php b/src/applications/ponder/controller/PonderCommentSaveController.php index 54bbc8a2ba..45c2539101 100644 --- a/src/applications/ponder/controller/PonderCommentSaveController.php +++ b/src/applications/ponder/controller/PonderCommentSaveController.php @@ -31,7 +31,7 @@ final class PonderCommentSaveController extends PonderController { if (!strlen(trim($content))) { $dialog = new AphrontDialogView(); $dialog->setUser($request->getUser()); - $dialog->setTitle('Empty comment'); + $dialog->setTitle(pht('Empty Comment')); $dialog->appendChild(phutil_tag('p', array(), pht( 'Your comment must not be empty.'))); $dialog->addCancelButton('/Q'.$question_id); diff --git a/src/applications/ponder/controller/PonderQuestionAskController.php b/src/applications/ponder/controller/PonderQuestionAskController.php index ad1b887bb0..360af3fce6 100644 --- a/src/applications/ponder/controller/PonderQuestionAskController.php +++ b/src/applications/ponder/controller/PonderQuestionAskController.php @@ -48,7 +48,7 @@ final class PonderQuestionAskController extends PonderController { $error_view = null; if ($errors) { $error_view = id(new AphrontErrorView()) - ->setTitle('Form Errors') + ->setTitle(pht('Form Errors')) ->setErrors($errors); } @@ -72,7 +72,7 @@ final class PonderQuestionAskController extends PonderController { ->setUser($user)) ->appendChild( id(new AphrontFormSubmitControl()) - ->setValue('Ask Away!')); + ->setValue(pht('Ask Away!'))); $preview = hsprintf( '
'. @@ -106,7 +106,8 @@ final class PonderQuestionAskController extends PonderController { $nav, array( 'device' => true, - 'title' => 'Ask a Question', + 'dust' => true, + 'title' => pht('Ask a Question'), )); } diff --git a/src/applications/ponder/controller/PonderQuestionViewController.php b/src/applications/ponder/controller/PonderQuestionViewController.php index 29ad9532c1..059a290f55 100644 --- a/src/applications/ponder/controller/PonderQuestionViewController.php +++ b/src/applications/ponder/controller/PonderQuestionViewController.php @@ -94,7 +94,8 @@ final class PonderQuestionViewController extends PonderController { $nav, array( 'device' => true, - 'title' => 'Q'.$question->getID().' '.$question->getTitle() + 'title' => 'Q'.$question->getID().' '.$question->getTitle(), + 'dust' => true, )); } diff --git a/src/applications/ponder/view/PonderAddAnswerView.php b/src/applications/ponder/view/PonderAddAnswerView.php index 80109f39e3..95b2905635 100644 --- a/src/applications/ponder/view/PonderAddAnswerView.php +++ b/src/applications/ponder/view/PonderAddAnswerView.php @@ -17,14 +17,12 @@ final class PonderAddAnswerView extends AphrontView { } public function render() { - require_celerity_resource('ponder-core-view-css'); - $is_serious = PhabricatorEnv::getEnvConfig('phabricator.serious-business'); $question = $this->question; $header = id(new PhabricatorHeaderView()) - ->setHeader('Add Answer'); + ->setHeader(pht('Add Answer')); $form = new AphrontFormView(); $form @@ -36,22 +34,26 @@ final class PonderAddAnswerView extends AphrontView { ->appendChild( id(new PhabricatorRemarkupControl()) ->setName('answer') - ->setLabel('Answer') + ->setLabel(pht('Answer')) ->setError(true) ->setID('answer-content') ->setUser($this->user)) ->appendChild( id(new AphrontFormSubmitControl()) - ->setValue($is_serious ? 'Submit' : 'Make it so')); + ->setValue($is_serious ? + pht('Submit') : + pht('Make it so'))); + $loading = pht('Loading answer preview...'); $preview = hsprintf( '
'. '
'. ''. - 'Loading answer preview...'. + '%s'. ''. '
'. - '
'); + '
', + $loading); Javelin::initBehavior( 'ponder-feedback-preview', diff --git a/src/applications/ponder/view/PonderAddCommentView.php b/src/applications/ponder/view/PonderAddCommentView.php index ba26fe961e..11f87cc2be 100644 --- a/src/applications/ponder/view/PonderAddCommentView.php +++ b/src/applications/ponder/view/PonderAddCommentView.php @@ -33,6 +33,7 @@ final class PonderAddCommentView extends AphrontView { $form ->setUser($this->user) ->setAction($this->actionURI) + ->setNoShading(true) ->setWorkflow(true) ->addHiddenInput('target', $target) ->addHiddenInput('question_id', $questionID) @@ -41,12 +42,14 @@ final class PonderAddCommentView extends AphrontView { ->setName('content')) ->appendChild( id(new AphrontFormSubmitControl()) - ->setValue($is_serious ? 'Submit' : 'Editorialize')); + ->setValue($is_serious ? + pht('Submit') : + pht('Editorialize'))); $view = id(new AphrontMoreView()) ->setSome('') ->setMore($form->render()) - ->setExpandText('Add Comment'); + ->setExpandText(pht('Add Comment')); return $view->render(); } diff --git a/src/applications/ponder/view/PonderAnswerListView.php b/src/applications/ponder/view/PonderAnswerListView.php index 87c4674ae9..174e1c19bf 100644 --- a/src/applications/ponder/view/PonderAnswerListView.php +++ b/src/applications/ponder/view/PonderAnswerListView.php @@ -47,8 +47,8 @@ final class PonderAnswerListView extends AphrontView { $handles = $this->handles; $panel = id(new AphrontPanelView()) - ->addClass("ponder-panel") - ->setHeader("Responses:"); + ->setNoBackground() + ->setHeader(pht("Responses")); foreach ($this->answers as $cur_answer) { $view = new PonderPostBodyView(); @@ -71,7 +71,7 @@ final class PonderAnswerListView extends AphrontView { $panel->appendChild($view); $panel->appendChild($commentview); $panel->appendChild( - hsprintf('
')); + hsprintf('
')); } diff --git a/src/applications/ponder/view/PonderCommentListView.php b/src/applications/ponder/view/PonderCommentListView.php index fd08369f57..4e1e991aec 100644 --- a/src/applications/ponder/view/PonderCommentListView.php +++ b/src/applications/ponder/view/PonderCommentListView.php @@ -57,7 +57,7 @@ final class PonderCommentListView extends AphrontView { ''. ''. '
'. - '%s —%s %s'. + '%s -%s %s'. '
'. ''. '', diff --git a/src/applications/ponder/view/PonderQuestionDetailView.php b/src/applications/ponder/view/PonderQuestionDetailView.php index 01265a66fd..9a5f1db018 100644 --- a/src/applications/ponder/view/PonderQuestionDetailView.php +++ b/src/applications/ponder/view/PonderQuestionDetailView.php @@ -16,14 +16,13 @@ final class PonderQuestionDetailView extends AphrontView { } public function render() { - require_celerity_resource('ponder-core-view-css'); $question = $this->question; $handles = $this->handles; $user = $this->user; $panel = id(new AphrontPanelView()) - ->addClass("ponder-panel"); + ->setNoBackground(true); $contentview = new PonderPostBodyView(); $contentview diff --git a/src/applications/ponder/view/PonderUserProfileView.php b/src/applications/ponder/view/PonderUserProfileView.php index 3094c1b507..dc4a892135 100644 --- a/src/applications/ponder/view/PonderUserProfileView.php +++ b/src/applications/ponder/view/PonderUserProfileView.php @@ -35,7 +35,6 @@ final class PonderUserProfileView extends AphrontView { } public function render() { - require_celerity_resource('ponder-core-view-css'); require_celerity_resource('ponder-feed-view-css'); $user = $this->user; diff --git a/webroot/rsrc/css/application/ponder/comments.css b/webroot/rsrc/css/application/ponder/comments.css index 389347af2e..19abb5b044 100644 --- a/webroot/rsrc/css/application/ponder/comments.css +++ b/webroot/rsrc/css/application/ponder/comments.css @@ -4,101 +4,71 @@ .ponder-comments { - width: 600px; - margin : 0; - margin-left : 120px; + width: 480px; + margin: 5px 0 0 60px; +} + +.device .ponder-comments { + width: 100%; + margin: 5px 0 0 0; } .ponder-comments th { - width : 0px; - height : 0px; + width: 0px; + height: 0px; } .ponder-comments td { vertical-align: top; - padding: 6px 2px; - border-bottom: 1px dotted #d0d0d0; - background : #FFF; + padding: 6px; + border-bottom: 1px solid #e7e7e7; + background: #fff; } .ponder-datestamp { - font-size: 9px; - font-family: "Verdana"; - color: #666666; + font-size: 11px; + color: #777; } .ponder-label { display: block; width: 100%; - font-size: 14px; font-weight: bold; - color: #222222; + color: #333; text-align: left; margin: 0px 0px 6px; padding: 6px 4px; - background: #cccccc; - border-bottom: 1px solid #aaaaaa; + background: #ccc; + border-bottom: 1px solid #aaa; cursor: pointer; } td .aphront-form-control { - padding : 0; + padding: 0; } td .aphront-form-control-submit { - float : right; - margin : 0; - padding : 0; + display: block; } -.aphront-form-control-submit button { - margin : 0; -} - - td .aphront-form-input { - margin : 0; - width : 100%; + margin: 0; + width: 100%; } td .aphront-form-control textarea { - height : 40px; - width : 560px; - padding : 0; - margin : 0; - background : #EEE; - border : 1px solid #CCC; + height: 50px; } -div.ponder-comment-markup { - padding-left : 5px; -} - - .ponder-comment-markup p { - margin : 0; -} - -.ponder-comment-markup h2 { - margin : 0; - font-size : inherit; - font-weight : normal; -} - -.ponder-comment-markup h3 { - margin : 0; - font-size : inherit; - font-weight : normal; -} - -.ponder-comment-markup h4 { - margin : 0; - font-size : inherit; - font-weight : normal; + margin: 0 0 5px 0; } +.ponder-comment-markup h2, +.ponder-comment-markup h3, +.ponder-comment-markup h4, .ponder-comment-markup h5 { - margin : 0; - font-size : inherit; - font-weight : normal; + margin: 0; + font-size: inherit; + font-weight: normal; } diff --git a/webroot/rsrc/css/application/ponder/core.css b/webroot/rsrc/css/application/ponder/core.css deleted file mode 100644 index 3334c7c929..0000000000 --- a/webroot/rsrc/css/application/ponder/core.css +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @provides ponder-core-view-css - */ - -.ponder-primary-pane { - margin: 0 0 0 2em; - padding-bottom: 2em; - max-width: 800px; -} - -.ponder-panel { - max-width: 800px; - padding-left : 30px; - border : none; - background : white; -} - -.ponder-panel h1 { - margin-left : -30px; - margin-right : -50px; - margin-bottom: 0px; - padding-bottom : 4px; - font-size : 1.5em; - border-bottom : 1px solid #AAA; -} - -.ponder-panel .aphront-form-view { - border : none; - background : none; -} diff --git a/webroot/rsrc/css/application/ponder/feed.css b/webroot/rsrc/css/application/ponder/feed.css index eb031fdef9..e2c0eefb21 100644 --- a/webroot/rsrc/css/application/ponder/feed.css +++ b/webroot/rsrc/css/application/ponder/feed.css @@ -3,12 +3,12 @@ */ .ponder-question-summary { - width : 100%; - background : #DFDFE3; - float : left; - clear : both; - margin-top : 1px; - padding : 1px; + width: 100%; + background: #DFDFE3; + float: left; + clear: both; + margin-top: 1px; + padding: 1px; } .ponder-answer-summary { diff --git a/webroot/rsrc/css/application/ponder/vote.css b/webroot/rsrc/css/application/ponder/vote.css index 31b8ac9f71..60dd9d1249 100644 --- a/webroot/rsrc/css/application/ponder/vote.css +++ b/webroot/rsrc/css/application/ponder/vote.css @@ -12,11 +12,8 @@ display: block; text-decoration: none; - color: #999999; + color: #a1a5a9; font-weight: normal; - - /* Our default fonts have weirdly different up/down arrow sizes. */ - font-family: Arial; } .ponder-votebox a:hover { @@ -38,20 +35,25 @@ font-weight: bold; } - - - .ponder-votebox { - float : left; - width : 32px; - height : 60px; - margin-top : 56px; - margin-left : 10px; + float: left; + width: 32px; + height: 60px; + margin-top: 56px; + margin-left: 10px; +} + +.device-phone .ponder-votebox { + margin: 0; +} + +.device-phone .ponder-votebox-content { + margin-left: 35px; } .ponder-votable .phabricator-transaction-view { - margin : 0; - padding : 0; + margin: 0; + padding: 0; } .ponder-votable .phabricator-transaction-detail {