ode-bootstrap-one

<!doctype html> <html lang="fr" class="ode-bootstrap-one"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="./index.css" /> <title>Explorateur universel - 1D</title> </head> <body id="explorer"> <header class="no-2d navbar navbar-light bg-white"> <a class="application__title d-desktop-none text-truncate" href="/welcome?token=0.9617944019170589"> <span class="text-truncate">Blog</span> </a> <div class="d-mobile-none"> <img id="my-photo" src=""> <span>Bonjour Isabelle Polonio, bienvenue !</span> </div> <nav class="navigation"> <div class="navigation__item"> <a href="" title="Accueil"> <i class="ic-conversation"></i> </a> </div> <div class="navigation__item"> <a href="" title="Mon compte"> <i class="ic-avatar"></i> </a> </div> <div class="navigation__item"> <a href="" title="Aide en ligne"> <i class="ic-help"></i> </a> </div> <div class="navigation__item"> <a href="" logout="" title="Déconnexion"> <i class="ic-disconnect"></i> </a> </div> </nav> </header> <div class="no-2d navigation--secondary"> <a class="d-mobile-none" href=""> <img class="logo" src="/assets/images/logo.png" alt="Logo de l'ENT"> <span class="text-truncate d-desktop-none">Blog</span> </a> <nav class="navigation"> <a class="button" href=""> <i class="ic-notifications d-desktop-none"></i> <span class="d-mobile-none">Quoi de neuf ?</span> </a> <a class="button" href=""> <i class="ic-userbook d-desktop-none"></i> <span class="d-mobile-none">La classe</span> </a> <a class="button" href=""> <i class="ic-apps d-desktop-none"></i> <span class="d-mobile-none">Mes applis</span> </a> </nav> </div> <div class="container d-flex">  <aside class="sidebar sidebar--left"> <h1 class="sidebar__title">Blog</h1> <ul class="sidebar__tree"> <li><a class="active" href=""><i class="ic-app blog"></i> Mes blogs</a> <ul> <li><a href="">Dossier 1</a></li> <li><a href="">Dossier 2</a> <ul> <li><a href="">Sous-dossier 1</a></li> <li><a href="">Sous-dossier 2</a></li> <li><a href="">Sous-dossier 3</a></li> <li><a href="">Sous-dossier avec un nom très long</a></li> </ul> </li> <li><a href="">Dossier 3</a> <ul> <li><a href="">Sous-dossier 1</a></li> <li><a href="">Sous-dossier 2</a></li> </ul> </li> </ul> </li> <li><a href=""><i class="fas fa-trash-alt"></i> Ma corbeille</a></li> </ul> <a class="btn btn-outline-secondary btn-block" data-toggle="modal" data-target="#createFolder">Créer un dossier</a> <a class="btn btn-outline-secondary btn-block">Importer</a> </aside>  <main class="main-content"> <section class="explorer"> <section class="explorer__header"> <form class="row justify-content-between mb-2 d-none d-sm-none d-md-none d-lg-flex"> <div class="col-lg-6 input-searchbar"> <i class="ic-search form-control-feedback"></i> <input type="search" class="form-control" id="" placeholder="Rechercher un blog"> </div> <div class="col-auto"> <a class="btn btn-primary px-4" data-toggle="modal" data-target="#createRessource">Créer un blog</a> </div> </form> <div class="d-flex justify-content-between align-items-center mb-2"> <h2 class="text-truncate"> <div class="d-none d-lg-block"> Mes blogs <small>(76 éléments)</small> </div> <div class="sidebar__mobile"> <input type="checkbox" uncheck /> <i class="ic-burger"></i> Mes blogs <aside class="sidebar"> <ul class="sidebar__tree"> <a href="" class="sidebar__close">  <i class="fas fa-times"></i> </a> <li><a class="active" href="">Mes blogs</a> <ul> <li><a href="">Dossier 1</a></li> <li><a href="">Dossier 2</a> <ul> <li><a href="">Sous-dossier 1</a></li> <li><a href="">Sous-dossier 2</a></li> <li><a href="">Sous-dossier 3</a></li> <li><a href="">Sous-dossier avec un nom très long</a></li> </ul> </li> <li><a href="">Dossier 3</a> <ul> <li><a href="">Sous-dossier 1</a></li> <li><a href="">Sous-dossier 2</a></li> </ul> </li> </ul> </li> <li><a href="">Ma corbeille</a></li> </ul> <a class="btn btn-outline-secondary btn-block">Créer un dossier</a> <a class="btn btn-outline-secondary btn-block">Importer</a> </aside> </div> </h2> <div class="filters d-flex"> <div class="dropdown"> <button class="btn d-block d-lg-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="ic-search"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <form class="px-3 py-2" style="width: 300px"> <div class="input-group"> <input type="text" class="form-control" placeholder="Rechercher un blog" aria-label="Rechercher un blog" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-gray" type="button" id="button-addon2"><i class="ic-search"></i></button> </div> </div> </form> </div> </div> <div class="dropdown"> <button class="btn dropdown-toggle d-none d-sm-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-filter"></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item active" href="#"> <input type="checkbox" aria-label=""> <i class="ic-user"></i> Mes blogs</a> <a class="dropdown-item" href="#"> <input type="checkbox" aria-label=""> <i class="ic-users"></i> Les blogs partagés avec moi </a> <a class="dropdown-item" href="#"> <input type="checkbox" aria-label=""> <i class="ic-public"></i> Blogs public </a> </div> </div> <div class="dropdown d-none d-sm-block"> <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-sort-alpha-down"></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Ordre alphabétique</a> <a class="dropdown-item active" href="#">Dernière modification</a> </div> </div> <a class="btn d-none d-sm-block" title="Passer en vue liste" href="explorer-list.html"><i class="fa fa-list" aria-hidden="true"></i></a> <div class="dropdown d-block d-sm-none"> <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <h6 class="dropdown-header">Choix de la vue :</h6> <div class="text-center"> <a class="btn" href="explorer.html"> <i class="fas fa-th-large"></i><br/> Grille </a> <a class="btn inactive" href="explorer-list.html"> <i class="fa fa-list" aria-hidden="true"></i><br/> Liste </a> </div> <div class="dropdown-divider"></div> <h6 class="dropdown-header">Ordre d'affichage :</h6> <a class="dropdown-item active" href="#"> <i class="fas fa-sort-alpha-down"></i> Ordre alphabétique </a> <a class="dropdown-item" href="#"> <i class="fas fa-clock"></i> Dernière modification </a> <div class="dropdown-divider"></div> <h6 class="dropdown-header">Filtres :</h6> <a class="dropdown-item" href="#"> <input type="checkbox" aria-label=""> <i class="ic-user"></i> Mes blogs</a> <a class="dropdown-item" href="#"> <input type="checkbox" aria-label=""> <i class="ic-users"></i> Les blogs partagés avec moi </a> <a class="dropdown-item" href="#"> <input type="checkbox" aria-label=""> <i class="ic-public"></i> Blogs public </a> </div> </div> </div> </div> </section> <section class="explorer__view dominos dominos--square">  <article class="domino folder"> <div class="domino__image"> <i class="ic-folder"></i> </div> <div class="domino__infos"> <h2 class="domino__title">Dossier 1</h2> <span class="domino__info">Il y a 2 heures</span> </div> </article> <article class="domino folder"> <div class="domino__image"> <i class="ic-folder"></i> </div> <div class="domino__infos"> <h2 class="domino__title">Dossier 2</h2> <span class="domino__info">Il y a 2 heures</span> </div> </article> <article class="domino folder"> <div class="domino__image"> <i class="ic-folder"></i> </div> <div class="domino__infos"> <h2 class="domino__title">Dossier 3</h2> <span class="domino__info">Il y a 2 heures</span> </div> </article>  <article class="domino item blog"> <div class="domino__image"> <i class="fas ic-app blog"></i> <div class="domino__overlay transition-hover"> <div class="domino__overlay--left"> <span title="Ressource partagée"><i class="ic-users"></i>73</span> </div> <div class="domino__overlay--right"> <span title="Nombre de vues"><i class="ic-view"></i>28</span> <span title="Nombre de commentaires"><i class="ic-comment"></i>3</span> </div> </div> </div> <div class="domino__infos"> <h2 class="domino__title">Titre de la ressource - Blog</h2> <span class="domino__info">Modifié par <a><img class="avatar avatar--20" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" /> Isabelle Polonio</a></span> <span class="domino__info">Il y a 23 heures</span> </div> </article>   <article class="domino item thumbnail active"> <div class="domino__image"> <img src="https://loremflickr.com/240/160/" alt="Image de couverture" /> <div class="domino__overlay transition-hover"> <div class="domino__overlay--left"> <span title="Ressource partagée"><i class="ic-users"></i>73</span> </div> <div class="domino__overlay--right"> <span title="Nombre de vues"><i class="ic-view"></i>28</span> <span title="Nombre de commentaires"><i class="ic-comment"></i>3</span> </div> </div> </div> <div class="domino__infos"> <h2 class="domino__title">Titre de la ressource</h2> <span class="domino__info">Modifié par <a><img class="avatar avatar--20" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" /> Isabelle Polonio</a></span> <span class="domino__info">Il y a 23 heures</span> </div> </article> <article class="domino item thumbnail" data-toggle="modal" data-target="#editProperty"> <div class="domino__image"> <img src="https://loremflickr.com/240/160/" alt="Image de couverture" /> <div class="domino__overlay transition-hover"> <div class="domino__overlay--left"> <span title="Ressource public"><i class="ic-public"></i></span> <span title="Ressource partagée"><i class="ic-users"></i>1006</span> </div> <div class="domino__overlay--right"> <span title="Nombre de vues"><i class="ic-view"></i>484</span> <span title="Nombre de commentaires"><i class="ic-comment"></i>27</span> </div> </div> </div> <div class="domino__infos"> <h2 class="domino__title" title="Titre de la ressource - modale propriétés">Titre de la ressource - modale propriétés</h2> <span class="domino__info">Modifié par <a><img class="avatar avatar--20" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" /> Alain Terrieur</a></span> <span class="domino__info">Il y a 2 semaines</span> </div> </article> <article class="domino item thumbnail"> <div class="toaster2"> <div class="dropdown"> <a class="btn" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Actions supplémentaires"> <i class="fas fa-ellipsis-h"></i></a> </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Propriétés</a> <a class="dropdown-item" href="#">Partager</a> <a class="dropdown-item" href="#">Déplacer</a> <a class="dropdown-item" href="#">Partager dans la bibliothèque</a> <a class="dropdown-item" href="#">Imprimer</a> <a class="dropdown-item" href="#">Supprimer</a> </div> </div> </div> <div class="domino__image"> <img src="https://loremflickr.com/240/160/" alt="Image de couverture" /> <div class="domino__overlay transition-hover"> <div class="domino__overlay--left"> <span title="Ressource public"><i class="ic-public"></i></span> <span title="Ressource partagée"><i class="ic-users"></i>127</span> </div> <div class="domino__overlay--right"> <span title="Nombre de vues"><i class="ic-view"></i>104</span> <span title="Nombre de commentaires"><i class="ic-comment"></i>35</span> </div> </div> </div> <div class="domino__infos"> <h2 class="domino__title">Titre de la ressource</h2> <span class="domino__info">Modifié par <a><img class="avatar avatar--20" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" /> Brigitte Fontaine</a></span> <span class="domino__info">Il y a 1 mois</span> </div> </article> <div class="d-flex justify-content-center" style="flex-basis: 100%;"> <a class="m-3 btn btn-outline-secondary">Charger plus de ressources (20)</a> </div> </section>  <div class="toaster d-none"> <a href="">Propriétés</a> <a href="">Déplacer</a> <a class="d-mobile-none" href="">Dupliquer</a> <a class="d-mobile-none" href="">Exporter</a> <a href="">Partager</a> <a class="d-mobile-none" href="">Commenter</a> <a class="d-mobile-none" href="">Imprimer</a> <a class="d-mobile-none" href="">Publier dans la bibliothèque</a> <a class="d-mobile-none" href="">Supprimer</a> <div class="dropdown d-inline-block d-desktop-none"> <a class="btn" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Actions supplémentaires"> <i class="fas fa-ellipsis-v text-white"></i></a> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Dupliquer</a> <a class="dropdown-item" href="#">Exporter</a> <a class="dropdown-item" href="#">Commenter</a> <a class="dropdown-item" href="#">Partager dans la bibliothèque</a> <a class="dropdown-item" href="#">Supprimer</a> </div> </div> </div> </section> </main>  <div class="modal fade" id="createRessource" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Créer un blog</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12 col-md-5 col-lg-3 text-center"> <img src="https://dummyimage.com/200x200/f0f2f4/aaa" alt="..." class="img-thumbnail"> <div class="row p-2"> <button class="btn btn-sm btn-outline-secondary m-1 mx-auto">Ajouter une image</button> </div> </div> <form class="col-sm-12 col-md-7 col-lg-9"> <div class="form-group"> <label for="">Titre de mon blog :</label> <input type="text" class="form-control" id="" placeholder="Taper ici le titre de votre blog"> </div> <div class="custom-control custom-checkbox mt-4"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Le blog est accessible publiquement via cette adresse personnalisable :</label> </div> <div class="form-inline my-2"> <label class="text-muted" for="inlineFormInput">https://recette-paris.opendigitaleducation.com/blog/pub/</label> <input type="text" class="form-control" id="inlineFormInput" value="titre-de-la-ressource"> <button type="button" class="btn btn-link">Copier l'adresse</button> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div> </div>  <div class="modal fade" id="editProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Propriétés du blog "Titre de la ressource"</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12 col-md-5 col-lg-3 text-center"> <img src="https://loremflickr.com/200/200?random=3" alt="..." class="img-thumbnail"> <div class="row p-2"> <button class="btn btn-sm btn-outline-secondary m-1 mx-auto"><i class="fa fa-edit" aria-hidden="true"></i> Changer l'image</button> <button class="btn btn-sm btn-outline-secondary m-1 mx-auto"><i class="fa fa-trash" aria-hidden="true"></i> Supprimer l'image</button> </div> </div> <form class="col-sm-12 col-md-7 col-lg-9"> <div class="form-group"> <label for="">Titre de mon blog :</label> <input type="text" class="form-control" id="" value="Titre de la ressource"> </div> <div class="custom-control custom-checkbox mt-4"> <input type="checkbox" class="custom-control-input" id="customCheck1" checked> <label class="custom-control-label" for="customCheck1">Le blog est accessible publiquement via cette adresse personnalisable :</label> </div> <div class="form-inline my-2"> <label class="text-muted" for="inlineFormInput">https://recette-paris.opendigitaleducation.com/blog/pub/</label> <input type="text" class="form-control" id="inlineFormInput" value="titre-de-la-ressource"> <button type="button" class="btn btn-link">Copier l'adresse</button> </div> <div class="my-3 alert alert-warning" role="alert"> Attention, ce blog va devenir public, les documents appartenant à d'autres utilisateurs et présents sur le blog seront rendus publics également. Les liens pointant vers des ressources internes au réseau ne seront pas accessibles pour les visiteurs sans compte. </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div> </div>  <div class="modal fade" id="createFolder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Créer un dossier</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form class="col"> <div class="form-group"> <label for="">Nom de mon dossier :</label> <input type="text" class="form-control" id="" value="Titre de mon dossier"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> </body> </html>