Update README.md

Need to be tested on Pages to see if links works as well as locally.

.gitlab-ci.yml

@@ -0,0 +1,12 @@
+# Move / rename the content files into the 'public' folder for GitLab Pages
+# Artifacts contents of 'public' for Pages
+# Deploy pages publicly in GitLab
+
+pages:
+  stage: deploy
+  script: echo "hi 👋"
+  artifacts:
+    paths:
+      - public
+  only:
+    - pages

README.md

@@ -1,21 +1,11 @@
 # Lightbox Remastered
 
-Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign des lightbox utilisés dans One et Neo Pocket. Le travail aboutit sur des maquettes faites main.  
+> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
 
-Ce project est une maquette interactive visant à mieux définir le comportement de la boite en fonction de regles de redimentionnements prenant en compte la taille d'affichage ( *Viewport* ), et les éléments contenu dans celle-ci, et adressant les problèmes actuellement rencontré à cet égards. Il sert de support de présentation.  
+You are on the page branch. This branch serve the GitLab Pipeline to generate Pages. This works as documented on [GitLab's Docs](https://docs.gitlab.com/ee/user/project/pages/index.html#how-to-set-up-gitlab-pages-in-a-repository-where-theres-also-actual-code)
 
-Par ailleurs, ce project est aussi un exercice de conception visuel et de design original et inspiré des codes de l'application One, visant a stimuler ma créativité et à me former sur les technologies du web. Cette exercice es uniquement présenté sous forme de suggestion.  
+* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/index.html)  
+* [Wireframe showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe.html)
+* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/juxtaposejs/)
 
-## Galeries d'images
+💡 Note: On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize the viewport freely and easily.
-
-![Exemple de lightbox avec beaucoup de hauteur disponible](./com/Lightbox%201.png)
-
-![Exemple de lightbox avec pas mal de hauteur disponible](./com/Lightbox%202.png)
-
-![Exemple de lightbox avec suffisamment de hauteur disponible](./com/Lightbox%203.png)
-
-![Exemple de lightbox avec peu de hauteur disponible](./com/Lightbox%204.png)
-
-![Exemple de lightbox avec étroitement peu de hauteur disponible](./com/Lightbox%205.png)
-
-![Exemple de lightbox avec insuffisamment de hauteur disponible](./com/Lightbox%206.png)

public/css/main.css

