Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
865837a6ac | ||
|
fdbdcae7cd | ||
|
|
0dd3454003 |
@ -1,12 +0,0 @@
|
||||
# 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
|
||||
32
README.md
32
README.md
@ -2,10 +2,34 @@
|
||||
|
||||
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
|
||||
|
||||
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)
|
||||
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.
|
||||
|
||||
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/index.html)
|
||||
* [Wireframe showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe.html)
|
||||
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/juxtaposejs/)
|
||||
|
||||
💡 Note: On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize the viewport freely and easily.
|
||||
|
||||
## Gallery
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
|
||||
* Originals Design, Assets, Codes, Graphics: Open Digital Education
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="css/main.css" />
|
||||
<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>
|
||||
@ -10,18 +10,18 @@
|
||||
|
||||
<body>
|
||||
<div id="fake">
|
||||
<img src="assets/fake-home.jpg" />
|
||||
<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>
|
||||
<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 class="active"><a href="">Parcourir son Espace Doc</a></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,10 +18,10 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
button {
|
||||
font-family: "Comic Sans MS", "Chalkboard", "Comic Neue", cursive;
|
||||
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
|
||||
/* letter-spacing: -0.5px; */
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* The body of the fake website consist of a scrollable big picture */
|
||||
@ -100,10 +100,10 @@ button {
|
||||
|
||||
#tabs-container {
|
||||
display: flex;
|
||||
font-family: "Comic Sans MS", "Chalkboard", "Comic Neue", cursive;
|
||||
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
|
||||
/* letter-spacing: -0.5px; */
|
||||
overflow-x: auto;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#tabs-container a {
|
||||
@ -181,12 +181,12 @@ input {
|
||||
height: 40px;
|
||||
text-transform: initial;
|
||||
font-size: initial;
|
||||
font-family: Calibri, Mallanna, sans-serif;
|
||||
font-family: Calibri, Mallanna, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
#doc-file-viewmode a {
|
||||
background-image: linear-gradient(#fff, #e9ebef);
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
display: inline-block;
|
||||
@ -203,7 +203,7 @@ button {
|
||||
background-image: linear-gradient(#3889c1, #43b9e7);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
font-size: initial;
|
||||
padding:9px 12px;
|
||||
}
|
||||
@ -288,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") ;
|
||||
}
|
||||
|
||||
|
||||
@ -1,250 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
@ -1,19 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@ -1,100 +0,0 @@
|
||||
<!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>
|
||||
Loading…
x
Reference in New Issue
Block a user