mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-15 03:12:41 +01:00
248d79f36d
Summary: See <https://discourse.phabricator-community.org/t/non-functional-actions-menu-on-live-phame-views/2593>. Several layers here: The "Actions" button is broken because a menu behavior is failing, since we aren't rendering the menu. When a behavior fails to initialize, catch and log the exception and continue. Previously, we stopped initializing behaviors if any failed, but behaviors are usually independent and continuing with an explicit exception seems reasonable. Give "JX.log()" some "sprintf()" semantics to make logging the behavior failure easier. We can probably afford these extra 200 bytes now in 2019. This fixes the button and gives us explicit errors in the log. So far, so good. Then, when a page won't render chrome, don't try to render the main menu. This fixes the actual errors (we no longer try to initialize menu behaviors for nodes which don't exist). Completely hide the "Actions" and "Comment" flows if the viewer isn't logged in. Although this isn't completely consistent with other applications, I think it's more appropriate for Phame. In applications like Maniphest, we show a full set of controls (but disable them) so that users who are not currently logged in have a clear path to interact with the content, under the assumption that this is a relatively common workflow. This is probably less common for Phame, where we expect most anonymous viewers not to log in or interact. Finally, parametrize a one-off border color and add a border under the crumbs at the top of the page. Test Plan: - Viewed a "Live" Phame blog post page, clicked "Actions", got a dropdown. Reviewers: amckinley Reviewed By: amckinley Differential Revision: https://secure.phabricator.com/D20378
322 lines
5.3 KiB
CSS
322 lines
5.3 KiB
CSS
/**
|
|
* @provides phame-css
|
|
*/
|
|
|
|
.phame-blog-description {
|
|
max-width: 800px;
|
|
margin: 32px auto;
|
|
position: relative;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.phame-blog-description-name {
|
|
font-weight: bold;
|
|
font-size: {$biggerfontsize};
|
|
margin: 0 0 4px 50px;
|
|
}
|
|
|
|
.phame-blog-description-content {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.phame-blog-description-image {
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
.phame-blog-description + .phui-document-view-pro-box {
|
|
border-top: 1px solid rgba({$alphablue}, 0.20);
|
|
}
|
|
|
|
.phame-home-view .phui-document-view.phui-document-view-pro {
|
|
margin: 0;
|
|
}
|
|
|
|
.phame-home-view .phui-side-column {
|
|
background-color: {$page.content};
|
|
}
|
|
|
|
.phame-home-view {
|
|
background-color: {$page.content};
|
|
border-bottom: 1px solid rgba({$alphagrey},.1);
|
|
}
|
|
|
|
.phame-home-view .phame-home-container {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.phame-home-view .phui-document-container {
|
|
border: none;
|
|
}
|
|
|
|
.phame-blog-list {
|
|
margin: 96px 16px 16px 16px;
|
|
}
|
|
|
|
.phame-blog-list + .phame-blog-list {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.device .phame-blog-list {
|
|
margin: 16px;
|
|
}
|
|
|
|
.device-phone .phame-blog-list {
|
|
margin: 16px 8px;
|
|
}
|
|
|
|
.phame-blog-list-header {
|
|
font-size: {$biggerfontsize};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.phame-blog-list-header a {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phame-blog-list-item {
|
|
display: block;
|
|
color: {$darkgreytext};
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.phame-blog-list-title:hover {
|
|
color: {$violet};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phame-blog-list-image {
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
}
|
|
|
|
.phame-blog-list-title {
|
|
margin-left: 30px;
|
|
margin-top: 2px;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
color: {$bluetext};
|
|
width: 190px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phame-blog-list-new-post {
|
|
display: block;
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 0;
|
|
}
|
|
|
|
.phame-blog-list-new-post:hover {
|
|
color: {$violet};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phame-blog-list-new-post:hover .phame-blog-list-icon {
|
|
color: {$violet};
|
|
}
|
|
|
|
.phame-blog-list-icon {
|
|
display: block;
|
|
height: 14px;
|
|
width: 14px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.phame-next-post-view {
|
|
margin: 0 auto;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.phame-next {
|
|
width: 360px;
|
|
float: right;
|
|
text-align: right;
|
|
color: {$blacktext};
|
|
position: relative;
|
|
}
|
|
|
|
.phame-next-arrow,
|
|
.phame-previous-arrow {
|
|
border: 1px solid {$lightblueborder};
|
|
border-radius: 36px;
|
|
height: 36px;
|
|
width: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phame-next-arrow .phui-icon-view,
|
|
.phame-previous-arrow .phui-icon-view {
|
|
height: 36px;
|
|
width: 34px;
|
|
font-size: 24px;
|
|
line-height: 35px;
|
|
color: {$lightblueborder};
|
|
}
|
|
|
|
.phame-previous-arrow {
|
|
float: left;
|
|
}
|
|
|
|
.phame-next-arrow {
|
|
float: right;
|
|
}
|
|
|
|
.phame-previous {
|
|
width: 360px;
|
|
float: left;
|
|
text-align: left;
|
|
color: {$blacktext};
|
|
position: relative;
|
|
}
|
|
|
|
.device .phame-previous,
|
|
.device .phame-next {
|
|
width: 100px;
|
|
}
|
|
|
|
.device .phame-previous .phame-previous-title,
|
|
.device .phame-next .phame-next-title {
|
|
display: none;
|
|
}
|
|
|
|
.phame-next:hover,
|
|
.phame-previous:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phame-next:hover .phame-next-arrow,
|
|
.phame-previous:hover .phame-previous-arrow {
|
|
border-color: {$indigo};
|
|
}
|
|
|
|
.phame-next:hover .phui-icon-view,
|
|
.phame-previous:hover .phui-icon-view {
|
|
color: {$indigo};
|
|
}
|
|
|
|
.phame-next-header,
|
|
.phame-previous-header {
|
|
font-weight: bold;
|
|
font-size: {$biggerfontsize};
|
|
}
|
|
|
|
.phame-next-header {
|
|
top: 2px;
|
|
right: 50px;
|
|
position: absolute;
|
|
}
|
|
|
|
.phame-next-title {
|
|
top: 22px;
|
|
right: 50px;
|
|
position: absolute;
|
|
}
|
|
|
|
.phame-previous-header {
|
|
top: 2px;
|
|
left: 50px;
|
|
position: absolute;
|
|
}
|
|
|
|
.phame-previous-title {
|
|
top: 22px;
|
|
left: 50px;
|
|
position: absolute;
|
|
}
|
|
|
|
.phame-404 {
|
|
margin: 48px auto;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
min-width: 240px;
|
|
width: 50%;
|
|
color: {$darkgreytext};
|
|
background: {$greybackground};
|
|
}
|
|
|
|
/* Blog Chrome */
|
|
.phame-live-view .phui-crumbs-view {
|
|
border: none;
|
|
width: 960px;
|
|
margin: 0 auto;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* Hero Image */
|
|
.phame-header-hero {
|
|
background-color: {$page.content};
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.phame-header-image {
|
|
max-height: 320px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.phui-document-view.phui-document-view-pro .phui-header-shell.phame-header-bar {
|
|
border-top: 1px solid {$thinblueborder};
|
|
border-bottom: none;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.phame-header-bar .phui-header-subheader {
|
|
margin: 0;
|
|
}
|
|
|
|
.phame-mega-header {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
background: {$page.content};
|
|
padding: 16px 0 24px;
|
|
border-top: 1px solid {$document.border};
|
|
}
|
|
|
|
.device-phone .phame-mega-header {
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.phame-mega-header .phame-header-title {
|
|
color: {$blacktext};
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.device-phone .phame-mega-header .phame-header-title {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.phame-mega-header .phame-header-subtitle {
|
|
color: {$greytext};
|
|
font-size: 20px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.phame-comment-view .phui-comment-form-view .phui-comment-action-bar {
|
|
display: none;
|
|
}
|
|
|
|
.phame-comment-view .phui-comment-form-view .phui-comment-has-actions
|
|
.phui-comment-textarea-control {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.phame-comment-view .phui-document-view-pro-box .phui-object-box {
|
|
margin-bottom: 16px;
|
|
}
|