Skip to content
Snippets Groups Projects
Commit 2cd21bfd authored by RANWEZ Pierre's avatar RANWEZ Pierre :anchor:
Browse files

:bug: bug: min width for parameter table (icons)

parent fa498da0
Branches
No related tags found
1 merge request!1✨ feat: CSSLSD V2
Show whitespace changes
Inline Side-by-side
popup.html
+ 238
− 136
View file @ 2cd21bfd
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script
src="jquery-3.6.0.min.js"
type="text/javascript"
charset="utf-8"
></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script> <script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body> <body>
<div class="actions"> <div class="actions">
<p>Appareils MIDI :<br><span id="midiDevices">Aucun</span></p> <p>Appareils MIDI :<br /><span id="midiDevices">Aucun</span></p>
<p>Controle MIDI ID :<br><span id="midiEvent">Aucun</span></p> <p>Controle MIDI ID :<br /><span id="midiEvent">Aucun</span></p>
<div class="infos"> <div class="infos">
<div style="flex: 1 1 auto;"></div> <div style="flex: 1 1 auto"></div>
Etat<div id="onOff" class="onOff"></div> Etat
MIDI<div class="midiI"></div> <div id="onOff" class="onOff"></div>
Audio<div class="audioI"></div> MIDI
<div class="midiI"></div>
Audio
<div class="audioI"></div>
</div> </div>
</div> </div>
<details open> <details open>
<summary><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" width="12" <summary>
height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" <svg
stroke-linecap="round" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-code"
width="12"
height="12"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="7 8 3 12 7 16"></polyline> <polyline points="7 8 3 12 7 16"></polyline>
<polyline points="17 8 21 12 17 16"></polyline> <polyline points="17 8 21 12 17 16"></polyline>
<line x1="14" y1="4" x2="10" y2="20"></line> <line x1="14" y1="4" x2="10" y2="20"></line>
</svg> CSSLSD</summary> </svg>
CSSLSD
</summary>
<div id="editor"></div> <div id="editor"></div>
</details> </details>
<details open> <details open>
<summary><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-variable" width="12" <summary>
height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" <svg
stroke-linecap="round" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-variable"
width="12"
height="12"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path <path
d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1"> d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1"
</path> ></path>
<path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path> <path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
</svg> PARAMETRES</summary> </svg>
PARAMETRES
</summary>
<table> <table>
<thead> <thead>
<tr> <tr>
<th><a title="Glisser-deposer, dupliquer et supprimer la ligne.">Actions</a></th> <th>
<th><a title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD">Nom</a></th> <a title="Glisser-deposer, dupliquer et supprimer la ligne."
<th><a title="0:1 (plage decimale)&#13;#000:#fff (plage hexadecimale)&#13;A;B;C (liste)">Type</a> >Actions</a
>
</th>
<th>
<a
title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
>Nom</a
>
</th>
<th>
<a
title="0:1 (plage decimale)&#13;#000:#fff (plage hexadecimale)&#13;A;B;C (liste)"
>Type</a
>
</th> </th>
<th><a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)">Options</a></th> <th>
<th><a title="cc:1 (control change 1)&#13;note:1 (note 1)&#13;pb (pitch bend)">MIDI</a></th> <a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
<th><a >Options</a
title="loud (volume)&#13;low|lomi|mid|mihi|hi (puissance plage de frequence)&#13;onset:E (note de type E)&#13;attack (attaque d'un son)">Audio</a> >
</th>
<th>
<a
title="cc:1 (control change 1)&#13;note:1 (note 1)&#13;pb (pitch bend)"
>MIDI</a
>
</th>
<th>
<a
title="loud (volume)&#13;low|lomi|mid|mihi|hi (puissance plage de frequence)&#13;onset:E (note de type E)&#13;attack (attaque d'un son)"
>Audio</a
>
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -58,13 +113,23 @@ ...@@ -58,13 +113,23 @@
</details> </details>
<details> <details>
<summary> <summary>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="12" height="12" <svg
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round"> class="icon icon-tabler icon-tabler-repeat"
width="12"
height="12"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path> <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
<path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path> <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
</svg> BOUCLES </svg>
BOUCLES
</summary> </summary>
<table width="100%"> <table width="100%">
<thead> <thead>
...@@ -81,29 +146,52 @@ ...@@ -81,29 +146,52 @@
</details> </details>
<details> <details>
<summary> <summary>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="12" <svg
height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round" stroke-linejoin="round"> class="icon icon-tabler icon-tabler-file-text"
width="12"
height="12"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="9" y1="9" x2="10" y2="9"></line> <line x1="9" y1="9" x2="10" y2="9"></line>
<line x1="9" y1="13" x2="15" y2="13"></line> <line x1="9" y1="13" x2="15" y2="13"></line>
<line x1="9" y1="17" x2="15" y2="17"></line> <line x1="9" y1="17" x2="15" y2="17"></line>
</svg> CHARGER / TELECHARGER </svg>
CHARGER / TELECHARGER
</summary> </summary>
<table> <table>
<tr> <tr>
<td> <td>
<input id="upload" type="file" /> <input id="upload" type="file" />
<label for="upload"> <label for="upload">
<svg title="Chargez votre fichier .json" xmlns="http://www.w3.org/2000/svg" <svg
class="icon icon-tabler icon-tabler-file-upload" width="24" height="24" viewBox="0 0 24 24" title="Chargez votre fichier .json"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round"> class="icon icon-tabler icon-tabler-file-upload"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line> <line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 11 15 14"></polyline> <polyline points="9 14 12 11 15 14"></polyline>
</svg> </svg>
...@@ -111,13 +199,25 @@ ...@@ -111,13 +199,25 @@
<span>Charger</span> <span>Charger</span>
</td> </td>
<td> <td>
<svg title="Telechargez votre fichier .json" id="download" xmlns="http://www.w3.org/2000/svg" <svg
class="icon icon-tabler icon-tabler-file-download" width="24" height="24" viewBox="0 0 24 24" title="Telechargez votre fichier .json"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" id="download"
stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-download"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line> <line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 17 15 14"></polyline> <polyline points="9 14 12 17 15 14"></polyline>
</svg> </svg>
...@@ -126,14 +226,16 @@ ...@@ -126,14 +226,16 @@
</tr> </tr>
</table> </table>
</details> </details>
<p style="text-align: center;">&COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a></p> <p style="text-align: center">
&COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
</p>
<script src="cssParser.js" type="text/javascript" charset="utf-8"></script> <script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script> <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.min.js" integrity="sha512-hDyKEpCc9jPn3u2VffFjScCtNqZI+BAbThAhhDYqqqZbxMqmTSNIgdU0OU9BRD/8wFxHIWLAo561hh9fW7j6sA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ext-language_tools.min.js" integrity="sha512-S7Whi8oQAQu/MK6AhBWufIJIyOvqORj+/1YDM9MaHeRalsZjzyYS7Usk4fsh+6J77PUhuk5v/BxaMDXRdWd1KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --> src="ace/ext-language_tools.js"
<script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> type="text/javascript"
<script src="main.min.js" type="text/javascript" charset="utf-8"></script> charset="utf-8"
></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</body> </body>
</html> </html>
style.css
+ 4
− 0
View file @ 2cd21bfd
...@@ -254,3 +254,7 @@ td label { ...@@ -254,3 +254,7 @@ td label {
a#doc { a#doc {
cursor: pointer; cursor: pointer;
} }
#parameters td:nth-child(3) {
max-width: 200px;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment