Skip to content
Browse files

WEB-60 WEB-62 - Comments styles

  • Loading branch information...
1 parent 89a2928 commit b3d5af7fc6fe856d97967148d4e98b7a715c6592 @mgallego committed Feb 17, 2013
View
64 src/SFM/PicmntBundle/Resources/public/less/buttons.less
@@ -0,0 +1,64 @@
+.button {
+ color: @darkGrey; //#FFF !important;
+ padding: 8px 12px;
+ border: none;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ -o-border-radius: 2px;
+ -ms-border-radius: 2px;
+ border-radius: 2px;
+}
+
+
+.button-small {
+ .button();
+ padding: 4px 6px;
+ font-size: 0.8em;
+}
+
+.accept-button {
+ color: #FFF !important;
+ background-color: @acceptButtonColor;
+}
+
+.accept-button:hover {
+ background-image: -o-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
+ background-image: -moz-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
+ background-image: -webkit-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
+ background-image: -ms-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
+ background-image: linear-gradient(bottom, #053A94 12%, #0754DA 76%);
+ -webkit-box-shadow: 0 1px 1px #968E8E;
+ -moz-box-shadow: 0 1px 1px #968E8E;
+ -o-box-shadow: 0 1px 1px #968E8E;
+ -ms-box-shadow: 0 1px 1px #968E8E;
+ box-shadow: 0 1px 1px #968E8E;
+}
+
+.cancel-button {
+ color: #FFF !important;
+ background-color: @cancelButtonColor;
+}
+
+.cancel-button:hover {
+ background-image: -o-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
+ background-image: -moz-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
+ background-image: -webkit-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
+ background-image: -ms-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
+ background-image: linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
+}
+
+.danger-button {
+ background-color: @dangerButtonColor;
+}
+
+.danger-button:hover {
+ background-image: -o-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
+ background-image: -moz-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
+ background-image: -webkit-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
+ background-image: -ms-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
+ background-image: linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
+}
+
+.default-button {
+ background-color: @defaultButtonColor;
+}
View
98 src/SFM/PicmntBundle/Resources/public/less/comments.less
@@ -1,98 +0,0 @@
-@import url('variables.less');
-
-#comments {
- margin: 20px 0 0 20px;
-}
-
-#comments textarea {
- height: 100px;
- width: 860px;
-}
-
-#comment-buttons {
- float: right;
-}
-
-#comments input {
- margin: 10px 0 0 0;
-}
-
-#comments form {
- margin: 0 0 40px 0;
-}
-
-#comments ul {
- margin-top: 40px;
-}
-
-.link-to-comment {
- display: none;
-}
-
-.avatar-small {
- width: 50px;
- height: 50px;
- float: left;
-}
-
-li.comment {
- list-style-type: none;
- padding: 0 10px 25px 0;
- margin: 0 0 25px 0;
-}
-
-li.comment:hover {
- background: #FAFAFA;
-}
-
-li.comment span {
- padding: 0 0 0 10px;
-}
-
-.comment-text {
- padding: 5px 0 0 60px;
-}
-
-li.comment img {
- margin: 0;
-}
-
-li.comment a {
- color: black; //bug with hover
- font-weight: bold;
-}
-
-li.comment a:hover {
- color: @p-letter-color;
-}
-
-li.comment span.comment-date {
- color: @darkGrey;
- padding: 0 0 0 3px;
- font-size: 11px;
-}
-
-.see-proposal {
- display: none;
- font-size: 10px;
- background: #E0E0E0;
- padding: 5px;
- float: right;
-}
-
-.see-proposal:hover {
- background-image: -o-linear-gradient(bottom, #D6D3D6 27%, #E0E0E0 55%);
- background-image: -moz-linear-gradient(bottom, #D6D3D6 27%, #E0E0E0 55%);
- background-image: -webkit-linear-gradient(bottom, #D6D3D6 27%, #E0E0E0 55%);
- background-image: -ms-linear-gradient(bottom, #D6D3D6 27%, #E0E0E0 55%);
- background-image: linear-gradient(bottom, #D6D3D6 27%, #E0E0E0 55%);
- -webkit-box-shadow: 0 1px 1px #968E8E;
- -moz-box-shadow: 0 1px 1px #968E8E;
- -o-box-shadow: 0 1px 1px #968E8E;
- -ms-box-shadow: 0 1px 1px #968E8E;
- box-shadow: 0 1px 1px #968E8E;
-}
-
-li.comment:hover .see-proposal {
- display: inline;
-}
View
58 src/SFM/PicmntBundle/Resources/public/less/forms.less
@@ -1,57 +1,3 @@
-@import url('variables.less');
-
-.button {
- color: #FFF !important;
- padding: 8px 12px;
- border: none;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- -o-border-radius: 2px;
- -ms-border-radius: 2px;
- border-radius: 2px;
-}
-
-.accept-button {
- background-color: @acceptButtonColor;
-}
-
-.accept-button:hover {
- background-image: -o-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
- background-image: -moz-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
- background-image: -webkit-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
- background-image: -ms-linear-gradient(bottom, #053A94 12%, #0754DA 76%);
- background-image: linear-gradient(bottom, #053A94 12%, #0754DA 76%);
- -webkit-box-shadow: 0 1px 1px #968E8E;
- -moz-box-shadow: 0 1px 1px #968E8E;
- -o-box-shadow: 0 1px 1px #968E8E;
- -ms-box-shadow: 0 1px 1px #968E8E;
- box-shadow: 0 1px 1px #968E8E;
-}
-
-.cancel-button {
- background-color: @cancelButtonColor;
-}
-
-.cancel-button:hover {
- background-image: -o-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
- background-image: -moz-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
- background-image: -webkit-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
- background-image: -ms-linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
- background-image: linear-gradient(bottom, #888282 16%, #B1B1B1 76%);
-}
-
-.danger-button {
- background-color: @dangerButtonColor;
-}
-
-.danger-button:hover {
- background-image: -o-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
- background-image: -moz-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
- background-image: -webkit-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
- background-image: -ms-linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
- background-image: linear-gradient(bottom, #AD0C14 0%, #CF000A 51%);
-}
-
fieldset {
background: @header-background-color;
border: 1px solid @boxBorderColor;
@@ -63,6 +9,10 @@ textarea {
.resizable(none);
}
+.textarea-large {
+ height: @textareaLargeHeight;
+ width: @textareaLargeWidth;
+}
input[type="text"], input[type="password"],input[type="email"] {
height: 20px;
View
6 src/SFM/PicmntBundle/Resources/public/less/general.less
@@ -33,4 +33,8 @@ h1 {
.p-letter {
color: @p-letter-color !important;
-}
+}
+
+#see-original {
+ display: none;
+}
View
17 src/SFM/PicmntBundle/Resources/public/less/picmnt.less
@@ -3,14 +3,23 @@
@import 'scaffolding.less';
@import 'type.less';
@import 'tooltip.less';
-@import 'edit_image.less';
+
@import 'forms.less';
-@import 'general.less';
+@import 'buttons.less';
+
+@import 'thumbs.less';
+
@import 'header.less';
+
+@import 'footer.less';
+
+@import 'edit_image.less';
+
+
@import 'img_box.less';
-@import 'thumbs.less';
+
@import 'user.less';
@import 'alert.less';
@import 'uploads.less';
@import 'profile.less';
-@import 'footer.less';
+
View
81 src/SFM/PicmntBundle/Resources/public/less/scaffolding.less
@@ -6,4 +6,85 @@
.navbar .inline {
margin-top: 14px;
font-weight: bold;
+}
+
+.subsection {
+ padding-top: 30px;
+}
+
+.subsection_1 {
+ padding-top: 50px;
+}
+
+.center {
+ text-align: center;
+}
+
+.paginator-link {
+ font-size: 20px;
+ margin-top: 200px;
+ font-weight: bold;
+}
+
+.paginator-link a {
+ color: #FFF !important;
+ -moz-text-shadow: 0px 3px 5px @darkGrey;
+ -webkit-text-shadow: 0px 3px 5px @darkGrey;
+ -o-text-shadow: 0px 3px 5px @darkGrey;
+ -ms-text-shadow: 0px 3px 5px @darkGrey;
+ text-shadow: 0px 3px 5px @darkGrey;
+}
+
+.right {
+ float: right;
+}
+
+.left {
+ float: left;
+}
+
+.hide {
+ display: none;
+}
+
+.row {
+ margin-bottom: 20px;
+}
+
+.row_1 {
+ margin-bottom: 40px;
+}
+
+.span_1 {
+ margin: 0 5px;
+}
+
+.span_2 {
+ margin: 0 10px;
+}
+
+.minor-import {
+ color: @darkGrey;
+ font-size: 0.9em;
+}
+
+
+.accent:hover {
+ background: @accentColor;
+}
+
+.hidden {
+ display: none;
+}
+
+.hidden-element-parent:hover .hidden-element-block {
+ display: block;
+}
+
+.hidden-element-parent:hover .hidden-element-inline {
+ display: inline;
+}
+
+li.large {
+ min-height: 60px;
}
View
13 src/SFM/PicmntBundle/Resources/public/less/thumbs.less
@@ -1,5 +1,3 @@
-@import url('variables.less');
-
.thumbnail {
display: block;
float: left;
@@ -8,8 +6,8 @@
.img-thumb {
position: relative;
margin: 8px;
- height: @thumbSmallHeight;
- width: @thumbSmallWidth;
+ height: @thumbMediumHeight;
+ width: @thumbMediumWidth;
}
@@ -49,4 +47,9 @@
margin-top: 0px;
padding-top: 15px;
padding-bottom: 30px;
-}
+}
+
+.thumb-small {
+ height: @thumbSmallHeight;
+ width: @thumbSmallWidth;
+}
View
12 src/SFM/PicmntBundle/Resources/public/less/type.less
@@ -34,4 +34,16 @@ ol.inline {
padding-left: 5px;
padding-right: 5px;
}
+}
+
+
+//Hs
+h1 {
+ display: inline;
+ margin: 0 0 10px 0;
+ font-size: 2em;
+}
+
+p {
+ margin: 0px;
}
View
12 src/SFM/PicmntBundle/Resources/public/less/variables.less
@@ -38,6 +38,12 @@
@acceptButtonColor: #0753DA;
@cancelButtonColor: #B1B1B1;
@dangerButtonColor: #cf000a;
+@defaultButtonColor: #E6E6E6;
+
+@textareaLargeHeight: 100px;
+@textareaLargeWidth: 880px;
+
+@accentColor: #F3F3F3;
@alertColor: #FFB2B2;
@@ -47,5 +53,7 @@
@general-font-size: 13px;
//thumbnails
-@thumbSmallWidth: 180px;
-@thumbSmallHeight: 180px;
+@thumbSmallWidth: 50px;
+@thumbSmallHeight: 50px;
+@thumbMediumWidth: 180px;
+@thumbMediumHeight: 180px;
View
48 src/SFM/PicmntBundle/Resources/public/less/view_image.less
@@ -1,60 +1,12 @@
-@import url('variables.less');
-
-#main {
- margin-bottom: 120px;
-}
-
-#image-section {
- padding-top: 30px;
-}
-
-#image {
- text-align: center;
-}
-
#image-to-modify {
margin-left: 20px;
max-width: 800px;
}
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
- #image-section img, #image-section canvas {
- margin-left: 20px;
- max-width: 600px;
- }
-}
-
-#image-title {
- margin: 0 0 10px 25px;
-}
-
#image-title > .button {
font-size: 10px
}
-#image-title h1 {
- display: inline;
- margin: 0 0 10px 0;
- font-size: 2em;
-}
-
-#see-original {
- display: none;
-}
-
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
- #img-sucks-rocks ul li a.like{
- float: left;
- margin: 5px 0 5px 30px;
- background-position: -104px top;
- }
-
- #img-sucks-rocks ul li a.dislike{
- float: right;
- margin: 5px 30px 5px 0;
- background-position: -158px top;
- }
-}
#separator {
margin: 60px auto 10px auto;
View
439 src/SFM/PicmntBundle/Resources/views/Image/viewImage.html.twig
@@ -1,242 +1,229 @@
{% extends "SFMPicmntBundle::layout.html.twig" %}
-
-{% block stylesheet %}
+{% block stylesheet %}
{{ parent() }}
<link href="{{ asset('bundles/sfmpicmnt/css/ui-lightness/jquery-ui-1.10.0.custom.css') }}" rel="stylesheet">
- {% stylesheets filter='lessphp, ?yui_css' output='css/picmnt.css'
- '@SFMPicmntBundle/Resources/public/less/view_image.less'
- '@SFMPicmntBundle/Resources/public/less/comments.less'
- %}
- <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
- {% endstylesheets %}
-
{% endblock stylesheet %}
{% block javascript %}
- {{ parent() }}
+{{ parent() }}
+
+<script src="{{ asset('bundles/sfmpicmnt/js/jquery-ui-1.10.0.custom.min.js') }}"></script>
+<script src="{{ asset('bundles/sfmpicmnt/libs/waypoints.min.js') }}"></script>
+<script src="{{ asset('bundles/sfmpicmnt/libs/caman.full.min.js') }}"></script>
- <script src="{{ asset('bundles/sfmpicmnt/js/jquery-ui-1.10.0.custom.min.js') }}"></script>
- <script src="{{ asset('bundles/sfmpicmnt/libs/waypoints.min.js') }}"></script>
- <script src="{{ asset('bundles/sfmpicmnt/libs/caman.full.min.js') }}"></script>
-
- {% javascripts filter='?yui_js'
- '@SFMPicmntBundle/Resources/public/js/image.js' %}
- <script src="{{ asset_url }}"></script>
- {% endjavascripts %}
+{% javascripts filter='?yui_js'
+'@SFMPicmntBundle/Resources/public/js/image.js' %}
+<script src="{{ asset_url }}"></script>
+{% endjavascripts %}
{% endblock javascript %}
{% block content %}
- {{ parent() }}
-
- {% if paginator is defined %}
- {% set Next = '' %}
- {% set Previous = '' %}
-
- {% for page in paginator %}
- {% if loop.index == '1' %}
- {% if image.idImage != page %}
- {% set Next = path('img_show', {'option': 'last', 'idImage': page, 'category': app.request.get('category') }) %}
- {% endif %}
- {% else %}
- {% if image.idImage > page %}
- {% set Previous = path('img_show', {'option': 'last', 'idImage': page, 'category': app.request.get('category') }) %}
- {% endif %}
- {% endif %}
- {% endfor %}
- {% endif %}
-
-
- <form action="{{ path('comment', { 'idImage': image.idImage}) }}" class="form-stacked" method="post">
- <div class="clear"></div>
-
- <section id="image-section" class="container container_12">
-
- <div id="image-title" class="grid_12">
- <a href="#" id="see-original" class="button accept-button" onclick="javascript:seeOriginal()">{% trans %}View Original{% endtrans %}</a>
- <h1>
- {% if paginator is defined %}
- <a href="{{ path('img_view', {'user': image.user.username, 'slug': image.slug}) }} ">{{ image.title }}</a>
- {% else %}
- {{ image.title }}
- {% endif %}
- </h1>
- </div>
-
- <div class="clear"></div>
-
- {# ############### MAIN SECTION ############### #}
- <section id="main" class="grid_9">
-
-
- <article id="image" >
- <span id="previous-link">
- {% if paginator is defined and app.request.get('option') == 'last' %}
- {% if Previous %}
- <a id="previous" href="{{ Previous }}"><<</a>
- {% endif %}
- {% endif %}
- </span>
- <img src="{{ asset(upload_dir ~ image.url) }}" id="image-to-modify" alt="{{image.title}}">
- <span id="next-link">
- {% if paginator is defined and app.request.get('option') == 'last' %}
- {% if Next %}
- <a id="next" href="{{ Next }}">>></a>
- {% endif %}
- {% endif %}
- </span>
- </article>
-
- <article id="comments">
- <textarea placeholder="Add your comment..." class="textarea" name="comment" required="required"></textarea>
- <div id="comment-buttons">
- <button class="button cancel-button" type="reset" onclick="javascript:applyProposal(0,0,0,0)">{{ 'Cancel' | trans }}</button>
- <input class="button accept-button" type="submit" value="{% trans %}Send Comment{% endtrans %}">&nbsp;
- </div>
- {# ################ COMMENTS ################## #}
-
- {% if image.imageComments | length > 0 %}
- <div id="show-image-to-comment"></div>
- {% endif %}
-
- <ul>
- {% for comment in image.imageComments %}
- {% set username = comment.user.username %}
-
- <li id="comment-{{ loop.index }}" class="comment">
- <a class="link-to-comment" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}#comment-{{ loop.index }}">#{{ loop.index }}</a>
-
- <span>
- {# try to create a twig function #}
-
- {% if existsAvatar(username) %}
- <img src="{{ avatarByUsername(username,'big') | imagine_filter('avatar_small') }}" class="avatar-small" alt="avatar-small" />
- {% else %}
- {% if gravatar_exists(getEmail(username)) %}
- <img src="{{ gravatar(getEmail(username), 50) }}" class="avatar-small" alt="avatar-small"/>
- {% else %}
- <img src="{{ asset('/bundles/sfmpicmnt/images/default_user50x50.png') }}" class="avatar-small" alt="avatar-small" />
- {% endif %}
- {% endif %}
- <a href="{{ path('usr_profile', {'userName': comment.user.username }) }}">{{ username }}</a>
- <span class="comment-date">{{ image.pubDate | date() }}</span>
- </span>
- <div class="comment-text">
- {{ comment.comment | nl2br }}
- </div>
-
- {% if comment.brightness != 0 or comment.contrast != 0 or comment.exposure != 0 or comment.saturation != 0 %}
- <a class="see-proposal" href="#image-title" onclick="javascript:applyProposal({{ comment.brightness }},{{ comment.contrast }}, {{ comment.exposure }},{{ comment.saturation}})" >{{ 'See Proposal' | trans }}</a>
- {% endif %}
- </li>
-
- {% else %}
- <h3 class="grid_12">{{ 'There is no comment for this image. Be the first to comment' | trans }}</h3>
- {% endfor %}
-
- </ul>
- </article>
-
- </section>
-
- {# ############### info SECTION ############### #}
- <section id="info" class="grid_3">
-
- <div id="img-author" class="img-box">
- <h2><a href="{{ path('usr_profile', {'userName': image.user.username }) }}">{{ image.user.username }}</a></h2>
-
- {% if existsAvatar(image.user.username) %}
- <img src="{{ avatarByUsername(image.user.username,'big') }}" alt="avatar"/>
- {% else %}
- {% if gravatar_exists(getEmail(image.user.username)) %}
- <img src="{{ gravatar(getEmail(image.user.username), 100) }}" alt="avatar" />
- {% else %}
- <img src="{{ asset('/bundles/sfmpicmnt/images/default_user100x100.png') }}" alt="avatar"/>
- {% endif %}
- {% endif %}
- </div>
-
- {% if app.user and app.user.id == image.user.id %}
- <div id="img-actions" class="img-box">
- <ul>
- <li><a href="{{ path('img_edit', {'id_image': image.idImage}) }}" class="button cancel-button">{% trans %}Edit{% endtrans %}</a></li>
- <li><a href="{{ path('img_delete', { 'idImage': image.idImage }) }}" class="button danger-button">{% trans %}Remove{% endtrans %}</a></li>
- </ul>
- </div>
- {% endif %}
- {# <div id="img-sucks-rocks" class="img-box">
- <ul>
- <li>
- <a href="" class="like"></a>
- <li>
- <a href="" class="dislike"></a>
- </li>
- </ul>
- </div> #}
-
- <div id="img-controls" class="img-box">
- <div class="control-data">
- <span class="control-title">
- {% trans %}Brightness{% endtrans %}:
- </span>
- <input type="text" id="brightness-amount" name="brightness" class="slider-data"/>
- </div>
-
- <div id="slider-brightness" class="slider"></div>
-
- <div class="control-data">
- <span class="control-title">
- {% trans %}Contrast{% endtrans %}:
- </span>
- <input type="text" id="contrast-amount" name="contrast" class="slider-data"/>
- </div>
-
- <div id="slider-contrast" class="slider"></div>
-
- <div class="control-data">
- <span class="control-title">
- {% trans %}Exposure{% endtrans %}:
- </span>
- <input type="text" id="exposure-amount" name="exposure" class="slider-data"/>
- </div>
-
- <div id="slider-exposure" class="slider"></div>
-
- <div class="control-data">
- <span class="control-title">
- {% trans %}Saturation{% endtrans %}:
- </span>
- <input type="text" id="saturation-amount" name="saturation" class="slider-data"/>
- </div>
-
- <div id="slider-saturation" class="slider"></div>
- </div>
- {% if image.description %}
- <div id="img-description" class="img-box">
- <p>{{ image.description }}</p>
- </div>
- {% endif %}
-
- <div id="img-info" class="img-box">
- <ul>
- <li class="pub-date">
- <span class="info-key">{% trans %}Uploaded{% endtrans %}:</span> {{ image.pubDate | date() }}
- </li>
- <li class="category">
- <span class="info-key">{% trans %}Category{% endtrans %}:</span>
- <a href="{{ path('img_show', { 'option': 'recents', 'category': image.category}) }}">{{ image.category }}</a>
- </li>
- </ul>
- </div>
-
- </section>
-
-
- </section>
- </form>
-
+{{ parent() }}
+
+{% if paginator is defined %}
+{% set Next = '' %}
+{% set Previous = '' %}
+
+{% for page in paginator %}
+{% if loop.index == '1' %}
+{% if image.idImage != page %}
+{% set Next = path('img_show', {'option': 'last', 'idImage': page, 'category': app.request.get('category') }) %}
+{% endif %}
+{% else %}
+{% if image.idImage > page %}
+{% set Previous = path('img_show', {'option': 'last', 'idImage': page, 'category': app.request.get('category') }) %}
+{% endif %}
+{% endif %}
+{% endfor %}
+{% endif %}
+
+
+<div class="clear"></div>
+
+<section class="container container_12">
+
+ <form action="{{ path('comment', { 'idImage': image.idImage}) }}" method="post">
+
+ <section class="container_12">
+ <div class="grid_12">
+ <a href="#" id="see-original" class="button accept-button" onclick="javascript:seeOriginal()">{% trans %}View Original{% endtrans %}</a>
+ <h1>
+ {% if paginator is defined %}
+ <a href="{{ path('img_view', {'user': image.user.username, 'slug': image.slug}) }} ">{{ image.title }}</a>
+ {% else %}
+ {{ image.title }}
+ {% endif %}
+ </h1>
+ </div>
+
+ <div class="clear"></div>
+
+ {# ############### MAIN SECTION ############### #}
+ <section class="grid_9">
+ <article class="subsection center">
+ <span class="paginator-link left" >
+ {% if paginator is defined and app.request.get('option') == 'last' %}
+ {% if Previous %}
+ <a href="{{ Previous }}"><<</a>
+ {% endif %}
+ {% endif %}
+ </span>
+ <img src="{{ asset(upload_dir ~ image.url) }}" id="image-to-modify" alt="{{image.title}}">
+ <span class="paginator-link right">
+ {% if paginator is defined and app.request.get('option') == 'last' %}
+ {% if Next %}
+ <a href="{{ Next }}">>></a>
+ {% endif %}
+ {% endif %}
+ </span>
+ </article>
+
+ <article class="subsection">
+ <textarea placeholder="Add your comment..." class="textarea-large" name="comment" required="required"></textarea>
+ <div class="right">
+ <button class="button cancel-button" type="reset" onclick="javascript:applyProposal(0,0,0,0)">{{ 'Cancel' | trans }}</button>
+ <input class="button accept-button" type="submit" value="{% trans %}Send Comment{% endtrans %}">&nbsp;
+ </div>
+ {# ################ COMMENTS ################## #}
+
+ <ul class="unstyled subsection_1">
+ {% for comment in image.imageComments %}
+ {% set username = comment.user.username %}
+
+ <li id="comment-{{ loop.index }}" class="comment row hidden-element-parent accent large">
+ <a class="link-to-comment hide" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}#comment-{{ loop.index }}">#{{ loop.index }}</a>
+ <p>
+ {# try to create a twig function #}
+
+ {% if existsAvatar(username) %}
+ <img src="{{ avatarByUsername(username,'big') | imagine_filter('avatar_small') }}" class="thumb-small left span_1" alt="avatar-small" />
+ {% else %}
+ {% if gravatar_exists(getEmail(username)) %}
+ <img src="{{ gravatar(getEmail(username), 50) }}" class="avatar-small left span_1" alt="thumb-small"/>
+ {% else %}
+ <img src="{{ asset('/bundles/sfmpicmnt/images/default_user50x50.png') }}" class="thumb-small left span_1" alt="avatar-small" />
+ {% endif %}
+ {% endif %}
+ <a href="{{ path('usr_profile', {'userName': comment.user.username }) }}">{{ username }}</a>
+ <span class="minor-import">{{ image.pubDate | date() }}</span>
+ </p>
+ <p>
+ {{ comment.comment | nl2br }}
+ {% if comment.brightness != 0 or comment.contrast != 0 or comment.exposure != 0 or comment.saturation != 0 %}
+ <a class="right button-small default-button hidden-element-inline hidden" href="#image-title" onclick="javascript:applyProposal({{ comment.brightness }},{{ comment.contrast }}, {{ comment.exposure }},{{ comment.saturation}})" >{{ 'See Proposal' | trans }}</a>
+ {% endif %}
+ </p>
+ </li>
+
+ {% else %}
+ <h3 class="grid_12">{{ 'There is no comment for this image. Be the first to comment' | trans }}</h3>
+ {% endfor %}
+
+ </ul>
+ </article>
+
+ </section>
+
+
+
+
+ {# ############### info SECTION ############### #}
+ <section id="info" class="grid_3">
+
+ <div id="img-author" class="img-box">
+ <h2><a href="{{ path('usr_profile', {'userName': image.user.username }) }}">{{ image.user.username }}</a></h2>
+
+ {% if existsAvatar(image.user.username) %}
+ <img src="{{ avatarByUsername(image.user.username,'big') }}" alt="avatar"/>
+ {% else %}
+ {% if gravatar_exists(getEmail(image.user.username)) %}
+ <img src="{{ gravatar(getEmail(image.user.username), 100) }}" alt="avatar" />
+ {% else %}
+ <img src="{{ asset('/bundles/sfmpicmnt/images/default_user100x100.png') }}" alt="avatar"/>
+ {% endif %}
+ {% endif %}
+ </div>
+
+ {% if app.user and app.user.id == image.user.id %}
+ <div id="img-actions" class="img-box">
+ <ul>
+ <li><a href="{{ path('img_edit', {'id_image': image.idImage}) }}" class="button cancel-button">{% trans %}Edit{% endtrans %}</a></li>
+ <li><a href="{{ path('img_delete', { 'idImage': image.idImage }) }}" class="button danger-button">{% trans %}Remove{% endtrans %}</a></li>
+ </ul>
+ </div>
+ {% endif %}
+ {# <div id="img-sucks-rocks" class="img-box">
+ <ul>
+ <li>
+ <a href="" class="like"></a>
+ <li>
+ <a href="" class="dislike"></a>
+ </li>
+ </ul>
+ </div> #}
+
+ <div id="img-controls" class="img-box">
+ <div class="control-data">
+ <span class="control-title">
+ {% trans %}Brightness{% endtrans %}:
+ </span>
+ <input type="text" id="brightness-amount" name="brightness" class="slider-data"/>
+ </div>
+
+ <div id="slider-brightness" class="slider"></div>
+
+ <div class="control-data">
+ <span class="control-title">
+ {% trans %}Contrast{% endtrans %}:
+ </span>
+ <input type="text" id="contrast-amount" name="contrast" class="slider-data"/>
+ </div>
+
+ <div id="slider-contrast" class="slider"></div>
+
+ <div class="control-data">
+ <span class="control-title">
+ {% trans %}Exposure{% endtrans %}:
+ </span>
+ <input type="text" id="exposure-amount" name="exposure" class="slider-data"/>
+ </div>
+
+ <div id="slider-exposure" class="slider"></div>
+
+ <div class="control-data">
+ <span class="control-title">
+ {% trans %}Saturation{% endtrans %}:
+ </span>
+ <input type="text" id="saturation-amount" name="saturation" class="slider-data"/>
+ </div>
+
+ <div id="slider-saturation" class="slider"></div>
+ </div>
+ {% if image.description %}
+ <div id="img-description" class="img-box">
+ <p>{{ image.description }}</p>
+ </div>
+ {% endif %}
+
+ <div id="img-info" class="img-box">
+ <ul>
+ <li class="pub-date">
+ <span class="info-key">{% trans %}Uploaded{% endtrans %}:</span> {{ image.pubDate | date() }}
+ </li>
+ <li class="category">
+ <span class="info-key">{% trans %}Category{% endtrans %}:</span>
+ <a href="{{ path('img_show', { 'option': 'recents', 'category': image.category}) }}">{{ image.category }}</a>
+ </li>
+ </ul>
+ </div>
+
+ </section>
+ </section>
+ </form>
+</section>
{% endblock content %}

0 comments on commit b3d5af7

Please sign in to comment.
Something went wrong with that request. Please try again.