ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

Compare commits

base: ODE:0.1
Branches Tags
ODE:master ODE:pages ODE:frame-only
ODE:1.0.0 ODE:0.1
..
compare: ODE:frame-only
Branches Tags
ODE:pages ODE:frame-only ODE:master
ODE:1.0.0 ODE:0.1

6 Commits
0.1 ... frame-only

Author SHA1 Message Date
Simon
afbb2fbcb2 Update README.md 2021-08-10 12:06:40 +00:00
Thoscellen
a9172b1b7a feat: 🚧 prepare stuff for exposing the frame-only branch 2021-08-09 19:23:45 +02:00
Thoscellen
84f6aeb129 chore: ♻️ manual forward of the wireframe branch to master state. 2021-08-09 19:13:41 +02:00
Thomas d'Alexis
4ea38804a5 fix la mention "Pocket" 
Ce travaille ne s'appuie pas sur l'appli Pocket.
 2021-01-27 13:55:35 +00:00
Simon Priet
1c22a67bbc premier commit en wireframes 2020-09-25 14:57:26 +02:00
Simon Priet
b326cd669f added credits in readme 2020-09-25 13:51:36 +02:00
20 changed files with 146 additions and 207 deletions
Expand all files Collapse all files

27
README.md
View File

@@ -1,26 +1,27 @@
# Lightbox Remastered
Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign des lightbox utilisés dans One et Neo. 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 viewing the frame-only branch. This branch feature a wireframe version of this prototype.
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/wireframe.html)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
## Galeries d'images
## Gallery
![Exemple de lightbox avec beaucoup de hauteur disponible](./com/Lightbox%201.png)
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png)
![Exemple de lightbox avec pas mal de hauteur disponible](./com/Lightbox%202.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png)
![Exemple de lightbox avec suffisamment de hauteur disponible](./com/Lightbox%203.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png)
![Exemple de lightbox avec peu de hauteur disponible](./com/Lightbox%204.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png)
![Exemple de lightbox avec étroitement peu de hauteur disponible](./com/Lightbox%205.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png)
![Exemple de lightbox avec insuffisamment de hauteur disponible](./com/Lightbox%206.png)
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
## Credits
* Polices : Microsoft, Apple
* Conception : Open Digital Education
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education

BIN
assets/closebutton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
assets/folder-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
assets/unknown-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
com/Lightbox 1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 398 KiB

BIN
com/Lightbox 2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 233 KiB

BIN
com/Lightbox 3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 193 KiB

BIN
com/Lightbox 4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 154 KiB

BIN
com/Lightbox 5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 143 KiB

BIN
com/Lightbox 6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
fake-home.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 176 KiB

101
lightbox-wireframe.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./main.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><a href="#" class="text-ph">Onglet 1</a></span>
<span><a href="#" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="#" class="text-ph">Onglet actif</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 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>

101
resize-lightbox-poc.css → main.css
View File

