commit a93308b533041d69724b5ff84eb8ef7239081bfe Author: Simon Priet Date: Fri Sep 25 13:32:04 2020 +0200 git init + premier lot diff --git a/assets/closebutton.png b/assets/closebutton.png new file mode 100644 index 0000000..c318184 Binary files /dev/null and b/assets/closebutton.png differ diff --git a/assets/folder-large.png b/assets/folder-large.png new file mode 100644 index 0000000..bea047b Binary files /dev/null and b/assets/folder-large.png differ diff --git a/assets/unknown-large.png b/assets/unknown-large.png new file mode 100644 index 0000000..744fb6e Binary files /dev/null and b/assets/unknown-large.png differ diff --git a/com/Lightbox 1.png b/com/Lightbox 1.png new file mode 100644 index 0000000..139a5d0 Binary files /dev/null and b/com/Lightbox 1.png differ diff --git a/com/Lightbox 2.png b/com/Lightbox 2.png new file mode 100644 index 0000000..3b09b49 Binary files /dev/null and b/com/Lightbox 2.png differ diff --git a/com/Lightbox 3.png b/com/Lightbox 3.png new file mode 100644 index 0000000..cef8843 Binary files /dev/null and b/com/Lightbox 3.png differ diff --git a/com/Lightbox 4.png b/com/Lightbox 4.png new file mode 100644 index 0000000..684638e Binary files /dev/null and b/com/Lightbox 4.png differ diff --git a/com/Lightbox 5.png b/com/Lightbox 5.png new file mode 100644 index 0000000..612b5fb Binary files /dev/null and b/com/Lightbox 5.png differ diff --git a/com/Lightbox 6.png b/com/Lightbox 6.png new file mode 100644 index 0000000..d675c32 Binary files /dev/null and b/com/Lightbox 6.png differ diff --git a/fake-home.jpg b/fake-home.jpg new file mode 100644 index 0000000..08eaf52 Binary files /dev/null and b/fake-home.jpg differ diff --git a/resize-lightbox-poc.css b/resize-lightbox-poc.css new file mode 100644 index 0000000..fbc9268 --- /dev/null +++ b/resize-lightbox-poc.css @@ -0,0 +1,288 @@ +/* Faking a real website */ + +html { + height: 100%; +} + +body { + background-color: rgb(236, 236, 236); + margin: 0; + min-height: 100%; + box-sizing: border-box; + font-family: Calibri, "Segoe UI", sans-serif; +} + +h1, +h2, +h3, +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 */ + +#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", Candara, sans-serif; + letter-spacing: -0.5px; + overflow-x: auto; +} + +#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[type="text"], +input[type="password"], +input[type="search"], +input[type="email"], +input[type="tel"], +input[type="date"] { + 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, "Segoe UI", sans-serif; +} + +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; +} + +.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; +} + +.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; + 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") ; +} + + + + diff --git a/resize-lightbox-poc.html b/resize-lightbox-poc.html new file mode 100644 index 0000000..5605d39 --- /dev/null +++ b/resize-lightbox-poc.html @@ -0,0 +1,124 @@ + + + + + + + Document + + +
+ +
+
+
+
+

Importer des documents

+ + +
+
+ +
+ Vue : + Mosaïque + Grille + Liste +
+
+
    +
  • + Mes documents +
      +
    • Mes Images
      • +
    • Mes Enregistrements
      • +
    • Mes Vidéos
      • +
    • Mes Devoirs
      • +
    • Mes Archives
      • +
    • Mes Affaires
      • +
    • Mes Mots
      • +
    • Mes Classeurs
      • +
    +
    • +
  • Documents partagés
    • +
  • Documents des applications
    • +
+
+
+
+

Mes Images

+
+
+

Mes Enregistrements

+
+
+

Mes Vidéos

+
+
+

Mes Devoirs

+
+
+

Mes Archives

+
+
+

Mes Affaires

+
+
+

Mes Mots

+
+
+

Mes Classeurs

+
+
+

Consigne trigonométrie pythagore docs

+

Fichier Word

+ +
+
+

Suivit des notes XLSX

+ Fichier Excel + +
+
+

Dummy file file

+ Fichier fichier +
+
+

Dummy file file

+ Fichier fichier +
+
+

Dummy file file

+ Fichier fichier +
+
+

Dummy file file

+ Fichier fichier +
+
+

Dummy file file

+ Fichier fichier +
+
+

Dummy file file

+ Fichier fichier +
+
+
+
+ + +
+
+
+ +