e9f4ca6ca3
Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth.
Test Plan:
Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact.
{F1120961}
{F1120962}
{F1120963}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15315
225 lines
4.3 KiB
CSS
225 lines
4.3 KiB
CSS
/**
|
|
* @provides ponder-view-css
|
|
*/
|
|
|
|
.ponder-question-view {
|
|
background: #fff;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.device-desktop .ponder-question-view.phui-two-column-view .phui-side-column {
|
|
width: 300px;
|
|
}
|
|
|
|
.ponder-question-view .phui-object-box,
|
|
.ponder-question-view .phui-info-view {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.device-phone .ponder-question-view .phui-profile-header.phui-header-shell
|
|
.phui-header-header {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ponder-question-container {
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.ponder-question-content {
|
|
margin: 0 24px;
|
|
padding: 24px 0;
|
|
border-top: 1px solid rgba({$alphagrey}, .15);
|
|
}
|
|
|
|
.device-phone .ponder-question-content {
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.device .ponder-view-properties {
|
|
border-left: none;
|
|
border-right: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.device .ponder-question-view .phui-timeline-view,
|
|
.device .ponder-question-view .phui-timeline-event-view {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ponder-view-properties .phui-property-list-container {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ponder-question-view .phui-document-container {
|
|
border: none;
|
|
}
|
|
|
|
.ponder-view-properties .phui-property-list-stacked
|
|
.phui-property-list-properties .phui-property-list-key {
|
|
padding: 0;
|
|
}
|
|
|
|
.ponder-view-properties .phui-property-list-stacked
|
|
.phui-property-list-properties .phui-property-list-value {
|
|
margin-bottom: 16px;
|
|
padding: 0;
|
|
}
|
|
|
|
.phui-box.ponder-answer-wiki {
|
|
padding: 16px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.ponder-details-subtitle {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin-bottom: 12px;
|
|
color: {$greytext};
|
|
position: relative;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.ponder-details-subtitle a {
|
|
color: {$darkgreytext};
|
|
}
|
|
|
|
.ponder-details-author-image {
|
|
height: 24px;
|
|
width: 24px;
|
|
background-size: 100%;
|
|
margin-right: 8px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ponder-detail-view .phabricator-remarkup {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.ponder-question-content .phui-timeline-view {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.ponder-question-content .phui-timeline-view .phui-timeline-core-content {
|
|
background-color: {$lightbluebackground};
|
|
}
|
|
|
|
.ponder-answer-view {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.device-desktop .ponder-answer-view .phui-timeline-view {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.ponder-answer-view .phui-header-subheader {
|
|
display: inline;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.ponder-question-view .ponder-answer-view .phui-header-shell {
|
|
padding: 4px 8px 3px 8px;
|
|
}
|
|
|
|
.ponder-answer-view .phui-header-image-href {
|
|
display: flex;
|
|
}
|
|
|
|
.ponder-answer-view .phui-header-view .phui-header-header {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ponder-answer-view .phui-header-col1 {
|
|
width: 40px;
|
|
}
|
|
|
|
.ponder-answer-view .ponder-answer-content {
|
|
background-color: #fff;
|
|
padding: 16px 16px 0 16px;
|
|
}
|
|
|
|
.device-phone .ponder-answer-view .ponder-answer-content {
|
|
padding: 12px 12px 0 12px;
|
|
}
|
|
|
|
.ponder-answer-view .phui-header-image {
|
|
height: 30px;
|
|
width: 30px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ponder-answer-wiki-header {
|
|
font-weight: bold;
|
|
border-bottom: 1px solid {$lightblueborder};
|
|
color: {$bluetext};
|
|
padding-bottom: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ponder-footer-view {
|
|
text-align: left;
|
|
margin-top: 16px;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.ponder-answer-view .ponder-footer-view {
|
|
margin-top: 24px;
|
|
border-top: 1px solid rgba({$alphagrey}, .15);
|
|
border-bottom: none;
|
|
}
|
|
|
|
body .phui-main-column .ponder-question-content .ponder-answer-view
|
|
.phui-object-box.ponder-answer {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ponder-footer-view .ponder-footer-action {
|
|
padding: 8px 0;
|
|
margin-right: 8px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ponder-add-answer-header {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.ponder-add-answer-view {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.ponder-question-content div.ponder-question-add-comment-view
|
|
div.phui-box.phui-object-box {
|
|
background: {$lightbluebackground};
|
|
margin-right: 0;
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.device .ponder-question-content div.ponder-question-add-comment-view
|
|
div.phui-box.phui-object-box {
|
|
margin: 0;
|
|
}
|
|
|
|
.ponder-add-answer-view .phui-form-full-width.phui-form-view
|
|
label.aphront-form-label,
|
|
.ponder-question-add-comment-view .phui-form-full-width.phui-form-view
|
|
label.aphront-form-label{
|
|
display: none;
|
|
}
|
|
|
|
.ponder-add-answer-view.phui-box-grey .phui-header-shell {
|
|
border: none;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.ponder-add-answer-view .remarkup-assist-textarea,
|
|
.ponder-question-add-comment-view .remarkup-assist-textarea {
|
|
height: 8em;
|
|
}
|