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

premier commit en wireframes

Browse Source
This commit is contained in:
Simon Priet 2020-09-25 14:57:26 +02:00
parent b326cd669f
commit 1c22a67bbc
19 changed files with 69 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -4,24 +4,21 @@ Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign
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. 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.
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.
## Galeries d'images ## Galeries d'images
![Exemple de lightbox avec beaucoup de hauteur disponible](./com/Lightbox%201.png) ![Exemple de lightbox pouvant afficher tout son contenu dans l'espace disponible](./com/Frame%201.png)
![Exemple de lightbox avec pas mal de hauteur disponible](./com/Lightbox%202.png) ![Exemple de lightbox très grande](./com/Frame%202.png)
![Exemple de lightbox avec suffisamment de hauteur disponible](./com/Lightbox%203.png) ![Exemple de lightbox confortable](./com/Frame%203.png)
![Exemple de lightbox avec peu de hauteur disponible](./com/Lightbox%204.png) ![Exemple de lightbox étroite](./com/Frame%204.png)
![Exemple de lightbox avec étroitement peu de hauteur disponible](./com/Lightbox%205.png) ![Exemple de lightbox retrécie](./com/Frame%205.png)
![Exemple de lightbox avec insuffisamment de hauteur disponible](./com/Lightbox%206.png) ![Exemple de lightbox étriquée](./com/Frame%206.png)
## Crédits ## Crédits
* Polices : Microsoft, Apple * Polices : Mozilla
* Eléments graphiques : Open Digital Education
* Conception : Open Digital Education * Conception : 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/Frame 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
com/Frame 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
com/Frame 3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
com/Frame 4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
com/Frame 5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
com/Frame 6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 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

93
resize-lightbox-poc.css
View File

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

85
resize-lightbox-poc.html
View File

@ -7,19 +7,16 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div id="fake">
<img src="./fake-home.jpg" />
</div>
<div id="lbmod1" class="lb-mod softener"> <div id="lbmod1" class="lb-mod softener">
<div class="lb-container"> <div class="lb-container">
<div class="lb-header"> <div class="lb-header">
<h2>Importer des documents</h2> <h2><span class="text-ph">Importer des documents</span></h2>
<a href="" class="close-button"><img src="./assets/closebutton.png"></a> <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="">Intégrer un contenu externe</a></span> <span><a href="" class="text-ph">Onglet 1</a></span>
<span><a href="">Filmer depuis la caméra</a></span> <span><a href="" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="">Parcourir son Espace Doc</a></span> <span class="active"><a href="" class="text-ph">Onglet actif</a></span>
<span></span> <span></span>
</div> </div>
</div> </div>
@ -34,83 +31,63 @@
<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="">
<li class="active"> <li class="active">
<span>Mes documents</span> <span class="text-ph">Mes documents</span>
<ul> <ul>
<li><span>Mes Images</span></li> <li><span class="text-ph">Mes Images</span></li>
<li><span>Mes Enregistrements</span></li> <li><span class="text-ph">Mes Enregistrements</span></li>
<li><span>Mes Vidéos</span></li> <li><span class="text-ph">Mes Vidéos</span></li>
<li><span>Mes Devoirs</span></li> <li><span class="text-ph">Mes Devoirs</span></li>
<li><span>Mes Archives</span></li> <li><span class="text-ph">Mes Archives</span></li>
<li><span>Mes Affaires</span></li> <li><span class="text-ph">Mes Affaires</span></li>
<li><span>Mes Mots</span></li> <li><span class="text-ph">Mes Mots</span></li>
<li><span>Mes Classeurs</span></li> <li><span class="text-ph">Mes Classeurs</span></li>
</ul> </ul>
</li> </li>
<li><span>Documents partagés</span></li> <li><span class="text-ph">Un dossier racine</span></li>
<li><span>Documents des applications</span></li> <li><span class="text-ph">Un autre dossier racine</span></li>
</ul> </ul>
</div> </div>
<div id="doc-file-dominos" class="domino-container scrollable"> <div id="doc-file-dominos" class="domino-container scrollable">
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Images</h4> <h4 class="domino-title text-ph">Mes Images</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Enregistrements</h4> <h4 class="domino-title text-ph">Mes Enregistrements</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Vidéos</h4> <h4 class="domino-title text-ph">Mes Vidéos</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Devoirs</h4> <h4 class="domino-title text-ph">Mes Devoirs</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Archives</h4> <h4 class="domino-title text-ph">Mes Archives</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Affaires</h4> <h4 class="domino-title text-ph">Mes Affaires</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Mots</h4> <h4 class="domino-title text-ph">Mes Mots</h4>
</div> </div>
<div class="domino-item type-folder"> <div class="domino-item type-folder">
<h4 class="domino-title">Mes Classeurs</h3> <h4 class="domino-title text-ph">Mes Classeurs</h3>
</div> </div>
<div class="domino-item type-file"> <div class="domino-item type-file">
<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h3> <h4 class="domino-title text-ph">Consigne trigonométrie</h3>
<p class="subtitle">Fichier Word</p> <p class="subtitle text-ph">Fichier Word</p>
</div> </div>
<div class="domino-item type-file"> <div class="domino-item type-file">
<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h3> <h4 class="domino-title text-ph">Suivit des notes</h3>
<span class="subtitle">Fichier Excel</span> <span class="subtitle text-ph">Fichier Excel</span>
</div> </div>
<div class="domino-item"> <div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3> <h4 class="domino-title text-ph">Dummy file</h3>
<span class="subtitle">Fichier fichier</span> <span class="subtitle text-ph">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>
</div> </div>