Bug 7979 [FOLLOW-UP] New design for staff interface

This follow-up changes the structure of the page
so that it uses a standard YUI grid structure. This
helps keep the page flexible while preventing the
buttons from wrapping below the news block. The buttons
have been given a percentage width and a max-width value.

The benefit to flexibility is countered by the less-
strict spacing of the buttons. The columns of buttons
don't form a strict grid at higher screen widths.

There is probably a middle ground between this and
the previous design but I think we need to make it a
priority for the design not to break at 1024x768.

Another minor change: A tweak to the position and
padding of the icons.

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
index 49567e2..f2f8922 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
@@ -11,9 +11,8 @@
  *
  */
 
-#area-content {
+#doc3 {
     /* Contains the news + both columns of links + pending box + userblock box */
-    float: left;
     background-image:url('/intranet-tmpl/prog/img/background_koha_logo.png');
     background-repeat:no-repeat;
     background-position:left top;
@@ -22,13 +21,11 @@
 
 
 /* ==== NEWS - Start ==== */
+
 #area-news {
-    /* Displayed if news are available */
-    width: 300px;
-    float: left;
     border: 1px solid #EEEEEE;
-    margin: .2em;
-    border-radius: 6px;
+    border-radius: 6px 6px 6px 6px;
+    margin: 0.2em;
 }
 
 #area-news h3 {
@@ -55,32 +52,10 @@
     color: #808080;
 }
 
-#area-nonews {
-    /* Displayed if no news are available, to keep the structure intact */
-    width: 300px;
-    float: left;
-}
 /* ==== NEWS - End ==== */
 
 
 /* ==== MODULE LINKS - Start ==== */
-#area-lists {
-    /* Contains the two links columns */
-    margin-left: 20px;
-    float: left;
-}
-
-#area-list-left {
-    /* Left column for links */
-    width: 352px;
-    float: left;
-}
-#area-list-right {
-    /* Right column for links */
-    margin-left: 20px;
-    float: left;
-    width: 352px;
-}
 
 ul.biglinks-list {
     /* List containing the module links */
@@ -97,10 +72,11 @@ ul.biglinks-list li a.icon_general {
     display: block;
     float: left;
 
-    width:295px;
+    width: 83%;
+    max-width : 320px;
     height: 46px;
-    margin-bottom: 14px;
-    padding-left:53px;
+    margin: 0 1em 14px 0;
+    padding-left:57px;
     padding-top:5px;
 
     border: solid 2px #b9d8d9;
@@ -113,12 +89,13 @@ ul.biglinks-list li a.icon_general {
     color: #000000;
 
     background-color:#f4f8f9;
+    background-position: 5px 3px;
     background-repeat:no-repeat;
 }
 
 ul.biglinks-list li a:hover.icon_general {
     /* Class used for each module link hover state */
-    background-position:0 -46px;
+    background-position:5px -43px;
     color: #538200;
     border-color: #538200;
 }
@@ -188,7 +165,7 @@ ul.biglinks-list li a.icon_koha {background-image:url('/intranet-tmpl/prog/img/i
     width: 100%;
     border: solid 1px #b9d8d9;
     border-radius: 6px;
-    clear: left;
+
 }
 
 .user-info {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
index bcd0f6c..6c19248 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
@@ -10,28 +10,13 @@
 [% INCLUDE 'home-search.inc' %]
 
 <div id="breadcrumbs" >Home</div>
-<div style="clear: both"></div>
-<div id="area-content">
-    [% IF ( koha_news_count ) %]
-        <div id="area-news">
-            <h3><span="news_title">News</span></h3>
-            [% FOREACH koha_new IN koha_news %]
-                <div class="newsitem" id="news[% koha_new.idnew %]"><h4>[% koha_new.title %]</h4>
-                    <p>[% koha_new.new %]</p>
-                    <p class="newsfooter"> Posted on [% koha_new.newdate %]
-                        [% IF ( CAN_user_tools ) %]
-                            <a href="/cgi-bin/koha/tools/koha-news.pl?op=add_form&amp;id=[% koha_new.idnew %]">Edit</a>
-                             | <a href="/cgi-bin/koha/tools/koha-news.pl?op=del&amp;ids=[% koha_new.idnew %]">Delete</a>
-                             | <a href="/cgi-bin/koha/tools/koha-news.pl?op=add_form">New</a>
-                        [% END %]
-                    </p>
-                </div>
-            [% END %]
-        </div><!-- /koha-news -->
-    [% ELSE %]
-        <div id="area-nonews">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-    [% END %]
-        <div id="area-lists">
+
+
+<div id="doc3" class="yui-t3">
+   <div id="bd" role="main">
+    <div id="yui-main">
+    <div class="yui-b"><div class="yui-g">
+    <div class="yui-u first">
             <div id="area-list-left">
                 <ul class="biglinks-list">
                     [% IF ( CAN_user_circulate ) %]
@@ -69,7 +54,8 @@
                     [% END %]
                 </ul>
             </div><!-- /area-list-left -->
-
+        </div><!-- /yui-u first -->
+    <div class="yui-u">
             <div id="area-list-right">
                 <ul class="biglinks-list">
                     [% IF ( CAN_user_serials ) %]
@@ -109,8 +95,10 @@
                     </li>
                 </ul>
             </div><!-- /area-list-right -->
-
-            [% IF ( CAN_user_tools_moderate_comments ) && ( pendingsuggestions || pendingcomments || pendingtags ) %]
+        </div><!-- /yui-u -->
+</div><!-- /yui-g -->
+<div class="yui-g">
+                [% IF ( CAN_user_tools_moderate_comments ) && ( pendingsuggestions || pendingcomments || pendingtags ) %]
                 <div id="area-pending">
                     [% IF ( pendingsuggestions ) %]
                     <div class="pending-info">
@@ -135,19 +123,38 @@
                 </div>
             [% END %]
 
+
+</div>
             [% IF ( IntranetmainUserblock ) %]
-            <div id="area-userblock">
-                <div class="user-info">
-                    [% IntranetmainUserblock %]
+                <div class="yui-g" id="area-userblock">
+                    <div class="user-info">
+                        [% IntranetmainUserblock %]
+                    </div>
                 </div>
-            </div>
             [% END %]
-
-            <div style="height: 30px">
-                <!-- Without this white space the end of the page can be hidden by the language selector -->
-                &nbsp;
-            </div>
-        </div><!-- /area-lists -->
+</div>
+    </div>
+    <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE -->
+    [% IF ( koha_news_count ) %]
+        <div id="area-news">
+            <h3><span="news_title">News</span></h3>
+            [% FOREACH koha_new IN koha_news %]
+                <div class="newsitem" id="news[% koha_new.idnew %]"><h4>[% koha_new.title %]</h4>
+                    <p>[% koha_new.new %]</p>
+                    <p class="newsfooter"> Posted on [% koha_new.newdate %]
+                        [% IF ( CAN_user_tools ) %]
+                            <a href="/cgi-bin/koha/tools/koha-news.pl?op=add_form&amp;id=[% koha_new.idnew %]">Edit</a>
+                             | <a href="/cgi-bin/koha/tools/koha-news.pl?op=del&amp;ids=[% koha_new.idnew %]">Delete</a>
+                             | <a href="/cgi-bin/koha/tools/koha-news.pl?op=add_form">New</a>
+                        [% END %]
+                    </p>
+                </div>
+            [% END %]
+        </div><!-- /koha-news -->
+    [% END %]
+    </div>
+    </div>
+</div>
 
 <!-- the main div is closed in intranet-bottom.inc -->
 [% INCLUDE 'intranet-bottom.inc' %]