web/proto/index.html | ●●●●● patch | view | raw | blame | history | |
web/proto/liste4.html | ●●●●● patch | view | raw | blame | history | |
web/proto/stile.css | ●●●●● patch | view | raw | blame | history | |
web/proto/verworfen/flex-versuch-2.css | patch | view | raw | blame | history | |
web/proto/verworfen/flex-versuch-2.html | patch | view | raw | blame | history | |
web/proto/verworfen/flex-versuch.css | patch | view | raw | blame | history | |
web/proto/verworfen/flex-versuch.html | patch | view | raw | blame | history | |
web/proto/verworfen/index_alt.html | ●●●●● patch | view | raw | blame | history | |
web/proto/verworfen/liste.html | patch | view | raw | blame | history | |
web/proto/verworfen/liste2.html | patch | view | raw | blame | history | |
web/proto/verworfen/liste3.css | patch | view | raw | blame | history | |
web/proto/verworfen/liste3.html | patch | view | raw | blame | history | |
web/proto/verworfen/liste5.html | patch | view | raw | blame | history |
web/proto/index.html
@@ -1,24 +1,18 @@ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Flexbox Demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prototyp Dateiverwaltung</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="stile.css"> <script id="tpl-list" type="x-tmpl-mustache"> {{#List}} {{#List}} <option value="{{ String }}">{{ String }}</option>' {{/List}} {{/List}} </script> </head> <body> <!-- Kopfzeile --> <div class="nord"> <!-- Menue --> <div id="menue"> <div id="menue"> <!-- 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> @@ -36,14 +30,12 @@ </div> </li> </ul> </div> <!-- Menue --> </div> <!-- Inhalt --> <div class="container-fluid" id="inhalt"> <div class="row"> <div class="col-sm-2 col-md-2 col-lg-2 hidden-xs-down"> <div class="inhalt"> <!-- westliche Seitenleiste --> <div class="west hidden-xs-down"> <!-- linke Seitenleiste mit Links --> <nav class="nav flex-column"> <a class="nav-link active" href="#">Active</a> @@ -52,79 +44,59 @@ <a class="nav-link disabled" href="#">Disabled</a> </nav> </div> <div class="col-sm-10 col-md-10 col-lg-10"> <!-- zentraler Inhaltsbereich --> <div class="zentrum"> <div class="zentrum-bc"> <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-list"></i> <i class="fa fa-th-large"></i> </div> </nav> <div class="row"> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> </div> <div class="zentrum-liste"> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Kurzer Text</figcaption> </figure> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center bg-warning text-primary"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption text-primary">A caption for the above image.</figcaption> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Ein ganz langer Text, der dieses Element benennt.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Wort</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Wort2</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Wort3</figcaption> </figure> </div> </div> <!-- oestliche Seitenleiste --> <!-- <div class="ost"> östliche Seitenleiste </div> --> </div> <!-- Fusszeile --> <!-- <div class="sued"> Fußzeile </div> --> <!-- Skripte --> <script src="/jslib/jquery/jquery.min.js"></script> <script src="/jslib/bootstrap/js/bootstrap.min.js"></script> @@ -133,10 +105,8 @@ <script type="text/javascript" charset="utf-8"> //var ui; $(document).ready(function() { fm_init(); // init }); </script> <!-- Ende Body --> </body> </html> web/proto/liste4.html
@@ -6,72 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <style> html { margin: 0; padding: 0; height: 100%; /* Anmerkung 2 */ } body { margin: 0; padding: 0; height: 100%; /* Anmerkung 2 */ min-height: 0; /* Anmerkung 1 */ display: flex; flex-flow: column; } .inhalt { display: flex; flex-flow: row; height: 100%; /* Anmerkung 2 */ min-height: 0; /* Anmerkung 1 */ } .nord { } .sued { background-color: lightgray; } .west { flex-grow: 0; flex-shrink: 0; flex-basis: 10em; } .ost { flex-grow: 0; flex-shrink: 0; flex-basis: 10em; background-color: antiquewhite; } .zentrum { width: 100%; height: 100%; display: flex; flex-flow: column; } .zentrum-bc { } .zentrum-liste { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .lipsum { color: lightgrey; } /* Anmerkungen: 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles immer ueber das gesamte Browserfenster ausdehnt. */ </style> <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body> <!-- Kopfzeile --> web/proto/stile.css
@@ -1,8 +1,58 @@ html, body { height: 100%; } .file-view { overflow: scroll; /* Stile Listenansicht */ html { margin: 0; padding: 0; height: 100%; /* Anmerkung 2 */ } body { margin: 0; padding: 0; height: 100%; /* Anmerkung 2 */ min-height: 0; /* Anmerkung 1 */ display: flex; flex-flow: column; } .inhalt { display: flex; flex-flow: row; height: 100%; /* Anmerkung 2 */ min-height: 0; /* Anmerkung 1 */ } .nord { } .sued { background-color: lightgray; } .west { flex-grow: 0; flex-shrink: 0; flex-basis: 10em; } .ost { flex-grow: 0; flex-shrink: 0; flex-basis: 10em; background-color: antiquewhite; } .zentrum { width: 100%; height: 100%; display: flex; flex-flow: column; } .zentrum-bc { } .zentrum-liste { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .datei-figure { width: 6em; } web/proto/verworfen/flex-versuch-2.css
web/proto/verworfen/flex-versuch-2.html
web/proto/verworfen/flex-versuch.css
web/proto/verworfen/flex-versuch.html
web/proto/verworfen/index_alt.html
New file @@ -0,0 +1,142 @@ <!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 Dateiverwaltung</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="stile.css"> <script id="tpl-list" type="x-tmpl-mustache"> {{#List}} {{#List}} <option value="{{ String }}">{{ String }}</option>' {{/List}} {{/List}} </script> </head> <body> <!-- 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> <!-- Inhalt --> <div class="container-fluid" id="inhalt"> <div class="row"> <div class="col-sm-2 col-md-2 col-lg-2 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="col-sm-10 col-md-10 col-lg-10"> <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-list"></i> </div> </nav> <div class="row"> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center bg-warning text-primary"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption text-primary">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2"> <figure class="figure text-center text-warning"> <i class="fa fa-folder-o fa-3x"></i> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> </div> </div> </div> </div> <!-- 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() { fm_init(); }); </script> <!-- Ende Body --> </body> </html> web/proto/verworfen/liste.html
web/proto/verworfen/liste2.html
web/proto/verworfen/liste3.css
web/proto/verworfen/liste3.html
web/proto/verworfen/liste5.html