Dateiverwaltung für die WebBox
parent: 5f40cfcd | patch | commit | ignore whitespace
Ulrich Hilger
2017-02-14 1f39191e5530ccb3297af361d1ae451d457ce7b7 
Prototyp Liste und Kacheln vereinfacht, mehr Standard-Flexbox, weniger Bootstrap; alte Versuche verschoben
9 files renamed
1 files added
3 files modified
445 ■■■■■ changed files
web/proto/index.html 174 ●●●●● patch | view | raw | blame | history
web/proto/liste4.html 67 ●●●●● patch | view | raw | blame | history
web/proto/stile.css 62 ●●●●● 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 142 ●●●●● 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,49 +1,41 @@


<!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>


    


    <!-- 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">


    <!-- Kopfzeile -->


    <div class="nord">


      


      <div class="row">


        <div class="col-sm-2 col-md-2 col-lg-2 hidden-xs-down">


      <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>


            <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> <!-- Menue -->


      


    </div>


    <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>


@@ -51,80 +43,60 @@


            <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">




      </div>


      <!-- 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>


                <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 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>   


          <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>   


          <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>   


          <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>   


          <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">


        &ouml;stliche Seitenleiste


      </div>


      -->


    </div>


    


    <!-- Fusszeile -->


    <!--


    <div class="sued">


      Fu&szlig;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