issue #1002 dashboard redesign, colors for big icons

Piwigo · Apr 12, 2019 · f3cc541 · f3cc541
1 parent c202897
commit f3cc541
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 48 deletions.
diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl
@@ -37,43 +37,6 @@ jQuery().ready(function(){
 {/footer_script}
 
 {html_style}
-.stat-boxes {
-  text-align:left;
-  margin:10px;
-}
-
-.stat-box {
-  display:inline-block;
-  width:200px;
-  margin:10px;
-  color:#777;
-}
-
-div.stat-box {
-  cursor:help;
-}
-
-.stat-box:hover {
-  color:#ff7700;
-}
-
-.stat-box i {
-  font-size:50px;
-  float:left;
-  margin-right:5px;
-}
-
-.stat-box .number, .stat-box .caption {
-  display:inline-block;
-  width:120px;
-  text-align:left;
-}
-
-.stat-box .number {
-  margin-top:10px;
-  font-size:20px;
-}
-
 .eiw .messages ul li {
   list-style-type:none !important;
 }
@@ -88,75 +51,75 @@ div.stat-box {
 <div class="stat-boxes">
 
 {if $NB_PHOTOS > 1}
-<a class="stat-box" href="{$U_ADD_PHOTOS}">
+<a class="stat-box stat-box-yellow" href="{$U_ADD_PHOTOS}">
 <i class="icon-picture"></i>
 <span class="number">{$NB_PHOTOS|number_format}</span><span class="caption">{'Photos'|translate}</span>
 </a>
 {/if}
 
 {if $NB_ALBUMS > 1}
-<a class="stat-box" href="{$U_CATEGORIES}">
+<a class="stat-box stat-box-red" href="{$U_CATEGORIES}">
 <i class="icon-sitemap"></i>
 <span class="number">{$NB_ALBUMS}</span><span class="caption">{'Albums'|translate}</span>
 </a>
 {/if}
 
 {if $NB_TAGS > 1}
-<a class="stat-box" href="{$U_TAGS}">
+<a class="stat-box stat-box-yellow" href="{$U_TAGS}">
 <i class="icon-tags"></i>
 <span class="number">{$NB_TAGS}</span><span class="caption" title="{'%d associations'|translate:$NB_IMAGE_TAG}">{'Tags'|translate}</span>
 </a>
 {/if}
 
 {if $NB_USERS > 2}
-<a class="stat-box" href="{$U_USERS}">
+<a class="stat-box stat-box-purple" href="{$U_USERS}">
 <i class="icon-users"></i>
 <span class="number">{$NB_USERS}</span><span class="caption">{'Users'|translate}</span>
 </a>
 {/if}
 
 {if $NB_GROUPS > 0}
-<a class="stat-box" href="{$U_GROUPS}">
+<a class="stat-box stat-box-purple" href="{$U_GROUPS}">
 <i class="icon-group"></i>
 <span class="number">{$NB_GROUPS}</span><span class="caption">{'Groups'|translate}</span>
 </a>
 {/if}
 
 {if $NB_COMMENTS > 1}
-<a class="stat-box" href="{$U_COMMENTS}">
+<a class="stat-box stat-box-blue" href="{$U_COMMENTS}">
 <i class="icon-chat"></i>
 <span class="number">{$NB_COMMENTS}</span><span class="caption">{'Comments'|translate}</span>
 </a>
 {/if}
 
 {if $NB_RATES > 0}
-<a class="stat-box" href="{$U_RATING}">
+<a class="stat-box stat-box-yellow" href="{$U_RATING}">
 <i class="icon-star"></i>
 <span class="number">{$NB_RATES}</span><span class="caption">{'Rating'|translate}</span>
 </a>
 {/if}
 
 {if $NB_VIEWS > 0}
-<a class="stat-box" href="{$U_HISTORY_STAT}">
+<a class="stat-box stat-box-blue" href="{$U_HISTORY_STAT}">
 <i class="icon-signal"></i>
 <span class="number">{$NB_VIEWS}</span><span class="caption">{'Pages seen'|translate}</span>
 </a>
 {/if}
 
 {if $NB_PLUGINS > 0}
-<a class="stat-box" href="{$U_PLUGINS}">
+<a class="stat-box stat-box-green" href="{$U_PLUGINS}">
 <i class="icon-puzzle"></i>
 <span class="number">{$NB_PLUGINS}</span><span class="caption">{'Plugins'|translate}</span>
 </a>
 {/if}
 
-<div class="stat-box">
+<div class="stat-box stat-box-blue">
 <i class="icon-hdd"></i>
 <span class="number">{$STORAGE_USED}</span><span class="caption">{'Storage used'|translate}</span>
 </div>
 
 {if $NB_PHOTOS > 1}
-<div class="stat-box">
+<div class="stat-box stat-box-yellow">
 <i class="icon-back-in-time"></i>
 <span class="number">{$first_added_age}</span><span class="caption" title="{'first photo added on %s'|translate:$first_added_date}">{'First photo added'|translate}</span>
 </div>

diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
@@ -491,6 +491,71 @@ FORM.properties SPAN.property {
 	padding: 0 0.5em 0 0;
 }
 
+/* Dashboard */
+.stat-boxes {
+  text-align:left;
+  margin:40px 10px;
+}
+
+.stat-box {
+  display:inline-block;
+  width:200px;
+  margin:10px 10px 40px 10px;
+  color:#3b3b3b;
+  text-align: center;
+}
+
+div.stat-box {
+  cursor:help;
+}
+
+.stat-box i {
+  display: inline-block;
+  background-color: #ffcfcf;
+  color: #ff5252;
+  border-radius: 50%;
+  font-size: 37px;
+  padding: 20px;
+  margin-bottom: 15px;
+}
+
+.stat-box-yellow i {
+  color:#ffa744;
+  background-color: #ffe9cf;
+}
+.stat-box-red i {
+  background-color: #ffcfcf;
+  color: #ff5252;
+}
+.stat-box-purple i {
+  background-color: #e0daf4;
+  color: #896af3;
+}
+.stat-box-green i {
+  background-color: #d6ffcf;
+  color: #6ece5e;
+}
+.stat-box-blue i {
+  background-color: #cfebff;
+  color: #2883c3;
+}
+
+.stat-box .number, .stat-box .caption {
+  display:block;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.stat-box .number {
+  font-size: 29px;
+}
+
+a.stat-box:hover {
+  text-decoration: none;
+  color:#777;
+}
+
 #configContent fieldset {
   border:none;
   padding-left:20px;

diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
@@ -214,6 +214,37 @@ position:relative;  z-index: 50;}
 display:block; height:85px; left:225px; position:relative; top:-42px; width:313px; z-index:99; padding:0;
 color:transparent;}
 .bigbutton input:hover { cursor:pointer; background:transparent url(images/transparent.gif) repeat scroll left top; border:0; padding:0;color:transparent;}
+
+/* dashboard */
+.stat-box {
+  color:#777;
+}
+
+a.stat-box:hover {
+  color:#aeaeae;
+}
+
+.stat-box-yellow i {
+  color:#9b5200;
+  background-color: #ffa744;
+}
+.stat-box-red i {
+  background-color: #c64444;
+  color: #650101;
+}
+.stat-box-purple i {
+  background-color: #ce4baa;
+  color: #52003b;
+}
+.stat-box-green i {
+  background-color: #4ac641;
+  color: #014400;
+}
+.stat-box-blue i {
+  background-color: #379bbc;
+  color: #003751;
+}
+
 /* hacks */
 * html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */
 *+html  .bigtext { left: 70px; }