Added subtitle to navigation icons.

This commit is contained in:
Christian P. MOMON 2021-09-14 16:29:21 +02:00
parent abde4824f8
commit 05286c26ff
4 changed files with 92 additions and 64 deletions

View file

@ -23,26 +23,27 @@
<p id="federationDescription">Description absente…</p> <p id="federationDescription">Description absente…</p>
<div>Depuis <span id="federationStartDate">n/a</span></div> <div>Depuis <span id="federationStartDate">n/a</span></div>
<div class="content_infos" style="margin: 5px;"> <div class="content_infos" style="margin: 5px;">
<a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/></a> <a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/>Légal</a>
<a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/></a> <a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/>Contact</a>
<a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/></a> <a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/>Courriel</a>
<a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/></a> <a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/>Doc</a>
<a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/></a> <a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/>Tech</a>
<a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Liste des organisations"/></a> <a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Liste des organisations"/>Membres</a>
<a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="Liste des services"/></a> <a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="Liste des services"/>Services</a>
<a id="propertyCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/></a> <a id="propertyCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/>Propriétés</a>
<a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/></a> <a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/>Fichier</a>
<a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/></a> <a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/>Journal</a>
<a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/></a> <a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/>Stats</a>
<a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/></a> <a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/>Metriques</a>
<a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/></a> <a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/>Dispos</a>
<div style="display: inline-block; vertical-align: middle; font-size: smaller; margin-left: 2px; width: 35px;"> <a id="alertLink" href="#" style="vertical-align: top;">
<a id="alertLink" href="#" style="text-decoration: none;"> <table style="width: 35px; height: 50px; border-collapse:collapse; margin-bottom: 2px;">
<div id="errorCount" class="bg_error center" title="Propriétés en erreurs">n/a</div> <tr><td id="errorCount" style="background: red; font-size: 13px;" title="Propriétés en erreurs">n/a</td></tr>
<div id="warningCount" class="bg_warning cener" title="Propriétés attendues">n/a</div> <tr><td id="warningCount" style="background: yellow; font-size: 13px;" title="Propriétés attendues">n/a</td></tr>
<div id="voidCount" class="bg_void center" title="Propriétés Inconnues">n/a</div> <tr><td id="voidCount" style="background: rgb(54, 162, 235, 0.2); font-size: 13px;" title="Propriétés inconnues">n/a</td></tr>
</a> </table>
</div> Checks
</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -25,26 +25,27 @@
<div><span id="organizationStartDateWord">Depuis</span> <span id="organizationStartDate">n/a</span><span id="organizationEndDateData"> <span id="organizationEndDate">n/a</span></span> (<span id="organizationAge">n/a</span>)</div> <div><span id="organizationStartDateWord">Depuis</span> <span id="organizationStartDate">n/a</span><span id="organizationEndDateData"> <span id="organizationEndDate">n/a</span></span> (<span id="organizationAge">n/a</span>)</div>
<div>Membre <span id="organizationMemberOfName">n/a</span> <span id="organizationMemberOfWord">depuis/:</span> <span id="organizationMemberStartDate">n/a</span><span id="organizationMemberEndDateData"> <span id="organizationMemberEndDate">n/a</span></span> (<span id="organizationMemberAge">n/a</span>)</div> <div>Membre <span id="organizationMemberOfName">n/a</span> <span id="organizationMemberOfWord">depuis/:</span> <span id="organizationMemberStartDate">n/a</span><span id="organizationMemberEndDateData"> <span id="organizationMemberEndDate">n/a</span></span> (<span id="organizationMemberAge">n/a</span>)</div>
<div class="content_infos" style="margin: 5px;"> <div class="content_infos" style="margin: 5px;">
<a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/></a> <a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/>Légal</a>
<a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/></a> <a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/>Contact</a>
<a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/></a> <a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/>Courriel</a>
<a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/></a> <a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/>Doc</a>
<a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/></a> <a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/>Tech</a>
<a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Liste des organisations"/></a> <a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Liste des organisations"/>Membres</a>
<a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="Liste des services"/></a> <a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="Liste des services"/>Services</a>
<a id="rawCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/></a> <a id="rawCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/>Propriétés</a>
<a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/></a> <a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/>Fichier</a>
<a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/></a> <a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/>Journal</a>
<a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/></a> <a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/>Stats</a>
<a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/></a> <a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/>Metriques</a>
<a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/></a> <a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/>Dispos</a>
<div style="display: inline-block; vertical-align: middle; font-size: smaller; margin-left: 2px; width: 35px;"> <a id="alertLink" href="#" style="vertical-align: top;">
<a id="alertLink" href="#" style="text-decoration: none;"> <table style="width: 35px; height: 50px; border-collapse:collapse; margin-bottom: 2px;">
<div id="errorCount" class="bg_error center" title="Propriétés en erreurs">n/a</div> <tr><td id="errorCount" style="background: red; font-size: 13px;" title="Propriétés en erreurs">n/a</td></tr>
<div id="warningCount" class="bg_warning center" title="Propriétés attendues">n/a</div> <tr><td id="warningCount" style="background: yellow; font-size: 13px;" title="Propriétés attendues">n/a</td></tr>
<div id="voidCount" class="bg_void center" title="Propriétés Inconnues">n/a</div> <tr><td id="voidCount" style="background: rgb(54, 162, 235, 0.2); font-size: 13px;" title="Propriétés inconnues">n/a</td></tr>
</a> </table>
</div> Checks
</a>
</div> </div>
</div> </div>
</body> </body>

