Commit 085ed081 authored by Robert Beilich's avatar Robert Beilich
Browse files

Include mock up page

not bound to backing beans
parent f4e1569d
<html xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://rawgit.com/necolas/css3-github-buttons/master/gh-buttons.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- <link rel="stylesheet" type="text/css" href="css/dark.css"> -->
<link rel="stylesheet" type="text/css" href="css/scrollbar.css" />
</h:head>
<h:body class="t-dark">
<div class="main">
<div class="transaction-header">
<span class="listname">Listname</span>
<div class="searchbox input-group">
<input type="text" class="form-control" placeholder="Search for..." />
<div class="input-group-append">
<button class="btn btn-outline-dark filter-trigger" type="button"></button>
<button type="button" class="btn btn-outline-success create-item-trigger">Add Bill</button>
</div>
</div>
<span class="fa fa-cog fa-lg settings" id="settings-trigger"></span>
</div>
<div class="filter-container" id="filter-container">
<!-- TODO: filters-->
<span>dummy text for filter container</span>
</div>
<div class="spacer"></div>
<div class="transaction-list">
<div class="month-spacer">
<span>JAN 2018</span>
<a href="#">Summary</a>
</div>
<div class="transaction item-trigger">
<div class="left">
<div class="day">
jan<div class="number">02</div>
</div>
<span class="title">Title</span>
</div>
<div class="right">
<span class="value positive">€5.20</span>
<span class="value positive">€105.20</span>
</div>
</div>
<div class="transaction item-trigger">
<div class="left">
<div class="day">
jan<div class="number">01</div>
</div>
<span class="title">Title</span>
</div>
<div class="right">
<span class="value negative">€50.00</span>
<span class="value positive">€100.00</span>
</div>
</div>
<div class="more">
<button type="button" class="btn btn-outline-dark">Show more</button>
</div>
</div>
</div>
<div class="overlay" id="create-overlay">
<div class="overlay-background" id="create-overlay-background"></div>
<div class="overlay-container">
<header>
Add a bill
<span class="fa fa-times fa-lg header-button" id="create-overlay-close"></span>
</header>
<div class="spacer"></div>
<form class="create-form overlay-content">
<div class="title-date-container item">
<input class="text-input form-control" id="title" type="text" placeholder="Enter a title" name="title" autocomplete="off"/>
<div class="date-container">
<div class="btn-group-vertical" data-toggle="buttons">
<button class="btn btn-outline-dark date-button">
JAN
</button>
<button class="btn btn-outline-dark date-button">
01
</button>
</div>
</div>
</div>
<input class="item text-input form-control" id="payer" type="text" placeholder="Enter the payer" name="payer" autocomplete="off"/>
<div class="cost-container item">
<div class="btn-group-vertical btn-group-toggle type" data-toggle="buttons">
<label class="btn btn-outline-dark active">
<input type="radio" name="options" id="expense" autocomplete="off" checked="checked" /> Expense
</label>
<label class="btn btn-outline-dark">
<input type="radio" name="options" id="income" autocomplete="off" /> Income
</label>
</div>
<div class="input-group">
<div class="input-group-prepend currency-dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown dropdown-menu">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="#">$</a>
</div>
</div>
<input type="text" class="form-control" placeholder="0.00"/>
</div>
</div>
<button type="button" class="btn btn-outline-success">Save</button>
</form>
</div>
</div>
<div class="overlay" id="settings-overlay">
<div class="overlay-background" id="settings-overlay-background"></div>
<div class="overlay-container">
<header>
Settings
<span class="fa fa-times fa-lg header-button" id="settings-overlay-close"></span>
</header>
<div class="spacer"></div>
<div class="overlay-content">
<div class="item">
<label class="slider-btn" for="light-switch">
<input type="checkbox" id="light-switch"/>
<div class="slider round"></div>
</label>
<div class="label">Dark mode</div>
</div>
</div>
</div>
</div>
<div class="overlay" id="item-overlay">
<div class="overlay-background" id="item-overlay-background"></div>
<div class="overlay-container">
<header>
Bill
<div class="right">
<span class="fa fa-edit fa-lg header-button" id="item-overlay-edit"></span>
<span class="fa fa-times fa-lg header-button" id="item-overlay-close"></span>
</div>
</header>
<div class="spacer"></div>
<form class="create-form overlay-content">
<div class="title-date-container item">
<input class="text-input" id="title" type="text" placeholder="Enter a title" value="Title" name="title" autocomplete="off"/>
<div class="date-container">
<div class="btn-group-vertical" data-toggle="buttons">
<button class="btn btn-outline-dark date-button">
JAN
</button>
<button class="btn btn-outline-dark date-button">
01
</button>
</div>
</div>
</div>
<input class="item text-input" id="payer" type="text" placeholder="Enter the payer" value="Max Mustermann" name="payer" autocomplete="off"/>
<div class="cost-container item">
<div class="btn-group-vertical btn-group-toggle type" data-toggle="buttons">
<label class="btn btn-outline-dark">
<input type="radio" name="options" id="expense" autocomplete="off" /> Expense
</label>
<label class="btn btn-outline-dark active">
<input type="radio" name="options" id="income" autocomplete="off" checked="checked" /> Income
</label>
</div>
<div class="input-group">
<div class="input-group-prepend currency-dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown dropdown-menu">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="#">$</a>
</div>
</div>
<input type="text" placeholder="0.00" value="5.20" class="form-control"/>
</div>
</div>
<button type="button" class="btn btn-outline-success">Save</button>
</form>
</div>
</div>
<script src="js/utilities/cssClass.js"></script>
<script src="js/overlay.js"></script>
<script src="js/currencyDropdown.js"></script>
</h:body>
</html>
$(document).ready(function() {
$('.currency-dropdown .dropdown-toggle').dropdown();
$('.currency-dropdown .dropdown-menu a').click(function() {
$('.currency-dropdown .dropdown-toggle').html($(this).html());
});
});
$(document).ready(function() {
bindSetCssClass('.create-item-trigger', '#create-overlay');
bindSetCssClass('#create-overlay-background,#create-overlay-close', '#create-overlay', false);
bindSetCssClass('#settings-trigger', '#settings-overlay');
bindSetCssClass('#settings-overlay-background,#settings-overlay-close', '#settings-overlay', false);
bindSetCssClass('.item-trigger', '#item-overlay');
bindSetCssClass('#item-overlay-background,#item-overlay-close', '#item-overlay', false);
bindToggleCssClass('.filter-trigger', '#filter-container');
bindToggleCssClass('.filter-trigger', '#filter-container', '.filter-trigger', undefined, 'up', false);
bindToggleCssClass('#light-switch', 'body', 'body', 't-dark', 't-dark');
});
bindSetCssClass = function(trigger, container, setBool, cssClass) {
setBool = (typeof setBool != 'undefined') ? setBool : true;
cssClass = cssClass || 'open';
$(trigger).click(function() {
if (setBool) {
return $(container).addClass(cssClass);
} else {
return $(container).removeClass(cssClass);
}
});
}
toggleCssClass = function(event) {
baseContainer = event.data.baseContainer;
baseClass = event.data.baseClass;
useContainer = event.data.useContainer;
useClass = event.data.useClass;
on = event.data.on;
if((on && baseContainer.hasClass(baseClass)) || (!on && !(baseContainer.hasClass(baseClass)))) {
useContainer.removeClass(useClass);
} else {
useContainer.addClass(useClass);
}
}
bindToggleCssClass = function(trigger, basedOn, useOn, baseClass, useClass, on) {
useOn = useOn || basedOn;
baseClass = baseClass || 'open';
useClass = useClass || baseClass;
on = (typeof on != 'undefined') ? on : true;
baseContainer = $(basedOn);
useContainer = $(useOn);
$(trigger).click(
{
baseContainer: baseContainer,
baseClass: baseClass,
useContainer: useContainer,
useClass: useClass,
on: on
},
toggleCssClass
);
}
$gray-550: lighten($gray-600, 14%);
$base-color: $gray-200;
$bg: $gray-300;
$base-border-color: $gray-400;
$light-border-color: $gray-200;
$box-shadow-color: rgba($black, 0.2);
$gray-text: $gray-600;
$dark-gray-text: $gray-900;
$light-gray-text: $gray-550;
.positive {
color: $green;
}
.negative {
color: $red;
}
$dark-base-color: $gray-500;
$dark-background: $gray-800;
$dark-base-border-color: $gray-700;
#javax_faces_developmentstage_messages {
display: none;
}
.filter-container {
display: none;
border-top: outline-border();
&.open {
display: flex;
}
}
.create-form {
* {
outline: none !important;
box-shadow: none !important;
}
.text-input {
background-color: transparent;
width: 100%;
height: 2.2rem;
padding: 0 0.5rem;
border: none;
border-bottom: outline-border();
border-bottom-style: dashed;
color: $dark-gray-text;
&.is-invalid {
border-bottom: outline-border($red);
border-bottom-style: dashed;
}
}
.item {
margin-bottom: 1rem;
}
}
.cost-container, .title-date-container {
display: flex;
align-items: center;
}
.cost-container .type {
margin-right: 1rem;
}
.currency-dropdown .dropdown-menu {
min-width: 0;
}
.date-container {
margin-left: 1rem;
button {
background-color: transparent !important;
pointer-events: none;
}
&:hover {
background-color: $dark;
border-color: $white;
border-radius: 0.25rem;
button {
color: $white;
border-color: $white;
}
}
}
body {
margin: 0;
height: 100vh;
display: flex;
padding-top: 1%;
background-color: $bg;
&.t-dark {
color: $dark-base-color;
background-color: $gray-900;
border-color: $dark-base-border-color;
}
.main {
min-height: 0px;
max-width: 98%;
margin: 0 1%;
flex: 1 0 auto;
display: flex;
flex-direction: column;
@include base-shadow();
border-right: outline-border();
border-left: outline-border();
@include border-top-radius($rounded-border);
> .transaction-list {
flex: 1;
overflow: auto;
}
}
}
.main {
background-color: $base-color;
@include t-dark();
> .transaction-list {
background-color: $white;
@include t-dark();
}
}
.transaction-header {
padding: 0 1rem;
margin: 0.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
@include t-dark();
.searchbox {
margin: 0 1rem;
flex-grow: 1;
.create-item-trigger {
@include border-right-radius($rounded-border);
@include border-left-radius(0);
}
.filter-trigger {
border-radius: 0;
@include caret;
&.up {
@include caret(up);
}
@include t-dark();
}
}
.settings {
cursor: pointer;
}
}
.listname {
margin: 0;
text-transform: uppercase;
font-weight: bold;
}
.searchbox {
input {
border-radius: $rounded-border;
box-shadow: none !important;
// background-color: $white;
// color: $black !important;
// border-color: $dark !important;
@include button-outline-variant($color: $dark, $active-background: $white);
// @include t-dark();
}
}
.spacer {
border-bottom: outline-border();
@include base-shadow();
}
.month-spacer {
padding: 0.2rem 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: $base-color;
border-top: outline-border($light-border-color);
border-bottom: outline-border();
span {
color: $gray-text;
text-transform: uppercase;
}
a {
text-decoration: underline;
}
}
.transaction {
padding: 0.3rem 1rem;
display: flex;
border-bottom: outline-border($light-border-color);
> .left {
flex-basis: 85%;
display: flex;
align-items: center;
.title {
margin-left: 1rem;
font-size: 1.5em;
font-weight: bold;
}
.day {
text-transform: uppercase;
text-align: center;
font-size: 0.625rem;
color: $light-gray-text;
.number {
font-size: 1.25rem;
}
}
}
> .right {
flex-basis: 15%;
display: flex;
align-items: center;
.value {
flex-basis: 50%;
font-weight: bold;
text-align: right;
}
}
}
.more {
margin: 0.5rem 0;
display: flex;
justify-content: center;
}
button {
box-shadow: none !important;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
-webkit-transform: translateY(200px);
transform: translateY(200px);
transition: opacity 0.5s, z-index 0s 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s 0.5s, -webkit-transform 0.5s;
&.open {
display: flex;
z-index: 15;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: opacity 0.5s, z-index 0s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s;
transition: opacity 0.5s, transform 0.5s, z-index 0s, -webkit-transform 0.5s;
}
.overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: $base-color;
opacity: 0.8;
}
.overlay-container {
position: relative;
z-index: 10;
margin: auto auto;
background-color: $white;
border: outline-border();
border-radius: $small-rounded-border;
@include base-shadow();
header {
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
font-size: 1.125rem;
font-weight: bold;
background-color: $base-color;
@include border-top-radius($small-rounded-border);
.header-button {
display: block;
margin-left: 0.5rem;
font-size: 2em;