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

@@ -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(

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() {

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->setTitle(pht('Empty Answer'));
-      $dialog->appendChild(phutil_tag('p', array(), pht(
+      $dialog->appendChild(
+        phutil_tag('p', array(), pht(
         'Your answer must not be empty.')));
       $dialog->addCancelButton('/Q'.$question_id);
 

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

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

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

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',

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

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")
+      ->setNoBackground()
-      ->setHeader("Responses:");
+      ->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>'));
 
     }
 

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>',

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

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;

webroot/rsrc/css/application/ponder/comments.css

@@ -4,101 +4,71 @@
 
 
 .ponder-comments {
-  width: 600px;
+  width: 480px;
-  margin : 0;
+  margin: 5px 0 0 60px;
-  margin-left : 120px;
+}
+
+.device .ponder-comments {
+  width: 100%;
+  margin: 5px 0 0 0;
 }
 
 .ponder-comments th {
-  width : 0px;
+  width: 0px;
-  height : 0px;
+  height: 0px;
 }
 
 .ponder-comments td {
   vertical-align: top;
-  padding: 6px 2px;
+  padding: 6px;
-  border-bottom: 1px dotted #d0d0d0;
+  border-bottom: 1px solid #e7e7e7;
-  background : #FFF;
+  background: #fff;
 }
 
 .ponder-datestamp {
-  font-size: 9px;
+  font-size: 11px;
-  font-family: "Verdana";
+  color: #777;
-  color: #666666;
 }
 
 .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;
+  background: #ccc;
-  border-bottom: 1px solid #aaaaaa;
+  border-bottom: 1px solid #aaa;
   cursor: pointer;
 }
 
 td .aphront-form-control {
-  padding : 0;
+  padding: 0;
 }
 
 td .aphront-form-control-submit {
-  float : right;
+  display: block;
-  margin : 0;
-  padding : 0;
 }
 
-.aphront-form-control-submit button {
-  margin : 0;
-}
-
-
 td .aphront-form-input {
-  margin : 0;
+  margin: 0;
-  width : 100%;
+  width: 100%;
 }
 
 td .aphront-form-control textarea {
-  height : 40px;
+  height: 50px;
-  width : 560px;
-  padding : 0;
-  margin : 0;
-  background : #EEE;
-  border : 1px solid #CCC;
 }
 
-div.ponder-comment-markup {
-  padding-left : 5px;
-}
-
-
 .ponder-comment-markup p {
-  margin : 0;
+  margin: 0 0 5px 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;
 }
 
+.ponder-comment-markup h2,
+.ponder-comment-markup h3,
+.ponder-comment-markup h4,
 .ponder-comment-markup h5 {
-  margin : 0;
+  margin: 0;
-  font-size : inherit;
+  font-size: inherit;
-  font-weight : normal;
+  font-weight: normal;
 }

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

webroot/rsrc/css/application/ponder/feed.css

@@ -3,12 +3,12 @@
  */
 
 .ponder-question-summary {
-  width : 100%;
+  width: 100%;
-  background : #DFDFE3;
+  background: #DFDFE3;
-  float : left;
+  float: left;
-  clear : both;
+  clear: both;
-  margin-top : 1px;
+  margin-top: 1px;
-  padding : 1px;
+  padding: 1px;
 }
 
 .ponder-answer-summary {

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;
+  float: left;
-  width  : 32px;
+  width: 32px;
-  height : 60px;
+  height: 60px;
-  margin-top : 56px;
+  margin-top: 56px;
-  margin-left : 10px;
+  margin-left: 10px;
+}
+
+.device-phone .ponder-votebox {
+  margin: 0;
+}
+
+.device-phone .ponder-votebox-content {
+  margin-left: 35px;
 }
 
 .ponder-votable .phabricator-transaction-view {
-  margin : 0;
+  margin: 0;
-  padding : 0;
+  padding: 0;
 }
 
 .ponder-votable .phabricator-transaction-detail {