@@ -1,4 +1,6 @@
 /* Faking a real website */
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Mallanna&display=swap');
 
 html {
   height: 100%;
@@ -9,22 +11,20 @@ body {
   margin: 0;
   min-height: 100%;
   box-sizing: border-box;
-  font-family: Calibri, "Segoe UI", sans-serif;
+  font-family:  Calibri, Mallanna, sans-serif;
 }
 
 h1,
 h2,
 h3,
-h4,
 button {
-  font-family: "Chalkboard", Candara, sans-serif;
+  font-family: "Comic Sans MS", "Chalkboard", "Comic Neue",  cursive;
-  letter-spacing: -0.5px;
+  /* letter-spacing: -0.5px; */
   text-transform: uppercase;
-  font-weight: normal;
+  font-weight: 500;
 }
 
 /* The body of the fake website consist of a scrollable big picture */
-
 #fake {
   /* background: url(./fake-home.jpg); */
   z-index: 9;
@@ -100,9 +100,10 @@ button {
 
 #tabs-container {
 	display: flex;
-	font-family: "Chalkboard", Candara, sans-serif;
+  font-family: "Comic Sans MS", "Chalkboard", "Comic Neue",  cursive;
-  letter-spacing: -0.5px;
+  /* letter-spacing: -0.5px; */
   overflow-x: auto;
+  font-weight: 500;
 }
 
 #tabs-container a {
@@ -171,12 +172,7 @@ button {
   grid-column: central;
 }
 
-input[type="text"],
+input {
-input[type="password"],
-input[type="search"],
-input[type="email"],
-input[type="tel"],
-input[type="date"] {
   border-radius: 5px;
   border: 1px solid #c9ced5;
   line-height: 25px;
@@ -185,16 +181,29 @@ input[type="date"] {
 	height: 40px;
 	text-transform: initial;
 	font-size: initial;
-	font-family: Calibri, "Segoe UI", sans-serif;
+	font-family: Calibri, Mallanna, sans-serif;
 }
 
+#doc-file-viewmode a {
+  background-image: linear-gradient(#fff, #e9ebef);
+  border-radius: 10px;
+  height: 40px;
+  min-width: 40px;
+  display: inline-block;
+}
+
+#doc-file-viewmode a.active {
+  background-image: linear-gradient(#3889c1, #43b9e7);
+}
+
+
 button {
   /* height: 40px; */
   box-sizing: border-box;
   background-image: linear-gradient(#3889c1, #43b9e7);
 	color: #fff;
 	border: none;
-	border-radius: 15px;
+	border-radius: 10px;
 	font-size: initial;
 	padding:9px 12px;
 }
@@ -217,6 +226,7 @@ button {
   border-radius: 4px;
   padding: 3px 9px;
   cursor: pointer;
+  height: 100%;
 }
 
 .list-nav li:not(.active) span:hover {
@@ -233,6 +243,7 @@ button {
   flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: flex-start;
+  height: 100%;
 }
 
 .domino-item {
@@ -248,7 +259,9 @@ button {
 
 .domino-item h4 {
 	text-transform: initial;
-	font-family: Calibri, "Segoe UI", sans-serif;
+	/* font-family: Calibri, "Segoe UI", sans-serif; */
+  font-weight: normal;
+  font-size: 11pt;
 	letter-spacing: initial;
 	margin: 6px 0 ;
 	color: rgb(53, 53, 53);
@@ -275,12 +288,12 @@ button {
 
 .type-folder {
 	border: 1px solid #efdd77;
-	background: left / contain no-repeat url("./assets/folder-large.png") ;
+	background: left / contain no-repeat url("../assets/folder-large.png") ;
 }
 
 .type-file {
 	/* border: 1px solid lightgray; */
-	background: left / contain no-repeat url("./assets/unknown-large.png") ;
+	background: left / contain no-repeat url("../assets/unknown-large.png") ;
 }
 
 

public/css/wireframe.css

@@ -0,0 +1,250 @@
+/* Faking a real website */
+
+html {
+    height: 100%;
+  }
+  
+  body {
+    background-color: rgb(236, 236, 236);
+    margin: 0;
+    min-height: 100%;
+    box-sizing: border-box;
+  }
+  
+  .text-ph {
+    background-color: rgb(236, 236, 236);
+    color: transparent !important;
+  }
+  
+  /* The body of the fake website consist of a scrollable big picture */
+  
+  #fake {
+    /* background: url(./fake-home.jpg); */
+    z-index: 9;
+    /* position: fixed; */
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    min-height: 100%;
+  }
+  
+  /* lightbox stuff */
+  
+  .lb-mod {
+    position: fixed;
+    top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    width: 100%;
+    height: 100%;
+    /* overflow: auto; */
+    z-index: 10;
+  }
+  /* 
+  .softener {
+    backdrop-filter: blur(5px);
+    background-color: rgba(0, 0, 0, 0.5);
+  } */
+  
+  /* lightbox itself */
+  
+  .lb-container {
+    display: grid;
+    margin: 5em;
+    grid-template-rows: min-content auto min-content;
+    position: static;
+    z-index: 11;
+    max-width: 1030px;
+    background-color: white;
+    border: 1px solid lightgray;
+    border-radius: 1em;
+  }
+  
+  .scrollable {
+    overflow-y: scroll;
+  }
+  
+  .lb-header {
+    position: relative;
+  }
+  
+  .lb-header h2 {
+    margin: 0.5em 1em;
+      overflow: hidden;
+  }
+  
+  .lb-header .close-button {
+    position: absolute;
+      right:.5em;
+    top:.5em;
+    width: 20px;
+    height: 20px;
+  }
+  
+  #tabs-container {
+      display: flex;
+    letter-spacing: -0.5px;
+    overflow-x: auto;
+  }
+  
+  #tabs-container a {
+    text-decoration: none;
+  }
+  
+  /* #tabs-container > span.active a {
+    color: rgb(255, 141, 46);
+  } */
+  
+  #tabs-container > span {
+    flex-grow: 1;
+    min-width: min-content;
+    text-align: center;
+    border-bottom: 1px solid lightgray;
+    padding: 9px;
+  }
+  
+  #tabs-container > span.active {
+    flex-grow: 1;
+    min-width: min-content;
+    text-align: center;
+    border: 1px solid lightgray;
+      border-bottom: none;
+      background-color: white;
+  }
+  
+  .lb-body {
+      /* padding: 1em; */
+      padding-bottom: 0;
+      /* max-height: 350px; */
+      max-height: calc(100vh - 10em - 200px);
+      border-bottom: 1px solid lightgray;
+      background-color: white;
+  }
+  
+  .doc-file-browse {
+    display: grid;
+    grid-template-columns: [side] 220px [central] auto;
+    grid-template-rows: [toolbar] auto [main] auto;
+    grid-gap: 6px;
+  }
+  
+  .doc-file-browse #doc-file-viewmode {
+    visibility: hidden;
+    grid-row: toolbar;
+    grid-column: side;
+    justify-self: start;
+  }
+  
+  .doc-file-browse #doc-file-search {
+    visibility: hidden;
+    grid-row: toolbar;
+    grid-column: central;
+    justify-self: start;
+  }
+  
+  .doc-file-browse #doc-file-nav {
+    grid-row: toolbar / span 2;
+    grid-column: side;
+  }
+  
+  .doc-file-browse #doc-file-dominos {
+    grid-row: toolbar / span 2;
+    grid-column: central;
+  }
+  
+  input[type="text"],
+  input[type="password"],
+  input[type="search"],
+  input[type="email"],
+  input[type="tel"],
+  input[type="date"] {
+    border: 1px solid #c9ced5;
+    line-height: 25px;
+    padding: 0 10px;
+    box-sizing: border-box;
+      height: 40px;
+      font-size: initial;
+  }
+  
+  button {
+    /* height: 40px; */
+    box-sizing: border-box;
+      border: none;
+      font-size: initial;
+      padding:9px 12px;
+  }
+  
+  .list-nav ul {
+    padding-left: 0;
+    font-size: 12pt;
+  }
+  
+  .list-nav li {
+    list-style: none;
+    margin: 9px;
+  }
+  
+  .list-nav ul li ul li {
+    margin-left: 12px;
+  }
+  
+  .list-nav li span {
+    padding: 3px 9px;
+    cursor: pointer;
+  }
+  
+  .list-nav li:not(.active) span:hover {
+    background: lightgray;
+  }
+  
+  .list-nav .active > span {
+    background: lightgray;
+    color: white;
+  }
+  
+  .domino-container {
+    display: flex;
+    flex-wrap: wrap;
+      justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
+  }
+  
+  .domino-item {
+    margin: 5px;
+    border: 1px solid #ebebeb;
+    width: 150px;
+    height: 80px;
+      background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat;
+      padding-left: 86px;
+      overflow: hidden;
+  }
+  
+  .domino-item h4 {
+      margin: 6px 0 ;
+      color: rgb(53, 53, 53);
+  }
+  .domino-item h4 span.extension {
+      color:gray;
+      font-size: 70%;
+  }
+  
+  .domino-item .subtitle {
+      color:gray;
+      font-size: 10pt;
+      margin: 0;
+  }
+  
+  .lb-footer {
+    padding: 1em;
+    justify-self: end;
+      overflow: hidden;
+  }
+  
+  
+  
+  
+  
+  
+  

