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
2024-12-26 15:30:58 +01:00 · 2013-05-20 07:55:23 -07:00 · 2013-05-20 07:55:23 -07:00 · 092020a7a6
commit 092020a7a6
parent 2214f96d3f
16 changed files with 84 additions and 145 deletions
--- 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(
--- 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() {
--- 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);

--- 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);
--- 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(
      '<div class="aphront-panel-flush">'.
@ -106,7 +106,8 @@ final class PonderQuestionAskController extends PonderController {
      $nav,
      array(
        'device' => true,
-        'title'  => 'Ask a Question',
+        'dust' => true,
+        'title'  => pht('Ask a Question'),
      ));
  }

--- 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,
      ));
  }

--- 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(
      '<div class="aphront-panel-flush">'.
        '<div id="answer-preview">'.
          '<span class="aphront-panel-preview-loading-text">'.
-            'Loading answer preview...'.
+            '%s'.
          '</span>'.
        '</div>'.
-      '</div>');
+      '</div>',
+      $loading);

    Javelin::initBehavior(
      'ponder-feedback-preview',
--- 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();
  }
--- 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('<div style="height: 40px; clear : both"></div>'));
+        hsprintf('<div style="height: 20px; clear: both"></div>'));

    }

--- a/src/applications/ponder/view/PonderCommentListView.php
+++ b/src/applications/ponder/view/PonderCommentListView.php
@ -57,7 +57,7 @@ final class PonderCommentListView extends AphrontView {
          '<th><a name="comment-%s" /></th>'.
          '<td>'.
            '<div class="phabricator-remarkup ponder-comment-markup">'.
-              '%s&nbsp;&mdash;%s&nbsp;<span class="ponder-datestamp">%s</span>'.
+              '%s -%s <span class="ponder-datestamp">%s</span>'.
            '</div>'.
          '</td>'.
        '</tr>',
--- 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
--- 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;
--- 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;
 }
--- a/webroot/rsrc/css/application/ponder/core.css
+++ b/webroot/rsrc/css/application/ponder/core.css
@ -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;
-}
--- 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 {
--- 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 {