From 61dc134df13616956b6266de07c165192b7d0dee Mon Sep 17 00:00:00 2001
From: Paco <>
Date: Fri, 6 Nov 2020 15:20:26 +0100
Subject: [PATCH] [Whiteboard] Homepage update: flexbox, colors, Web 2.0
---
pica-whiteboard/default.css | 173 ++++++++++--------
pica-whiteboard/index.html | 340 ++++++++++++++++++------------------
2 files changed, 274 insertions(+), 239 deletions(-)
diff --git a/pica-whiteboard/default.css b/pica-whiteboard/default.css
index 8e8f40ed..8be587f4 100644
--- a/pica-whiteboard/default.css
+++ b/pica-whiteboard/default.css
@@ -1,127 +1,154 @@
+/* INIT */
*{
margin: 0;
box-sizing: border-box;
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ text-align: center;
}
+:root {
+ --background: #303030;
+ --background-darker: #272727;
+ --background-lighter: #333333;
+ --background-header: #18684D;
+ --background-warning: #8C2424;
+ --color: #DDDDDD;
+}
+
+.flex-center-column {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.flex-row-spacearound {
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+}
+
+.margin-small {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+.margin-medium {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.margin-big {
+ margin-top: 4em;
+ margin-bottom: 4em;
+}
+
+/* SPECIFIC */
+
body{
- background-color: #303030;
- color: white;
+ background-color: var(--background);
+ color: var(--color);
+ font-size: 1.2em;
}
header{
- background-color: #1B7A5A;
+ background-color: var(--background-header);
padding: 5px;
padding-top: 10px;
- text-align: center;
-}
-
-.logo{
- display: block;
- margin-top: 1em;
- margin-left: auto;
- margin-right: auto;
- width: 8em;
}
header h1{
display: inline;
}
-.warning{
- background-color: #FFC0C0;
- margin: auto;
- margin-top: 25px;
- margin-bottom: 25px;
- padding: 10px;
- color: #FF0000;
- border-radius: 10px;
- width: 40%;
- border: solid red 1px;
- text-align: center;
+article{
+ width: 100%;
}
-.createForm{
- display: block;
- margin: auto;
- width: 40%;
- text-align: center;
+.logo{
+ width: 9em;
+}
+
+.main-center{
+ width: 85%;
+ max-width: 640px;
}
-label{
- display: block;
- margin: 5px;
+.warning{
+ padding: 15px;
+ background-color: var(--background-warning);
+ border-radius: 10px;
}
input[type="text"]{
- margin: 5px;
border: none;
border-radius: 5px;
width: 100%;
height: 3em;
}
-.create {
- display: flex;
- width: 100%
-}
-
-.child {
- flex: 50%;
- padding-right: 10px;
-}
-
-#randomName, input[type="submit"]{
+.buttons * {
padding: 20px;
- margin: 20px;
- color: white;
- background-color: #00AFEF;
- width: 100%;
+ color: var(--color);
+ font-size: 1em;
+ background-color: #075C7B;
+ width: 11em;
+ max-width: 48%;
border: none;
border-radius: 10px;
- transition: 0.5s;
+ transition: 0.2s;
font-weight: bold;
+ text-decoration: none;
}
-input[type="submit"]:hover, .randomName:hover{
- background-color: #00BFFF;
+.buttons *:hover{
+ background-color: #077299;
}
-h1{
- padding: 20px;
- text-align: center;
- padding-left: 40px;
+footer a {
+ color: #CCCCCC;
+ text-decoration: underline;
+ margin: 0 10px;
}
-a{
- color: #FFFFFF;
- text-decoration: none;
+#help{
+ display: none;
}
-.helpLink a:hover{
- background-color: #00BFFF;
+#help:target{
+ display: flex;
+ align-items: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
}
-p{
- padding: 5px;
+#help thead tr th {
+ padding-bottom: 10px;
}
-#help{
- display: none;
+#help tr.odd {
+ background-color: var(--background-lighter);
}
-#help:target{
- display: block;
- width: 70%;
- margin: auto;
+#help tr.even {
+ background-color: var(--background-darker);
}
-#footer {
- text-align: center;
+#help td, #help th {
+ text-align: left;
+ padding: 5px 20px 5px 5px;
}
-#footer a {
- color: #C0C0C0;
- text-decoration: underline;
- margin: 0 10px;
+#help td:nth-child(1), #help th:nth-child(1) {
+ font-weight: bold;
+ width: 28vw;
+ max-width: 280px;
}
+
+#help td:nth-child(2), #help th:nth-child(2),
+#help td:nth-child(3), #help th:nth-child(3) {
+ width: 28vw;
+ max-width: 220px;
+}
+
diff --git a/pica-whiteboard/index.html b/pica-whiteboard/index.html
index 96db374b..f7285848 100644
--- a/pica-whiteboard/index.html
+++ b/pica-whiteboard/index.html
@@ -3,280 +3,288 @@
<head>
<title>Whiteboard Picasoft</title>
<meta charset="utf-8" />
+ <link rel="stylesheet" type="text/css" href="default.css" />
</head>
+
<body>
<header>
<h1>Whiteboard de Picasoft</h1>
- <link rel="stylesheet" type="text/css" href="default.css" />
</header>
- <img class="logo" src="picasoft-logo-whiteboard.png" alt="Logo de Picasoft" />
- <div class="warning">
- <p>
- Attention, le contenu des tableaux est réinitialisé chaque nuit (à minuit) ! <br/>Pensez à exporter votre tableau une fois votre séance terminée.
- </p>
- </div>
+ <article class="flex-center-column" >
+ <img
+ src="picasoft-logo-whiteboard.png"
+ alt="Logo de Picasoft"
+ class="logo margin-small"
+ />
- <h1>Créer un tableau</h1>
- <div class="createForm">
- <form action="https://board.picasoft.net/app/" method="GET">
- <label for="name">Nom du tableau</label><br />
- <input type="text" id="id" name="whiteboardid" /><br />
- <label for="username"><i>Nom d'utilisateur (optionnel)</i></label><br />
- <input type="text" id="username" name="username" /><br />
- <div class="create">
- <div class="child">
- <input type="submit" />
- </div class="child">
- <div class="child" id="randomName">
- <a href="https://board.picasoft.net/app/?randomid=true">Au hasard !</a>
- </div>
- </div>
- </form>
- </div>
- <p id="footer">
- <a href="#help">Montrer l'aide</a>
- <a class="child" href="https://picasoft.net/co/cgu.html">CGU</a>
- </p>
+ <p class="warning main-center margin-medium">
+ Attention, le contenu des tableaux est réinitialisé chaque nuit (à minuit) ! <br/>
+ Pensez à exporter votre tableau une fois votre séance terminée.
+ </p>
+
+ <h2 class="margin-small" >Créer un tableau</h2>
+ <form
+ class="flex-center-column main-center margin-small"
+ action="https://board.picasoft.net/app/" method="GET"
+ >
+ <label class="margin-small" for="name">Nom du tableau</label>
+ <input class="margin-small" type="text" id="id" name="whiteboardid" />
+ <label class="margin-small" for="username">Nom d'utilisateur <i>(optionnel)</i></label>
+ <input class="margin-small" type="text" id="username" name="username" />
- <div id="help">
+ <div class="buttons flex-row-spacearound margin-medium">
+ <input type="submit" value="Lancer le board"/>
+ <a href="https://board.picasoft.net/app/?randomid=true">Au hasard !</a>
+ </div>
+ </form>
+
+ <footer class="main-center flex-row-spacearound margin-medium">
+ <a href="#help">Montrer l'aide</a>
+ <a class="child" href="https://picasoft.net/co/cgu.html">CGU</a>
+ </footer>
+
+ </article>
+
+ <div id="help" class="margin-big flex-center-column">
<h2>Quelques raccourcis usuels</h2>
- <table>
+ <table class="margin-medium">
<thead>
<tr class="header">
- <th style="text-align: left;">Result</th>
- <th style="text-align: left;">Windows and Linux</th>
- <th style="text-align: left;">macOS</th>
+ <th>Result</th>
+ <th>Windows and Linux</th>
+ <th>macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
- <td style="text-align: left;">Clear the whiteboard</td>
- <td style="text-align: left;">Ctrl + Shift + Z</td>
- <td style="text-align: left;">Command + Shift + Z</td>
+ <td>Clear the whiteboard</td>
+ <td>Ctrl + Shift + Z</td>
+ <td>Cmd + Shift + Z</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Undo your last step</td>
- <td style="text-align: left;">Ctrl + Z</td>
- <td style="text-align: left;">Command + Z</td>
+ <td>Undo your last step</td>
+ <td>Ctrl + Z</td>
+ <td>Cmd + Z</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Redo your last undo</td>
- <td style="text-align: left;">Ctrl + Y</td>
- <td style="text-align: left;">Command + Y</td>
+ <td>Redo your last undo</td>
+ <td>Ctrl + Y</td>
+ <td>Cmd + Y</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Increase thickness</td>
- <td style="text-align: left;">Ctrl + Up Arrow</td>
- <td style="text-align: left;">Command + Up Arrow</td>
+ <td>Increase thickness</td>
+ <td>Ctrl + Up Arrow</td>
+ <td>Cmd + Up Arrow</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Decrease thickness</td>
- <td style="text-align: left;">Ctrl + Down Arrow</td>
- <td style="text-align: left;">Command + Down Arrow</td>
+ <td>Decrease thickness</td>
+ <td>Ctrl + Down Arrow</td>
+ <td>Cmd + Down Arrow</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Set a color</td>
- <td style="text-align: left;">Ctrl + Shift + 1,2,3,4,5</td>
- <td style="text-align: left;">Command + Shift + 1,2,3,4,5</td>
+ <td>Set a color</td>
+ <td>Ctrl + Shift + 1,2,3,4,5</td>
+ <td>Cmd + Shift + 1,2,3,4,5</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Toggle between main clolors</td>
- <td style="text-align: left;">Ctrl + Shift + R</td>
- <td style="text-align: left;">Command + Shift + R</td>
+ <td>Toggle between main colors</td>
+ <td>Ctrl + Shift + R</td>
+ <td>Cmd + Shift + R</td>
</tr>
</tbody>
</table>
+
<h2>Tous les raccourcis</h2>
- <table>
+ <table class="margin-medium">
<thead>
<tr class="header">
- <th style="text-align: left;">Result</th>
- <th style="text-align: left;">Windows and Linux</th>
- <th style="text-align: left;">macOS</th>
+ <th>Result</th>
+ <th>Windows and Linux</th>
+ <th>macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
- <td style="text-align: left;">Clear the whiteboard</td>
- <td style="text-align: left;">Ctrl + Shift + Z</td>
- <td style="text-align: left;">Command + Shift + Z</td>
+ <td>Clear the whiteboard</td>
+ <td>Ctrl + Shift + Z</td>
+ <td>Cmd + Shift + Z</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Undo your last step</td>
- <td style="text-align: left;">Ctrl + Z</td>
- <td style="text-align: left;">Command + Z</td>
+ <td>Undo your last step</td>
+ <td>Ctrl + Z</td>
+ <td>Cmd + Z</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Redo your last undo</td>
- <td style="text-align: left;">Ctrl + Y</td>
- <td style="text-align: left;">Command + Y</td>
+ <td>Redo your last undo</td>
+ <td>Ctrl + Y</td>
+ <td>Cmd + Y</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Select an area</td>
- <td style="text-align: left;">Ctrl + X</td>
- <td style="text-align: left;">Command + X</td>
+ <td>Select an area</td>
+ <td>Ctrl + X</td>
+ <td>Cmd + X</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Take the mouse</td>
- <td style="text-align: left;">Ctrl + M</td>
- <td style="text-align: left;">Command + M</td>
+ <td>Take the mouse</td>
+ <td>Ctrl + M</td>
+ <td>Cmd + M</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Take the pen</td>
- <td style="text-align: left;">Ctrl + P</td>
- <td style="text-align: left;">Command + P</td>
+ <td>Take the pen</td>
+ <td>Ctrl + P</td>
+ <td>Cmd + P</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Draw a line</td>
- <td style="text-align: left;">Ctrl + L</td>
- <td style="text-align: left;">Command + L</td>
+ <td>Draw a line</td>
+ <td>Ctrl + L</td>
+ <td>Cmd + L</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Draw a rectangle</td>
- <td style="text-align: left;">Ctrl + R</td>
- <td style="text-align: left;">Command + R</td>
+ <td>Draw a rectangle</td>
+ <td>Ctrl + R</td>
+ <td>Cmd + R</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Draw a circle</td>
- <td style="text-align: left;">Ctrl + C</td>
- <td style="text-align: left;">Command + C</td>
+ <td>Draw a circle</td>
+ <td>Ctrl + C</td>
+ <td>Cmd + C</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Toggle between line, rect, circ</td>
- <td style="text-align: left;">Ctrl + Shift + F</td>
- <td style="text-align: left;">Command + Shift + F</td>
+ <td>Toggle between line, rect, circ</td>
+ <td>Ctrl + Shift + F</td>
+ <td>Cmd + Shift + F</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Toggle between pen and eraser</td>
- <td style="text-align: left;">Ctrl + Shift + X</td>
- <td style="text-align: left;">Command + Shift + X</td>
+ <td>Toggle between pen and eraser</td>
+ <td>Ctrl + Shift + X</td>
+ <td>Cmd + Shift + X</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Toggle between main clolors</td>
- <td style="text-align: left;">Ctrl + Shift + R</td>
- <td style="text-align: left;">Command + Shift + R</td>
+ <td>Toggle between main clolors</td>
+ <td>Ctrl + Shift + R</td>
+ <td>Cmd + Shift + R</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Write text</td>
- <td style="text-align: left;">Ctrl + A</td>
- <td style="text-align: left;">Command + A</td>
+ <td>Write text</td>
+ <td>Ctrl + A</td>
+ <td>Cmd + A</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Take the eraser</td>
- <td style="text-align: left;">Ctrl + E</td>
- <td style="text-align: left;">Command + E</td>
+ <td>Take the eraser</td>
+ <td>Ctrl + E</td>
+ <td>Cmd + E</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Increase thickness</td>
- <td style="text-align: left;">Ctrl + Up Arrow</td>
- <td style="text-align: left;">Command + Up Arrow</td>
+ <td>Increase thickness</td>
+ <td>Ctrl + Up Arrow</td>
+ <td>Cmd + Up Arrow</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Decrease thickness</td>
- <td style="text-align: left;">Ctrl + Down Arrow</td>
- <td style="text-align: left;">Command + Down Arrow</td>
+ <td>Decrease thickness</td>
+ <td>Ctrl + Down Arrow</td>
+ <td>Cmd + Down Arrow</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Colorpicker</td>
- <td style="text-align: left;">Ctrl + Shift + C</td>
- <td style="text-align: left;">Command + Shift + C</td>
+ <td>Colorpicker</td>
+ <td>Ctrl + Shift + C</td>
+ <td>Cmd + Shift + C</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Set black color</td>
- <td style="text-align: left;">Ctrl + Shift + 1</td>
- <td style="text-align: left;">Command + Shift + 1</td>
+ <td>Set black color</td>
+ <td>Ctrl + Shift + 1</td>
+ <td>Cmd + Shift + 1</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Set blue color</td>
- <td style="text-align: left;">Ctrl + Shift + 2</td>
- <td style="text-align: left;">Command + Shift + 2</td>
+ <td>Set blue color</td>
+ <td>Ctrl + Shift + 2</td>
+ <td>Cmd + Shift + 2</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Set green color</td>
- <td style="text-align: left;">Ctrl + Shift + 3</td>
- <td style="text-align: left;">Command + Shift + 3</td>
+ <td>Set green color</td>
+ <td>Ctrl + Shift + 3</td>
+ <td>Cmd + Shift + 3</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Set yellow color</td>
- <td style="text-align: left;">Ctrl + Shift + 4</td>
- <td style="text-align: left;">Command + Shift + 4</td>
+ <td>Set yellow color</td>
+ <td>Ctrl + Shift + 4</td>
+ <td>Cmd + Shift + 4</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Set red color</td>
- <td style="text-align: left;">Ctrl + Shift + 5</td>
- <td style="text-align: left;">Command + Shift + 5</td>
+ <td>Set red color</td>
+ <td>Ctrl + Shift + 5</td>
+ <td>Cmd + Shift + 5</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Save whiteboard as image</td>
- <td style="text-align: left;">Ctrl + S</td>
- <td style="text-align: left;">Command + S</td>
+ <td>Save whiteboard as image</td>
+ <td>Ctrl + S</td>
+ <td>Cmd + S</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Save whiteboard as JSON</td>
- <td style="text-align: left;">Ctrl + Shift + K</td>
- <td style="text-align: left;">Command + Shift + K</td>
+ <td>Save whiteboard as JSON</td>
+ <td>Ctrl + Shift + K</td>
+ <td>Cmd + Shift + K</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Save whiteboard to WebDav</td>
- <td style="text-align: left;">Ctrl + Shift + I (i)</td>
- <td style="text-align: left;">Command + Shift + I (i)</td>
+ <td>Save whiteboard to WebDav</td>
+ <td>Ctrl + Shift + I (i)</td>
+ <td>Cmd + Shift + I (i)</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Load saved JSON to whiteboard</td>
- <td style="text-align: left;">Ctrl + Shift + J</td>
- <td style="text-align: left;">Command + Shift + J</td>
+ <td>Load saved JSON to whiteboard</td>
+ <td>Ctrl + Shift + J</td>
+ <td>Cmd + Shift + J</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Share whiteboard</td>
- <td style="text-align: left;">Ctrl + Shift + S</td>
- <td style="text-align: left;">Command + Shift + S</td>
+ <td>Share whiteboard</td>
+ <td>Ctrl + Shift + S</td>
+ <td>Cmd + Shift + S</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Hide or show toolbar</td>
- <td style="text-align: left;">Tab</td>
- <td style="text-align: left;">Tab</td>
+ <td>Hide or show toolbar</td>
+ <td>Tab</td>
+ <td>Tab</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Move selected object up</td>
- <td style="text-align: left;">Up Arrow</td>
- <td style="text-align: left;">Up Arrow</td>
+ <td>Move selected object up</td>
+ <td>Up Arrow</td>
+ <td>Up Arrow</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Move selected object down</td>
- <td style="text-align: left;">Down Arrow</td>
- <td style="text-align: left;">Down Arrow</td>
+ <td>Move selected object down</td>
+ <td>Down Arrow</td>
+ <td>Down Arrow</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Move selected object left</td>
- <td style="text-align: left;">Left Arrow</td>
- <td style="text-align: left;">Left Arrow</td>
+ <td>Move selected object left</td>
+ <td>Left Arrow</td>
+ <td>Left Arrow</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Move selected object right</td>
- <td style="text-align: left;">Right Arrow</td>
- <td style="text-align: left;">Right Arrow</td>
+ <td>Move selected object right</td>
+ <td>Right Arrow</td>
+ <td>Right Arrow</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Drop object</td>
- <td style="text-align: left;">Ctrl + Enter</td>
- <td style="text-align: left;">Command + Enter</td>
+ <td>Drop object</td>
+ <td>Ctrl + Enter</td>
+ <td>Cmd + Enter</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Add Image to backgroud</td>
- <td style="text-align: left;">Shift + Enter</td>
- <td style="text-align: left;">Shift + Enter</td>
+ <td>Add Image to backgroud</td>
+ <td>Shift + Enter</td>
+ <td>Shift + Enter</td>
</tr>
<tr class="odd">
- <td style="text-align: left;">Cancel all actions</td>
- <td style="text-align: left;">Escape</td>
- <td style="text-align: left;">Escape</td>
+ <td>Cancel all actions</td>
+ <td>Escape</td>
+ <td>Escape</td>
</tr>
<tr class="even">
- <td style="text-align: left;">Delete selected object</td>
- <td style="text-align: left;">Delete</td>
- <td style="text-align: left;">Delete</td>
+ <td>Delete selected object</td>
+ <td>Delete</td>
+ <td>Delete</td>
</tr>
</tbody>
</table>
--
GitLab