public/index.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<link type="text/css" rel="stylesheet" href="css/main.css" />
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Document</title>
+</head>
+
+<body>
+	<div id="fake">
+		<img src="assets/fake-home.jpg" />
+	</div>
+	<div id="lbmod1" class="lb-mod softener">
+		<div class="lb-container">
+			<div class="lb-header">
+				<h2>Importer des documents</h2>
+				<a href="#" class="close-button"><img src="assets/closebutton.png"></a>
+				<div id="tabs-container">
+					<span></span>
+					<span class="active"><a href="">Parcourir son Espace Doc</a></span>
+					<span><a href="#">Intégrer un contenu externe</a></span>
+					<span><a href="#">Filmer depuis la caméra</a></span>
+					<span></span>
+				</div>
+			</div>
+			<div class="lb-body doc-file-browse">
+				<div id="doc-file-search">
+					<input type="search" placeholder="Rechercher" />
+					<button>🔍</button>
+				</div>
+				<div id="doc-file-viewmode">
+					<a href="#" class="active"></a>
+					<a href="#"></a>
+					<a href="#"></a>
+				</div>
+				<div id="doc-file-nav" class="list-nav scrollable">
+					<ul class="">
+						<li class="active">
+							<span>Mes documents</span>
+							<ul>
+								<li><span>Mes Images</span></li>
+								<li><span>Mes Enregistrements</span></li>
+								<li><span>Mes Vidéos</span></li>
+								<li><span>Mes Devoirs</span></li>
+								<li><span>Mes Archives</span></li>
+								<li><span>Mes Affaires</span></li>
+								<li><span>Mes Mots</span></li>
+								<li><span>Mes Classeurs</span></li>
+							</ul>
+						</li>
+						<li><span>Documents partagés</span></li>
+						<li><span>Documents des applis</span></li>
+					</ul>
+				</div>
+				<div id="doc-file-dominos" class="domino-container scrollable">
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Images</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Enregistrements</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Vidéos</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Devoirs</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Archives</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Affaires</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Mots</h4>
+					</div>
+					<div class="domino-item type-folder">
+						<h4 class="domino-title">Mes Classeurs</h3>
+					</div>
+					<div class="domino-item type-file">
+						<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h4>
+						<p class="subtitle">Fichier Word</p>
+					</div>
+					<div class="domino-item type-file">
+						<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h4>
+						<span class="subtitle">Fichier Excel</span>
+					</div>
+
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+					<div class="domino-item">
+						<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
+						<span class="subtitle">Fichier fichier</span>
+					</div>
+				</div>
+			</div>
+			<div class="lb-footer">
+				<button>Annuler</button>
+				<button>Ok</button>
+			</div>
+		</div>
+	</div>
+</body>
+</html>

