chore: ♻️ manual forward of the wireframe branch to master state.
Thoscellen
30
README.md
@ -1,24 +1,32 @@
|
|||||||
# Lightbox Remastered
|
# 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.
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
|
||||||
|
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/sliderjs/)
|
||||||
|
|
||||||
## Galeries d'images
|
## Galeries d'images
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Crédits
|
## Credits
|
||||||
|
|
||||||
* Polices : Mozilla
|
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
|
||||||
* Conception : Open Digital Education
|
* Originals Design, Assets, Codes, Graphics: Open Digital Education
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link type="text/css" rel="stylesheet" href="./resize-lightbox-poc.css" />
|
<link type="text/css" rel="stylesheet" href="./main.css" />
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
@ -14,9 +14,9 @@
|
|||||||
<div class=" "><span class="text-ph close-button">x</span></div>
|
<div class=" "><span class="text-ph close-button">x</span></div>
|
||||||
<div id="tabs-container">
|
<div id="tabs-container">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span><a href="" class="text-ph">Onglet 1</a></span>
|
<span><a href="#" class="text-ph">Onglet 1</a></span>
|
||||||
<span><a href="" class="text-ph">Onglet 2</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 class="active"><a href="#" class="text-ph">Onglet actif</a></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,9 +27,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="doc-file-viewmode">
|
<div id="doc-file-viewmode">
|
||||||
Vue :
|
Vue :
|
||||||
<a href="" class="active">Mosaïque</a>
|
<a href="#" class="active">Mosaïque</a>
|
||||||
<a href="">Grille</a>
|
<a href="#">Grille</a>
|
||||||
<a href="">Liste</a>
|
<a href="#">Liste</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="doc-file-nav" class="list-nav scrollable ">
|
<div id="doc-file-nav" class="list-nav scrollable ">
|
||||||
<ul class="">
|
<ul class="">
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |