IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Material Design Icons; CSS

Browse Source
This commit is contained in:
Christine Slotty 2020-05-28 18:31:06 +02:00
parent f424aa246a
commit c9bb7e9057
19 changed files with 337 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Controller/ServerUsersController.php
View File

@ -18,7 +18,7 @@ class ServerUsersController extends AppController
//$this->Auth->allow(['add', 'edit']);
$this->Auth->deny('index');
}
/**
* Index method
*
@ -30,7 +30,7 @@ class ServerUsersController extends AppController
$this->set(compact('serverUsers'));
}
public function login()
{
if ($this->request->is('post')) {

134
src/Template/Dashboard/index.ctp
View File

@ -11,79 +11,99 @@ if(isset($user)) {
}
$this->assign(
'title',
__('Willkommen') . ' ' . $user['first_name'] . ' ' . $user['last_name']
__('Willkommen') . ', ' . $user['first_name'] . ' ' . $user['last_name'] . '!'
);
?>
<?php if(isset($requestTime)) : ?>
<span><?= round($requestTime * 1000.0) ?> ms</span>
<span><?= round($requestTime * 1000.0) ?> ms</span>
<?php endif; ?>
<div class="grd_container_small">
<fieldset>
<h3>Gradido ...</h3>
<div class="content-region">
<h3>Gradido ...</h3>
<div class="horizontal-collection">
<div class="action-button">
<i class="material-icons-outlined">account_balance_wallet</i>
<?= $this->Html->link(
__('übersicht'),
__('Kontoübersicht'),
['controller' => 'StateBalances', 'action' => 'overview'],
['class' => 'grd-nav-bn grd-nav-bn-large']
['class' => 'action-button-link']
);?>
</div>
<div class="action-button">
<i class="material-icons-outlined">account_balance</i>
<?= $this->Html->link(
__('überweisen'),
__('Überweisung'),
['controller' => 'TransactionSendCoins', 'action' => 'create'],
['class' => 'grd-nav-bn grd-nav-bn-large']
['class' => 'action-button-link']
); ?>
</fieldset>
<!--<fieldset class="grd-margin-top-10">
<h3>Account ...</h3>
<a class="grd-nav-bn" href="./account/user_delete"><?= __("löschen"); ?></a>
</fieldset>-->
<?php if($serverUser != null || $user['role'] == 'admin') : ?>
<h2 class="admin-border"><?= __('Adminbereich'); ?></h2>
<?php endif; ?>
<?php if($serverUser != null) : ?>
<fieldset class="grd-margin-top-10 admin-border">
<h3>Gradido ...</h3>
</div>
</div>
</div>
<!--
<h3>Account ...</h3>
<a class="action-button" href="./account/user_delete"><?= __("löschen"); ?></a>
-->
<?php if($serverUser != null || $user['role'] == 'admin') : ?>
<div class="content-region">
<h2><?= __('Adminbereich'); ?></h2>
<?php endif; ?>
<?php if($serverUser != null) : ?>
<h3>Gradido ...</h3>
<div class="horizontal-collection">
<div class="action-button">
<i class="material-icons-outlined">add_box</i>
<?= $this->Html->link(
__('einzeln schöpfen'),
['controller' => 'TransactionCreations', 'action' => 'create'],
['class' => 'grd-nav-bn grd-nav-bn-large']
['class' => 'action-button-link']
);?>
</div>
<div class="action-button">
<i class="material-icons-outlined">library_add</i>
<?= $this->Html->link(
__('viele schöpfen'),
['controller' => 'TransactionCreations', 'action' => 'createMulti'],
['class' => 'grd-nav-bn grd-nav-bn-large']
['class' => 'action-button-link']
);?>
</fieldset>
<fieldset class="grd-margin-top-10 admin-border">
<legend>Statistik</legend>
<?= $this->Html->link(
__('Anmeldungen'),
['controller' => 'Users', 'action' => 'statistics'],
['class' => 'grd-nav-bn grd-nav-bn-large']
);?>
</fieldset>
<?= $this->Html->link(
__('Fehler') . ' (' . $adminErrorCount . ')',
['controller' => 'AdminErrors'], ['class' => 'grd-nav-bn']);
?>
<?php endif; ?>
<?php if($user['role'] == 'admin') : ?>
<fieldset class="grd-margin-top-10 admin-border">
<h3>Benutzer ...</h3>
<div class="table-row">
<?= $this->Html->link(
__('suchen'),
['controller' => 'StateUsers', 'action' => 'search'],
['class' => 'grd-nav-bn grd-nav-bn-large']
); ?>
<a href="<?= Router::url('./', true) ?>account/adminRegister" class="grd-nav-bn grd-nav-bn-large">
<?= __("hinzufügen") ?>
</a>
</div>
<div class="table-row">
<a href="<?= Router::url('./', true) ?>account/adminUserPasswordReset" class="grd-nav-bn grd-nav-bn-large">
<?= __("hat sein Passwort und Passphrase vergessen") ?>
</a>
</div>
</fieldset>
<?php endif; ?>
</div>
</div>
</div>
<div class="content-region">
<legend>Statistik</legend>
<div class="horizontal-collection">
<div class="info-item">
<i class="material-icons-outlined">cached</i>
<?= $this->Html->link(
__('Anmeldungen'),
['controller' => 'Users', 'action' => 'statistics'],
['class' => 'info-item-link']
);?>
</div>
<div class="info-item">
<i class="material-icons-outlined">error_outline</i>
<?= $this->Html->link(
__('Fehler') . ' (' . $adminErrorCount . ')',
['controller' => 'AdminErrors'], ['class' => 'info-item-link']);
?>
</div>
</div>
</div>
<?php endif; ?>
<?php if($user['role'] == 'admin') : ?>
<div class="content-region">
<h3>Benutzer ...</h3>
<i class="material-icons-outlined">search</i>
<?= $this->Html->link(
__('suchen'),
['controller' => 'StateUsers', 'action' => 'search'],
['class' => 'action-button']
); ?>
<i class="material-icons-outlined">how_to_reg</i>
<a href="<?= Router::url('./', true) ?>account/adminRegister" class="action-button">
<?= __("hinzufügen") ?>
</a>
<i class="material-icons-outlined">enhanced_encryption</i>
<a href="<?= Router::url('./', true) ?>account/adminUserPasswordReset" class="action-button">
<?= __("hat sein Passwort und Passphrase vergessen") ?>
</a>
</div>
<?php endif; ?>

40
src/Template/Layout/frontend_ripple.ctp
View File

@ -29,12 +29,7 @@ $GLOBALS["self"] = $this;
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css(
[
'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined',
'main.css'
]
) ?>
<?= $this->Html->css(['main.css']) ?>
<?= $this->Html->script(['basic']) ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
@ -42,16 +37,8 @@ $GLOBALS["self"] = $this;
</head>
<body>
<div class="layout">
<!--div class="header">
<h1><?= $this->fetch('title') ?></h1>
<nav class="nav-top nav-horizontal">
<ul>
<li>Mein Profil</li>
</ul>
</nav>
</div-->
<!-- TODO save last state so that it remains unchanged, on reload! -->
<div class="sidebar1 nav-menu nav-menu-maximized">
<div class="sidebar1 nav-menu initial">
<a href="/">
<picture class="logo big visible">
<source srcset="/img/logo_schrift_half.webp" type="image/webp">
@ -67,19 +54,26 @@ $GLOBALS["self"] = $this;
<div>
<i class="material-icons-outlined nav-main-button">menu</i>
</div>
<!--div class="sidebar1-header">
<div class="flash-messages">
<?= $this->Flash->render() ?>
</div>
<?= $this->element('navi_header'); ?>
</div-->
<!-- XXX -->
<div class="flash-messages">
<?= $this->Flash->render() ?>
</div>
<?= $this->element('navi_header'); ?>
<!-- XXX -->
<div class="nav-vertical">
<?= $this->element('navi'); ?>
</div>
</div>
<div class="content">
<?= $this->Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?>
<?= $this->fetch('content') ?>
<div class="nav-content">
<?= $this->Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?>
</div>
<div class="content-container info-container">
<h1><?= $this->fetch('title') ?></h1>
</div>
<div class="content-container main-container">
<?= $this->fetch('content') ?>
</div>
</div>
<div class="footer">
<ul class="nav-horizontal">

87
webroot/css/grd_styles.css
View File

@ -14,7 +14,7 @@
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-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
margin: 0;
padding: 0;
}
@ -45,7 +45,12 @@
Copyright : Gradio
============================================================*/
/* MAIN */
/* MENU */
/* CONTENT */
/* */
/*rgba(0, 0, 0, 0.5) ??? */
/* https://www.w3schools.com/colors/colors_shades.asp */
/* ============================================================
Typography Definitions
@ -67,6 +72,29 @@
Copyright : Gradio
============================================================*/
@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');
}
.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;
}
@media screen {
/* =======================
Basis
@ -438,24 +466,55 @@
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
padding-top: 6em;
}
/* content container */
.grd_container {
max-width: 820px;
margin-left: auto;
margin-right: auto;
.nav-content {
margin: 0 0.25em;
margin-bottom: 1em;
}
.grd_container_small {
max-width: 500px;
align-self: center;
.content-container {
background-color: #fff;
color: #212529;
padding: 20px 25px 20px;
margin: 1em 0.25em;
border-radius: 0.5em;
box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
border: 1px solid rgba(238, 238, 238, 0.75);
}
.grd_text {
max-width: 550px;
margin-bottom: 5px;
.info-container {
max-width: 70%;
}
.grd_text-max-width {
max-width: 550px;
.main-container {
max-width: 100%;
}
.horizontal-collection {
display: flex;
}
.content-region {
border-bottom: 1px dashed #F5F5F5;
padding: 1em;
}
.info-item i,
.info-item-link,
.action-button i,
.action-button-link {
vertical-align: middle;
}
.action-button {
margin: 0 0.75em;
background: green;
width: 150px;
padding: 1em;
text-align: center;
border-radius: 16px;
color: white;
}
.info-item {
margin: 0 0.75em;
width: 150px;
padding: 1em;
text-align: center;
}
}
@media screen and (max-width:639px) {

BIN
webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.eot Normal file
View File

Binary file not shown.

BIN
webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf Normal file
View File

Binary file not shown.

BIN
webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff Normal file
View File

Binary file not shown.

BIN
webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2 Normal file
View File

Binary file not shown.

BIN
webroot/fonts/materialdesignicons-webfont.eot
View File

Binary file not shown.

1
webroot/fonts/materialdesignicons-webfont.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
webroot/fonts/materialdesignicons-webfont.ttf
View File

Binary file not shown.

BIN
webroot/fonts/materialdesignicons-webfont.woff
View File

Binary file not shown.

BIN
webroot/fonts/materialdesignicons-webfont.woff2
View File

Binary file not shown.

23
webroot/js/basic.js
View File

@ -57,22 +57,9 @@ function getJson(basisUrl, method, successFunction, errorFunction, timeoutFuncti
xhr.send();
}
/*
* var el = document.querySelector('.toggle-me');
el.onclick = function() {
el.classList.toggle('active');
}
*/
// cross browser dom is ready
(function(document, window, domIsReady, undefined) {
domIsReady(function() {
//console.log('My DOM is ready peeps!');
//document.querySelector('#page').style.background = 'blue';
//var Body = $("body");
var DesktopToggler = document.querySelector('.nav-main-button');
var MobileToggler = document.querySelector('.t-header-mobile-toggler');
var HeaderToggle = document.querySelector('.t-header-toggler');
@ -82,9 +69,13 @@ el.onclick = function() {
DesktopToggler.addEventListener('click', function ()
{
console.log('toggler clicked / Desktop');
//$(Body).toggleClass("sidebar-minimized");
document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized');
document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
if(document.querySelector('.nav-menu').classList.contains('initial')){
document.querySelector('.nav-menu').classList.remove('initial');
document.querySelector('.nav-menu').classList.add('nav-menu-minimized');
} else {
document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized');
document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
}
let big = document.querySelectorAll('.logo.big');
big.forEach(function(el) {
el.classList.toggle('visible');

87
websrc/src/less-files.css
View File

@ -14,7 +14,7 @@
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-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
margin: 0;
padding: 0;
}
@ -45,7 +45,12 @@
Copyright : Gradio
============================================================*/
/* MAIN */
/* MENU */
/* CONTENT */
/* */
/*rgba(0, 0, 0, 0.5) ??? */
/* https://www.w3schools.com/colors/colors_shades.asp */
/* ============================================================
Typography Definitions
@ -67,6 +72,29 @@
Copyright : Gradio
============================================================*/
@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');
}
.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;
}
@media screen {
/* =======================
Basis
@ -438,24 +466,55 @@
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
padding-top: 6em;
}
/* content container */
.grd_container {
max-width: 820px;
margin-left: auto;
margin-right: auto;
.nav-content {
margin: 0 0.25em;
margin-bottom: 1em;
}
.grd_container_small {
max-width: 500px;
align-self: center;
.content-container {
background-color: #fff;
color: #212529;
padding: 20px 25px 20px;
margin: 1em 0.25em;
border-radius: 0.5em;
box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
border: 1px solid rgba(238, 238, 238, 0.75);
}
.grd_text {
max-width: 550px;
margin-bottom: 5px;
.info-container {
max-width: 70%;
}
.grd_text-max-width {
max-width: 550px;
.main-container {
max-width: 100%;
}
.horizontal-collection {
display: flex;
}
.content-region {
border-bottom: 1px dashed #F5F5F5;
padding: 1em;
}
.info-item i,
.info-item-link,
.action-button i,
.action-button-link {
vertical-align: middle;
}
.action-button {
margin: 0 0.75em;
background: green;
width: 150px;
padding: 1em;
text-align: center;
border-radius: 16px;
color: white;
}
.info-item {
margin: 0 0.75em;
width: 150px;
padding: 1em;
text-align: center;
}
}
@media screen and (max-width:639px) {

2
websrc/src/less/01-layout.less
View File

@ -19,7 +19,7 @@
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-areas: "header header header header header"
"left . center center center"
"left . center . ."
"footer footer footer footer footer"
"bottom bottom bottom bottom bottom";
margin: 0;

12
websrc/src/less/02-colors.less
View File

@ -9,15 +9,24 @@
============================================================*/
/* MAIN */
@main-background: #f9fafb;
@main-text: #212529;
@main-link-text: #000;
/* MENU */
@menu-background: #fff;
@menu-link-text: #4F4F4F;
@menu-link-selected: #047006;
@menu-border-color: #f2f4f5;
/* CONTENT */
@container-background: #fff;
@container-text: #212529;
@container-shadow: rgba(183,192,206,.2);
@container-border: rgba(238,238,238,.75);
/* */
@dialog-background: #fff;
/*rgba(0, 0, 0, 0.5) ??? */
@dialog-text: #000;
@ -44,4 +53,7 @@
@success-background-hover: lightgreen;
@error: red;
@error-border: rgba(255, 0, 0, 0.5);
/* https://www.w3schools.com/colors/colors_shades.asp */
@unobtrusive: grey;
@verylight: #F5F5F5;

26
websrc/src/less/05-screen.less
View File

@ -8,6 +8,32 @@
Copyright : Gradio
============================================================*/
@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');
}
.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;
}
@media screen {
/* =======================

62
websrc/src/less/10-center.less
View File

@ -21,7 +21,7 @@
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
padding-top: 6em;
}
@media @maxMobile {
@ -32,24 +32,60 @@
}
/* content container */
.grd_container {
max-width: 820px;
margin-left: auto;
margin-right: auto;
.nav-content {
margin: 0 .25em;
margin-bottom: 1em;
}
.grd_container_small {
max-width: 500px;
align-self: center;
.content-container {
background-color: @container-background;
color: @container-text;
padding: 20px 25px 20px;
margin: 1em .25em;
border-radius: .5em;
box-shadow: 0 0 10px 0 @container-shadow;
border: 1px solid @container-border;
}
.grd_text {
max-width: 550px;
margin-bottom: 5px;
.info-container {
max-width: 70%;
}
.grd_text-max-width {
max-width: 550px;
.main-container {
max-width: 100%;
}
.horizontal-collection {
display: flex;
}
.content-region {
border-bottom: 1px dashed @verylight;
padding: 1em;
}
.info-item i,
.info-item-link,
.action-button i,
.action-button-link {
vertical-align: middle;
}
.action-button {
margin: 0 .75em;
background: green;
width: 150px;
padding: 1em;
text-align: center;
border-radius: 16px;
color: white;
}
.info-item {
margin: 0 .75em;
width: 150px;
padding: 1em;
text-align: center;
}
}