Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Revue CSS et page démo : aspect sur mobile + relocalisation des polices de paper.css

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-09-27 11:39:31 +02:00
parent f55f897bea
commit 8c636a57b3
8 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/CSS/fd2html.css Normal file
View File

@ -0,0 +1,8 @@
@media screen and (max-width: 800px)
{
h1 { font-size:1.7em }
h2,h3 { font-size:1.2em }
h4 { font-size:1.1em }
p,li { font-size: 17px }
ul, li { padding-left: 0.5em; margin-left:0 }
}

BIN
public/CSS/fonts/0nkwC9f7MfsBiWcLtY65AWDK873lgCK7FQc.woff2 Normal file
View File

Binary file not shown.

BIN
public/CSS/fonts/0nkwC9f7MfsBiWcLtY65AWDK873ljiK7.woff2 Normal file
View File

Binary file not shown.

BIN
public/CSS/fonts/q5uGsou0JOdh94bfuQltOxU.woff2 Normal file
View File

Binary file not shown.

BIN
public/CSS/fonts/q5uGsou0JOdh94bfvQlt.woff2 Normal file
View File

Binary file not shown.

2
public/CSS/paper.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
public/index.html
View File

@ -6,8 +6,9 @@
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV."> <meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/firstExample.app.js" defer></script> <script src="JS/firstExample.app.js" defer></script>
<title>freeDatas2HTML : démo affichage données venant d'un fichier CSV.</title> <title>freeDatas2HTML : démo d'affichage de données venant d'un fichier CSV</title>
</head> </head>
<body class="paper container"> <body class="paper container">
<h1>freeDatas2HTML</h1> <h1>freeDatas2HTML</h1>
@ -24,12 +25,12 @@
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article> </article>
<p id="pages"></p> <p id="pages"></p>
<aside><p>Les données affichées viennent d'<a href="datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank">sur Wikipédia</a>.</p> <aside><p>Les données affichées viennent d’<a href="datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank">sur Wikipédia</a>.</p>
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d'<b>extraire des données d'un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l'on peut désigner n'importe quel autre caractère séparateur.</p> <p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe quel autre caractère séparateur.</p>
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p> <p>Certains champs (=colonnes) peuvent être désignées comme devant permettre de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
<p>Il est également possible d'afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p> <p>Il est également possible d’afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Une autre option permet de <b>paginer les résultats</b>.</p> <p>Une autre option permet de <b>paginer les résultats</b>.</p>
<p>Enfin il est possible d'<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées.<br>Si vous avez un grand écran, visualiser le résultat en faisant "Alt+"Maj"+"M", puis "F5". Appuyez de nouveau sur "F5", une fois de retour sur grand écran.</p> <p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside> <p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body> </body>
</html> </html>

2
src/firstExample.ts
View File

@ -28,7 +28,7 @@ const initialise = async () =>
if(window.innerWidth < 800) if(window.innerWidth < 800)
{ {
converter.datasRender.settings={ converter.datasRender.settings={
allBegining:"<h3>Affichage petits écrans !</h3>", allBegining:"<h4>Affichage petits écrans !</h4>",
allEnding:"", allEnding:"",
linesBegining:"<ul>", linesBegining:"<ul>",
linesEnding:"</ul>", linesEnding:"</ul>",