gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Owen Leonard 2012-04-19 15:17:06 -04:00 committed by Paul Poulain
parent d830925be8
commit d09260c58b
2 changed files with 55 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
View File

@ -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 {

81
koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
View File

@ -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 %]
[% IF ( IntranetmainUserblock ) %]
<div id="area-userblock">
<div class="user-info">
[% IntranetmainUserblock %]
</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>
[% IF ( IntranetmainUserblock ) %]
<div class="yui-g" id="area-userblock">
<div class="user-info">
[% IntranetmainUserblock %]
</div>
</div>
[% END %]
</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' %]