mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
form WIP
This commit is contained in:
Christine Slotty
parent
4e3b06b519
commit
fb3c8ff74c
@ -25,72 +25,64 @@ $this->assign('header', $header);
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="content-list">
|
||||
<p class="content-list-name">Überweisungen</p>
|
||||
<table class="content-list-table">
|
||||
<thead>
|
||||
<tr class="content-list-table-header">
|
||||
<th colspan="2"><?= __('Absender') . ' / ' . ('Empfänger') ?></th>
|
||||
<th><?= __('Verwendungszweck') ?></th>
|
||||
<th><?= __('Datum') ?></th>
|
||||
<th><?= __('Betrag') ?></th>
|
||||
<th title="<?= __('Transaktions Nr.') ?>"><?= __('Nr') ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach($transactions as $transaction):
|
||||
$send = $transaction['type'] == 'send';
|
||||
$balance = $transaction['balance'];
|
||||
$memoShort = $transaction['memo'];
|
||||
if(strlen($memoShort) > 30) {
|
||||
$memoShort = substr($memoShort, 0, 30) . '...';
|
||||
}
|
||||
$cellColorClass = 'grd-success-color';
|
||||
if($send) {
|
||||
$balance = -$balance;
|
||||
$cellColorClass = 'grd-alert-color';
|
||||
} else if($transaction['type'] == 'creation') {
|
||||
$cellColorClass = 'grd-orange-color';
|
||||
}
|
||||
?>
|
||||
<tr>
|
||||
<td class="pr-0 pl-4">
|
||||
<?= $this->Html->image('50x50.png', ['class' => 'profile-img img-sm', 'alt' => 'profile image']) ?>
|
||||
</td>
|
||||
<td class="pl-md-0">
|
||||
<?php if(isset($transaction['email']) && $transaction['email'] != ''): ?>
|
||||
<a href="mailto:<?= $transaction['email'] ?>" title="<?= $transaction['email'] ?>">
|
||||
<small class="text-black font-weight-medium d-block"><?= $transaction['name'] ?></small>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
<p class="content-list-title">Überweisungen</p>
|
||||
<div class="content-list-table wiretransfer">
|
||||
<span class="header-cell"><?= __('Absender') . ' / ' . ('Empfänger') ?></span>
|
||||
<span class="header-cell"><?= __('Verwendungszweck') ?></span>
|
||||
<span class="header-cell"><?= __('Datum') ?></span>
|
||||
<span class="header-cell"><?= __('Betrag') ?></span>
|
||||
<span class="header-cell" title="<?= __('Transaktions Nr.') ?>"><?= __('Nr') ?></span>
|
||||
<?php foreach($transactions as $transaction):
|
||||
$send = $transaction['type'] == 'send';
|
||||
$balance = $transaction['balance'];
|
||||
$memoShort = $transaction['memo'];
|
||||
if(strlen($memoShort) > 30) {
|
||||
$memoShort = substr($memoShort, 0, 30) . '...';
|
||||
}
|
||||
$cellColorClass = 'grd-success-color';
|
||||
if($send) {
|
||||
$balance = -$balance;
|
||||
$cellColorClass = 'grd-alert-color';
|
||||
} else if($transaction['type'] == 'creation') {
|
||||
$cellColorClass = 'grd-orange-color';
|
||||
}
|
||||
?>
|
||||
<span>
|
||||
<?= $this->Html->image('50x50.png', ['class' => 'profile-img img-sm', 'alt' => 'profile image']) ?>
|
||||
<?php if(isset($transaction['email']) && $transaction['email'] != ''): ?>
|
||||
<a href="mailto:<?= $transaction['email'] ?>" title="<?= $transaction['email'] ?>">
|
||||
<small class="text-black font-weight-medium d-block"><?= $transaction['name'] ?></small>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
<small class="text-black font-weight-medium d-block"><?= $transaction['name'] ?></small>
|
||||
<?php endif; ?>
|
||||
<span class=" <?= $cellColorClass ?>">
|
||||
<?php if($transaction['type'] == 'creation') : ?>
|
||||
<i class="material-icons-outlined grd-orange-color">create</i>
|
||||
<?= __('Geschöpft')?>
|
||||
<?php elseif($transaction['type'] == 'send') : ?>
|
||||
<i class="material-icons-outlined">arrow_right_alt</i>
|
||||
<?= __('Gesendet') ?>
|
||||
<?php elseif($transaction['type'] == 'receive') : ?>
|
||||
<i class="material-icons-outlined">arrow_left_alt</i>
|
||||
<?= __('Empfangen') ?>
|
||||
<?php endif; ?>
|
||||
<span class=" <?= $cellColorClass ?>">
|
||||
<?php if($transaction['type'] == 'creation') : ?>
|
||||
<i class="mdi mdi-creation grd-orange-color"></i> <?= __('Geschöpft')?>
|
||||
<?php elseif($transaction['type'] == 'send') : ?>
|
||||
<i class="mdi mdi-arrow-right-bold"></i> <?= __('Gesendet') ?>
|
||||
<?php elseif($transaction['type'] == 'receive') : ?>
|
||||
<i class="mdi mdi-arrow-left-bold"></i> <?= __('Empfangen') ?>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</td>
|
||||
<td><span data-toggle="tooltip" data-placement="bottom" title="<?= $transaction['memo'] ?>">
|
||||
<?php if(strlen($transaction['memo']) > 30): ?>
|
||||
<?= substr($memoShort, 0, 30) . '...' ?>
|
||||
<?php else : ?>
|
||||
<?= $transaction['memo'] ?>
|
||||
<?php endif;?>
|
||||
</span>
|
||||
</td>
|
||||
<td> <?= $transaction['date']->nice() ?> </td>
|
||||
<td><?= $this->element('printGradido', ['number' => $balance]) ?></td>
|
||||
<td>
|
||||
<small><?= $transaction['transaction_id'] ?></small>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</span>
|
||||
</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom" title="<?= $transaction['memo'] ?>">
|
||||
<?php if(strlen($transaction['memo']) > 30): ?>
|
||||
<?= substr($memoShort, 0, 30) . '...' ?>
|
||||
<?php else : ?>
|
||||
<?= $transaction['memo'] ?>
|
||||
<?php endif;?>
|
||||
</span>
|
||||
<span><?= $transaction['date']->nice() ?></span>
|
||||
<span><?= $this->element('printGradido', ['number' => $balance]) ?></span>
|
||||
<span>
|
||||
<?= $transaction['transaction_id'] ?>
|
||||
</span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<!--<a class="border-top px-3 py-2 d-block text-gray" href="#"><small class="font-weight-medium"><i class="mdi mdi-chevron-down mr-2"></i>View All Order History</small></a>-->
|
||||
<!--?= $this->Html->css(['gdt.css']) ?-->
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
/*
|
||||
* To change this license header, choose License Headers in Project Properties.
|
||||
* To change this template file, choose Tools | Templates
|
||||
* and open the template in the editor.
|
||||
@ -9,34 +9,19 @@
|
||||
$this->assign('title', __('Überweisung'));
|
||||
// In a View class
|
||||
$this->loadHelper('Form', [
|
||||
'templates' => 'ripple_horizontal_form',
|
||||
'templates' => 'horizontal_form',
|
||||
]);
|
||||
?>
|
||||
<style type="text/css">
|
||||
.showcase_content_area .invalid-feedback {
|
||||
display:block;
|
||||
}
|
||||
</style>
|
||||
<div class="row">
|
||||
<div class="col-lg-11 col-md-12 equel-grid">
|
||||
<div class="grid">
|
||||
<p class="grid-header">Überweisen</p>
|
||||
<div class="grid-body">
|
||||
<div class="item-wrapper">
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-11 col-md-12 mx-auto">
|
||||
<?= $this->Form->create($transferForm) ?>
|
||||
<?= $this->Form->control('email', ['label' => __('Empfänger'), 'placeholder' => 'E-Mail']) ?>
|
||||
<?= $this->Form->control('memo', ['label' => __('Verwendungszweck'), 'rows' => 3]) ?>
|
||||
<?= $this->Form->control('amount', ['label' => __('Betrag in GDD')]) ?>
|
||||
<?= $this->Form->button(__('Transaktion abschließen'), ['name' => 'next', 'class' => 'btn btn-sm btn-primary']) ?>
|
||||
<!--<?= $this->Form->button(__('Weitere Transaktion erstellen'), ['name' => 'add', 'class' => 'btn btn-sm']) ?>-->
|
||||
<?= $this->Form->end() ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-form">
|
||||
<p class="form-header">Überweisen</p>
|
||||
<div class="form-body">
|
||||
<?= $this->Form->create($transferForm) ?>
|
||||
<?= $this->Form->control('email', ['label' => __('Empfänger'), 'placeholder' => 'E-Mail']) ?>
|
||||
<?= $this->Form->control('memo', ['label' => __('Verwendungszweck'), 'rows' => 3]) ?>
|
||||
<?= $this->Form->control('amount', ['label' => __('Betrag in GDD')]) ?>
|
||||
<?= $this->Form->button(__('Transaktion abschließen'), ['name' => 'next', 'class' => 'btn btn-sm btn-primary']) ?>
|
||||
<!--<?= $this->Form->button(__('Weitere Transaktion erstellen'), ['name' => 'add', 'class' => 'btn btn-sm']) ?>-->
|
||||
<?= $this->Form->end() ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php // adding scripts vendor and core from ripple ui for validation effect ?>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
/*
|
||||
* To change this license header, choose License Headers in Project Properties.
|
||||
* To change this template file, choose Tools | Templates
|
||||
* and open the template in the editor.
|
||||
@ -9,7 +9,7 @@
|
||||
$this->assign('title', __('Überweisung'));
|
||||
// In a View class
|
||||
$this->loadHelper('Form', [
|
||||
'templates' => 'ripple_horizontal_form',
|
||||
'templates' => 'horizontal_form',
|
||||
]);
|
||||
?>
|
||||
<style type="text/css">
|
||||
|
||||
@ -8,12 +8,15 @@
|
||||
Copyright : Gradio
|
||||
|
||||
============================================================*/
|
||||
/* BREAKPOINTS */
|
||||
/*====================================
|
||||
= BREAK POINTS =
|
||||
====================================*/
|
||||
/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */
|
||||
/* GRID */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-rows: [top] 2vh [line2] 86vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -54,7 +57,10 @@
|
||||
/* MAIN */
|
||||
/* MENU */
|
||||
/* CONTENT */
|
||||
/* CONTENT-NAV */
|
||||
/* CONTENT-ITEMS */
|
||||
/* CONTENT-TABLE */
|
||||
/* VARIOUS INDIVIDUAL */
|
||||
/* XXX TODO XXX */
|
||||
/*rgba(0, 0, 0, 0.5) ??? */
|
||||
/* https://www.w3schools.com/colors/colors_shades.asp */
|
||||
@ -68,7 +74,6 @@
|
||||
Copyright : Gradio
|
||||
|
||||
============================================================*/
|
||||
/* macht aus den Standard 16px 14px */
|
||||
/* ============================================================
|
||||
|
||||
Screen styles.
|
||||
@ -109,7 +114,7 @@
|
||||
html,
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 87.5%;
|
||||
font-size: 100%;
|
||||
line-height: 27px;
|
||||
color: #212529;
|
||||
background-color: #f9fafb;
|
||||
@ -204,6 +209,9 @@
|
||||
.gdt-text-color {
|
||||
color: #a27824;
|
||||
}
|
||||
.grd-orange-color {
|
||||
color: #ffa600;
|
||||
}
|
||||
.grd_clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -220,11 +228,25 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
/*
|
||||
SIDEBARS
|
||||
*/
|
||||
.sidebar1 {
|
||||
background-color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: 2.5em;
|
||||
padding: 0;
|
||||
@ -408,22 +430,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:640px) {
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:639px) {
|
||||
@media screen and (max-width:480px) {
|
||||
.logo.big {
|
||||
display: none;
|
||||
}
|
||||
@ -442,6 +449,9 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
/* =========
|
||||
CONTENT
|
||||
=========*/
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -457,8 +467,9 @@
|
||||
padding-top: 6em;
|
||||
padding-right: 10em;
|
||||
}
|
||||
/* content container */
|
||||
/* Center Navigation Top */
|
||||
.nav-content {
|
||||
color: #565656;
|
||||
margin: 0 0.25em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@ -471,6 +482,7 @@
|
||||
.nav-content-separator {
|
||||
margin: 0 1em;
|
||||
}
|
||||
/* Center Content Container */
|
||||
.content-container {
|
||||
background-color: #fff;
|
||||
color: #212529;
|
||||
@ -478,27 +490,29 @@
|
||||
box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
|
||||
border: 1px solid rgba(238, 238, 238, 0.75);
|
||||
}
|
||||
/* Top Info Above Main */
|
||||
.info-container {
|
||||
max-width: 70%;
|
||||
padding: 20px 25px;
|
||||
padding: 0.5em 25px;
|
||||
margin: 1em 0.25em;
|
||||
}
|
||||
/* Main Container */
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/* Generic Content */
|
||||
.content-region {
|
||||
border-bottom: 1px dashed #F5F5F5;
|
||||
padding: 20px 25px;
|
||||
padding: 0 25px;
|
||||
margin: 1em 0.25em;
|
||||
}
|
||||
.content-collection {
|
||||
display: flex;
|
||||
/* flex-direction: column;*/
|
||||
}
|
||||
.content-item {
|
||||
margin: 0.5em 0;
|
||||
margin-right: 5em;
|
||||
width: 150px;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
.action-button {
|
||||
@ -508,26 +522,61 @@
|
||||
.info-item {
|
||||
border-left: 2px solid grey;
|
||||
}
|
||||
/* List Content */
|
||||
.content-list {
|
||||
width: 100%;
|
||||
}
|
||||
.content-list-name {
|
||||
.content-list-title {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 20px 25px;
|
||||
color: #313131;
|
||||
}
|
||||
.content-list-table {
|
||||
display: block;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
overflow: auto;
|
||||
font-size: 16px;
|
||||
color: #212529;
|
||||
}
|
||||
.content-list-table-header {
|
||||
background-color: #fafafa;
|
||||
.header-cell {
|
||||
padding: 1em 2em;
|
||||
border-top: 1px solid #f2f4f9;
|
||||
background-color: #fafafa;
|
||||
color: #101010;
|
||||
}
|
||||
.content-list-table img,
|
||||
.content-list-table i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content-list-table > span {
|
||||
font-size: 0.8em;
|
||||
padding: 0.5em 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Individual Tables */
|
||||
.wiretransfer {
|
||||
grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
|
||||
}
|
||||
/* Form Content */
|
||||
.action-form {
|
||||
width: 100%;
|
||||
}
|
||||
.form-header {
|
||||
border-left: 3px solid #047006;
|
||||
background: #f9fafb;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 0 6px 0 0;
|
||||
}
|
||||
.form-body {
|
||||
margin: 36px 75px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
}
|
||||
/* OTHER */
|
||||
.info-item i,
|
||||
.info-item-link,
|
||||
.action-button i,
|
||||
@ -535,7 +584,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:639px) {
|
||||
@media screen and (max-width:480px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
6
webroot/css/loginServer/style.css
Normal file
6
webroot/css/loginServer/style.css
Normal file
File diff suppressed because one or more lines are too long
@ -8,12 +8,15 @@
|
||||
Copyright : Gradio
|
||||
|
||||
============================================================*/
|
||||
/* BREAKPOINTS */
|
||||
/*====================================
|
||||
= BREAK POINTS =
|
||||
====================================*/
|
||||
/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */
|
||||
/* GRID */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-rows: [top] 2vh [line2] 86vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -54,7 +57,10 @@
|
||||
/* MAIN */
|
||||
/* MENU */
|
||||
/* CONTENT */
|
||||
/* CONTENT-NAV */
|
||||
/* CONTENT-ITEMS */
|
||||
/* CONTENT-TABLE */
|
||||
/* VARIOUS INDIVIDUAL */
|
||||
/* XXX TODO XXX */
|
||||
/*rgba(0, 0, 0, 0.5) ??? */
|
||||
/* https://www.w3schools.com/colors/colors_shades.asp */
|
||||
@ -68,7 +74,6 @@
|
||||
Copyright : Gradio
|
||||
|
||||
============================================================*/
|
||||
/* macht aus den Standard 16px 14px */
|
||||
/* ============================================================
|
||||
|
||||
Screen styles.
|
||||
@ -109,7 +114,7 @@
|
||||
html,
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 87.5%;
|
||||
font-size: 100%;
|
||||
line-height: 27px;
|
||||
color: #212529;
|
||||
background-color: #f9fafb;
|
||||
@ -204,6 +209,9 @@
|
||||
.gdt-text-color {
|
||||
color: #a27824;
|
||||
}
|
||||
.grd-orange-color {
|
||||
color: #ffa600;
|
||||
}
|
||||
.grd_clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -220,11 +228,25 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
/*
|
||||
SIDEBARS
|
||||
*/
|
||||
.sidebar1 {
|
||||
background-color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: 2.5em;
|
||||
padding: 0;
|
||||
@ -408,22 +430,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:640px) {
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:639px) {
|
||||
@media screen and (max-width:480px) {
|
||||
.logo.big {
|
||||
display: none;
|
||||
}
|
||||
@ -442,6 +449,9 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
/* =========
|
||||
CONTENT
|
||||
=========*/
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -457,8 +467,9 @@
|
||||
padding-top: 6em;
|
||||
padding-right: 10em;
|
||||
}
|
||||
/* content container */
|
||||
/* Center Navigation Top */
|
||||
.nav-content {
|
||||
color: #565656;
|
||||
margin: 0 0.25em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@ -471,6 +482,7 @@
|
||||
.nav-content-separator {
|
||||
margin: 0 1em;
|
||||
}
|
||||
/* Center Content Container */
|
||||
.content-container {
|
||||
background-color: #fff;
|
||||
color: #212529;
|
||||
@ -478,27 +490,29 @@
|
||||
box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
|
||||
border: 1px solid rgba(238, 238, 238, 0.75);
|
||||
}
|
||||
/* Top Info Above Main */
|
||||
.info-container {
|
||||
max-width: 70%;
|
||||
padding: 20px 25px;
|
||||
padding: 0.5em 25px;
|
||||
margin: 1em 0.25em;
|
||||
}
|
||||
/* Main Container */
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/* Generic Content */
|
||||
.content-region {
|
||||
border-bottom: 1px dashed #F5F5F5;
|
||||
padding: 20px 25px;
|
||||
padding: 0 25px;
|
||||
margin: 1em 0.25em;
|
||||
}
|
||||
.content-collection {
|
||||
display: flex;
|
||||
/* flex-direction: column;*/
|
||||
}
|
||||
.content-item {
|
||||
margin: 0.5em 0;
|
||||
margin-right: 5em;
|
||||
width: 150px;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
.action-button {
|
||||
@ -508,26 +522,61 @@
|
||||
.info-item {
|
||||
border-left: 2px solid grey;
|
||||
}
|
||||
/* List Content */
|
||||
.content-list {
|
||||
width: 100%;
|
||||
}
|
||||
.content-list-name {
|
||||
.content-list-title {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 20px 25px;
|
||||
color: #313131;
|
||||
}
|
||||
.content-list-table {
|
||||
display: block;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
overflow: auto;
|
||||
font-size: 16px;
|
||||
color: #212529;
|
||||
}
|
||||
.content-list-table-header {
|
||||
background-color: #fafafa;
|
||||
.header-cell {
|
||||
padding: 1em 2em;
|
||||
border-top: 1px solid #f2f4f9;
|
||||
background-color: #fafafa;
|
||||
color: #101010;
|
||||
}
|
||||
.content-list-table img,
|
||||
.content-list-table i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content-list-table > span {
|
||||
font-size: 0.8em;
|
||||
padding: 0.5em 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Individual Tables */
|
||||
.wiretransfer {
|
||||
grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
|
||||
}
|
||||
/* Form Content */
|
||||
.action-form {
|
||||
width: 100%;
|
||||
}
|
||||
.form-header {
|
||||
border-left: 3px solid #047006;
|
||||
background: #f9fafb;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 0 6px 0 0;
|
||||
}
|
||||
.form-body {
|
||||
margin: 36px 75px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
}
|
||||
/* OTHER */
|
||||
.info-item i,
|
||||
.info-item-link,
|
||||
.action-button i,
|
||||
@ -535,7 +584,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:639px) {
|
||||
@media screen and (max-width:480px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -9,15 +9,22 @@
|
||||
|
||||
============================================================*/
|
||||
|
||||
/* BREAKPOINTS */
|
||||
@maxMobile: ~"(max-width:639px)";
|
||||
@minDesktop: ~"(min-width:640px)";
|
||||
/*====================================
|
||||
= BREAK POINTS =
|
||||
====================================*/
|
||||
|
||||
/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */
|
||||
@wide-screen-down: ~'(max-width:1199px)';
|
||||
@desktop-down: ~'(max-width:991px)';
|
||||
@tablet-down: ~'(max-width:767px)';
|
||||
@phone-down: ~'(max-width:480px)';
|
||||
@small-phone-down: ~'(max-width:320px)';
|
||||
|
||||
/* GRID */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-rows: [top] 2vh [line2] 86vh [footer1] 7vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-areas: "header header header header header"
|
||||
"left . center . ."
|
||||
"footer footer footer footer footer"
|
||||
@ -29,7 +36,6 @@
|
||||
/*.header {
|
||||
grid-area: header;
|
||||
}*/
|
||||
|
||||
.sidebar1 {
|
||||
grid-area: left;
|
||||
grid-row-start: top;
|
||||
|
||||
@ -26,6 +26,9 @@
|
||||
@container-shadow: rgba(183,192,206,.2);
|
||||
@container-border: rgba(238,238,238,.75);
|
||||
|
||||
/* CONTENT-NAV */
|
||||
@content-nav: #565656;
|
||||
|
||||
/* CONTENT-ITEMS */
|
||||
@action-button-border: #047006;
|
||||
@action-button-background: #f9fafb;
|
||||
@ -33,6 +36,14 @@
|
||||
@form-header-border: #047006;
|
||||
@form-header-background: #f9fafb;
|
||||
|
||||
/* CONTENT-TABLE */
|
||||
@content-table-title: #313131;
|
||||
@content-table-header: #101010;
|
||||
@content-table-header-bg: #fafafa;
|
||||
@content-table-header-border: #f2f4f9;
|
||||
|
||||
/* VARIOUS INDIVIDUAL */
|
||||
@grd-orange: #ffa600;
|
||||
|
||||
/* XXX TODO XXX */
|
||||
@dialog-background: #fff;
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
|
||||
============================================================*/
|
||||
|
||||
@body-fs: 87.5%;
|
||||
/* macht aus den Standard 16px 14px */
|
||||
@body-fs: 100%;
|
||||
@body-lh: 27px;
|
||||
|
||||
@content-lh: 1.5em;
|
||||
@content-letter-spacing: .03rem;
|
||||
|
||||
@nav-fs: .8em;
|
||||
@nav-bottom-fs: .9em;
|
||||
@nav-btn-large-fs: 35px;
|
||||
@nav-icon-fs: 1.2em;
|
||||
|
||||
@ -9,31 +9,29 @@
|
||||
|
||||
============================================================*/
|
||||
@font-face {
|
||||
font-family: 'Material Icons Outlined';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); /* For IE6-8 */
|
||||
src: local('Material Icons Outlined'),
|
||||
local('Material-Icons-Outlined'),
|
||||
url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'),
|
||||
url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'),
|
||||
url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype');
|
||||
font-family: 'Material Icons Outlined';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); /* For IE6-8 */
|
||||
src: local('Material Icons Outlined'), local('Material-Icons-Outlined'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons-outlined {
|
||||
font-family: 'Material Icons Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Material Icons Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
|
||||
/* =======================
|
||||
@ -154,6 +152,10 @@
|
||||
color: @gdt-text;
|
||||
}
|
||||
|
||||
.grd-orange-color {
|
||||
color: @grd-orange
|
||||
}
|
||||
|
||||
.grd_clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -9,26 +9,23 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
@media @minDesktop {
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
@media @maxMobile {
|
||||
.logo.big.visible,
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
|
||||
@media @phone-down {
|
||||
.logo.big {
|
||||
display: none;
|
||||
}
|
||||
@ -44,6 +41,7 @@
|
||||
*/
|
||||
.sidebar1 {
|
||||
background-color: @menu-background;
|
||||
font-size: @nav-fs;
|
||||
font-weight: 500;
|
||||
line-height: @sidebar1-lh;
|
||||
padding: 0;
|
||||
@ -224,7 +222,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media @maxMobile {
|
||||
@media @phone-down {
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
@ -9,6 +9,10 @@
|
||||
|
||||
============================================================*/
|
||||
@media screen {
|
||||
|
||||
/* =========
|
||||
CONTENT
|
||||
=========*/
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -25,15 +29,16 @@
|
||||
padding-right: 10em;
|
||||
}
|
||||
|
||||
@media @maxMobile {
|
||||
@media @phone-down {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* content container */
|
||||
/* Center Navigation Top */
|
||||
.nav-content {
|
||||
color: @content-nav;
|
||||
margin: 0 .25em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@ -49,6 +54,7 @@
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
/* Center Content Container */
|
||||
.content-container {
|
||||
background-color: @container-background;
|
||||
color: @container-text;
|
||||
@ -57,30 +63,33 @@
|
||||
border: 1px solid @container-border;
|
||||
}
|
||||
|
||||
/* Top Info Above Main */
|
||||
.info-container {
|
||||
max-width: 70%;
|
||||
padding: 20px 25px;
|
||||
padding: .5em 25px;
|
||||
margin: 1em .25em;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Generic Content */
|
||||
.content-region {
|
||||
border-bottom: 1px dashed @light;
|
||||
padding: 20px 25px;
|
||||
padding: 0 25px;
|
||||
margin: 1em .25em;
|
||||
}
|
||||
|
||||
.content-collection {
|
||||
display: flex;/* flex-direction: column;*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
margin: .5em 0;
|
||||
margin-right: 5em;
|
||||
width: 150px;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
@ -93,31 +102,72 @@
|
||||
border-left: 2px solid @info-item-border;
|
||||
}
|
||||
|
||||
/* List Content */
|
||||
.content-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-list-name {
|
||||
.content-list-title {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 20px 25px;
|
||||
color: #313131;
|
||||
color: @content-table-title;
|
||||
}
|
||||
|
||||
.content-list-table {
|
||||
display: block;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
overflow: auto;
|
||||
font-size: 16px;
|
||||
color: #212529;
|
||||
}
|
||||
.content-list-table-header {
|
||||
background-color: #fafafa;
|
||||
border-top: 1px solid #f2f4f9;
|
||||
|
||||
.header-cell {
|
||||
padding: 1em 2em;
|
||||
border-top: 1px solid @content-table-header-border;
|
||||
background-color: @content-table-header-bg;
|
||||
color: @content-table-header;
|
||||
}
|
||||
|
||||
.content-list-table img,
|
||||
.content-list-table i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content-list-table > span {
|
||||
font-size: .8em;
|
||||
padding: .5em 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Individual Tables */
|
||||
.wiretransfer {
|
||||
grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
|
||||
}
|
||||
|
||||
/* Form Content */
|
||||
.action-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
border-left: 3px solid @form-header-border;
|
||||
background: @form-header-background;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
margin: 36px 75px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* OTHER */
|
||||
.info-item i,
|
||||
.info-item-link,
|
||||
.action-button i,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user