added freelancer invoice template (#254)

assets/app.js

@@ -0,0 +1,18 @@
+require('../vendor/kevinpapst/adminlte-bundle/Resources/assets/admin-lte');
+
+require('./sass/app.scss');
+
+require('fullcalendar');
+require('fullcalendar/dist/gcal.min');
+require('fullcalendar/dist/locale-all');
+require('fullcalendar/dist/fullcalendar.min.css');
+
+// ------ for charts ------
+require('chart.js/dist/Chart.min');
+
+// ------ Kimai itself ------
+require('./js/kimai.js');
+require('./js/datatable.js');
+require('./js/toolbar.js');
+require('./images/default_avatar.png');
+require('./images/signature.png');

assets/css/invoice.scss

@@ -1,36 +0,0 @@
-/*
- * This file is part of the Kimai time-tracking app.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-.invoice {
-    margin: 0;
-}
-
-@media (min-width: $screen-sm-min) {
-    .invoice {
-        margin: 10px 25px;
-    }
-}
-
-.page-header-small{
-    font-size: 14px;
-}
-
-div.invoice-address {
-    margin-top: 30px;
-    margin-bottom: 30px;
-}
-
-table.invoice-records {}
-table.invoice-meta th {
-    padding-right: 40px;
-}
-table.invoice-sum th {
-    width: 70%;
-}
-table.invoice-sum th, table.invoice-sum td  {
-    text-align: right;
-}

assets/js/app.js

@@ -1,19 +0,0 @@
-require('../../vendor/kevinpapst/adminlte-bundle/Resources/assets/admin-lte');
-
-require('../css/app.scss');
-require('../css/datatable.scss');
-require('../css/calendar.scss');
-
-require('fullcalendar');
-require('fullcalendar/dist/gcal.min');
-require('fullcalendar/dist/locale-all');
-require('fullcalendar/dist/fullcalendar.min.css');
-
-// ------ for charts ------
-require('chart.js/dist/Chart.min');
-
-// ------ Kimai itself ------
-require('./kimai.js');
-require('./datatable.js');
-require('./toolbar.js');
-require('../images/default_avatar.png');

assets/sass/invoice.scss

@@ -0,0 +1,299 @@
+/*
+ * This file is part of the Kimai time-tracking app.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.invoice {
+    margin: 0;
+}
+
+@media (min-width: $screen-sm-min) {
+    .invoice {
+        margin: 10px 25px;
+    }
+}
+
+.page-header-small{
+    font-size: 14px;
+}
+
+div.invoice-address {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+table.invoice-records {}
+table.invoice-meta th {
+    padding-right: 40px;
+}
+table.invoice-sum th {
+    width: 70%;
+}
+table.invoice-sum th, table.invoice-sum td  {
+    text-align: right;
+}
+
+/* ================================ FREELANCER INVOICE ================================ */
+
+#freelancer-invoice {
+    font: 16px/1 'Open Sans', sans-serif;
+    box-sizing: border-box;
+
+    h1 {
+        font: bold 100% sans-serif;
+        letter-spacing: 0.5em;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    h2 {
+        font: bold 1.5em sans-serif;
+        margin-bottom: 1em;
+    }
+
+    /* table */
+
+    table {
+        table-layout: fixed;
+        width: 100%;
+    }
+
+    table {
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    /* header */
+
+    header {
+    }
+
+    header:after {
+        clear: both;
+        content: "";
+        display: table;
+        font-size: 1em;
+    }
+
+    header address {
+        float: left;
+        font-style: normal;
+        line-height: 1.25;
+        margin: 0 1em 1em 0;
+        font-weight: bold;
+        font-size: 0.7em;
+    }
+
+    article address {
+        font-size: 1em;
+        float: left;
+    }
+
+    article.address {
+        margin-bottom: 1.5em;
+    }
+
+    article.footer {
+        margin-top: 60px;
+    }
+
+    /* article */
+
+    article, article address, table.meta, table.inventory {
+        margin: 2em 0 2em;
+    }
+
+    article:after {
+        clear: both;
+        content: "";
+        display: table;
+    }
+
+    article h1 {
+        clip: rect(0 0 0 0);
+        position: absolute;
+    }
+
+    article p {
+        margin-bottom: 20px;
+    }
+
+    /* table meta & balance */
+
+    table.meta:after, table.balance:after {
+        clear: both;
+        content: "";
+        display: table;
+    }
+
+    /* table meta */
+
+    table.meta {
+        float: right;
+        width: 50%;
+        font-size: 90%;
+
+        th {
+            text-align: right;
+            font-weight: normal;
+        }
+
+        td {
+            width: 120px;
+            text-align: right;
+        }
+    }
+
+    /* table balance */
+
+    table.balance {
+        float: right;
+        th {
+            text-align: right;
+            font-weight: normal;
+        }
+
+        td {
+            width: 140px;
+            text-align: right;
+        }
+
+        .total {
+            font-weight: bold;
+        }
+    }
+
+    /* table items */
+
+    table.inventory {
+        clear: both;
+        width: 100%;
+        margin-top: 2em;
+        border-bottom: 1px solid #000;
+    }
+
+    table.inventory th {
+        font-weight: bold;
+        border-width: 0 0 1px 0;
+        border-bottom: 1px solid #000;
+    }
+    table.inventory th,
+    table.inventory td {
+        padding: 5px;
+    }
+
+    table.inventory td:nth-child(1),
+    table.inventory th:nth-child(1) {
+        text-align: left;
+    }
+
+    table.inventory td:nth-child(2),
+    table.inventory th:nth-child(2) {
+        text-align: center;
+        width: 20%;
+    }
+
+    table.inventory td:nth-child(3),
+    table.inventory th:nth-child(3) {
+        text-align: center;
+        width: 20%;
+    }
+
+    table.inventory td:nth-child(4),
+    table.inventory th:nth-child(4) {
+        text-align: right;
+        width: 20%;
+    }
+
+    /* footer */
+
+    footer {
+        margin-top: 50px;
+    }
+
+    footer table {
+        border-top: 1px solid #000;
+        font-size: 0.8em;
+        padding-top: 5px;
+    }
+
+    footer th {
+        text-align: left;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    footer table th:nth-child(1) {
+        width: 32%;
+    }
+
+    footer table th:nth-child(3) {
+        width: 28%;
+    }
+
+    footer td {
+        text-align: left;
+        vertical-align: bottom;
+    }
+
+    /* aside */
+
+    aside {
+        position: absolute;
+        top: 10in;
+        width: 7.5in;
+    }
+
+    aside h1 {
+        border: none;
+        border-width: 0 0 1px;
+        margin: 0 0 1em;
+    }
+
+    aside h1 {
+        border-color: #999;
+        border-bottom-style: solid;
+    }
+
+    aside p {
+        font-size: 85%;
+    }
+
+    aside div {
+        margin-top: 15px;
+    }
+
+    aside div p {
+        line-height: 1.4;
+    }
+
+    aside p span {
+        width: 130px;
+        font-weight: bold;
+        display: inline-block;
+    }
+}
+
+@media print {
+    * {
+        -webkit-print-color-adjust: exact;
+    }
+    body, .invoice, .wrapper, #freelancer-invoice {
+        margin: 0;
+        padding: 0;
+    }
+
+    #freelancer-invoice {
+        margin: 1em 2em;
+
+        span:empty {
+            display: none;
+        }
+
+        .add, .cut {
+            display: none;
+        }
+    }
+}