Use meter tag to show conversation quota usage

diff --git a/files/style/conversation.scss b/files/style/conversation.scss
index 871d367477aa2741e962a98fb18fe95b71bfeb96..1b981e90a49c5ee376859d5061d4b872964f74c1 100644 (file)
--- a/files/style/conversation.scss
+++ b/files/style/conversation.scss
@@ -21,32 +21,8 @@
 .sidebar .box.conversationQuota .boxContent {
        text-align: center;
 }
-.conversationUsageBar {
-       background-color: rgba(165, 223, 65, 1);
-       height: 5px;
-
-       > span {
-               background-color: rgba(76, 169, 22, 1);
-               color: transparent;
-               display: block;
-               height: 100%;
-       }
-
-       &.yellow {
-               background-color: rgba(254, 207, 35, 1);
-
-               > span {
-                       background-color: rgba(253, 146, 21, 1);
-               }
-       }
-
-       &.red {
-               background-color: rgba(255, 205, 210, 1);
-
-               > span {
-                       background-color: rgba(244, 67, 54, 1);
-               }
-       }
+.conversationQuotaMeter {
+       width: 100%;
 }
 
 .conversationItem {

diff --git a/templates/conversationList.tpl b/templates/conversationList.tpl
index 9333eebb1e498b269dae50973b43e5fa352b957f..bd8697671544e52ff5ff627ba78aa111bd637155 100644 (file)
--- a/templates/conversationList.tpl
+++ b/templates/conversationList.tpl
@@ -116,9 +116,10 @@
                <div class="boxContent">
                        {assign var='conversationCount' value=$__wcf->getConversationHandler()->getConversationCount()}
                        {assign var='maxConversationCount' value=$__wcf->session->getPermission('user.conversation.maxConversations')}
-                       <p class="conversationUsageBar{if $conversationCount/$maxConversationCount >= 1.0} red{elseif $conversationCount/$maxConversationCount > 0.9} yellow{/if}">
-                               <span style="width: {if $conversationCount/$maxConversationCount < 1.0}{$conversationCount/$maxConversationCount*100|round:0}{else}100{/if}%">{#$conversationCount/$maxConversationCount*100}%</span>
-                       </p>
+                       {assign var='conversationCountValue' value=$conversationCount/$maxConversationCount*100}
+                       <meter class="conversationQuotaMeter" min="0" max="100" low="90" high="99" value="{$conversationCountValue|intval}" aria-label="{lang}wcf.conversation.quota{/lang}">
+                               {#$conversationCount/$maxConversationCount*100}%
+                       </meter>
                        <p><small>{lang}wcf.conversation.quota.description{/lang}</small></p>
                </div>
        </section>