mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-24 22:40:55 +01:00
fe7e288cf5
Summary:
Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications:
- Ponder
- Paste
- Slowvote
- Countdown
- Projects
- Profile
- Passphrase
This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages.
Test Plan:
Test each of the applications on mobile, tablet, and desktop breakpoints.
{F1135705}
{F1135706}
{F1135707}
{F1135708}
{F1135709}
{F1135710}
{F1135711}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15366
145 lines
2.7 KiB
CSS
145 lines
2.7 KiB
CSS
/**
|
|
* @provides ponder-view-css
|
|
*/
|
|
|
|
.ponder-question-container {
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.phui-two-column-view .phui-main-column .ponder-question-content
|
|
.phui-box.ponder-answer-wiki {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.ponder-answer-wiki .phabricator-remarkup {
|
|
padding: 16px;
|
|
}
|
|
|
|
.ponder-question-content .phui-timeline-view {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.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 .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: 16px;
|
|
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-answer-section {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.ponder-add-answer-header {
|
|
margin-top: 64px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ponder-add-answer-view {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.ponder-question-content div.ponder-question-add-comment-view
|
|
div.phui-box.phui-object-box {
|
|
margin-right: 0;
|
|
margin-left: 62px;
|
|
}
|
|
|
|
.device .ponder-question-content div.ponder-question-add-comment-view
|
|
div.phui-box.phui-object-box {
|
|
margin: 0;
|
|
}
|
|
|
|
.ponder-question-add-comment-view .remarkup-assist-textarea {
|
|
height: 8em;
|
|
}
|