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
Tags
1 merge request!1✨ feat: CSSLSD V2
Hide whitespace changes
Inline Side-by-side
popup.html
+ 238
− 136
View file @ 2cd21bfd
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<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>
</head>
<head>
<link rel="stylesheet" href="style.css">
<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>
</head>
<body>
<div class="actions">
<p>Appareils MIDI :<br><span id="midiDevices">Aucun</span></p>
<p>Controle MIDI ID :<br><span id="midiEvent">Aucun</span></p>
<div class="infos">
<div style="flex: 1 1 auto;"></div>
Etat<div id="onOff" class="onOff"></div>
MIDI<div class="midiI"></div>
Audio<div class="audioI"></div>
</div>
</div>
<details open>
<summary><svg 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>
<polyline points="7 8 3 12 7 16"></polyline>
<polyline points="17 8 21 12 17 16"></polyline>
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg> CSSLSD</summary>
<div id="editor"></div>
</details>
<details open>
<summary><svg 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
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 d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
</svg> PARAMETRES</summary>
<table>
<thead>
<tr>
<th><a title="Glisser-deposer, dupliquer et supprimer la ligne.">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><a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)">Options</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>
</tr>
</thead>
<tbody id="parameters"></tbody>
</table>
</details>
<details>
<summary>
<svg xmlns="http://www.w3.org/2000/svg" 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 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>
</svg> BOUCLES
</summary>
<table width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Temps</th>
<th>Changes</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
<tbody id="loopList"></tbody>
</table>
</details>
<details>
<summary>
<svg xmlns="http://www.w3.org/2000/svg" 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 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>
<line x1="9" y1="9" x2="10" y2="9"></line>
<line x1="9" y1="13" x2="15" y2="13"></line>
<line x1="9" y1="17" x2="15" y2="17"></line>
</svg> CHARGER / TELECHARGER
</summary>
<table>
<tr>
<td>
<input id="upload" type="file" />
<label for="upload">
<svg title="Chargez votre fichier .json" xmlns="http://www.w3.org/2000/svg"
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 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>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 11 15 14"></polyline>
</svg>
</label>
<span>Charger</span>
</td>
<td>
<svg title="Telechargez votre fichier .json" id="download" 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 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>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 17 15 14"></polyline>
</svg>
<span>Telecharger</span>
</td>
</tr>
</table>
</details>
<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="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 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> -->
<script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="main.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
<body>
<div class="actions">
<p>Appareils MIDI :<br /><span id="midiDevices">Aucun</span></p>
<p>Controle MIDI ID :<br /><span id="midiEvent">Aucun</span></p>
<div class="infos">
<div style="flex: 1 1 auto"></div>
Etat
<div id="onOff" class="onOff"></div>
MIDI
<div class="midiI"></div>
Audio
<div class="audioI"></div>
</div>
</div>
<details open>
<summary>
<svg
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>
<polyline points="7 8 3 12 7 16"></polyline>
<polyline points="17 8 21 12 17 16"></polyline>
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg>
CSSLSD
</summary>
<div id="editor"></div>
</details>
<details open>
<summary>
<svg
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
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 d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
</svg>
PARAMETRES
</summary>
<table>
<thead>
<tr>
<th>
<a title="Glisser-deposer, dupliquer et supprimer la ligne."
>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>
<a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
>Options</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>
</tr>
</thead>
<tbody id="parameters"></tbody>
</table>
</details>
<details>
<summary>
<svg
xmlns="http://www.w3.org/2000/svg"
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 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>
</svg>
BOUCLES
</summary>
<table width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Temps</th>
<th>Changes</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
<tbody id="loopList"></tbody>
</table>
</details>
<details>
<summary>
<svg
xmlns="http://www.w3.org/2000/svg"
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 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>
<line x1="9" y1="9" x2="10" y2="9"></line>
<line x1="9" y1="13" x2="15" y2="13"></line>
<line x1="9" y1="17" x2="15" y2="17"></line>
</svg>
CHARGER / TELECHARGER
</summary>
<table>
<tr>
<td>
<input id="upload" type="file" />
<label for="upload">
<svg
title="Chargez votre fichier .json"
xmlns="http://www.w3.org/2000/svg"
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 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>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 11 15 14"></polyline>
</svg>
</label>
<span>Charger</span>
</td>
<td>
<svg
title="Telechargez votre fichier .json"
id="download"
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 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>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 17 15 14"></polyline>
</svg>
<span>Telecharger</span>
</td>
</tr>
</table>
</details>
<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="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script
src="ace/ext-language_tools.js"
type="text/javascript"
charset="utf-8"
></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
style.css
+ 4
− 0
View file @ 2cd21bfd
......@@ -253,4 +253,8 @@ td label {
}
a#doc {
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