aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorplegall <plg@piwigo.org>2005-06-21 21:08:11 +0000
committerplegall <plg@piwigo.org>2005-06-21 21:08:11 +0000
commit49fb2b6fd30bf4830c344ca93c64e2ecd92d2dff (patch)
tree63875a998bd9009384e721f89f363c02e083a07e
parentcc20eaf128d0d1c39aea9fee46d6519be2d55b95 (diff)
- comments page rewritten : comments are displayed one by one, with filters
and display options available. The list of comments is paginated. git-svn-id: http://piwigo.org/svn/trunk@796 68402e56-0260-453c-a942-63ccdbb3a9ee
-rw-r--r--comments.php425
-rw-r--r--doc/ChangeLog6
-rw-r--r--language/en_UK.iso-8859-1/common.lang.php20
-rw-r--r--language/fr_FR.iso-8859-1/common.lang.php20
-rw-r--r--template/default/comments.tpl87
-rw-r--r--template/default/default.css34
6 files changed, 471 insertions, 121 deletions
diff --git a/comments.php b/comments.php
index 0be4f454d..ea1617479 100644
--- a/comments.php
+++ b/comments.php
@@ -34,15 +34,111 @@ if (!defined('IN_ADMIN'))
include_once(PHPWG_ROOT_PATH.'include/common.inc.php');
}
-if (isset($_GET['last_days']))
+$sort_order = array(
+ 'descending' => 'DESC',
+ 'ascending' => 'ASC'
+ );
+
+// sort_by : database fields proposed for sorting comments list
+$sort_by = array(
+ 'date' => 'comment date',
+ 'image_id' => 'image'
+ );
+
+// items_number : list of number of items to display per page
+$items_number = array(5,10,20,50,'all');
+
+// since when display comments ?
+//
+$since_options = array(
+ 1 => array('label' => l10n('today'),
+ 'clause' => 'date > SUBDATE(CURDATE(), INTERVAL 1 DAY)'),
+ 2 => array('label' => sprintf(l10n('last %d days'), 7),
+ 'clause' => 'date > SUBDATE(CURDATE(), INTERVAL 7 DAY)'),
+ 3 => array('label' => sprintf(l10n('last %d days'), 30),
+ 'clause' => 'date > SUBDATE(CURDATE(), INTERVAL 30 DAY)'),
+ 4 => array('label' => l10n('the beginning'),
+ 'clause' => '1=1') // stupid but generic
+ );
+
+$page['since'] = isset($_GET['since']) ? $_GET['since'] : 1;
+
+// on which field sorting
+//
+$page['sort_by'] = 'date';
+// if the form was submitted, it overloads default behaviour
+if (isset($_GET['sort_by']))
{
- define('MAX_DAYS', $_GET['last_days']);
+ $page['sort_by'] = $_GET['sort_by'];
}
-else
+
+// order to sort
+//
+$page['sort_order'] = $sort_order['descending'];
+// if the form was submitted, it overloads default behaviour
+if (isset($_GET['sort_order']))
+{
+ $page['sort_order'] = $sort_order[$_GET['sort_order']];
+}
+
+// number of items to display
+//
+$page['items_number'] = 5;
+if (isset($_GET['items_number']))
{
- define('MAX_DAYS', 0);
+ $page['items_number'] = $_GET['items_number'];
+}
+
+// which category to filter on ?
+$page['cat_clause'] = '1=1';
+if (isset($_GET['cat']) and 0 != $_GET['cat'])
+{
+ $page['cat_clause'] =
+ 'category_id IN ('.implode(',', get_subcat_ids(array($_GET['cat']))).')';
+}
+
+// search a particular author
+$page['author_clause'] = '1=1';
+if (isset($_GET['author']) and !empty($_GET['author']))
+{
+ if (function_exists('mysql_real_escape_string'))
+ {
+ $author = mysql_real_escape_string($_GET['author']);
+ }
+ else
+ {
+ $author = mysql_escape_string($_GET['author']);
+ }
+
+ $page['author_clause'] = 'author = \''.$author.'\'';
+}
+
+// search a substring among comments content
+$page['keyword_clause'] = '1=1';
+if (isset($_GET['keyword']) and !empty($_GET['keyword']))
+{
+ if (function_exists('mysql_real_escape_string'))
+ {
+ $keyword = mysql_real_escape_string($_GET['keyword']);
+ }
+ else
+ {
+ $keyword = mysql_escape_string($_GET['keyword']);
+ }
+ $page['keyword_clause'] =
+ '('.
+ implode(' AND ',
+ array_map(
+ create_function(
+ '$s',
+ 'return "content LIKE \'%$s%\'";'
+ ),
+ preg_split('/[\s,;]+/', $keyword)
+ )
+ ).
+ ')';
}
-$array_cat_names = array();
+
// +-----------------------------------------------------------------------+
// | comments management |
// +-----------------------------------------------------------------------+
@@ -70,7 +166,7 @@ UPDATE '.COMMENTS_TABLE.'
// +-----------------------------------------------------------------------+
if (!defined('IN_ADMIN'))
{
- $title= $lang['title_comments'];
+ $title= l10n('title_comments');
include(PHPWG_ROOT_PATH.'include/page_header.php');
}
@@ -78,145 +174,262 @@ $template->set_filenames(array('comments'=>'comments.tpl'));
$template->assign_vars(
array(
'L_COMMENT_TITLE' => $title,
- 'L_COMMENT_STATS' => $lang['stats_last_days'],
- 'L_COMMENT_RETURN' => $lang['home'],
- 'L_COMMENT_RETURN_HINT' => $lang['home_hint'],
- 'L_DELETE' =>$lang['delete'],
- 'L_VALIDATE'=>$lang['submit'],
+
+ 'F_ACTION'=>PHPWG_ROOT_PATH.'comments.php',
+ 'F_KEYWORD'=>@$_GET['keyword'],
+ 'F_AUTHOR'=>@$_GET['author'],
'U_HOME' => add_session_id(PHPWG_ROOT_PATH.'category.php')
)
);
-foreach ($conf['last_days'] as $option)
+// +-----------------------------------------------------------------------+
+// | form construction |
+// +-----------------------------------------------------------------------+
+
+// Search in a particular category
+$blockname = 'category';
+
+$template->assign_block_vars(
+ $blockname,
+ array('SELECTED' => '',
+ 'VALUE'=> 0,
+ 'OPTION' => '------------'
+ ));
+
+$query = '
+SELECT id,name,uppercats,global_rank
+ FROM '.CATEGORIES_TABLE;
+if ($user['forbidden_categories'] != '')
{
- $url = $_SERVER['PHP_SELF'].'?last_days='.($option - 1);
- if (defined('IN_ADMIN'))
- {
- $url.= '&amp;page=comments';
- }
+ $query.= '
+ WHERE id NOT IN ('.$user['forbidden_categories'].')';
+}
+$query.= '
+;';
+display_select_cat_wrapper($query, array(@$_GET['cat']), $blockname, true);
+
+// Filter on recent comments...
+$blockname = 'since_option';
+
+foreach ($since_options as $id => $option)
+{
+ $selected = ($id == $page['since']) ? 'selected="selected"' : '';
+
+ $template->assign_block_vars(
+ $blockname,
+ array('SELECTED' => $selected,
+ 'VALUE'=> $id,
+ 'CONTENT' => $option['label']
+ ));
+}
+
+// Sort by
+$blockname = 'sort_by_option';
+
+foreach ($sort_by as $key => $value)
+{
+ $selected = ($key == $page['sort_by']) ? 'selected="selected"' : '';
+
$template->assign_block_vars(
- 'last_day_option',
- array(
- 'OPTION'=>$option,
- 'T_STYLE'=>(($option == MAX_DAYS + 1)?'text-decoration:underline;':''),
- 'U_OPTION'=>add_session_id($url)
- )
- );
+ $blockname,
+ array('SELECTED' => $selected,
+ 'VALUE'=> $key,
+ 'CONTENT' => l10n($value)
+ ));
+}
+
+// Sorting order
+$blockname = 'sort_order_option';
+
+foreach (array_keys($sort_order) as $option)
+{
+ $selected = ($option == $page['sort_order']) ? 'selected="selected"' : '';
+
+ $template->assign_block_vars(
+ $blockname,
+ array('SELECTED' => $selected,
+ 'VALUE'=> $option,
+ 'CONTENT' => l10n($option)
+ ));
}
+
+// Number of items
+$blockname = 'items_number_option';
+
+foreach ($items_number as $option)
+{
+ $selected = ($option == $page['items_number']) ? 'selected="selected"' : '';
+
+ $template->assign_block_vars(
+ $blockname,
+ array('SELECTED' => $selected,
+ 'VALUE'=> $option,
+ 'CONTENT' => is_numeric($option) ? $option : l10n($option)
+ ));
+}
+
+// +-----------------------------------------------------------------------+
+// | navigation bar |
+// +-----------------------------------------------------------------------+
+
+if (isset($_GET['start']) and is_numeric($_GET['start']))
+{
+ $start = $_GET['start'];
+}
+else
+{
+ $start = 0;
+}
+
+$query = '
+SELECT COUNT(DISTINCT(id))
+ FROM '.IMAGE_CATEGORY_TABLE.' AS ic
+ INNER JOIN '.COMMENTS_TABLE.' AS com
+ ON ic.image_id = com.image_id
+ WHERE '.$since_options[$page['since']]['clause'].'
+ AND '.$page['cat_clause'].'
+ AND '.$page['author_clause'].'
+ AND '.$page['keyword_clause'];
+if ($user['forbidden_categories'] != '')
+{
+ $query.= '
+ AND category_id NOT IN ('.$user['forbidden_categories'].')';
+}
+$query.= '
+;';
+list($counter) = mysql_fetch_row(pwg_query($query));
+
+$url = PHPWG_ROOT_PATH.'comments.php?t=1'.get_query_string_diff(array('start'));
+
+$navbar = create_navigation_bar($url,
+ $counter,
+ $start,
+ $page['items_number'],
+ '');
+
+$template->assign_vars(array('NAVBAR' => $navbar));
+
// +-----------------------------------------------------------------------+
// | last comments display |
// +-----------------------------------------------------------------------+
-// 1. retrieving picture ids which have comments recently added
-$maxdate = date('Y-m-d', strtotime('-'.MAX_DAYS.' day'));
+
+$comments = array();
+$element_ids = array();
+$category_ids = array();
$query = '
-SELECT DISTINCT(ic.image_id) AS image_id,ic.category_id, uppercats
- FROM '.COMMENTS_TABLE.' AS c, '.IMAGE_CATEGORY_TABLE.' AS ic
- , '.CATEGORIES_TABLE.' AS cat
- WHERE c.image_id = ic.image_id
- AND ic.category_id = cat.id
- AND date >= \''.$maxdate.'\'';
-if ($user['status'] != 'admin')
-{
- $query.= "
- AND validated = 'true'";
- // we must not show pictures of a forbidden category
- if ($user['forbidden_categories'] != '')
- {
- $query.= '
+SELECT com.id AS comment_id
+ , com.image_id
+ , ic.category_id
+ , com.author
+ , com.date
+ , com.content
+ , com.id AS comment_id
+ FROM '.IMAGE_CATEGORY_TABLE.' AS ic
+ INNER JOIN '.COMMENTS_TABLE.' AS com
+ ON ic.image_id = com.image_id
+ WHERE '.$since_options[$page['since']]['clause'].'
+ AND '.$page['cat_clause'].'
+ AND '.$page['author_clause'].'
+ AND '.$page['keyword_clause'];
+if ($user['forbidden_categories'] != '')
+{
+ $query.= '
AND category_id NOT IN ('.$user['forbidden_categories'].')';
- }
}
$query.= '
- GROUP BY ic.image_id
- ORDER BY ic.image_id DESC
+ GROUP BY comment_id
+ ORDER BY '.$page['sort_by'].' '.$page['sort_order'];
+if ('all' != $page['items_number'])
+{
+ $query.= '
+ LIMIT '.$start.','.$page['items_number'];
+}
+$query.= '
;';
$result = pwg_query($query);
-if ($user['status'] == 'admin')
+while ($row = mysql_fetch_array($result))
{
- $template->assign_block_vars('validation', array());
+ array_push($comments, $row);
+ array_push($element_ids, $row['image_id']);
+ array_push($category_ids, $row['category_id']);
}
-while ($row = mysql_fetch_array($result))
+
+if (count($comments) > 0)
{
- $category_id = $row['category_id'];
-
- // for each picture, getting informations for displaying thumbnail and
- // link to the full size picture
+ // retrieving element informations
+ $elements = array();
$query = '
-SELECT name,file,storage_category_id as cat_id,tn_ext,path
+SELECT id, name, file, path, tn_ext
FROM '.IMAGES_TABLE.'
- WHERE id = '.$row['image_id'].'
+ WHERE id IN ('.implode(',', $element_ids).')
;';
- $subresult = pwg_query($query);
- $subrow = mysql_fetch_array($subresult);
-
- // name of the picture
- $name = get_cat_display_name_cache($row['uppercats'], '', false);
- $name.= $conf['level_separator'];
- if (!empty($subrow['name']))
- {
- $name.= $subrow['name'];
- }
- else
+ $result = pwg_query($query);
+ while ($row = mysql_fetch_array($result))
{
- $name.= str_replace('_',' ',get_filename_wo_extension($subrow['file']));
+ $elements[$row['id']] = $row;
}
- // source of the thumbnail picture
- $thumbnail_src = get_thumbnail_src($subrow['path'], @$subrow['tn_ext']);
- // link to the full size picture
- $url = PHPWG_ROOT_PATH.'picture.php?cat='.$category_id;
- $url.= '&amp;image_id='.$row['image_id'];
-
- $template->assign_block_vars(
- 'picture',
- array(
- 'TITLE_IMG'=>$name,
- 'I_THUMB'=>$thumbnail_src,
- 'U_THUMB'=>add_session_id($url)
- ));
-
- // for each picture, retrieving all comments
+ // retrieving category informations
+ $categories = array();
$query = '
-SELECT *
- FROM '.COMMENTS_TABLE.'
- WHERE image_id = '.$row['image_id'].'
- AND date >= \''.$maxdate.'\'';
- if ($user['status'] != 'admin')
+SELECT id, uppercats
+ FROM '.CATEGORIES_TABLE.'
+ WHERE id IN ('.implode(',', $category_ids).')
+;';
+ $result = pwg_query($query);
+ while ($row = mysql_fetch_array($result))
{
- $query.= '
- AND validated = \'true\'';
+ $categories[$row['id']] = $row;
}
- $query.= '
- ORDER BY date DESC
-;';
- $handleresult = pwg_query($query);
- while ($subrow = mysql_fetch_array($handleresult))
+
+ foreach ($comments as $comment)
{
- $author = $subrow['author'];
- if (empty($subrow['author']))
+ // name of the picture
+ $name = get_cat_display_name_cache(
+ $categories[$comment['category_id']]['uppercats'], '', false);
+ $name.= $conf['level_separator'];
+ if (!empty($elements[$comment['image_id']]['name']))
{
- $author = $lang['guest'];
+ $name.= $elements[$comment['image_id']]['name'];
}
-
+ else
+ {
+ $name.= get_name_from_file($elements[$comment['image_id']]['file']);
+ }
+
+ // source of the thumbnail picture
+ $thumbnail_src = get_thumbnail_src(
+ $elements[$comment['image_id']]['path'],
+ @$elements[$comment['image_id']]['tn_ext']
+ );
+
+ // link to the full size picture
+ $url = PHPWG_ROOT_PATH.'picture.php?cat='.$comment['category_id'];
+ $url.= '&amp;image_id='.$comment['image_id'];
+
$template->assign_block_vars(
- 'picture.comment',
+ 'picture',
array(
- 'COMMENT_AUTHOR'=>$author,
- 'COMMENT_DATE'=>format_date($subrow['date'],'mysql_datetime',true),
- 'COMMENT'=>parse_comment_content($subrow['content']),
+ 'TITLE_IMG'=>$name,
+ 'I_THUMB'=>$thumbnail_src,
+ 'U_THUMB'=>add_session_id($url)
));
- if ($user['status'] == 'admin')
+ $author = $comment['author'];
+ if (empty($comment['author']))
{
- $template->assign_block_vars(
- 'picture.comment.validation',
- array(
- 'ID'=> $subrow['id'],
- 'CHECKED'=>($subrow['validated']=='false')?'checked="checked"': ''
- ));
+ $author = l10n('guest');
}
+
+ $template->assign_block_vars(
+ 'picture.comment',
+ array(
+ 'COMMENT_AUTHOR' => $author,
+ 'COMMENT_DATE'=>format_date($comment['date'],'mysql_datetime',true),
+ 'COMMENT'=>parse_comment_content($comment['content']),
+ ));
}
}
// +-----------------------------------------------------------------------+
diff --git a/doc/ChangeLog b/doc/ChangeLog
index 62dc21064..87826a9bc 100644
--- a/doc/ChangeLog
+++ b/doc/ChangeLog
@@ -1,5 +1,11 @@
2005-06-21 Pierrick LE GALL
+ * comments page rewritten : comments are displayed one by one,
+ with filters and display options available. The list of comments
+ is paginated.
+
+2005-06-21 Pierrick LE GALL
+
* direct communication between templates and language items,
without needing a mapping in the PHP code.
diff --git a/language/en_UK.iso-8859-1/common.lang.php b/language/en_UK.iso-8859-1/common.lang.php
index c49e2f232..4ff05ed5a 100644
--- a/language/en_UK.iso-8859-1/common.lang.php
+++ b/language/en_UK.iso-8859-1/common.lang.php
@@ -306,4 +306,24 @@ $lang['hint_comments'] = 'See last users comments';
$lang['menu_login'] = 'login';
$lang['hello'] = 'Hello';
+$lang['today'] = 'today';
+$lang['last %d days'] = 'last %d days';
+$lang['the beginning'] = 'the beginning';
+
+$lang['comment date'] = 'comment date';
+$lang['image'] = 'image';
+$lang['descending'] = 'descending';
+$lang['ascending'] = 'ascending';
+$lang['all'] = 'all';
+$lang['Filter'] = 'Filter';
+$lang['Keyword'] = 'Keyword';
+$lang['Author'] = 'Author';
+$lang['Category'] = 'Category';
+$lang['Since'] = 'Since';
+$lang['Display'] = 'Display';
+$lang['Sort by'] = 'Sort by';
+$lang['Sort order'] = 'Sort order';
+$lang['Number of items'] = 'Number of items';
+$lang['return to homepage'] = 'return to homepage';
+$lang['Filter and display'] = 'Filter and display';
?> \ No newline at end of file
diff --git a/language/fr_FR.iso-8859-1/common.lang.php b/language/fr_FR.iso-8859-1/common.lang.php
index 8c5b36acc..00016f7f0 100644
--- a/language/fr_FR.iso-8859-1/common.lang.php
+++ b/language/fr_FR.iso-8859-1/common.lang.php
@@ -309,4 +309,24 @@ $lang['hint_comments'] = 'Voir les derniers commentaires des visiteurs';
$lang['update_wrong_dirname'] = 'Le nom des fichiers et répertoires ne doivent être composé que de lettres, de chiffres et "-", "_" ou ".".';
$lang['hello'] = 'Bonjour';
+
+$lang['today'] = 'aujourd\'hui';
+$lang['last %d days'] = 'les %d derniers jours';
+$lang['the beginning'] = 'le début';
+$lang['comment date'] = 'date du commentaire';
+$lang['image'] = 'image';
+$lang['descending'] = 'décroissant';
+$lang['ascending'] = 'croissant';
+$lang['all'] = 'tout';
+$lang['Filter'] = 'Filtre';
+$lang['Keyword'] = 'Mot-Clef';
+$lang['Author'] = 'Auteur';
+$lang['Category'] = 'Catégorie';
+$lang['Since'] = 'Depuis';
+$lang['Display'] = 'Affichage';
+$lang['Sort by'] = 'Trier par';
+$lang['Sort order'] = 'Ordre';
+$lang['Number of items'] = 'Nombre d\'éléments';
+$lang['return to homepage'] = 'retourner à la page d\'accueil';
+$lang['Filter and display'] = 'Filtrer et afficher';
?> \ No newline at end of file
diff --git a/template/default/comments.tpl b/template/default/comments.tpl
index 18877fbbd..5aa668499 100644
--- a/template/default/comments.tpl
+++ b/template/default/comments.tpl
@@ -1,17 +1,76 @@
<!-- BEGIN title -->
<div class="titrePage">{L_COMMENT_TITLE}</div>
<!-- END title -->
-<div class="admin">
- [
- <!-- BEGIN last_day_option -->
- <a class="admin" href="{last_day_option.U_OPTION}" style="{last_day_option.T_STYLE}">{last_day_option.OPTION}</a>{T_SEPARATION}
- <!-- END last_day_option -->
- {L_COMMENT_STATS}
- ]
- <!-- BEGIN title -->
- [ <a class="admin" href="{U_HOME}" title="{L_COMMENT_RETURN_HINT}">{L_COMMENT_RETURN}</a> ]
- <!-- END title -->
-</div>
+
+<form class="filter" action="{F_ACTION}" method="get">
+
+ <fieldset>
+ <legend>{lang:Filter}</legend>
+
+ <label>{lang:Keyword}<input type="text" name="keyword" value="{F_KEYWORD}" /></label>
+
+ <label>{lang:Author}<input type="text" name="author" value="{F_AUTHOR}" /></label>
+
+ <label>
+ {lang:Category}
+ <select name="cat">
+ <!-- BEGIN category -->
+ <option class="{category.CLASS}" {category.SELECTED} value="{category.VALUE}">{category.OPTION}</option>
+ <!-- END category -->
+ </select>
+ </label>
+
+ <label>
+ {lang:Since}
+ <select name="since">
+ <!-- BEGIN since_option -->
+ <option {since_option.SELECTED} value="{since_option.VALUE}">{since_option.CONTENT}</option>
+ <!-- END since_option -->
+ </select>
+ </label>
+
+ </fieldset>
+
+ <fieldset>
+
+ <legend>{lang:Display}</legend>
+
+ <label>
+ {lang:Sort by}
+ <select name="sort_by">
+ <!-- BEGIN sort_by_option -->
+ <option value="{sort_by_option.VALUE}" {sort_by_option.SELECTED} >{sort_by_option.CONTENT}</option>
+ <!-- END sort_by_option -->
+ </select>
+ </label>
+
+ <label>
+ {lang:Sort order}
+ <select name="sort_order">
+ <!-- BEGIN sort_order_option -->
+ <option value="{sort_order_option.VALUE}" {sort_order_option.SELECTED} >{sort_order_option.CONTENT}</option>
+ <!-- END sort_order_option -->
+ </select>
+ </label>
+
+ <label>
+ {lang:Number of items}
+ <select name="items_number">
+ <!-- BEGIN items_number_option -->
+ <option value="{items_number_option.VALUE}" {items_number_option.SELECTED} >{items_number_option.CONTENT}</option>
+ <!-- END items_option -->
+ </select>
+ </label>
+
+ </fieldset>
+
+ <input type="submit" name="submit" value="{lang:Filter and display}" />
+
+</form>
+
+<div class="navigationBar">{NAVBAR}</div>
+<a class="admin" href="{U_HOME}" title="{lang:return to homepage}">{lang:home}</a>
+
<!-- BEGIN validation -->
<form action="{F_ACTION}" method="post">
<!-- END validation -->
@@ -50,8 +109,8 @@
</table>
<!-- BEGIN validation -->
<div align="center">
-<input type="submit" name="validate" class="bouton" value="{L_VALIDATE}" />
-<input type="submit" name="delete" class="bouton" value="{L_DELETE}" />
+<input type="submit" name="validate" class="bouton" value="{lang:submit}" />
+<input type="submit" name="delete" class="bouton" value="{lang:delete}" />
</div>
</form>
-<!-- END validation --> \ No newline at end of file
+<!-- END validation -->
diff --git a/template/default/default.css b/template/default/default.css
index 2b5ed28fc..e8e63c8a5 100644
--- a/template/default/default.css
+++ b/template/default/default.css
@@ -412,4 +412,36 @@ label:hover {
margin: 5px;
border:1px solid gray;
padding: 10px 50px 10px 10px;
-} \ No newline at end of file
+}
+
+/**
+ * Filter forms are displayed label by label with the input (or select...)
+ * below the label
+ */
+form.filter FIELDSET {
+ padding: 10px;
+}
+
+form.filter FIELDSET LABEL {
+ display: block;
+ float: left;
+ width: auto;
+ margin-right: 10px;
+ padding: 0;
+}
+
+form.filter FIELDSET INPUT, form.filter FIELDSET SELECT {
+ display: block;
+}
+
+form.filter FIELDSET P {
+ clear: left;
+}
+
+form.filter FIELDSET {
+ border: 1px solid gray;
+}
+
+form.filter FIELDSET + INPUT {
+ margin-top: 10px;
+}