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

Compare commits

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

No commits in common. "master" and "0.1" have entirely different histories.
master ... 0.1

11 changed files with 157 additions and 255 deletions
Show Stats Expand all files Collapse all files

43
README.md
View File

@ -1,35 +1,26 @@
# Lightbox Remastered # Lightbox Remastered
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/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 small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI. 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.
The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width. 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.
This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product. ## Galeries d'images
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/) ![Exemple de lightbox avec beaucoup de hauteur disponible](./com/Lightbox%201.png)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/juxtaposejs/) ![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)
## Gallery * Polices : Microsoft, Apple
* Conception : Open Digital Education
![Example of a full ranged lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%201.png)
![Example of a comfty lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%202.png)
![Example of a neat lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%203.png)
![Example of a tight lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%204.png)
![Example of a narrow lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%205.png)
![Example of a cramped lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%206.png)
## Credits
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education

BIN
com/Lightbox 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

BIN
com/Lightbox 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
com/Lightbox 3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
com/Lightbox 4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
com/Lightbox 5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
com/Lightbox 6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

0
assets/fake-home.jpg → fake-home.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 176 KiB

200
lightbox-demo.html
View File

@ -1,200 +0,0 @@
<!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="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><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">
<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>

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

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

124
resize-lightbox-poc.html Normal file
View File

@ -0,0 +1,124 @@
<!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>