revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-03-06 09:29:28 +01:00
Code Issues Releases Wiki Activity

Clean up CSS for Pholio upload thing

Browse source 
Summary: Ref T3572. Pure JS/CSS changes, just cleaning up some of the mess I made and slightly improving the behavior on mobile (you won't be able to edit images on mobile, but you could fix descriptions and titles, at least).

Test Plan: {F50887}

Reviewers: btrahan, chad

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T3572

Differential Revision: https://secure.phabricator.com/D6500
This commit is contained in:
epriestley 2013-07-19 14:09:27 -07:00
parent 87871b3588
commit e777f7ad91
3 changed files with 79 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/__celerity_resource_map__.php
View file

@ -3744,7 +3744,7 @@ celerity_register_resource_map(array(
),
'pholio-edit-css' =>
array(
'uri' => '/res/01a56a3b/rsrc/css/application/pholio/pholio-edit.css',
'uri' => '/res/1d07a294/rsrc/css/application/pholio/pholio-edit.css',
'type' => 'css',
'requires' =>
array(

33
src/applications/pholio/view/PholioUploadedImageView.php
View file

@ -26,14 +26,6 @@ final class PholioUploadedImageView extends AphrontView {
$phid = $file->getPHID();
$replaces_phid = $this->replacesPHID;
$thumb = phutil_tag(
'img',
array(
'src' => $file->getThumb280x210URI(),
'width' => 280,
'height' => 210,
));
$remove = $this->renderRemoveElement();
$title = id(new AphrontFormTextControl())
@ -48,28 +40,27 @@ final class PholioUploadedImageView extends AphrontView {
->setSigil('image-description')
->setLabel(pht('Description'));
$thumb_frame = javelin_tag(
$thumb_frame = phutil_tag(
'div',
array(
'class' => 'pholio-thumb-frame',
'sigil' => 'pholio-thumb-frame',
),
$thumb);
'style' => 'background-image: url('.$file->getThumb280x210URI().');',
));
$content = hsprintf(
'<div class="thumb-box">
<div class="title">
<div class="text">%s</div>
<div class="remove">%s</div>
'<div class="pholio-thumb-box">
<div class="pholio-thumb-title">
%s
<div class="pholio-thumb-name">%s</div>
</div>
<div class="thumb">%s</div>
%s
</div>
<div class="image-data">
<div class="title">%s</div>
<div class="description">%s</div>
<div class="pholio-image-details">
%s
%s
</div>',
$file->getName(),
$remove,
$file->getName(),
$thumb_frame,
$title,
$description);

132
webroot/rsrc/css/application/pholio/pholio-edit.css
View file

@ -3,89 +3,89 @@
*/
.pholio-uploaded-image {
padding: 4px;
overflow: hidden;
/* When we activate the image control to show that we're going to replace
it on drag-and-drop, this gives us a border which looks good without
crowding anything or leaving elements misaligned. */
border: 1px solid transparent;
margin: 0 0 12px 0;
margin: -4px -4px 12px;
padding: 4px;
}
.pholio-thumb-box {
margin: 2px 0;
float: left;
background: #f7f7f7;
border: 1px solid #D5D9DF;
border-radius: 3px;
width: 296px;
overflow: hidden;
}
.pholio-uploaded-image .thumb-box {
border: 1px solid #D5D9DF;
border-radius: 3px;
min-width: 280px;
width: 48%;
float: left;
text-align: center;
}
.pholio-uploaded-image .image-data {
width: 48%;
float: right;
}
.pholio-uploaded-image .thumb-box .title {
width: 100%;
float: left;
background: #EDF0F4;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 1px solid #D5D9DF;
}
.pholio-thumb-frame {
background: #ffffff;
padding: 12px 0px 0px 0px;
width: 100%;
}
.pholio-uploaded-image .thumb-box .pholio-thumb-frame img {
.device .pholio-thumb-box {
float: none;
margin: 0 auto;
}
.pholio-uploaded-image .thumb-box .title .text {
width: 220px;
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 6px 0px 0px 8px;
.pholio-thumb-frame {
background-color: #ffffff;
background-position: center center;
background-repeat: no-repeat;
background-size: 280px 210px;
width: 280px;
height: 210px;
padding: 8px;
}
.pholio-uploaded-image .thumb-box .title .remove {
.pholio-thumb-title {
padding: 4px 8px;
font-weight: bold;
color: #444444;
overflow: hidden;
border-bottom: 1px solid #d7d7d7;
}
.pholio-thumb-name {
line-height: 24px;
margin-right: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pholio-thumb-title .button {
float: right;
}
.pholio-uploaded-image .thumb-box .title .remove .button {
background: #EDF0F4;
border: none;
.pholio-image-details {
margin-left: 312px;
}
.pholio-uploaded-image .thumb-box .title .remove .button:hover {
box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.pholio-uploaded-image .image-data .aphront-form-control {
padding: 0px 0px 4px 4px;
}
.pholio-uploaded-image .image-data .aphront-form-label {
text-align: left;
margin: 0px 0px 5px 0px;
}
.pholio-uploaded-image .image-data .aphront-form-input {
margin: 0;
width: 100%;
}
.aphront-form-input .aphront-form-drag-and-drop-file-list {
float: left;
width: 100%;
}
.aphront-form-input .aphront-form-drag-and-drop-file-list
.drag-and-drop-file-target {
padding: 20px;
.device .pholio-image-details {
margin-left: 0;
clear: both;
}
.pholio-uploaded-image .pholio-image-details .aphront-form-control {
padding: 0;
margin: 0 0 8px 0;
overflow: hidden;
}
.pholio-uploaded-image .pholio-image-details .aphront-form-label,
.pholio-uploaded-image .pholio-image-details .aphront-form-input {
display: block;
width: auto;
text-align: left;
padding: 0;
margin: 0;
}
.pholio-uploaded-image .pholio-image-details .aphront-form-label {
margin: 0 0 4px 0;
}
.pholio-edit-drop {
border-width: 1px;
border-style: dashed;