public/juxtaposejs/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Juxtaposed Lightbox</title>
+</head>
+<body>
+    <div class="juxtapose" data-animate="true">
+        <img src="actual-screenshot1.jpg" alt="An image of the actual implementation" data-label="before">
+        <img src="poc-screenshot1.jpg" alt="An image of my prototype implementation" data-label="after">
+    </div>
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+</body>
+
+</html>

public/wireframe.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link type="text/css" rel="stylesheet" href="css/wireframe.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="lbmod1" class="lb-mod softener">
+      <div class="lb-container">
+        <div class="lb-header">
+					<h2><span class="text-ph">Importer des documents</span></h2>
+					<div class=" "><span class="text-ph close-button">x</span></div>
+          <div id="tabs-container">
+            <span></span>
+            <span class="active"><a href="#" class="text-ph">Onglet actif</a></span>
+            <span><a href="#" class="text-ph">Onglet 1</a></span>
+            <span><a href="#" class="text-ph">Onglet 2</a></span>
+            <span></span>
+          </div>
+        </div>
+        <div class="lb-body doc-file-browse">
+          <div id="doc-file-search">
+            <input type="search" placeholder="Rechercher" />
+            <button>🔍</button>
+          </div>
+          <div id="doc-file-viewmode">
+						<a href="#" class="active">Mosaïque</a>
+            <a href="#">Grille</a>
+            <a href="#">Liste</a>
+          </div>
+          <div id="doc-file-nav" class="list-nav scrollable ">
+            <ul class="">
+              <li class="active">
+                <span class="text-ph">Mes documents</span>
+                <ul>
+                  <li><span class="text-ph">Mes Images</span></li>
+                  <li><span class="text-ph">Mes Enregistrements</span></li>
+                  <li><span class="text-ph">Mes Vidéos</span></li>
+                  <li><span class="text-ph">Mes Devoirs</span></li>
+                  <li><span class="text-ph">Mes Archives</span></li>
+                  <li><span class="text-ph">Mes Affaires</span></li>
+                  <li><span class="text-ph">Mes Mots</span></li>
+                  <li><span class="text-ph">Mes Classeurs</span></li>
+                </ul>
+              </li>
+              <li><span class="text-ph">Un dossier racine</span></li>
+              <li><span class="text-ph">Un autre dossier racine</span></li>
+            </ul>
+          </div>
+          <div id="doc-file-dominos" class="domino-container scrollable">
+            <div class="domino-item type-folder">
+							<h4 class="domino-title text-ph">Mes Images</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Enregistrements</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Vidéos</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Devoirs</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Archives</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Affaires</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Mots</h4>
+            </div>
+            <div class="domino-item type-folder">
+              <h4 class="domino-title text-ph">Mes Classeurs</h3>
+            </div>
+            <div class="domino-item type-file">
+							<h4 class="domino-title text-ph">Consigne trigonométrie</h3>
+							<p class="subtitle text-ph">Fichier Word</p>
+
+						</div>
+            <div class="domino-item type-file">
+							<h4 class="domino-title text-ph">Suivit des notes</h3>
+							<span class="subtitle text-ph">Fichier Excel</span>
+		
+						</div>
+						<div class="domino-item">
+							<h4 class="domino-title text-ph">Dummy file</h3>
+							<span class="subtitle text-ph">Fichier fichier</span>
+						</div>
+          </div>
+        </div>
+        <div class="lb-footer">
+          <button>Annuler</button>
+          <button>Ok</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

