redesign app structuring

This commit is contained in:
marko
2021-12-27 13:15:06 +01:00
parent fb0bcd02a2
commit 45c76fc850
3 changed files with 72 additions and 26 deletions

View File

@@ -9,3 +9,8 @@ header, main, footer {
padding-left: 0; padding-left: 0;
} }
} }
.card video{
width: 100%;
max-width: 100%;
}

View File

@@ -124,6 +124,8 @@ function getHtmlEventTable($eventList){
}); });
</script> </script>
<style>h1{ font-size: 2.00rem;}h2{ font-size: 1.50rem;}h3{ font-size: 1.25rem;}h3{ font-size: 1.20rem;}h3{ font-size: 1.15rem;}h6{ font-size: 1.10rem;}</style>
<title>participo</title> <title>participo</title>
<meta name="description" content="Online-Apps der Judoka des Chemnitzer WSV"> <meta name="description" content="Online-Apps der Judoka des Chemnitzer WSV">
@@ -132,11 +134,13 @@ function getHtmlEventTable($eventList){
</head> </head>
<body> <body>
<header> <header>
<nav class="indigo darken-4">cwsvJudo Apps<a class="right top-nav sidenav-trigger waves-effect waves-light hide-on-large-only" href="#" data-target="nav-mobile"> <nav class="indigo darken-4">
<i class="material-icons">menu</i> <h1 style="display:inline;">cwsvJudo Apps</h1>
</a></nav> <a class="right top-nav sidenav-trigger waves-effect waves-light hide-on-large-only" href="#" data-target="nav-mobile">
<i class="material-icons">menu</i>
</a>
</nav>
<ul class="sidenav sidenav-fixed sidenav-close" id="nav-mobile"> <ul class="sidenav sidenav-fixed sidenav-close" id="nav-mobile">
<li class="logo"> <li class="logo">
<a style="height:auto;" class="brand-logo" id="logo-container" href="/participo/"> <a style="height:auto;" class="brand-logo" id="logo-container" href="/participo/">
@@ -145,10 +149,16 @@ function getHtmlEventTable($eventList){
</li> </li>
<?php require_once("sidenav/loginStatus.php");?><!-- brings its own li --> <?php require_once("sidenav/loginStatus.php");?><!-- brings its own li -->
<li class="bold"> <li class="bold">
<a class="waves-effect waves-teal right-align" href="#AppList">Apps</a> <a class="waves-effect waves-teal right-align" href="#mitmachApps">Mitmachen<i class="material-icons">accessibility</i></a>
</li> </li>
<li class="bold"> <li class="bold">
<a class="waves-effect waves-teal right-align" href="#Configs">UserInfos</a> <a class="waves-effect waves-teal right-align" href="#infoApps">Informationen<i class="material-icons">info</i></a>
</li>
<li class="bold">
<a class="waves-effect waves-teal right-align" href="#lexiApps">Nachschlagen<i class="material-icons">book</i></a>
</li>
<li class="bold">
<a class="waves-effect waves-teal right-align" href="#configApps">Einstellen<i class="material-icons">manage_accounts</i></a>
</li> </li>
<?php if( isUserAdmin($dbConnection, $userData['id']) ){?> <?php if( isUserAdmin($dbConnection, $userData['id']) ){?>
<li class="bold"> <li class="bold">
@@ -163,19 +173,10 @@ if($_SESSION['login']){
?> ?>
<main> <main>
<!-- List of Mitmach-Apps --> <!-- List of Mitmach-Apps -->
<div class="row" id="AppList"> <h2>Zum Mitmachen</h2>
<div class="row" id="mitmachApps">
<?php <?php
//var_dump(getCommingWkEvents($dbConnection));
echo( echo(
AppCard::fromArray([
'link' => "kyu",
'title' => "Kyu",
'description'=> "Die Prüfungsprogamme der einzelnen Gürtelstufen in Bild, Ton und Text",
'imgUrl' => "images/obi.svg",
'actions' => [
AppCardAction::fromArray(['caption'=>"Kyu-Programme", 'link'=>"kyu"]),
],
])->htmlCode().
AppCard::fromArray([ AppCard::fromArray([
'link' => "/machs", 'link' => "/machs",
'title' => "<em>M</em>ein <em>Ach</em>ievement <em>S</em>ystem", 'title' => "<em>M</em>ein <em>Ach</em>ievement <em>S</em>ystem",
@@ -193,7 +194,15 @@ echo(
'actions' => [ 'actions' => [
AppCardAction::fromArray(['caption'=>"Planer", 'link'=>"/pages/desktop/wkParticipo"]), AppCardAction::fromArray(['caption'=>"Planer", 'link'=>"/pages/desktop/wkParticipo"]),
], ],
])->htmlCode(). ])->htmlCode()
)
?>
</div> <!-- mitmachApps -->
<h2>Zur Information</h2>
<div class="row" id="infoApps">
<?php
echo(
AppCard::fromArray([ AppCard::fromArray([
'link' => "infoZettel", 'link' => "infoZettel",
'title' => "Infozettel", 'title' => "Infozettel",
@@ -204,13 +213,40 @@ echo(
], ],
])->htmlCode() ])->htmlCode()
); );
// @todo attendanceApp
?> ?>
</div><!-- End of MitmachApps --> </div> <!-- infoApps -->
<div class="divider"></div> <h2>Zum Nachschlagen</h2>
<div class="row" id="lexiApps">
<?php
echo(
AppCard::fromArray([
'link' => "kyu",
'title' => "Kyu",
'description'=> "Die Prüfungsprogamme der einzelnen Gürtelstufen in Bild, Ton und Text",
'imgUrl' => "images/obi.svg",
'actions' => [
AppCardAction::fromArray(['caption'=>"Kyu-Programme", 'link'=>"kyu"]),
],
])->htmlCode().
AppCard::fromArray([
'link' => "/JudoWiki",
'title' => "JudoWiki",
'description'=> "Ein Wiki zum Thema Judo",
'imgUrl' => "http://cwsvjudo.bplaced.net/ressourcen/graphiken/icons/wikipediaW.svg",
'actions' => [
AppCardAction::fromArray(['caption'=>"JudoWiki", 'link'=>"/JudoWiki"]),
],
])->htmlCode()
);
// @todo horstWolf
?>
</div><!-- lexiApps -->
<!-- List of ConfigStuff --> <!-- List of ConfigStuff -->
<div class="row" id="Configs"> <h2>Zum Einstellen</h2>
<div class="row" id="configApps">
<?php <?php
echo( echo(
AppCard::fromArray([ AppCard::fromArray([
@@ -223,17 +259,22 @@ echo(
], ],
])->htmlCode() ])->htmlCode()
); );
?>
</div> <!-- configApps -->
<?php
// AdminStuff, thats only visible for Admins // AdminStuff, thats only visible for Admins
if( isUserAdmin($dbConnection, $userData['id']) ){ if( isUserAdmin($dbConnection, $userData['id']) ){
echo( echo(
"<h2>AdminStuff</h2>".
"<div id=\"admiStuff\" class=\"row\">".
AppCard::fromArray([ AppCard::fromArray([
'title' =>"lastLogins", 'title' =>"lastLogins",
'description' => "</p>".lastLoginTable()."</p>" 'description' => "</p>".lastLoginTable()."</p>"
])->htmlCode() ])->htmlCode().
"</div>"
); );
} }
?> ?>
</div><!-- End of ConfigStuff -->
</main> </main>
<?php <?php
} }

View File

@@ -1,8 +1,8 @@
<!-- MaterializeCss --> <!-- MaterializeCss -->
<!-- - Compiled and minified CSS --> <!-- - Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/materialize.min.css"> <link rel="stylesheet" href="/ressourcen/materializeCss/css/materialize.min.css">
<!-- Compiled and minified JavaScript --> <!-- Compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script> <script src="/ressourcen/materializeCss/js/materialize.min.js"></script>
<!--Import Google Icon Font--> <!--Import Google Icon Font-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">