UI Walla

Walla Rapports drop

Glisser déposer un rapport ici ou
Rapport Mars 2018

Brouillon
<div class="amui-l-app-layout">

  <nav class="amui-o-top-bar navbar">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-bar-collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="amui-o-top-bar__logo amui-m-navbar-logo navbar-brand" href="index.html">
          <h1 class="amui-a-brand-logo is--light">Bienvenue Aix-Marseille université</h1>
          <span class="amui-m-navbar-logo__heading-title">Walla</span>
        </a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="top-bar-collapse">
        <ul class="amui-o-top-bar__nav navbar-nav navbar-right">
          <li class="amui-o-top-bar__nav-list-item">
            <a class="amui-m-nav-icon is--inner-text-inline-block" href="#">
              <i class="material-icons md-24">account_circle</i>
              <span class="amui-m-nav-icon__inner-text">Utilisateur</span>
            </a>
          </li>
          <li class="amui-o-top-bar__nav-list-item">
            <a class="amui-m-nav-icon" href="http://ent.univ-amu.fr">
              <span class="amui-m-nav-icon__inner-text">ENT</span>
            </a>
          </li>
          <li class="amui-o-top-bar__nav-list-item">
            <a class="amui-m-nav-icon" href="info.html">
              <i class="material-icons md-24">help</i>
            </a>
          </li>
          <li class="amui-o-top-bar__nav-list-item amui-m-btn-dropdown dropdown dropdown--parent">
            <a class="amui-m-nav-icon is--inner-text-inline-block dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <i class="material-icons md-24">settings</i>
              <span class="amui-m-nav-icon__inner-text">Admin</span>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Gestion des catégories</a>
              </li>
            </ul>
          </li>
          <li class="amui-o-top-bar__nav-list-item">
            <a class="amui-m-nav-icon" href="#">
              <i class="material-icons md-24">exit_to_app</i>
            </a>
          </li>
        </ul>
      </div>
    </div>  <!-- Container fluid -->
  </nav>  <!-- Organism top bar -->

  <div id="navbar-collapse" class="amui-l-app-layout__wrapper">

    <ul class="amui-o-sidebar-nav">
      <li class="amui-o-sidebar-nav__list-item">
        <a class="amui-m-nav-icon is--inner-text" href="#">
          <i class="material-icons md-24">work</i>
          <span class="amui-m-nav-icon__inner-text">Projets</span>
        </a>
      </li>
      <li class="amui-o-sidebar-nav__list-item">
        <a class="amui-m-nav-icon is--inner-text" href="#">
          <i class="material-icons md-24">announcement</i>
          <span class="amui-m-nav-icon__inner-text">Maquette</span>
        </a>
      </li>
      <li class="amui-o-sidebar-nav__list-item">
        <a class="amui-m-nav-icon is--active is--inner-text" href="#">
          <i class="material-icons md-24">description</i>
          <span class="amui-m-nav-icon__inner-text">Rapports</span>
        </a>
      </li>
      <li class="amui-o-sidebar-nav__list-item">
        <a class="amui-m-nav-icon is--inner-text" href="#">
          <i class="material-icons md-24">picture_as_pdf</i>
          <span class="amui-m-nav-icon__inner-text">Impression</span>
        </a>
      </li>
    </ul>

    <main role="main" class="amui-l-app-layout__main amui-h-p-none">
      <div class="container-fluid">
        <div class="amui-g-grid row amui-l-page-splitted">

          <aside class="amui-l-page-splitted__aside amui-g-grid__item col-xs-12 col-sm-4 col-lg-3">

            <div class="amui-l-page-header amui-g-grid row is--middle">
              <div class="amui-h-mb-ms amui-g-grid__item col-xs-12">
                <h2 class="amui-l-page-header__title">Rapports</h2>
              </div>
            </div>

            <div class="amui-g-grid row amui-l-page-scroll amui-h-mt-n-ms">
              <div class="amui-g-grid__item col-xs-12 amui-l-page-scroll__content amui-h-mt-sm">

                <ul class="amui-m-nav-tabs nav nav-tabs is--xs">
                  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#year" data-toggle="tab">Année</a></li>
                  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#category" data-toggle="tab">Catégories</a></li>
                </ul>

                  <div class="tab-content amui-h-mt-sm">
                    <div class="tab-pane active" id="year">
                      <div class="amui-m-collapse amui-space-ms">
                        <a class="amui-h-text-right amui-space-xs" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                          <span class="amui-m-collapse__title">Année 2018</span>
                          <i class="amui-m-collapse__icon material-icons md-24"></i>
                        </a>
                        <div class="amui-m-collapse_wrapper collapse in" id="collapseExample">
                          <div class="amui-m-collapse__body">
                            <ul class="amui-m-list-group list-group is--panel">
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Nov 2018</span>
                                <span class="amui-m-list-group__item__status is--primary">Publié</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2018</span>
                                <span class="amui-m-list-group__item__status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2018</span>
                                <span class="amui-m-list-group__item__status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2018</span>
                                <span class="amui-m-list-group__item__status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2018</span>
                                <span class="amui-m-list-group__item__status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2018</span>
                                <span class="amui-m-list-group__item__status is--draft">Brouillon</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div><!--  Accordion #1 -->
                      <div class="amui-m-collapse amui-space-ms">
                        <a class="amui-h-text-right amui-space-xs" role="button" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                          <span class="amui-m-collapse__title">Année 2017</span>
                          <i class="amui-m-collapse__icon material-icons md-24"></i>
                        </a>
                        <div class="amui-m-collapse_wrapper collapse" id="collapseExample2">
                          <div class="amui-m-collapse__body">
                            <ul class="amui-m-list-group list-group is--panel">
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Nov 2017</span>
                                <span class="amui-m-list-group__item-status is--primary">Publié</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2017</span>
                                <span class="amui-m-list-group__item-status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2017</span>
                                <span class="amui-m-list-group__item-status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2017</span>
                                <span class="amui-m-list-group__item-status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2017</span>
                                <span class="amui-m-list-group__item-status is--draft">Brouillon</span>
                              </li>
                              <li class="amui-m-list-group__item list-group-item" draggable="true">
                                <span id="drag-me" class="amui-m-list-group__item__text">Dec 2017</span>
                                <span class="amui-m-list-group__item-status is--draft">Brouillon</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div><!--  Accordion #2 -->
                    </div>
                    <div class="tab-pane" id="category">
                      <div class="amui-m-collapse amui-space-ms">
                        <a class="amui-h-text-right amui-space-xs" role="button" data-toggle="collapse" href="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
                          <span class="amui-m-collapse__title">Echange hors AMU</span>
                          <i class="amui-m-collapse__icon material-icons md-24"></i>
                        </a>
                        <div class="amui-m-collapse_wrapper collapse" id="collapseExample3">
                          <div class="amui-m-collapse__body">
                            <ul class="amui-m-collapse__items">
                              <li class="amui-m-collapse__items-item is--active">
                                <a href="#" class="is--active">Formation</a>
                              </li>
                              <li class="amui-m-collapse__items-item">
                                <a href="#">Information concernant les personnels en formation</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div><!--  Accordion #3 -->
                      <div class="amui-m-collapse amui-space-ms">
                        <a class="amui-h-text-right amui-space-xs" role="button" data-toggle="collapse" href="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
                          <span class="amui-m-collapse__title">Coeur de métier</span>
                          <i class="amui-m-collapse__icon material-icons md-24"></i>
                        </a>
                        <div class="amui-m-collapse_wrapper collapse" id="collapseExample4">
                          <div class="amui-m-collapse__body">
                            <ul class="amui-m-collapse__items">
                              <li class="amui-m-collapse__items-item is--active">
                                <a href="#">Formation</a>
                              </li>
                              <li class="amui-m-collapse__items-item">
                                <a href="#">Information concernant les personnels en formation</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div><!--  Accordion #4 -->
                    </div>
                  </div>

              </div>
            </div>

          </aside>  <!-- Splitted aside section -->

          <section class="amui-l-page-splitted__content amui-g-grid__item col-xs-12 col-sm-8 col-lg-9 amui-h-mt-n-ms">

            <div class="amui-g-grid row amui-l-page-header amui-o-date-navigation">

              <div class="amui-g-grid__item col-xs-4 is--pull">
                <button type="button" class="amui-a-btn is--default is--sm is--icon-only">
                  <span class="sr-only">Precédent</span>
                  <i class="material-icons md-24">navigate_before</i>
                </button>
              </div>
              <div class="amui-g-grid__item col-xs-4">
                <div class="amui-m-btn-dropdown btn-group">
                  <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Mars 2018 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Février 2018</a></li>
                    <li><a href="#">Janvier 2018</a></li>
                  </ul>
                </div>
              </div>
              <div class="amui-g-grid__item col-xs-4 is--push">
                <button type="button" class="amui-a-btn is--default is--sm is--icon-only">
                  <i class="material-icons md-24">navigate_next</i>
                  <span class="sr-only">Suivant</span>
                </button>
              </div>
            </div>  <!-- Page header -->

            <div class="amui-g-grid row amui-l-page">
              <div class="amui-g-grid__item col-xs-12">

                <div class="amui-o-drop-zone amui-g-grid row">
                  <div class="amui-g-grid__item col-xs-12">
                    <div class="amui-o-drop-zone__wrapper">
                      <div class="amui-o-drop-zone__content">
                        <i class="material-icons md-72">cloud_upload</i>
                        <p>Glisser déposer un rapport ici ou</p>
                        <button type="button" class="amui-a-btn is--primary is--sm">Créer un nouveau rapport depuis la maquette</button>
                      </div>
                    </div>
                  </div>
                </div>

              </div>  <!--  Accordions container -->
            </div>  <!-- Page section -->

            <div class="amui-g-grid row is--middle amui-l-bottom amui-o-validation-bar">
                <div class="amui-g-grid__item col-xs-12 col-sm-4">
                  <h4 class="amui-o-validation-bar__title">Rapport Mars 2018</h4>
                  <span class="amui-o-validation-bar__status is--draft">Brouillon</span>
                </div>
                <div class="amui-g-grid__item col-xs-12 col-sm-8 is--push">
                  <button type="button" class="amui-a-btn is--default btn">Enregistrement brouillon</button>
                  <button type="button" class="amui-a-btn is--success btn">Validation mensuelle</button>
                </div>
            </div>  <!-- Page bottom section -->

          </section>  <!-- Splitted content section -->

        </div>  <!-- Page section -->
      </div>  <!-- Fluid container -->
    </main>  <!-- Main container -->

  </div>  <!-- App layout wrapper -->

  <footer role="contentinfo" class="amui-m-footer amui-l-app-layout__footer panel-default">
    <small>Aix-Marseille Université - Dosi Pôle développement <a href="mailto:jp.floret@univ-amu.fr?subject=Siamu">jp.floret@univ-amu.fr</a> </small>
  </footer>  <!-- Footer -->

</div>  <!-- App layout -->
← Walla - Rapports edit Walla - Impression PDF →