Mercurial > kallithea
changeset 6416:ba18d1f6d081
style: refactor panel headings - use pull-left and pull-right and introduce clearfix like Bootstrap
Based on work by Dominik Ruf.
line wrap: on
line diff
--- a/kallithea/public/css/style.css Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/public/css/style.css Sat Dec 24 17:26:48 2016 +0100 @@ -576,11 +576,42 @@ float: left; color: #fff; margin: 0; - padding: 11px 10px 11px 10px; -} - -#content div.panel div.panel-heading .links.icon-only-links { - float: right; + padding: 0 10px; + line-height: 18px; +} + +.clearfix::before, .clearfix::after, .dl-horizontal dd::before, .dl-horizontal dd::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel::before, .panel::after, .panel-body::before, .panel-body::after, .modal-header::before, .modal-header::after, .modal-footer::before, .modal-footer::after, td.inline-comments::before, td.inline-comments::after { + content: " "; + display: table; +} + +.clearfix::after, .dl-horizontal dd::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel::after, .panel-body::after, .modal-header::after, .modal-footer::after, td.inline-comments::after { + clear: both; +} + +/* avoid conflict with .container in changeset tables */ +#content div.panel table .container::before, +#content div.panel table .container::after { + content: inherit; + display: inherit; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +#content div.panel div.panel-heading .pull-left { + margin: 10px; + color: white; +} + +#content div.panel div.panel-heading .pull-right { + margin: 5px; + color: white; } #content div.panel h1, @@ -1452,7 +1483,6 @@ width: 170px; } #quick_login .links_right { - position: absolute; right: 0; } @@ -2776,8 +2806,11 @@ float: left; font-weight: 700; font-size: 14px; + margin: 10px; +} + +.pull-left .breadcrumbs { margin: 0; - padding: 11px 0 11px 10px; } .breadcrumbs .hash {
--- a/kallithea/templates/about.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/about.html Sat Dec 24 17:26:48 2016 +0100 @@ -12,7 +12,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> <h5>${_('About')} Kallithea</h5> </div>
--- a/kallithea/templates/admin/auth/auth_settings.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/auth/auth_settings.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,7 +17,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> ${h.form(url('auth_settings'))}
--- a/kallithea/templates/admin/defaults/defaults.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/defaults/defaults.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,7 +17,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/admin/gists/edit.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/gists/edit.html Sat Dec 24 17:26:48 2016 +0100 @@ -24,7 +24,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/admin/gists/index.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/gists/index.html Sat Dec 24 17:26:48 2016 +0100 @@ -29,13 +29,13 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} + <div class="pull-left"> + ${self.breadcrumbs()} + </div> %if c.authuser.username != 'default': - <ul class="links"> - <li> + <div class="pull-right"> <a href="${h.url('new_gist')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Create New Gist')}</a> - </li> - </ul> + </div> %endif </div> %if c.gists_pager.item_count>0:
--- a/kallithea/templates/admin/gists/new.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/gists/new.html Sat Dec 24 17:26:48 2016 +0100 @@ -24,7 +24,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/admin/gists/show.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/gists/show.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,13 +17,13 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} + <div class="pull-left"> + ${self.breadcrumbs()} + </div> %if c.authuser.username != 'default': - <ul class="links"> - <li> - <a href="${h.url('new_gist')}" class="btn btn-success btn-sm"><i class="icon-plus"></i> ${_('Create New Gist')}</a> - </li> - </ul> + <div class="pull-right"> + <a href="${h.url('new_gist')}" class="btn btn-success btn-sm"><i class="icon-plus"></i> ${_('Create New Gist')}</a> + </div> %endif </div> <div class="table">
--- a/kallithea/templates/admin/my_account/my_account.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/my_account/my_account.html Sat Dec 24 17:26:48 2016 +0100 @@ -15,7 +15,7 @@ <%def name="main()"> <div class="panel panel-primary" style="overflow:auto"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/admin/notifications/notifications.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/notifications/notifications.html Sat Dec 24 17:26:48 2016 +0100 @@ -15,7 +15,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/admin/notifications/show_notification.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/notifications/show_notification.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,7 +17,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> <div class="table">
--- a/kallithea/templates/admin/repo_groups/repo_group_add.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/repo_groups/repo_group_add.html Sat Dec 24 17:26:48 2016 +0100 @@ -19,7 +19,7 @@ <%def name="main()"> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> ${h.form(url('repos_groups'))}
--- a/kallithea/templates/admin/repo_groups/repo_group_edit.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/repo_groups/repo_group_edit.html Sat Dec 24 17:26:48 2016 +0100 @@ -20,14 +20,14 @@ </%block> <%def name="main()"> -<div class="panel panel-primary" style="overflow:auto"> +<div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> <a href="${h.url('new_repos_group', parent_group=c.repo_group.group_id)}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add Child Group')}</a> - </li> - </ul> + </div> </div> ##main
--- a/kallithea/templates/admin/repo_groups/repo_groups.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/repo_groups/repo_groups.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,14 +17,14 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> %if h.HasPermissionAny('hg.admin')(): - <li> <a href="${h.url('new_repos_group')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add Repository Group')}</a> - </li> %endif - </ul> + </div> </div> <div class="table"> <table id="datatable_list_wrap"></table>
--- a/kallithea/templates/admin/repos/repos.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/repos/repos.html Sat Dec 24 17:26:48 2016 +0100 @@ -15,14 +15,14 @@ <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> %if h.HasPermissionAny('hg.admin','hg.create.repository')(): - <li> <a href="${h.url('new_repo')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add Repository')}</a> - </li> %endif - </ul> + </div> </div> <div class="table"> <table id="datatable_list_wrap"></table>
--- a/kallithea/templates/admin/user_groups/user_groups.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/user_groups/user_groups.html Sat Dec 24 17:26:48 2016 +0100 @@ -16,14 +16,14 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> %if h.HasPermissionAny('hg.admin', 'hg.usergroup.create.true')(): - <li> <a href="${h.url('new_users_group')}" class="btn btn-success btn-sm"><i class="icon-plus"></i> ${_('Add User Group')}</a> - </li> %endif - </ul> + </div> </div> <div class="table"> <table id="datatable_list_wrap"></table>
--- a/kallithea/templates/admin/users/users.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/admin/users/users.html Sat Dec 24 17:26:48 2016 +0100 @@ -16,12 +16,12 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> <a href="${h.url('new_user')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add User')}</a> - </li> - </ul> + </div> </div> <div class="table"> <table id="datatable_list_wrap"></table>
--- a/kallithea/templates/files/files.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/files/files.html Sat Dec 24 17:26:48 2016 +0100 @@ -22,12 +22,12 @@ ${self.repo_context_bar('files', c.revision)} <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li style="color:white"> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> ${_("Branch filter:")} ${h.select('branch_selector',c.changeset.raw_id,c.revision_options)} - </li> - </ul> + </div> </div> <div class="table"> <div id="files_data">
--- a/kallithea/templates/files/files_add.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/files/files_add.html Sat Dec 24 17:26:48 2016 +0100 @@ -25,12 +25,12 @@ ${self.repo_context_bar('files')} <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> - <span><a href="#">${_('Branch')}: ${c.cs.branch}</a></span> - </li> - </ul> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right panel-title"> + <a href="#">${_('Branch')}: ${c.cs.branch}</a> + </div> </div> <div class="table" id="edit"> <div id="files_data">
--- a/kallithea/templates/files/files_delete.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/files/files_delete.html Sat Dec 24 17:26:48 2016 +0100 @@ -16,12 +16,12 @@ ${self.repo_context_bar('files')} <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> - <span><a href="#">${_('Branch')}: ${c.cs.branch}</a></span> - </li> - </ul> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> + <a href="#">${_('Branch')}: ${c.cs.branch}</a> + </div> </div> <div class="table" id="edit"> <div id="files_data">
--- a/kallithea/templates/files/files_edit.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/files/files_edit.html Sat Dec 24 17:26:48 2016 +0100 @@ -25,12 +25,12 @@ ${self.repo_context_bar('files')} <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> - <span><a href="#">${_('Branch')}: ${c.cs.branch}</a></span> - </li> - </ul> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> + <a href="#">${_('Branch')}: ${c.cs.branch}</a> + </div> </div> <div class="table" id="edit"> <div id="files_data">
--- a/kallithea/templates/forks/fork.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/forks/fork.html Sat Dec 24 17:26:48 2016 +0100 @@ -16,6 +16,9 @@ <%def name="main()"> ${self.repo_context_bar('createfork')} <div class="panel panel-primary"> + <div class="panel-heading clearfix"> + ${self.breadcrumbs()} + </div> ${h.form(url('repo_fork_create_home',repo_name=c.repo_info.repo_name))} <div class="form"> <div class="form-horizontal">
--- a/kallithea/templates/journal/journal.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/journal/journal.html Sat Dec 24 17:26:48 2016 +0100 @@ -22,8 +22,10 @@ <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <div class="links icon-only-links panel-title"> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right links icon-only-links panel-title"> <a href="${h.url('my_account_watched')}"><i class="icon-eye"></i> ${_('Watched Repositories')}</a> <a href="${h.url('my_account_repos')}"><i class="icon-database"></i> ${_('My Repositories')}</a> <a id="refresh" href="${h.url('journal')}"><i class="icon-arrows-cw"></i></a>
--- a/kallithea/templates/journal/public_journal.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/journal/public_journal.html Sat Dec 24 17:26:48 2016 +0100 @@ -17,14 +17,12 @@ <div class="panel panel-primary"> <div class="panel-heading clearfix"> - <h5>${_('Public Journal')}</h5> - <ul class="links icon-only-links"> - <li> - <span> - <a href="${h.url('public_journal_atom')}"><i class="icon-rss-squared"></i></a> - </span> - </li> - </ul> + <div class="pull-left"> + ${_('Public Journal')} + </div> + <div class="pull-right"> + <a href="${h.url('public_journal_atom')}"><i class="icon-rss-squared"></i></a> + </div> </div> <div id="journal">
--- a/kallithea/templates/login.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/login.html Sat Dec 24 17:26:48 2016 +0100 @@ -7,7 +7,7 @@ <div id="login" class="panel panel-default"> <%include file="/base/flash_msg.html"/> - <div class="panel-heading title withlogo"> + <div class="panel-heading clearfix"> %if c.site_name: <h5>${_('Log In to %s') % c.site_name}</h5> %else:
--- a/kallithea/templates/password_reset.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/password_reset.html Sat Dec 24 17:26:48 2016 +0100 @@ -7,7 +7,7 @@ <div id="register"> <%include file="/base/flash_msg.html"/> - <div class="panel-heading withlogo"> + <div class="panel-heading clearfix"> %if c.site_name: <h5>${_('Reset Your Password to %s') % c.site_name}</h5> %else:
--- a/kallithea/templates/password_reset_confirmation.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/password_reset_confirmation.html Sat Dec 24 17:26:48 2016 +0100 @@ -7,7 +7,7 @@ <div id="register"> <%include file="/base/flash_msg.html"/> - <div class="panel-heading withlogo"> + <div class="panel-heading clearfix"> %if c.site_name: <h5>${_('Reset Your Password to %s') % c.site_name}</h5> %else:
--- a/kallithea/templates/pullrequests/pullrequest_show.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/pullrequests/pullrequest_show.html Sat Dec 24 17:26:48 2016 +0100 @@ -18,7 +18,7 @@ <% editable = not c.pull_request.is_closed() and (h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or c.pull_request.owner_id == c.authuser.user_id) %> ${self.repo_context_bar('showpullrequest')} <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> @@ -282,7 +282,7 @@ </div> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> <div class="breadcrumbs">${_('Pull Request Content')}</div> </div> <div class="table">
--- a/kallithea/templates/pullrequests/pullrequest_show_all.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/pullrequests/pullrequest_show_all.html Sat Dec 24 17:26:48 2016 +0100 @@ -23,23 +23,19 @@ <div class="panel panel-primary"> <div class="panel-heading clearfix"> - ${self.breadcrumbs()} - <ul class="links"> - <li> - %if c.authuser.username != 'default': - <span> - <a id="open_new_pr" class="btn btn-success btn-xs" href="${h.url('pullrequest_home',repo_name=c.repo_name)}"><i class="icon-plus"></i> ${_('Open New Pull Request')}</a> - </span> - %endif - <span> - %if c.from_: - <a class="btn btn-default btn-xs" href="${h.url('pullrequest_show_all',repo_name=c.repo_name,closed=c.closed)}"><i class="icon-git-compare"></i> ${_('Show Pull Requests to %s') % c.repo_name}</a> - %else: - <a class="btn btn-default btn-xs" href="${h.url('pullrequest_show_all',repo_name=c.repo_name,closed=c.closed,from_=1)}"><i class="icon-git-compare"></i> ${_("Show Pull Requests from '%s'") % c.repo_name}</a> - %endif - </span> - </li> - </ul> + <div class="pull-left"> + ${self.breadcrumbs()} + </div> + <div class="pull-right"> + %if c.authuser.username != 'default': + <a id="open_new_pr" class="btn btn-success btn-xs" href="${h.url('pullrequest_home',repo_name=c.repo_name)}"><i class="icon-plus"></i> ${_('Open New Pull Request')}</a> + %endif + %if c.from_: + <a class="btn btn-default btn-xs" href="${h.url('pullrequest_show_all',repo_name=c.repo_name,closed=c.closed)}"><i class="icon-git-compare"></i> ${_('Show Pull Requests to %s') % c.repo_name}</a> + %else: + <a class="btn btn-default btn-xs" href="${h.url('pullrequest_show_all',repo_name=c.repo_name,closed=c.closed,from_=1)}"><i class="icon-git-compare"></i> ${_("Show Pull Requests from '%s'") % c.repo_name}</a> + %endif + </div> </div> <div class="normal-indent">
--- a/kallithea/templates/register.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/register.html Sat Dec 24 17:26:48 2016 +0100 @@ -7,7 +7,7 @@ <div id="register"> <%include file="/base/flash_msg.html"/> - <div class="panel-heading withlogo"> + <div class="panel-heading clearfix"> %if c.site_name: <h5>${_('Sign Up to %s') % c.site_name}</h5> %else:
--- a/kallithea/templates/search/search.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/search/search.html Sat Dec 24 17:26:48 2016 +0100 @@ -33,7 +33,7 @@ ${self.repo_context_bar('options')} %endif <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> %if c.repo_name:
--- a/kallithea/templates/summary/statistics.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/summary/statistics.html Sat Dec 24 17:26:48 2016 +0100 @@ -23,7 +23,7 @@ summary = lambda n:{False:'summary-short'}.get(n) %> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div>
--- a/kallithea/templates/summary/summary.html Sat Dec 24 17:26:48 2016 +0100 +++ b/kallithea/templates/summary/summary.html Sat Dec 24 17:26:48 2016 +0100 @@ -60,7 +60,7 @@ summary = lambda n:{False:'summary-short'}.get(n) %> <div class="panel panel-primary"> - <div class="panel-heading"> + <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> <div class="form"> @@ -170,8 +170,8 @@ <div class="panel panel-primary"> - <div class="panel-heading"> - <div class="breadcrumbs"> + <div class="panel-heading clearfix"> + <div class="breadcrumbs panel-title"> %if c.repo_changesets: ${h.link_to(_('Latest Changes'),h.url('changelog_home',repo_name=c.repo_name))} %else: @@ -188,13 +188,13 @@ %if c.readme_data: <div id="readme" class="anchor"> -<div class="panel panel-primary" style="background-color: #FAFAFA"> +<div class="panel panel-primary"> <div class="panel-heading" title="${_('Readme file from revision %s:%s') % (c.db_repo.landing_rev[0], c.db_repo.landing_rev[1])}"> - <div class="breadcrumbs"> + <div class="breadcrumbs panel-title"> <a href="${h.url('files_home',repo_name=c.repo_name,revision='tip',f_path=c.readme_file)}">${c.readme_file}</a> </div> </div> - <div class="readme"> + <div class="readme panel-body"> <div class="readme_box"> ${c.readme_data|n} </div>