<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div></div>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span
class="sr-only">Vis menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a href="javascript:;" class="tool-menu dropdown dropdown-toggle" data-toggle="dropdown"><span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://demo07.signflow.dk/usr">Faktura Portal</a></li>
<li>
<a href="https://demo07.signflow.dk/autoaccount/dk.logiva.invoice.autoaccount.gwt.AutoAccountAdmin/AutoAccountAdmin.jsp">Konteringsforslag</a>
</li>
</ul>
<a href="javascript:;" class="navbar-brand"><img class="navbar-brand navbar-logo visible-md visible-lg"
src="http://i.imgur.com/YbSxtb3.png"> <img
class="navbar-brand navbar-logo visible-xs visible-sm"
src="http://i.imgur.com/YbSxtb3.png"> <span
class="hidden-xs hidden-sm"> faktura</span></a>
<div class="visible-xs navbar-btn pull-right primary_action_xs">
<button type="button" class="btn btn-primary"><i class="fa fa-check"></i></button>
</div>
</div>
<div class="navbar-collapse collapse collapse-navbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown"
aria-hidden="true" style="display: none;">Mine (3) <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-hidden="true" style="display: none;">
<li data-key="2404399" class="active"><a href="javascript:;">Mine (3)</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-btn">
<button type="button" class="btn hidden-xs btn-primary"><i class="fa fa-check"></i> Godkend</button>
<button type="button" class="btn btn-default hidden-xs"><i class="fa fa-reply"></i> Fakturafejl
</button>
<button type="button" class="btn btn-default hidden-xs"><i class="fa fa-share"></i> til kollega
</button>
<li class="visible-xs"><a href="javascript:;" class=""><i class="fa fa-check"></i> Godkend</a></li>
<li class="visible-xs"><a href="javascript:;" class=""><i class="fa fa-reply"></i> Fakturafejl</a>
</li>
<li class="visible-xs"><a href="javascript:;" class=""><i class="fa fa-share"></i> til kollega</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown"
aria-hidden="true" style="display: none;">STD <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-hidden="true" style="display: none;">
<li data-key="83086" class="active"><a href="javascript:;">STD</a></li>
</ul>
</li>
<li><a href="javascript:;" data-toggle="dropdown" title="test">test <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="https://demo07.signflow.dk/usr/auth/logout">Log ud</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 messagepanel"></div>
</div>
</div>
<div style="padding-top: 20px;">
<div class="container-fluid type-invoice">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="panel panel-default">
<div class="panel-heading relative invoice-title">
<div class="upperRightHand pull-right">
<div class="action-panel"><a href="javascript:;" class="text-muted"><i
class="fa fa-download fa-2x"></i> </a> <a href="javascript:;"
class="text-muted"><i
class="fa fa-envelope fa-2x"></i> </a></div>
<ul class="pagination inline invoiceViewPager pagination-sm hidden"
aria-hidden="true" style="display: none;">
<li class="active"><a href="javascript:;">1</a></li>
</ul>
<a class="dropdown btn btn-default btn-sm pull-right dropdown-toggle"
href="#" data-toggle="dropdown">Faktura-55041-1.pdf <span
class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li data-key="-32431725348" class="active"><a
href="javascript:;">Faktura-55041-1.pdf</a>
</li>
</ul>
</div>
<h3 class="panel-title">Faktura</h3></div>
<div class="panel-body invoiceView">
<img class="gwt-Frame col-xs-12 fade invoiceViewFrame in"
src="http://i.imgur.com/MMAosBm.png"/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default fade in">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:;">Detaljer</a></li>
<li><a href="javascript:;">Noter <span class="badge"></span></a></li>
</ul>
<div>
<div>
<form target="FormPanel_logiva_2" role="form" class="form-horizontal">
<fieldset class="well well-sm">
<div class="form-group"><label class="control-label col-xs-5">Faktura
nummer</label>
<div class="form-control-static col-xs-7">
<div>292220</div>
</div>
</div>
<div class="form-group"><label
class="control-label col-xs-5">ID</label>
<div class="form-control-static col-xs-7">
<div>55041</div>
</div>
</div>
<div class="form-group"><label
class="control-label col-xs-5">Leverandør</label>
<div class="form-control-static col-xs-7">
<div class="flow" style="width: 80%;">TDC Hosting</div>
<button type="button"
class="btn btn-default btn-xs pull-right flow">
...
</button>
</div>
<div class="collapsable pre col-xs-12 collapse">
<div><pre>TDC Hosting
Olof Palmes Allé 36
8200 Århus N
CVR-nr: 25595696
PBS: PBS
</pre>
</div>
</div>
</div>
<div class="form-group">
<div class="form-control-static col-xs-offset-5 col-xs-7">
<div>
<div class="checkbox"><label><input type="checkbox"
disabled="">Fortrolig</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="well well-sm">
<legend>Historik</legend>
<div class="form-group">
<div class="form-control-static responsible no-label col-xs-12">
<div><span style="color:#008000">FS</span> / AO > /
test > / test > / <u><b>test</b></u> / <span
style="color:#0000CC">JSO</span></div>
</div>
</div>
</fieldset>
<fieldset class="well well-sm">
<legend>Betingelser</legend>
<div class="form-group"><label class="control-label col-xs-5">Faktura
dato</label>
<div class="form-control-static col-xs-7">
<div>28.08.2012</div>
</div>
</div>
<div class="form-group"><label
class="control-label col-xs-5">Forfaldsdato</label>
<div class="form-control-static col-xs-7">
<div>27.09.2012</div>
</div>
</div>
<div class="form-group"><label
class="control-label col-xs-5">Betales</label>
<div class="form-control-static hide-empty col-xs-7">
<div>net.30</div>
</div>
</div>
</fieldset>
<fieldset class="well well-sm">
<legend>Beløb</legend>
<div class="form-group"><label class="control-label col-xs-5">Beløb</label>
<div class="form-control-static amount col-xs-7">
<div class="flow"><span class="amount">26.844,00</span>
</div>
<div class="currency flow">
<div>DKK</div>
</div>
</div>
</div>
<div class="form-group"><label class="control-label col-xs-5">Moms</label>
<div class="form-control-static amount col-xs-7">
<div class="flow"><span class="amount">6.711,00</span>
</div>
<div class="currency flow">
<div>DKK</div>
</div>
</div>
</div>
<div class="form-group"><label class="control-label col-xs-5">Total</label>
<div class="form-control-static amount total col-xs-7">
<div class="flow"><span class="amount">33.555,00</span>
</div>
<div class="currency flow">
<div>DKK</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="bottomToolbar">
<ul class="nav nav-tabs kontering-toolbar" role="tablist">
<li class=""><a href="javascript:;" class="btn btn-default active"><span title="Historik" class="glyphicon glyphicon-calendar"></span></a></li>
<li class="active"><a href="javascript:;" class="btn btn-default active"><span title="Kontering" class="glyphicon glyphicon-book"></span></a></li>
</ul>
<div class="accounting-lines tab-content">
<div class="" role="tabpanel">
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="amount">Amount</label>
<div class="input-group">
<input type="number" class="form-control" id="amount" placeholder="Beløb" value="33555">
<div class="input-group-addon"><a href="javascript:;">DKK</a></div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="accountType">Account Type</label>
<select class="form-control" id="accountType" placeholder="Beløb">
<option value="1" seledted>Finans</option>
<option value="2">Projekt</option>
</select>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="account">Account</label>
<input type="search" class="form-control typeahead-account" id="account" placeholder="Konto">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Art">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Afdeling">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Bærer">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Formål">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Personale">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
<div class="form-group has-feedback dimension">
<input type="search" class="form-control typeahead-account" placeholder="Materiel">
<span class="form-control-feedback glyphicon glyphicon-open"></span>
</div>
</form>
</div>
</div>
</div>
</div>
/** Add css rules here for your application. */
body {
/* padding-top: 70px !important; */
}
.gwt-Anchor {
cursor: pointer;
}
.gwt-PopupPanelGlass {
background:rgba(255,255,255,0.5);
z-index: 1050;
}
.gwt-PopupPanel, .modal {
z-index: 1051;
}
.clickable {
cursor: pointer;
}
.booking {
color: #428bca;
}
.rejection {
color: #0066CC;
}
.approval {
color: #398439;
}
.lateapproval {
color: #357ebd;
}
.invoiceoverview .responsibility {
white-space: nowrap;
font-size: 90%;
overflow: hidden;
min-width: 40px;
max-width: 220px;
text-overflow: ellipsis;
padding: 3px 0px;
}
.invoiceoverview .notes {
margin:0px;
padding:5px;
padding-bottom:0px;
padding-top:3px;
}
.invoiceoverview .notes .glyphicon-comment {
font-size:190%;
margin-bottom:-2px;
padding:0px;
color: #46b8da;
}
.invoiceoverview .notes.btn-disabled .glyphicon-comment {
color: #ccc;
}
.invoiceoverview .notes .numberofnotes {
top: -3px;
color: #fff;
font-weight: bold;
font-style: normal;
z-index: 1;
}
.responsibility span {
padding: 2px;
font-weight: bold;
}
.responsibility .current {
/* TODO: Use Less instead of rgb values */
color: white;
background: none repeat scroll 0% 0% #ccc;
border: 1px solid #ccc;
padding: 3px;
border-radius: 4px;
}
.relative {
position: relative;
}
.upperRightHand {
position: absolute !important;
top: 5px;
right: 5px;
}
.lowerLeft {
position: absolute !important;
bottom: 10px;
left: 10px;
}
.inline {
display: inline !important;
}
.nav.navbar-nav > li > * > .btn-group, .nav.navbar-nav > li > .btn-group {
padding: 8px;
}
.invoiceViewFrame {
position: relative;
border: 0;
padding: 0;
}
.invoiceViewPager {
padding-right: 34px;
}
.invoiceoverview .amount {
float: right !important;
}
.invoiceoverview .col-note {
text-align: center;
}
.invoicedetails .content {
padding-top: 7px;
}
.messagepanel {
height: 0;
z-index: 100;
}
.notes .well {
margin-bottom: 3px;
}
.notes .well .btn.btn-lg {
font-weight: bold;
}
.notes .well p {
min-height: 35px;
}
/* Color codes used for the "name-boxes" int he notes widget */
/* TODO: LESSIFY */
.color1 {
background: #1d877f;
}
.color2 {
background: #125440;
color: white;
}
.color3 {
background: #33bba9;
}
.color4 {
background: #2170b4;
}
.color5 {
background: #87d3e4;
}
.color6 {
background: #11533f;
color: white;
}
.color7 {
background: #4cbea6;
}
.color8 {
background: #1e9bad;
}
.color9 {
background: #1cb48b;
}
.color10 {
background: #71a29b;
}
.color11 {
background: #7cb5dd;
}
.dropdown-menu {
z-index: 2100 !important;
background-color: #ffffff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 5px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu li a {
position: relative;
}
.dropdown-menu li a i {
position: relative;
left: -8px;
width: 1em;
}
.pull-right > .dropdown-menu.dropdown-menu-right {
top: 27px;
}
.suggestPopupContent {
height: 14.5em;
overflow-y: scroll;
}
.suggestPopupContent table {
width: 100%;
}
.suggestPopupContent .item {
border-bottom: 1px solid #cccccc;
padding: 5px;
}
.suggestPopupContent .item-selected {
background-color: #d9edf7;
}
.suggestPopupContent .item h3 {
font-size: medium;
font-style: oblique;
padding: 0px;
margin: 0px;
color: #999;
}
.inbox-empty {
padding: 10px;
font-size: 120%
}
.inbox-empty span {
padding-right: 2em;
}
ul.navbar-nav > li:first-child {
border-left: 4px solid #ccc;
}
/**
* Carousel
**/
#content-carousel {
padding-left: 3%;
padding-right: 3%;
height: 100%;
}
#content-carousel .carousel-control {
width: 4% !important; /* We need to win over bootstrap styling */
}
#content-carousel .carousel-inner .pagination {
margin: 0px;
}
.invoiceoverview table {
cursor: pointer;
}
.cover {
position: absolute;
border: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
img.navbar-logo {
padding-top: 2px;
padding-bottom: 2px;
margin-top: -12px;
margin-bottom: -12px;
}
.navbar-header .tool-menu {
position: absolute;
left: 4px;
top: 14px;
}
/* Just to win over bootstrap, we include body */
body .table-striped > thead {
background-color: rgba(160,190,190, 0.8);
}
body .table-striped > tbody > tr:nth-child(2n+1) > td, body .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: rgba(218, 247, 251, 0.8);
}
body .table-striped > tbody > tr:nth-child(2n) > td, body .table-striped > tbody > tr:nth-child(2n) > th {
background-color: rgba(255, 255, 255, 0.8);
}
/*
* The Send Mail Dialog
*/
.action-panel {
position: relative;
padding-right: 10px;
display: inline;
}
.action-panel a {
padding: 5px;
}
.form-group .rtf-editor-actions {
background-color: #bdd;
height: 2.5em;
border-radius: 4px 4px 0px 0px;
}
.form-group .form-control.rtf-editor-parent {
height: 100%;
padding: 0px 0px 2px 4px;
}
.rtf-editor {
max-height: 10em;
height: 10em;
width: 100%;
overflow-y: scroll;
margin-left: -4px;
margin-right: 0px;
margin-bottom: -2px;
padding-left: 2px;
}
.form-control.docs {
height: auto;
padding-bottom: 12px;
}
.form-horizontal .form-group .form-group {
margin: 0px;
}
.modal-body .form-horizontal .form-control-feedback {
top: 0px;
right: 0px !important;
}
/* Watermarks - too much for most
div.invoiceoverview {
background: rgb(255,255,255) url(logo-bg2.png) repeat;
}
*/
.primary_action_xs {
padding-right: 16px;
}
.cellist > div > div:last-child > .cell {
border-bottom: 1px solid;
margin-bottom: 0px;
}
.cell {
width: 100%;
height: 52px;
padding: 4px;
border: solid 1px #454545;
border-radius: 4px;
position: relative;
border-bottom: 0px;
margin-bottom: 1px;
}
.cell .index {
position: absolute;
top: 10%;
font-size: 200%;
left: 47%;
width: 6%;
overflow: visible;
text-align: center;
color: rgba(100,100,100,0.4)
}
.cell .amount {
position: absolute;
bottom: 5%;
right: 5%;
font-size: 150%;
}
.cell .name {
color: #2C829B;
font-size: 120%;
padding-left: 6px;
text-overflow: ellipsis;
}
.showmorepager {
margin: 0;
}
.showmorepager .content {
width: 100%;
}
.showmorepager .content .footer {
height: 1.5em;
width: 100%;
font-style: oblique;
text-align: center;
}
.showmorepager .content .view {
width: 100%;
}
.type-creditnote .amount {
color: #ff2020;
}
.type-creditnote .invoice-title {
background-color: rgba(255, 10, 10, 0.6) !important;
}
.type-invoice .invoice-title {
background-color: rgba(210, 210, 210, 1) !important;
}
.type-creditnote .invoiceView {
background-color: rgba(255, 130, 130, 0.5) !important;
}
.type-invoice .invoiceView {
background-color: #f5f5f5 !important;
}
.invoiceView.panel-body {
padding: 4px;
}
.invoiceViewFrame {
background-color: rgba(255,255,255,1) !important;
}
.amount {
text-align: right !important;
}
.total {
font-weight: bold;
font-size: 120%;
}
.flow {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.flow:not(:first-child) {
margin-left: 0.5em;
}
.flow.tight {
margin-left: 0;
}
/* Fix the ... (more) button in place */
.flow.btn-xs.pull-right {
position: absolute;
right: 15px;
z-index: 10;
}
fieldset > legend {
font-size: 16px;
border: 0;
margin-bottom: 0;
}
.form-control-static {
white-space: nowrap;
}
.form-group {
margin-bottom: 10px;
}
.navbar-btn .btn {
margin-right: 5px;
}
/**
* iPhone4 320x480
* Not visible- or hidden- as Bootstrap, but from-
**/
@media only screen and (max-width: 319px) {
.hidden-iphone {
display: none !important;
}
.from-iphone {
display: none !important;
}
}
@media only screen and (max-width: 320px) {
.navbar-logo.visible-xs {
width: 200px;
height: 35px;
margin-top: -5px;
margin-left: -4px;
}
}
@media only screen and (max-width: 479px) and (min-width: 321px) {
.navbar-logo.visible-xs {
width: 230px;
height: 45px;
}
}
/* iPhone4 Horizontal */
@media only screen and (max-width: 479px) {
.navbar-default .navbar-brand {
overflow: visible;
position: absolute;
}
.from-iphone-horizontal, .from-xs {
display: none !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-logo.visible-sm {
width: 330px;
}
}
@media only screen and (max-width: 767px) {
.from-sm {
display: none !important;
}
}
@media only screen and (max-width: 991px) {
.from-md {
display: none !important;
}
}
@media only screen and (max-width: 1199px) {
.from-lg {
display: none !important;
}
}
#bottomToolbar {
position: absolute;
bottom: 0px;
width: 100%;
}
.kontering-toolbar li {
float: right;
}
.form-control-feedback {
display: none;
color: #888;
z-index:10;
position: absolute;
right: 0px;
}
.has-feedback .form-control {
padding-right: 1.8em;
}
input.form-control[type=number] {
width: 6em !important;
text-align: right;
}
.form-control.typeahead-account {
width: 7em;
}
/** bottom **/
$(document).on('focus', 'input.form-control', function(e) {
var inp = $(this);
inp.closest('.has-feedback').find('.form-control-feedback').show();
});
$(document).on('blur', 'input.form-control', function(e) {
var inp = $(this);
inp.closest('.has-feedback').find('.form-control-feedback').hide();
});