@@ -9,18 +9,11 @@ body {
margin: 0;
min-height: 100%;
box-sizing: border-box;
font-family: Calibri, "Segoe UI", sans-serif;
}
h1,
h2,
h3,
h4,
button {
font-family: "Chalkboard", Candara, sans-serif;
letter-spacing: -0.5px;
text-transform: uppercase;
font-weight: normal;
.text-ph {
background-color: rgb(236, 236, 236);
color: transparent !important;
}
/* The body of the fake website consist of a scrollable big picture */
@@ -48,27 +41,24 @@ button {
/* overflow: auto; */
z-index: 10;
}
/*
.softener {
/* backdrop-filter: blur(5px); */
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
}
} */
/* lightbox itself */
.lb-container {
display: grid;
margin: 5em auto;
margin: 5em;
grid-template-rows: min-content auto min-content;
position: static;
z-index: 11;
max-width: 1030px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
0 8px 16px rgba(0, 0, 0, 0.11);
/* background-color: white; */
/*border: 1px solid white;*/
border-radius: 1em;
background-color: white;
border: 1px solid lightgray;
border-radius: 1em;
}
.scrollable {
@@ -76,43 +66,35 @@ button {
}
.lb-header {
background: white;
backdrop-filter: blur(10px);
border-radius: 1em 1em 0 0;
position: relative;
}
.lb-header h2 {
margin: 0.5em 1em;
color: rgb(56, 137, 193);
overflow: hidden;
}
.lb-header .close-button {
position: absolute;
position: absolute;
right:.5em;
top:.5em;
}
.close-button img {
height: 30px;
width: 30px;
top:.5em;
width: 20px;
height: 20px;
}
#tabs-container {
display: flex;
font-family: "Chalkboard", Candara, sans-serif;
letter-spacing: -0.5px;
overflow-x: auto;
}
#tabs-container a {
text-decoration: none;
color: rgb(56, 137, 193);
}
#tabs-container > span.active a {
/* #tabs-container > span.active a {
color: rgb(255, 141, 46);
}
} */
#tabs-container > span {
flex-grow: 1;
@@ -126,15 +108,13 @@ button {
flex-grow: 1;
min-width: min-content;
text-align: center;
border-radius: 0.5em 0.5em 0 0;
border: 1px solid lightgray;
border-top: 2px solid rgb(255, 141, 46);
border-bottom: none;
background-color: white;
}
.lb-body {
padding: 1em;
/* padding: 1em; */
padding-bottom: 0;
/* max-height: 350px; */
max-height: calc(100vh - 10em - 200px);
@@ -150,24 +130,26 @@ button {
}
.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: main;
grid-row: toolbar / span 2;
grid-column: side;
}
.doc-file-browse #doc-file-dominos {
grid-row: main;
grid-row: toolbar / span 2;
grid-column: central;
}
@@ -177,24 +159,18 @@ input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"] {
border-radius: 5px;
border: 1px solid #c9ced5;
line-height: 25px;
padding: 0 10px;
box-sizing: border-box;
height: 40px;
text-transform: initial;
font-size: initial;
font-family: Calibri, "Segoe UI", sans-serif;
}
button {
/* height: 40px; */
box-sizing: border-box;
background-image: linear-gradient(#3889c1, #43b9e7);
color: #fff;
border: none;
border-radius: 15px;
font-size: initial;
padding:9px 12px;
}
@@ -214,17 +190,16 @@ button {
}
.list-nav li span {
border-radius: 4px;
padding: 3px 9px;
cursor: pointer;
}
.list-nav li:not(.active) span:hover {
background-image: linear-gradient(#fff, #e9ebef);
background: lightgray;
}
.list-nav .active > span {
background-image: linear-gradient(#3889c1, #43b9e7);
background: lightgray;
color: white;
}
@@ -232,30 +207,26 @@ button {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.domino-item {
margin: 5px;
border: 1px solid lightgray;
border: 1px solid #ebebeb;
width: 150px;
height: 80px;
background: url(https://via.placeholder.com/80) no-repeat;
background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat;
padding-left: 86px;
border-radius: 8px;
overflow: hidden;
}
.domino-item h4 {
text-transform: initial;
font-family: Calibri, "Segoe UI", sans-serif;
letter-spacing: initial;
margin: 6px 0 ;
color: rgb(53, 53, 53);
}
.domino-item h4 span.extension {
color:gray;
text-transform: uppercase;
font-size: 70%;
}
@@ -267,22 +238,12 @@ button {
.lb-footer {
padding: 1em;
justify-self: end;
overflow: hidden;
background-color: white;
backdrop-filter: blur(20px);
border-radius: 0 0 1em 1em;
}
.type-folder {
border: 1px solid #efdd77;
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") ;
}

BIN
public/readme_assets/Frame 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/readme_assets/Frame 4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/readme_assets/Frame 5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/readme_assets/Frame 6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

124
resize-lightbox-poc.html
View File

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