View file

@ -24,7 +24,7 @@
</div> </div>
<div><span id="serviceStartDateWord">Depuis</span> <span id="serviceStartDate">n/a</span><span id="serviceEndDateData"> <span id="serviceEndDate">n/a</span></span> (<span id="serviceAge">n/a</span>)&#160;&#160;&#160;Statut : <img id="serviceStatusImg" src="status-void.png" style="width: 25px; vertical-align: bottom;" /></div> <div><span id="serviceStartDateWord">Depuis</span> <span id="serviceStartDate">n/a</span><span id="serviceEndDateData"> <span id="serviceEndDate">n/a</span></span> (<span id="serviceAge">n/a</span>)&#160;&#160;&#160;Statut : <img id="serviceStatusImg" src="status-void.png" style="width: 25px; vertical-align: bottom;" /></div>
<div class="content_infos" style="border: 0px solid blue; border-radius: 8px; margin: 5px;"> <div class="registration_infos" style="border: 0px solid blue; border-radius: 8px; margin: 5px;">
Inscription : Inscription :
<img id="registrationNoneImg" src="circle-icons/global-mono.svg" class="disabled" title="Sans compte"/> <img id="registrationNoneImg" src="circle-icons/global-mono.svg" class="disabled" title="Sans compte"/>
<img id="registrationFreeImg" src="circle-icons/profile-mono.svg" class="disabled" title="Compte libre"/> <img id="registrationFreeImg" src="circle-icons/profile-mono.svg" class="disabled" title="Compte libre"/>
@ -33,28 +33,29 @@
<img id="registrationLoadImg" src="circle-icons/lock-mono.svg" class="disabled" title="Actuellement fermé"/> <img id="registrationLoadImg" src="circle-icons/lock-mono.svg" class="disabled" title="Actuellement fermé"/>
</div> </div>
<div class="content_infos" style="margin: 5px;"> <div class="content_infos" style="margin: 5px;">
<a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/></a> <a id="legalLink" href="#"><img id="legalLinkImg" src="circle-icons/ribbon.svg" class="disabled" title="Mentions légales"/>Légal</a>
<a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/></a> <a id="contactLink" href="#"><img id="contactLinkImg" src="circle-icons/contacts.svg" class="disabled" title="Page web de contact"/>Contact</a>
<a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/></a> <a id="emailLink" href="#"><img id="emailLinkImg" src="circle-icons/mail.svg" class="disabled" title="Courriel de contact/support"/>Courriel</a>
<a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/></a> <a id="userDocLink" href="#"><img id="userDocLinkImg" src="circle-icons/bookshelf.svg" class="disabled" title="Documentation"/>Doc</a>
<a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/></a> <a id="technicalDocLink" href="#"><img id="technicalDocLinkImg" src="circle-icons/tools.svg" class="disabled" title="Documentation technique"/>Tech</a>
<a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Organisation"/></a> <a id="organizationsLink" href="#"><img id="organizationsLinkImg" src="circle-icons/stack-mono.svg" title="Organisation"/>Membre</a>
<a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="" /></a> <a id="servicesLink" href="#"><img id="servicesLinkImg" src="circle-icons/frames-mono.svg" title="Liste des services"/>Services</a>
<a id="rawCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/></a> <a id="rawCheckLink" href="#"><img id="rawCheckLinkImg" src="circle-icons/clipboard-mono.svg" title="Propriétés"/>Propriétés</a>
<a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/></a> <a id="rawLink" href="#"><img id="rawLinkImg" src="circle-icons/document-mono.svg" title="Propriétés brutes"/>Fichier</a>
<a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/></a> <a id="crawlLink" href="#"><img id="crawlLinkImg" src="circle-icons/download-mono.svg" title="Statut des téléchargements"/>Journal</a>
<a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/></a> <a id="statsLink" href="#"><img id="statsLinkImg" src="circle-icons/piechart-mono.svg" title="Statistiques"/>Stats</a>
<a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/></a> <a id="metricsLink" href="#"><img id="metricsLinkImg" src="circle-icons/barchart-mono.svg" title="Métriques"/>Metriques</a>
<a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/></a> <a id="uptimeLink" href="#"><img id="uptimeLinkImg" src="circle-icons/countdown-mono.svg" title="Disponibilité des services"/>Dispos</a>
<div style="display: inline-block; vertical-align: middle; font-size: smaller; margin-left: 2px; width: 35px;"> <a id="alertLink" href="#" style="vertical-align: top;">
<a id="alertLink" href="#" style="text-decoration: none;"> <table style="width: 35px; height: 50px; border-collapse:collapse; margin-bottom: 2px;">
<div id="errorCount" class="bg_error center" title="Propriétés en erreurs">n/a</div> <tr><td id="errorCount" style="background: red; font-size: 13px;" title="Propriétés en erreurs">n/a</td></tr>
<div id="warningCount" class="bg_warning center" title="Propriétés attendues">n/a</div> <tr><td id="warningCount" style="background: yellow; font-size: 13px;" title="Propriétés attendues">n/a</td></tr>
<div id="voidCount" class="bg_void center" title="Propriétés Inconnues">n/a</div> <tr><td id="voidCount" style="background: rgb(54, 162, 235, 0.2); font-size: 13px;" title="Propriétés inconnues">n/a</td></tr>
</a> </table>
</div> Checks
</a>
</div> </div>
<div class="content_infos" style="margin: 5px;"> <div class="registration _infos" style="margin: 5px;">
Logiciel : Logiciel :
<span id="softwareName">n/a</span>, version <span id="softwareVersion">n/a</span>, licence <span id="softwareLicenseName">n/a</span>&#160;&#160; <span id="softwareName">n/a</span>, version <span id="softwareVersion">n/a</span>, licence <span id="softwareLicenseName">n/a</span>&#160;&#160;
<a id="softwareWebsiteLink" href="#"><img id="softwareWebsiteLinkImg" src="circle-icons/cruise.svg" class="disabled" title="Site web"/></a> <a id="softwareWebsiteLink" href="#"><img id="softwareWebsiteLinkImg" src="circle-icons/cruise.svg" class="disabled" title="Site web"/></a>

View file

@ -745,14 +745,39 @@ table > tfoot > tr > th.danger
text-decoration: none; text-decoration: none;
} }
.content_infos img, .registration_infos
.content_infos a img {
display: inline-block;
text-decoration: none;
}
.registration_infos img
{ {
width: 50px; width: 50px;
height: 50px; height: 50px;
padding-top:0; padding-top:0;
padding-bottom: 0; padding-bottom: 0;
vertical-align: middle; vertical-align: middle;
margin-bottom: 2px;
}
.content_infos a
{
display: inline-block;
text-decoration: none;
font-size: 12px;
}
.content_infos img,
.content_infos a img
{
display: block;
width: 50px;
height: 50px;
padding-top:0;
padding-bottom: 0;
vertical-align: middle;
margin-bottom: 2px;
} }
.td_icon_alone .td_icon_alone