"Web-Kontering v1.1"
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 ----------> <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(); });

Related: See More


Questions / Comments: