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

ci: ♻️ Moved out main code (css, assets and html) to the home repo to make it more accessible. Edited the pipeline to move them in public for Pages.

Browse Source
This commit is contained in:
Thoscellen
2021-08-09 17:58:14 +02:00
parent d8da2a8010
commit 52b1983d1d
7 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/closebutton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/assets/fake-home.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 176 KiB

BIN
public/assets/folder-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/assets/unknown-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

200
public/index.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>

301
public/main.css
View File

@@ -1,301 +0,0 @@
/* 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 {
height: 100%;
}
body {
background-color: rgb(236, 236, 236);
margin: 0;
min-height: 100%;
box-sizing: border-box;
font-family: Calibri, Mallanna, sans-serif;
}
h1,
h2,
h3,
button {
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
/* letter-spacing: -0.5px; */
text-transform: uppercase;
font-weight: 700;
}
/* 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 auto;
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;
}
.scrollable {
overflow-y: scroll;
}
.lb-header {
background: white;
backdrop-filter: blur(10px);
border-radius: 1em 1em 0 0;
}
.lb-header h2 {
margin: 0.5em 1em;
color: rgb(56, 137, 193);
overflow: hidden;
}
.lb-header .close-button {
position: absolute;
right:.5em;
top:.5em;
}
.close-button img {
height: 30px;
width: 30px;
}
#tabs-container {
display: flex;
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
/* letter-spacing: -0.5px; */
overflow-x: auto;
font-weight: 600;
}
#tabs-container a {
text-decoration: none;
color: rgb(56, 137, 193);
}
#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-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-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 {
grid-row: toolbar;
grid-column: side;
justify-self: start;
}
.doc-file-browse #doc-file-search {
grid-row: toolbar;
grid-column: central;
justify-self: start;
}
.doc-file-browse #doc-file-nav {
grid-row: main;
grid-column: side;
}
.doc-file-browse #doc-file-dominos {
grid-row: main;
grid-column: central;
}
input {
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, Mallanna, "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 {
/* 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;
}
.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 {
border-radius: 4px;
padding: 3px 9px;
cursor: pointer;
height: 100%;
}
.list-nav li:not(.active) span:hover {
background-image: linear-gradient(#fff, #e9ebef);
}
.list-nav .active > span {
background-image: linear-gradient(#3889c1, #43b9e7);
color: white;
}
.domino-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
}
.domino-item {
margin: 5px;
border: 1px solid lightgray;
width: 150px;
height: 80px;
background: url(https://via.placeholder.com/80) no-repeat;
padding-left: 86px;
border-radius: 8px;
overflow: hidden;
}
.domino-item h4 {
text-transform: initial;
/* font-family: Calibri, "Segoe UI", sans-serif; */
font-weight: normal;
font-size: 11pt;
letter-spacing: initial;
margin: 6px 0 ;
color: rgb(53, 53, 53);
}
.domino-item h4 span.extension {
color:gray;
text-transform: uppercase;
font-size: 70%;
}
.domino-item .subtitle {
color:gray;
font-size: 10pt;
margin: 0;
}
.lb-footer {
padding: 1em;
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") ;
}