<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Prototyp Flex-Versuch</title>
|
<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
|
<link rel="stylesheet" type="text/css" href="flex-versuch.css">
|
<script id="tpl-list" type="x-tmpl-mustache">
|
{{#List}}
|
{{#List}}
|
<option value="{{ String }}">{{ String }}</option>'
|
{{/List}}
|
{{/List}}
|
</script>
|
</head>
|
<body>
|
<!-- Anfang Body -->
|
|
<!-- Anfang Inhalt -->
|
|
<div id="inhalt" class="d-flex flex-column h-100">
|
<!-- Menue -->
|
<div id="menue">
|
<ul class="nav">
|
<li class="nav-item dropdown">
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
|
<div class="dropdown-menu">
|
<a class="dropdown-item" href="/">WebBox</a>
|
<div class="dropdown-divider"></div>
|
<a class="dropdown-item" href="/wbx/mng">Apps</a>
|
<a class="dropdown-item" href="/um/ui">Benutzer</a>
|
</div>
|
</li>
|
<li class="nav-item dropdown">
|
<a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
<div class="dropdown-menu">
|
<a id="logout" class="dropdown-item" href="#">Abmelden</a>
|
</div>
|
</li>
|
</ul>
|
</div>
|
|
<div class="d-flex bg-faded h-100">
|
<div class="d-flex flex-row h-100"><!-- zwei Spalten: Seitenleiste und Inhalt -->
|
<div class="bg-success hidden-xs-down">
|
<!-- linke Seitenleiste mit Links -->
|
<nav class="nav flex-column">
|
<a class="nav-link active" href="#">Active</a>
|
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link disabled" href="#">Disabled</a>
|
</nav>
|
</div>
|
<div class="flex-column bg-info"> <!-- Spalte: Breadcrumb und Dateiliste -->
|
<div>
|
<nav class="breadcrumb">
|
<a class="breadcrumb-item" href="#">Home</a>
|
<a class="breadcrumb-item" href="#">Library</a>
|
<a class="breadcrumb-item" href="#">Data</a>
|
<span class="breadcrumb-item active">Bootstrap</span>
|
<div class="pull-right align-middle">
|
<i class="fa fa-th-large"></i>
|
</div>
|
</nav>
|
</div>
|
|
<div class="file-view">
|
<p>Dateiliste</p>
|
|
<div id="lipsum">
|
<p>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum nisi at nunc egestas maximus. Nullam eu vulputate velit, quis congue tortor. Integer nisl ante, eleifend a aliquam vel, varius ac augue. Sed volutpat condimentum placerat. Duis et nunc tristique, semper lectus ut, finibus ligula. Morbi iaculis velit non pharetra congue. Fusce quis elit vel magna mattis dignissim. Nullam rutrum ligula nisi, ac convallis erat rutrum ac. Sed egestas id purus sit amet vestibulum. Pellentesque vitae suscipit felis.
|
</p>
|
<p>
|
Aenean ac nulla tempor augue blandit rhoncus. In tincidunt tempus imperdiet. Fusce non dui ut neque iaculis laoreet. In interdum consectetur sapien vel lacinia. Vivamus euismod a leo nec consectetur. Integer consequat massa eget ipsum maximus, vitae dapibus velit cursus. Ut at est ut justo pellentesque vulputate. Integer molestie, odio in cursus placerat, ex eros auctor sem, nec viverra arcu ipsum sed magna. Mauris dignissim rutrum lacus. Duis convallis magna sed neque malesuada eleifend.
|
</p>
|
<p>
|
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mollis aliquam tellus id finibus. In ultrices, dui id laoreet accumsan, enim justo dictum velit, et accumsan tellus erat ut odio. Proin sit amet feugiat turpis, quis lobortis nisi. Nulla facilisi. Phasellus malesuada nisi quis sapien tristique accumsan. Curabitur mattis ullamcorper quam, nec iaculis libero volutpat at.
|
</p>
|
<p>
|
Pellentesque placerat lectus id velit vestibulum tincidunt sit amet iaculis neque. Donec dapibus in velit eu rhoncus. Phasellus accumsan id sapien vel vehicula. Curabitur felis tellus, hendrerit at commodo non, vestibulum vitae mauris. Sed molestie placerat est, et tincidunt nulla imperdiet eu. Curabitur molestie, sem a ultricies convallis, odio leo tempus felis, ut auctor lorem leo eu dui. Donec dignissim blandit scelerisque. Suspendisse potenti. Donec bibendum lacus eget dui semper, sed suscipit neque fringilla.
|
</p>
|
<p>
|
Curabitur gravida tellus eget odio tristique rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu pretium enim. Nullam commodo diam vestibulum est porta, a rutrum lectus egestas. Morbi a convallis augue. Vivamus tempus euismod massa, ut tempor nibh congue eu. Aliquam quis risus eget eros dictum lobortis sit amet nec lectus. Nullam ac turpis feugiat, rutrum tortor eget, dictum ligula.
|
</p>
|
</div>
|
|
</div>
|
|
</div> <!-- Spalte: Breadcrumb und Dateiliste -->
|
</div> <!-- zwei Spalten: Seitenleiste und Inhalt -->
|
</div>
|
</div>
|
|
<!-- Ende Inhalt -->
|
|
<!-- Skripte -->
|
<script src="/jslib/jquery/jquery.min.js"></script>
|
<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
|
<script src="/jslib/mustache/mustache.min.js"></script>
|
<script src="ui.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
//var ui;
|
$(document).ready(function() {
|
// hier kann man etwas initialisieren
|
});
|
</script>
|
|
<!-- Ende Body -->
|
</body>
|
</html>
|
