"Kontering"
Bootstrap 3.3.0 Snippet by rasmus

<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 ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> <script src="https://rawgithub.com/mindmup/bootstrap-wysiwyg/master/external/jquery.hotkeys.js"></script> <script type="text/javascript" src="https://rawgithub.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script> <script type="text/javascript" src="https://rawgit.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script> <script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/handlebars.js"></script> <div class="navbar navbar-default navbar-fixed-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="navbar-brand dropdown dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/usr">Faktura Portal</a></li> <li aria-hidden="true" style="display: none;"><a href="/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" height="33" src="logo-sm.png" width="230"> <span class="hidden-xs"> faktura</span></a></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown visible-md visible-lg"><a href="javascript:;">Overblik</a></li> <li class="dropdown"><a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown">Mine <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="active"><a href="javascript:;">Mine</a></li> <li><a href="javascript:;">Cecilie Lund Pedersen (0)</a></li> <li><a href="javascript:;">Ingrid Sørensen Stefansen (0)</a></li> <li><a href="javascript:;">Per Breinbjerg (0)</a></li> <li><a href="javascript:;">Rasmus2 (0)</a></li> <li><a href="javascript:;">RLF (0)</a></li> <li><a href="javascript:;">Susanne Voigt Meyland (0)</a></li> <li><a href="javascript:;">SVS (0)</a></li> <li><a href="javascript:;">test (0)</a></li> <li><a href="javascript:;">Fælles (0)</a></li> <li><a href="javascript:;">Åbne</a></li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li class="active"><a href="javascript:;">Detaljer</a></li> <li> <div class=""> <div class="btn-group"> <button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Godkend</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="javascript:;"><i class="fa fa-reply"></i> Retur</a></li> <li><a href="javascript:;"><i class="fa fa-times"></i> Afvis</a></li> <li class="divider"></li> <li><a href="javascript:;"><i class="fa fa-share"></i> Til kollega</a></li> </ul> </div> </div> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown" aria-hidden="true" style="display: none;"><a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown">STD <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="active"><a href="javascript:;">STD</a></li> </ul> </li> <li class="hidden-xs hidden-sm"><a href="javascript:;" data-toggle="dropdown">Bjørn Thomassen <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/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 col-sm-6 col-md-6"> <div class="panel panel-default"> <div class="panel-heading relative"> <div class="upperRightHand pull-right"> <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">faktura01.tif <span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li class="active"><a href="javascript:;">faktura01.tif</a></li> <li><a href="javascript:;">Original01.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"></img> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="panel panel-default fade in"> <div class="panel-body"> <ul class="nav nav-tabs"> <li><a href="javascript:;">Detaljer</a></li> <li><a href="javascript:;">Noter <span class="badge"></span></a></li> <li class="active"><a href="javascript:;">Kontering</a></li> </ul> <div> <div><!-- panel --> <div class="panel panel-info"> <div class="panel-heading">Leverandør</div> <div class="pandel-body"><p>EMR Murer & Entrepenør A/S<br/>Falkevej 28</p></div> </div> <div class="panel panel-success"> <div class="panel-heading">Konteringslinjer</div> <div class="pandel-body"> <table class="table-condensed table-bordered" style="width: 100%"> <thead> <th>Konto</th> <th>Tekst</th> <th>Beløb</th> <th>Momsbeløb</th> <th>Momskode</th> <th>Dimensioner</th> <th></th> </thead> <tbody> <td>1221</td> <td>Diverse</td> <td>738,00</td> <td>184,50</td> <td>Moms</td> <td><div> <div class="row"><span class="label label-default">Projekt</span><br/> Diverse</div> <div class="row"><span class="label label-default">Afdeling</span><br/> Q - Afdeling Q</div> <div class="row"><span class="label label-default">Bærer</span><br/> 238 - Post Danmark</div> </div> </td> <td><span class="fa icon-remove-sign" class="removeline"></span></td> </tbody> <tfoot> <tr class="balance"> <td colspan="2">Balance</td> <td>3.099,50</td> <td>583,50</td> <td colspan="3" rowspan="2"><button type="submit" class="btn btn-primary pull-right">Gem</button></td> </tr> <tr class="total"> <td colspan="2">Total</td> <td>3.837,50</td> <td>767,50</td> </tr> </tfoot> </table> </div> </div> <div class="panel panel-warning"> <div class="panel-heading">Tidligere konteringer</div> <div class="pandel-body"> <table class="table-condensed" style="width: 100%"> <thead> <th>Bruger</th> <th>Dato</th> <th>Konto</th> <th>Tekst</th> <th>Momskode</th> <th>Dimensioner</th> <th></th> </thead> <tbody> <td>bt</td> <td>22. jan 2015</td> <td>1221</td> <td>Diverse</td> <td>Moms</td> <td><div class="row"> <div class="col-md-4"><span class="label label-default">Projekt</span><br/> Diverse</div> <div class="col-md-4"><span class="label label-default">Afdeling</span><br/> Q - Afdeling Q</div> <div class="col-md-4"><span class="label label-default">Bærer</span><br/> 238 - Post Danmark</div> </div> </td> <td><a href="#" class="apply">Benyt</a></td> </tbody> </table> </div> </div> </div><!-- form --> </div> </div> </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 { 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; } .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; } .invoiceViewPager { padding-right: 34px; } .invoiceoverview .notes, .invoiceoverview .amount { float: right!important; } .invoicedetails .content { padding-top: 7px; } .messagepanel { height: 0; z-index: 100; } /* TODO: LESSIFY */ .color1 { background: #FF6961; } .color2 { background: #779ECB; } .color3 { background: #F49AC2; } .color4 { background: #FFD1DC; } .color5 { background: #966FD6; } .color6 { background: #FDFD96; } .color7 { background: #CFCFC4; } .color8 { background: #FFB347; } .color9 { background: #C23B22; } .color10 { background: #B19CD9; } .color11 { background: #836953; } .color12 { background: #AEC6CF; } .color13 { background: #CB99C9; } .color14 { background: #77DD77; } .color15 { background: #B39EB5; } .color16 { background: #03C03C; } .color17 { background: #DEA5A4; } .gwt-SuggestBoxPopup { z-index: 2100; 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); } .gwt-SuggestBoxPopup .item { border-bottom: 1px solid #cccccc; padding: 5px; } .gwt-SuggestBoxPopup .item-selected { background-color: #d9edf7; } .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; } /* 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(190, 210, 210, 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); } .balance { font-style: oblique; color: #888; } .balance .btn { font-style: normal; } /* Watermarks - too much for most div.invoiceoverview { background: rgb(255,255,255) url(logo-bg2.png) repeat; } */

Related: See More


Questions / Comments: