Styled meta information under photo.
This commit is contained in:
Jaisen Mathai
parent
939750a1a9
commit
40f3e1de98
10 changed files with 140 additions and 45 deletions
|
|
@ -18,6 +18,7 @@ This includes comments and favorites and could include other social actions in t
|
|||
appId: (string),
|
||||
targetId: (string), // FK Photos.id or Social.id
|
||||
targetType: (string), // photo, social
|
||||
email: (string),
|
||||
name: (string),
|
||||
avatar: (string),
|
||||
website: (string),
|
||||
|
|
@ -37,6 +38,7 @@ This includes comments and favorites and could include other social actions in t
|
|||
* appId, A string identifing the application creating this entry
|
||||
* targetId, a foreign key to a [Photo][Photo] or [Action][Action] object this action was taken on
|
||||
* targetType, a reference to the target type: photo or social
|
||||
* email, email address of the user taking this action
|
||||
* name, name of the user taking this action
|
||||
* avatar, URL to an image which represents this user's avatar or profile photo
|
||||
* website, URL to the user's website
|
||||
|
|
|
|||
|
|
@ -183,6 +183,54 @@ div#photo div.picture img {
|
|||
-moz-box-shadow: 2px 2px 2px #888;
|
||||
-webkit-box-shadow: 2px 2px 2px #888;
|
||||
}
|
||||
div#photo div.picture div{
|
||||
color:#666;
|
||||
margin:auto;
|
||||
}
|
||||
div#photo div.picture div.title{
|
||||
font-size:1.75em;
|
||||
padding-top:10px;
|
||||
}
|
||||
div#photo div.picture div.description{
|
||||
font-size:1em;
|
||||
padding-top:5px;
|
||||
}
|
||||
div#photo div.meta-content {
|
||||
color:#888;
|
||||
border-bottom: solid 1px #eee;
|
||||
}
|
||||
div#photo div.meta-content>div {
|
||||
width:50%;
|
||||
float:left;
|
||||
margin:10px 0;
|
||||
}
|
||||
div#photo img.map {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
}
|
||||
div#photo ol.comments, div#photo ul.exif{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
font-size:.9em;
|
||||
margin:0;
|
||||
}
|
||||
div#photo ol.comments li{
|
||||
margin:0 0 15px;
|
||||
clear:both;
|
||||
}
|
||||
div#photo ol.comments li div.date{
|
||||
font-size:smaller;
|
||||
font-style:italic;
|
||||
}
|
||||
div#photo ol.comments li img.avatar{
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border:solid 2px #ccc;
|
||||
float:left;
|
||||
margin:0 4px 4px 0;
|
||||
}
|
||||
|
||||
div.margin { width:960px; margin:auto; }
|
||||
/* // themeage */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
var op = (function(){
|
||||
var log = function(msg) {
|
||||
if(console !== undefined && console.log !== undefined)
|
||||
console.log(msg);
|
||||
};
|
||||
var _this = {};
|
||||
return {
|
||||
handlers: {
|
||||
|
|
@ -14,7 +18,7 @@ var op = (function(){
|
|||
return false;
|
||||
},
|
||||
login: function() {
|
||||
console.log('login');
|
||||
log('login');
|
||||
navigator.id.getVerifiedEmail(function(assertion) {
|
||||
if (assertion) {
|
||||
op.user.loginSuccess(assertion);
|
||||
|
|
@ -38,9 +42,9 @@ var op = (function(){
|
|||
photoLink: function(event) {
|
||||
var el = this;
|
||||
if(event.type == 'click') {
|
||||
console.log(el);
|
||||
log(el);
|
||||
} else if(event.type == 'mouseover') {
|
||||
console.log('mousover');
|
||||
log('mousover');
|
||||
}
|
||||
},
|
||||
searchBarToggle: function(event) {
|
||||
|
|
@ -85,9 +89,8 @@ var op = (function(){
|
|||
$('.action-delete').live('click', op.handlers.actionDelete);
|
||||
$('.search-bar-toggle').click(op.handlers.searchBarToggle);
|
||||
$('form#form-tag-search').submit(op.handlers.searchByTags);
|
||||
$('a#login').click(op.handlers.login);
|
||||
$('.login').click(op.handlers.login);
|
||||
$('form textarea.comment').click(function(){ $(this).animate({height:'30px'}, 100); });
|
||||
$('form textarea.comment').blur(function(){ $(this).animate({height:'15px'}, 100); });
|
||||
}
|
||||
},
|
||||
message: {
|
||||
|
|
@ -135,17 +138,17 @@ var op = (function(){
|
|||
},
|
||||
user: {
|
||||
loginFailure: function(assertion) {
|
||||
console.log('login failed');
|
||||
log('login failed');
|
||||
// TODO something here to handle failed login
|
||||
},
|
||||
loginProcessed: function(response) {
|
||||
if(response.code != 200) {
|
||||
console.log('processing of login failed');
|
||||
log('processing of login failed');
|
||||
// TODO do something here to handle failed login
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('login processing succeeded');
|
||||
log('login processing succeeded');
|
||||
},
|
||||
loginSuccess: function(assertion) {
|
||||
var params = {assertion: assertion};
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ class ApiActionController extends BaseController
|
|||
$params = $_POST;
|
||||
$params['targetId'] = $targetId;
|
||||
$params['targetType'] = $targetType;
|
||||
$params['email'] = getSession()->get('email');
|
||||
$id = Action::add($params);
|
||||
|
||||
if($id)
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ class Action
|
|||
{
|
||||
return array(
|
||||
'appId' => getConfig()->get('application')->appId,
|
||||
'email' => '',
|
||||
'name' => '',
|
||||
'avatar' => '',
|
||||
'website' => '',
|
||||
|
|
|
|||
|
|
@ -17,6 +17,21 @@ class User
|
|||
*/
|
||||
private static $user;
|
||||
|
||||
/**
|
||||
* Get an avatar given an email address
|
||||
* See http://en.gravatar.com/site/implement/images/ and http://en.gravatar.com/site/implement/hash/
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public static function getAvatarFromEmail($size = 50, $email = null)
|
||||
{
|
||||
if($email === null)
|
||||
$email = getSession()->get('email');
|
||||
|
||||
$hash = md5(strtolower(trim($email)));
|
||||
return "http://www.gravatar.com/avatar/{$hash}?s={$size}";
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the next ID to be used for a photo.
|
||||
* The ID is a base 32 string that represents an autoincrementing integer.
|
||||
|
|
|
|||
|
|
@ -81,6 +81,12 @@ class Utility
|
|||
return $int > 1 ? "{$word}s" : $word;
|
||||
}
|
||||
|
||||
public static function staticMapUrl($latitude, $longitude, $zoom, $size, $type = 'roadmap')
|
||||
{
|
||||
//http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false
|
||||
return "http://maps.googleapis.com/maps/api/staticmap?center={$latitude},{$longitude}&zoom={$zoom}&size={$size}&maptype={$type}&markers=color:grey%7Clabel:S%7C{$latitude},{$longitude}&sensor=false";
|
||||
}
|
||||
|
||||
public static function tagsAsLinks($tags)
|
||||
{
|
||||
$ret = array();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<?php if(User::isLoggedIn()) { ?>
|
||||
<?php echo getSession()->get('email'); ?><img src="/assets/img/default/header-navigation-user.png" align="absmiddle">
|
||||
<?php } else { ?>
|
||||
<a href="#" id="login"><img src="https://browserid.org/i/sign_in_blue.png" align="absmiddle"></a>
|
||||
<a href="#" class="login"><img src="https://browserid.org/i/sign_in_blue.png" align="absmiddle"></a>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div id="searchbar">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
<div class="info">
|
||||
<ul>
|
||||
<li class="date"><?php echo Utility::dateLong($photo['dateTaken']); ?></li>
|
||||
<li class="heart">Favorited 9 times & 3 comments - <a href="#comments">see all</a></li>
|
||||
<li class="heart"><?php echo count($photo['actions']); ?> favorites & comments - <a href="#comments">see all</a></li>
|
||||
<?php if(!empty($photo['tags'])) { ?>
|
||||
<li class="tags"><?php echo Utility::tagsAsLinks($photo['tags']); ?></li>
|
||||
<?php } ?>
|
||||
<?php if(!empty($photo['latitude']) && !empty($photo['latitude'])) { ?>
|
||||
<li class="globe"><?php echo $photo['latitude']; ?>, <?php echo $photo['longitude']; ?></li>
|
||||
<li class="globe"><?php echo $photo['latitude']; ?>, <?php echo $photo['longitude']; ?> - <a href="#map">see map</a></li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<div class="comment-form">
|
||||
|
|
@ -16,9 +16,13 @@
|
|||
<input type="hidden" name="type" value="comment">
|
||||
<input type="hidden" name="targetUrl" value="<?php sprintf('http://%s%s', $_SERVER['HTTP_HOST'], $_SERVER['REQUEST_URI']); ?>">
|
||||
<div class="buttons">
|
||||
<button type="submit">Comment</button>
|
||||
<?php if(count($photo['actions']) > 0) { ?>
|
||||
<div class="see-all"><a href="#comments">show <?php echo sprintf('%d %s', count($photo['actions']), Utility::plural(count($photo['actions']), 'comment')); ?><a/></div>
|
||||
<?php if(User::isLoggedIn()) { ?>
|
||||
<button type="submit">Comment</button>
|
||||
<?php if(count($photo['actions']) > 0) { ?>
|
||||
<div class="see-all"><a href="#comments">show <?php echo sprintf('%d %s', count($photo['actions']), Utility::plural(count($photo['actions']), 'comment')); ?></a></div>
|
||||
<?php } ?>
|
||||
<?php } else { ?>
|
||||
<button type="button" class="login">Sign in to comment</button>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -34,42 +38,56 @@
|
|||
</div>
|
||||
<div class="picture">
|
||||
<img src="<?php echo $photo['path960x960']; ?>" style="width:<?php echo $photo['thisWidth']; ?>px; height:<?php echo $photo['thisHeight']; ?>px;">
|
||||
<?php if(!empty($photo['title'])) { ?>
|
||||
<div class="title" style="width:<?php echo $photo['thisWidth']; ?>px;"><?php echo $photo['title']; ?></div>
|
||||
<?php } ?>
|
||||
<?php if(!empty($photo['description'])) { ?>
|
||||
<div class="description"style="width:<?php echo $photo['thisWidth']; ?>px;"><?php echo $photo['description']; ?></div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<?php if(count($photo['actions']) > 0) { ?>
|
||||
<a name="comments"></a>
|
||||
<ol>
|
||||
<?php foreach($photo['actions'] as $action) { ?>
|
||||
<li class="action-container-<?php echo $action['id']; ?>">
|
||||
<?php if($action['type'] == 'comment') { ?>
|
||||
<?php echo $action['value']; ?><br>(<a href="/action/<?php echo $action['id']; ?>/delete" class="action-delete">delete</a>)
|
||||
<?php } else { ?>
|
||||
Favorited<br>(<a href="/action/<?php echo $action['id']; ?>/delete" class="action-delete">delete</a>)
|
||||
<div class="meta-content">
|
||||
<div>
|
||||
<?php if(count($photo['actions']) > 0) { ?>
|
||||
<a name="comments"></a>
|
||||
<ol class="comments">
|
||||
<?php foreach($photo['actions'] as $action) { ?>
|
||||
<li class="action-container-<?php echo $action['id']; ?>">
|
||||
<img src="<?php echo User::getAvatarFromEmail(40, $action['email']); ?>" class="avatar">
|
||||
<?php if($action['type'] == 'comment') { ?>
|
||||
<?php echo $action['value']; ?><br>(<a href="/action/<?php echo $action['id']; ?>/delete" class="action-delete">delete</a>)
|
||||
<?php } else { ?>
|
||||
Favorited<br>(<a href="/action/<?php echo $action['id']; ?>/delete" class="action-delete">delete</a>)
|
||||
<?php } ?>
|
||||
<div class="date"><?php echo Utility::dateLong($action['datePosted']); ?></div>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</li>
|
||||
</ol>
|
||||
<?php } ?>
|
||||
</ol>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div>
|
||||
<?php if(!empty($photo['latitude']) && !empty($photo['longitude'])) { ?>
|
||||
<a name="map"></a>
|
||||
<img src="<?php echo Utility::staticMapUrl($photo['latitude'], $photo['longitude'], 14, '450x150'); ?>" class="map">
|
||||
<?php } ?>
|
||||
<ul class="exif">
|
||||
<?php foreach(array('exifCameraMake' => 'Camera make', 'exifCameraModel' => 'Camera model') as $key => $value) { ?>
|
||||
<li><?php echo $value; ?>: <?php echo $photo[$key]; ?></li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</div>
|
||||
<br clear="all">
|
||||
</div>
|
||||
|
||||
<?php if(User::isOwner()) { ?>
|
||||
<form method="post" action="/action/photo/<?php echo $photo['id']; ?>">
|
||||
<textarea rows="5" cols="50" name="value"></textarea>
|
||||
<input type="hidden" name="type" value="comment">
|
||||
<input type="hidden" name="targetUrl" value="<?php sprintf('http://%s%s', $_SERVER['HTTP_HOST'], $_SERVER['REQUEST_URI']); ?>">
|
||||
<br>
|
||||
<button type="submit" class="button pill icon pen">Comment</button>
|
||||
</form>
|
||||
<form method="post" action="/action/photo/<?php echo $photo['id']; ?>">
|
||||
<input type="hidden" name="value" value="1">
|
||||
<input type="hidden" name="type" value="favorite">
|
||||
<input type="hidden" name="targetUrl" value="<?php sprintf('http://%s%s', $_SERVER['HTTP_HOST'], $_SERVER['REQUEST_URI']); ?>">
|
||||
<br>
|
||||
<button type="submit" class="button pill icon star">Favorite</button>
|
||||
</form>
|
||||
<form method="post">
|
||||
<h3>Tags</h3>
|
||||
<input type="text" name="tags" value="<?php echo implode(',', $photo['tags']); ?>">
|
||||
<button type="submit" class="button pill icon tag">Update</button>
|
||||
</form>
|
||||
<div class="owner">
|
||||
<h3>This photo belongs to you</h3>
|
||||
|
||||
<form method="post">
|
||||
<h3>Tags</h3>
|
||||
<input type="text" name="tags" value="<?php echo implode(',', $photo['tags']); ?>">
|
||||
<button type="submit" class="button pill icon tag">Update</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<br clear="all">
|
||||
<?php getTemplate()->display('partial/pagination.php', array_merge($pagination, array('labelPosition' => 'bottom'))); ?>
|
||||
<?php } else { ?>
|
||||
<h2>You haven't uploaded any photos yet</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue