ode-bootstrap-one
Version:
One theme by Open Digital Education"
597 lines (576 loc) • 28 kB
HTML
<html lang="fr" class="ode-bootstrap-one">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<!-- SIDEBAR -->
<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 CONTENT -->
<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="ic-close"></i> -->
<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 grille" href="explorer.html"><i class="fa fa-th-large" 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 list">
<section class="list__header">
<span class="list__item--preview"></span>
<span class="list__title"><i class="fas fa-sort"></i> Titre</span>
<span class="list__status text-white">Status</span>
<span class="list__owner"><i class="fas fa-sort"></i> Propriétaire</span>
<span class="list__modification"><i class="fas fa-sort"></i> Dernière modification</span>
</section>
<article class="list__item folder">
<i class="list__item--preview ic-folder"></i>
<h2 class="list__title">
Titre du dossier
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<span>Moi</span>
</article>
<div class="list__modification">
<span class="">Il y a 2 heures</span><br/>
<span class="list__modifiedBy">Moi</span>
</div>
</article>
<article class="list__item item active">
<span class="list__item--preview">
<img class="list__image" src="https://loremflickr.com/100/100/">
</span>
<h2 class="list__title">
Titre de la ressource avec une image
</h2>
<div class="list__status">
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Isabelle Polonio</a>
</article>
<div class="list__modification">
<span class="">Il y a 3 jours</span><br/>
<span class="list__modifiedBy">par <a>Brigitte Fontaine</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource avec une icône
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Isabelle Polonio</a>
</article>
<div class="list__modification">
<span class="">Il y a 1 semaine</span><br/>
<span class="list__modifiedBy">par <a>Alain Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<article class="list__item">
<i class="list__item--preview ic-app blog"></i>
<h2 class="list__title">
Titre de la ressource
</h2>
<div class="list__status">
<span title="Ressource public"><i class="ic-public"></i></span>
<span title="Ressource partagée"><i class="ic-users"></i></span>
</div>
<article class="list__owner">
<img class="avatar avatar--25" src="https://oasys.ch/wp-content/uploads/2019/03/photo-avatar-profil.png" />
<a>Brigitte Fontaine</a>
</article>
<div class="list__modification">
<span class="">Il y a 2 semaines</span><br/>
<span class="list__modifiedBy">par <a>Alex Terrieur</a></span>
</div>
</article>
<div class="d-flex m-2 justify-content-center" style="flex-basis: 100%;">
<a class="btn btn-primary">Charger plus de ressources (20)</a>
</div>
</section>
<!-- TOASTER -->
<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>
<!-- Modale de création de blog -->
<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>
<!-- Modale de propriétés -->
<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>
<!-- Modale de création de dossier -->
<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>