resize-lightbox-poc.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <link type="text/css" rel="stylesheet" href="./resize-lightbox-poc.css" />
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <div id="fake">
-      <img src="./fake-home.jpg" />
-    </div>
-    <div id="lbmod1" class="lb-mod softener">
-      <div class="lb-container">
-        <div class="lb-header">
-					<h2>Importer des documents</h2>
-					<a href="" class="close-button"><img src="./assets/closebutton.png"></a>
-          <div id="tabs-container">
-            <span></span>
-            <span><a href="">Intégrer un contenu externe</a></span>
-            <span><a href="">Filmer depuis la caméra</a></span>
-            <span class="active"><a href="">Parcourir son Espace Doc</a></span>
-            <span></span>
-          </div>
-        </div>
-        <div class="lb-body doc-file-browse">
-          <div id="doc-file-search">
-            <input type="search" placeholder="Rechercher" />
-            <button>🔍</button>
-          </div>
-          <div id="doc-file-viewmode">
-						Vue :
-						<a href="" class="active">Mosaïque</a>
-            <a href="">Grille</a>
-            <a href="">Liste</a>
-          </div>
-          <div id="doc-file-nav" class="list-nav scrollable">
-            <ul class="">
-              <li class="active">
-                <span>Mes documents</span>
-                <ul>
-                  <li><span>Mes Images</span></li>
-                  <li><span>Mes Enregistrements</span></li>
-                  <li><span>Mes Vidéos</span></li>
-                  <li><span>Mes Devoirs</span></li>
-                  <li><span>Mes Archives</span></li>
-                  <li><span>Mes Affaires</span></li>
-                  <li><span>Mes Mots</span></li>
-                  <li><span>Mes Classeurs</span></li>
-                </ul>
-              </li>
-              <li><span>Documents partagés</span></li>
-              <li><span>Documents des applications</span></li>
-            </ul>
-          </div>
-          <div id="doc-file-dominos" class="domino-container scrollable">
-            <div class="domino-item type-folder">
-							<h4 class="domino-title">Mes Images</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Enregistrements</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Vidéos</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Devoirs</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Archives</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Affaires</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Mots</h4>
-            </div>
-            <div class="domino-item type-folder">
-              <h4 class="domino-title">Mes Classeurs</h3>
-            </div>
-            <div class="domino-item type-file">
-							<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h3>
-							<p class="subtitle">Fichier Word</p>
-
-						</div>
-            <div class="domino-item type-file">
-							<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h3>
-							<span class="subtitle">Fichier Excel</span>
-		
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-						<div class="domino-item">
-							<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
-							<span class="subtitle">Fichier fichier</span>
-						</div>
-          </div>
-        </div>
-        <div class="lb-footer">
-          <button>Annuler</button>
-          <button>Ok</button>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>