Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

pagination and some table styling

Browse source
This commit is contained in:
Felix Niklas 2014-07-23 21:47:57 +02:00
parent 6004f00560
commit 2da12c0c14
7 changed files with 126 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/images/sprite.svg
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="305px" height="299px" viewBox="0 0 305 299" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<svg width="305px" height="311px" viewBox="0 0 305 311" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>sprite</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
@ -93,5 +93,7 @@
<path d="M85.5,10 L48,10 L58,3 L95.5,3 L85.5,10 Z" id="Shape-copy" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M85.5,8 L48,8 L58,0 L95.5,0 L85.5,8 Z" id="Shape-copy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
</g>
<path d="M6.9,309.9 L2,305 L6.9,300" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M9,300 L13.9,304.9 L9,309.9" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

13
app/assets/javascripts/app/controllers/_dashboard/ticket.js.coffee
View file

@ -71,12 +71,17 @@ class App.DashboardTicket extends App.Controller
@overview = data.overview
@tickets_count = data.tickets_count
@ticket_ids = data.ticket_ids
per_page = @overview.view.per_page || 10
per_page = Math.min(@overview.view.per_page || 10, @tickets_count)
tickets_from = @start_page * per_page
tickets_till = Math.max(tickets_from + per_page-1, 0)
pages_total = parseInt( ( @tickets_count / per_page ) + 0.99999 ) || 1
html = App.view('dashboard/ticket')(
overview: @overview,
pages_total: pages_total,
start_page: @start_page,
overview: @overview,
pages_total: pages_total,
start_page: @start_page,
tickets_from: tickets_from,
tickets_till: tickets_till,
tickets_count: @tickets_count
)
html = $(html)
html.find('li').removeClass('active')

4
app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco
View file

@ -1,4 +1,4 @@
<div class="page-header">
<div class="horizontal">
<div class="page-header-title">
<h1><%- @T( @overview.name ) %> <% if @edit: %><small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small><% end %></h1>
</div>
@ -6,7 +6,7 @@
<ul class="pagination">
<% for item in @view_modes: %>
<li class="<%= item.class %>">
<a href="#" data-type="viewmode" data-mode="<%= item.type %>"><%= item.name %></a>
<a class="centered" href="#" data-type="viewmode" data-mode="<%= item.type %>"><%= item.name %></a>
</li>
<% end %>
</ul>

2
app/assets/javascripts/app/views/dashboard.jst.eco
View file

@ -116,7 +116,7 @@
</div>
</div>
<div class="container-fluid main-overviews" id="sortable">
<div class="main-overviews" id="sortable">
</div>
</div>
<div class="activity sidebar">

66
app/assets/javascripts/app/views/dashboard/ticket.jst.eco
View file

@ -1,31 +1,37 @@
<div>
<div class="page-header">
<div class="page-header-title">
<h2 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h2>
</div>
<div class="page-header-meta">
<ul class="pagination">
<li>
<% if @start_page != 1: %>
<a href="#" data-id="<%= @start_page - 1 %>" data-type="page">«</a>
<% else: %>
<a href="#" data-id="<%= @start_page %>" data-type="page">«</a>
<% end %>
</li>
<% for item in [1..@pages_total]: %>
<li class="page">
<a href="#" data-id="<%= item %>" data-type="page"><%= item %></a>
</li>
<% end %>
<li>
<% if @start_page != @pages_total: %>
<a href="#" data-id="<%= @start_page + 1 %>" data-type="page">»</a>
<% else: %>
<a href="#" data-id="<%= @start_page %>" data-type="page">»</a>
</li>
<% end %>
</ul>
</div>
<div class="page-header horizontal">
<div class="page-header-title">
<h2 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h2>
</div>
<div class="table-overview"></div>
</div>
<div class="page-header-meta horizontal">
<div class="pagination-counter">
<span class="pagination-items-range"><%- @tickets_from %>-<%- @tickets_till %></span> <%- @T("of") %> <span class="pagination-total-items"><%- @tickets_count %></span>
</div>
<ul class="pagination">
<li>
<% if @start_page != 1: %>
<a class="centered" href="#" data-id="<%= @start_page - 1 %>" data-type="page">
<span class="left arrow icon"></span>
</a>
<% else: %>
<a class="inactive centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="inactive left arrow icon"></span>
</a>
<% end %>
</li>
<% for item in [1..@pages_total]: %>
<% end %>
<li>
<% if @start_page != @pages_total: %>
<a class="centered" href="#" data-id="<%= @start_page + 1 %>" data-type="page">
<span class="right arrow icon"></span>
</a>
<% else: %>
<a class="centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="right arrow icon"></span>
</a>
</li>
<% end %>
</ul>
</div>
</div>
<div class="table-overview"></div>

2
app/assets/javascripts/app/views/generic/table.jst.eco
View file

@ -1,4 +1,4 @@
<table class="table table-striped table-hover">
<table class="table table-hover">
<thead>
<tr>
<% if @checkbox: %>

106
app/assets/stylesheets/zzz.css.erb
View file

@ -27,22 +27,47 @@ body {
table {
table-layout: fixed;
}
table th, table td {
.table {
display: table;
color: #a9bcc4;
}
.table .table-row {
display: table-row;
}
.table th,
.table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table {
display: table;
.table > thead > tr > th {
padding: 12px 9px 9px;
border-bottom: none;
border-top: 1px solid #ececec;
background: #f0f1f2;
color: #444a4f;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
}
.table .table-row {
display: table-row;
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 9px;
border-top-color: #f2f2f2;
}
.table .table-cell{
.table .table-cell {
vertical-align: top;
display: table-cell;
border-bottom: 1px solid #eeeeee;
}
.hero-two {
width: 100%;
}
@ -492,39 +517,35 @@ label {
}
/*
* bootstrap changes
*/
/* improve pagination if only one page is shown */
.pagination li:only-child a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* improved spacing */
.pagination-count {
padding: 6px 6px;
float: left;
color: #999;
border: none;
line-height: 17px;
.pagination {
margin: 0;
}
.page-header {
margin: 0 0 12px;
padding-bottom: 5px;
.pagination > li > a,
.pagination > li > span {
padding: 0;
width: 31px;
height: 28px;
border-color: #ececec;
}
.pagination-counter {
margin-right: 19px;
line-height: 28px;
color: #9c9c9b;
}
.pagination-items-range {
color: #706f6f;
}
.page-header-title {
float: left;
margin-bottom: 20px;
}
.page-header-meta {
float: right;
padding-top: 20px;
}
.page-header .page-header-meta ul.pagination {
margin: 0;
margin-top: 18px;
margin-left: auto;
}
.dropdown-menu .count {
@ -1025,6 +1046,26 @@ ol.tabs li {
background-position: -257px -216px;
}
.left.arrow.icon,
.right.arrow.icon {
width: 8px;
height: 12px;
opacity: .39;
}
.inactive.left.arrow.icon,
.inactive.right.arrow.icon {
opacity: .23;
}
.left.arrow.icon {
background-position: 0 -299px;
}
.right.arrow.icon {
background-position: -8px -299px;
}
/*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -1905,6 +1946,7 @@ footer {
.stat-widgets {
margin: 0 -7px;
display: none !important;
}
.stat-widget {