Final adjustions to the project logo code

- remove the question mark from the default logo for simplification,
  add a soft drop shadow to make the logo more visible on not so light
  backgrounds
- display the project logo and the lock icon in the project list dropdown
- re-position the project title and display the lock icon (if needed)
  on top of the main logo
The code now works best with uploaded logos of 32x32px^2; smaller logos
will be downsampled and repositioned on a best breed basis.
This commit is contained in:
Thomas Keller 2011-04-27 00:03:44 +02:00
parent dc31155de1
commit b36b8e3afb
6 changed files with 165 additions and 53 deletions

View File

@ -10,12 +10,12 @@
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="no_logo.svg" sodipodi:docname="no_logo.svg"
inkscape:version="0.48.0 r9654" inkscape:version="0.47 r22583"
id="svg2985" id="svg2985"
height="32" height="32"
width="32" width="32"
version="1.1" version="1.1"
inkscape:export-filename="/home/www/indefero/logo/no_logo.png" inkscape:export-filename="/Users/tommyd/Entwicklung/indefero/www/media/idf/img/no_logo.png"
inkscape:export-xdpi="89.989998" inkscape:export-xdpi="89.989998"
inkscape:export-ydpi="89.989998"> inkscape:export-ydpi="89.989998">
<sodipodi:namedview <sodipodi:namedview
@ -27,19 +27,71 @@
guidetolerance="10" guidetolerance="10"
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:window-width="1280" inkscape:window-width="1440"
inkscape:window-height="723" inkscape:window-height="852"
id="namedview9" id="namedview9"
showgrid="false" showgrid="false"
inkscape:zoom="11.357903" inkscape:zoom="16.0625"
inkscape:cx="2.6416758" inkscape:cx="8.5507561"
inkscape:cy="13.063247" inkscape:cy="16.122403"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="24" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="0"
inkscape:current-layer="layer1" /> inkscape:current-layer="g2847"
showguides="true"
inkscape:guide-bbox="true">
<sodipodi:guide
orientation="1,0"
position="16,25.836575"
id="guide3752" />
<sodipodi:guide
orientation="0,1"
position="-18.677042,16"
id="guide3754" />
</sodipodi:namedview>
<defs <defs
id="defs2987" /> id="defs2987">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 16 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="32 : 16 : 1"
inkscape:persp3d-origin="16 : 10.666667 : 1"
id="perspective13" />
<inkscape:perspective
id="perspective2863"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
id="perspective3676"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
id="perspective3717"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<filter
inkscape:collect="always"
id="filter3816"
x="-0.14434362"
width="1.2886872"
y="-0.11562817"
height="1.2312563">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1.1799243"
id="feGaussianBlur3818" />
</filter>
</defs>
<metadata <metadata
id="metadata2990"> id="metadata2990">
<rdf:RDF> <rdf:RDF>
@ -53,38 +105,69 @@
</rdf:RDF> </rdf:RDF>
</metadata> </metadata>
<g <g
id="layer1"> inkscape:groupmode="layer"
id="layer2"
inkscape:label="shadow"
style="display:inline"
sodipodi:insensitive="true">
<g
transform="translate(0.44042901,0.78704792)"
id="g2847-8"
style="opacity:0.79710143;fill:#000000;stroke:#000000;stroke-opacity:1;filter:url(#filter3816)">
<g
id="g3838-0"
style="fill:#000000;stroke:#000000;stroke-opacity:1" />
<g
id="g2401-2"
transform="matrix(0.21219597,0,0,0.21219597,-70.751966,-27.73328)"
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.4000001;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
inkscape:export-filename="/home/loa/Projects/indefero/logo/powered-by-indefero.png"
inkscape:export-xdpi="12.330909"
inkscape:export-ydpi="12.330909">
<path
id="path2383-4"
d="m 396.19089,173.14471 c -7.67621,0.80661 -14.40195,5.39406 -19.58101,10.89131 -7.23597,7.88004 -11.69742,18.07908 -13.32198,28.60362 -1.7236,11.28173 -0.25925,23.20635 5.07686,33.37271 3.78607,7.24384 9.53161,13.92339 17.29701,16.96772 3.86478,1.53937 8.98362,1.03284 11.67912,-2.41036 2.64357,-3.5671 2.69463,-8.234 2.85756,-12.48867 0.045,-7.61054 -0.54749,-15.25544 0.45618,-22.83193 0.87131,-9.50623 4.03944,-18.56751 6.71612,-27.66851 1.16242,-4.44333 2.25094,-9.02808 1.97499,-13.64988 -0.48817,-4.62476 -3.58059,-9.31042 -8.2964,-10.4067 -1.57489,-0.44882 -3.23412,-0.48948 -4.85845,-0.37931 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:connector-curvature="0" />
<path
id="path2391-8"
d="m 433.14691,149.28687 c 7.2059,2.76589 12.51512,8.93778 16.09494,15.58815 4.94991,9.48434 6.61962,20.49058 5.46486,31.07695 -1.25505,11.34342 -5.75582,22.48271 -13.54134,30.92159 -5.53192,6.01709 -12.81048,10.98198 -21.09918,11.91276 -4.13154,0.4866 -8.94486,-1.32748 -10.65734,-5.35104 -1.63027,-4.12976 -0.4717,-8.65084 0.47212,-12.80269 1.92628,-7.36287 4.47721,-14.59393 5.4687,-22.17201 1.61875,-9.40784 0.90381,-18.98034 0.67386,-28.46402 0.0272,-4.59278 0.1624,-9.30303 1.62515,-13.69592 1.66851,-4.34082 5.86829,-8.06645 10.70716,-7.90484 1.63738,-0.0259 3.25061,0.36424 4.79107,0.89107 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="logo"
style="display:inline">
<g
id="layer1"
transform="translate(-0.06540759,0.09444087)">
<g
id="g2847">
<g <g
id="g3838" /> id="g3838" />
<g <g
inkscape:export-ydpi="12.330909" id="g2401"
inkscape:export-xdpi="12.330909"
inkscape:export-filename="/home/loa/Projects/indefero/logo/powered-by-indefero.png"
style="fill:#e6e6e6;stroke:#a0a0a0;stroke-width:2.40000010000000019;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1;stroke-opacity:1"
transform="matrix(0.21219597,0,0,0.21219597,-70.751966,-27.73328)" transform="matrix(0.21219597,0,0,0.21219597,-70.751966,-27.73328)"
id="g2401"> style="fill:#e6e6e6;fill-opacity:1;stroke:#a0a0a0;stroke-width:2.4000001;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
inkscape:export-filename="/home/loa/Projects/indefero/logo/powered-by-indefero.png"
inkscape:export-xdpi="12.330909"
inkscape:export-ydpi="12.330909">
<path <path
inkscape:connector-curvature="0" id="path2383"
style="fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#a0a0a0;stroke-width:2.40000010000000019;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
d="m 396.19089,173.14471 c -7.67621,0.80661 -14.40195,5.39406 -19.58101,10.89131 -7.23597,7.88004 -11.69742,18.07908 -13.32198,28.60362 -1.7236,11.28173 -0.25925,23.20635 5.07686,33.37271 3.78607,7.24384 9.53161,13.92339 17.29701,16.96772 3.86478,1.53937 8.98362,1.03284 11.67912,-2.41036 2.64357,-3.5671 2.69463,-8.234 2.85756,-12.48867 0.045,-7.61054 -0.54749,-15.25544 0.45618,-22.83193 0.87131,-9.50623 4.03944,-18.56751 6.71612,-27.66851 1.16242,-4.44333 2.25094,-9.02808 1.97499,-13.64988 -0.48817,-4.62476 -3.58059,-9.31042 -8.2964,-10.4067 -1.57489,-0.44882 -3.23412,-0.48948 -4.85845,-0.37931 z" d="m 396.19089,173.14471 c -7.67621,0.80661 -14.40195,5.39406 -19.58101,10.89131 -7.23597,7.88004 -11.69742,18.07908 -13.32198,28.60362 -1.7236,11.28173 -0.25925,23.20635 5.07686,33.37271 3.78607,7.24384 9.53161,13.92339 17.29701,16.96772 3.86478,1.53937 8.98362,1.03284 11.67912,-2.41036 2.64357,-3.5671 2.69463,-8.234 2.85756,-12.48867 0.045,-7.61054 -0.54749,-15.25544 0.45618,-22.83193 0.87131,-9.50623 4.03944,-18.56751 6.71612,-27.66851 1.16242,-4.44333 2.25094,-9.02808 1.97499,-13.64988 -0.48817,-4.62476 -3.58059,-9.31042 -8.2964,-10.4067 -1.57489,-0.44882 -3.23412,-0.48948 -4.85845,-0.37931 z"
id="path2383" /> style="fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#a0a0a0;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:connector-curvature="0" />
<path <path
inkscape:connector-curvature="0" id="path2391"
style="fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#a0a0a0;stroke-width:2.40000010000000019;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
d="m 433.14691,149.28687 c 7.2059,2.76589 12.51512,8.93778 16.09494,15.58815 4.94991,9.48434 6.61962,20.49058 5.46486,31.07695 -1.25505,11.34342 -5.75582,22.48271 -13.54134,30.92159 -5.53192,6.01709 -12.81048,10.98198 -21.09918,11.91276 -4.13154,0.4866 -8.94486,-1.32748 -10.65734,-5.35104 -1.63027,-4.12976 -0.4717,-8.65084 0.47212,-12.80269 1.92628,-7.36287 4.47721,-14.59393 5.4687,-22.17201 1.61875,-9.40784 0.90381,-18.98034 0.67386,-28.46402 0.0272,-4.59278 0.1624,-9.30303 1.62515,-13.69592 1.66851,-4.34082 5.86829,-8.06645 10.70716,-7.90484 1.63738,-0.0259 3.25061,0.36424 4.79107,0.89107 z" d="m 433.14691,149.28687 c 7.2059,2.76589 12.51512,8.93778 16.09494,15.58815 4.94991,9.48434 6.61962,20.49058 5.46486,31.07695 -1.25505,11.34342 -5.75582,22.48271 -13.54134,30.92159 -5.53192,6.01709 -12.81048,10.98198 -21.09918,11.91276 -4.13154,0.4866 -8.94486,-1.32748 -10.65734,-5.35104 -1.63027,-4.12976 -0.4717,-8.65084 0.47212,-12.80269 1.92628,-7.36287 4.47721,-14.59393 5.4687,-22.17201 1.61875,-9.40784 0.90381,-18.98034 0.67386,-28.46402 0.0272,-4.59278 0.1624,-9.30303 1.62515,-13.69592 1.66851,-4.34082 5.86829,-8.06645 10.70716,-7.90484 1.63738,-0.0259 3.25061,0.36424 4.79107,0.89107 z"
id="path2391" /> style="fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#a0a0a0;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:connector-curvature="0" />
</g>
</g>
</g> </g>
<text
transform="scale(1.118034,0.89442719)"
sodipodi:linespacing="125%"
style="font-size:30.97047042999999888px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#828282;fill-opacity:1;stroke:none;font-family:Ubuntu;-inkscape-font-specification:Ubuntu"
xml:space="preserve"
id="text3763"
y="28.666267"
x="8.1167412"><tspan
style="fill:#828282;fill-opacity:1"
id="tspan3765"
y="28.666267"
x="8.1167412">?</tspan></text>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -37,7 +37,7 @@
<body> <body>
<div id="{block docid}doc3{/block}"> <div id="{block docid}doc3{/block}">
<div id="hd"> <div id="hd">
{if $project}<h1 class="project-title">{$project} <img src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" /></h1>{/if} {if $project}<h1 class="project-title">{$project}<img class="logo" src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}</h1>{/if}
{include 'idf/main-menu.html'} {include 'idf/main-menu.html'}
<div id="header"> <div id="header">
<div id="main-tabs"> <div id="main-tabs">

View File

@ -37,7 +37,7 @@
<body> <body>
<div id="{block docid}doc3{/block}" class="{block docclass}yui-t3{/block}"> <div id="{block docid}doc3{/block}" class="{block docclass}yui-t3{/block}">
<div id="hd"> <div id="hd">
{if $project}<h1 class="project-title">{$project} <img src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" /></h1>{/if} {if $project}<h1 class="project-title">{$project}<img class="logo" src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}</h1>{/if}
{include 'idf/main-menu.html'} {include 'idf/main-menu.html'}
<div id="header"> <div id="header">
<div id="main-tabs"> <div id="main-tabs">

View File

@ -8,8 +8,7 @@
{/if}<li id="project-list"><a href="{url 'IDF_Views::index'}">{trans 'Project List'} &#x25be;</a> {/if}<li id="project-list"><a href="{url 'IDF_Views::index'}">{trans 'Project List'} &#x25be;</a>
{if $allProjects.count() != 0} {if $allProjects.count() != 0}
<ul>{foreach $allProjects as $p} <ul>{foreach $allProjects as $p}
<li>{if $p.private}<img style="vertical-align: text-bottom;" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" /> {/if} <li><a href="{url 'IDF_Views_Project::home', array($p.shortname)}"><img class="logo" src="{url 'IDF_Views_Project::logo', array($p.shortname)}" alt="{trans 'Project logo'}" />{if $p.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}</a></li>
<a href="{url 'IDF_Views_Project::home', array($p.shortname)}">{$p}</a></li>
{/foreach}</ul> {/foreach}</ul>
{/if}</li>{if $isAdmin}<li><a href="{url 'IDF_Views_Admin::projects'}">{trans 'Forge Management'}</a></li>{/if}<li> {/if}</li>{if $isAdmin}<li><a href="{url 'IDF_Views_Admin::projects'}">{trans 'Forge Management'}</a></li>{/if}<li>
<a href="{url 'IDF_Views::faq'}" title="{trans 'Help and accessibility features'}">{trans 'Help'}</a></li> <a href="{url 'IDF_Views::faq'}" title="{trans 'Help and accessibility features'}">{trans 'Help'}</a></li>

View File

@ -327,10 +327,27 @@ h1.title {
} }
h1.project-title { h1.project-title {
font-weight: normal;
float: right; float: right;
font-weight: normal;
margin-top: 0.5em;
margin-bottom: 0;
text-align: right;
z-index: 100; z-index: 100;
margin: 0; position: relative;
padding-right: 3px;
}
h1.project-title img.logo {
max-height: 22px;
vertical-align: text-bottom;
padding-left: 7px;
}
h1.project-title img.lock {
width: 12px;
position: absolute;
right: 1px;
top: 12px;
} }
.note { .note {
@ -869,8 +886,21 @@ ol > li {
margin: 7px; margin: 7px;
white-space: nowrap; white-space: nowrap;
font-size: 0.95em; font-size: 0.95em;
list-style-type: square; list-style-type: none;
list-style-position: inside; position: relative;
}
#project-list ul li img.logo {
max-height: 16px;
vertical-align: text-bottom;
padding-right: 5px;
}
#project-list ul li img.lock {
position: absolute;
width: 9px;
left: 9px;
top: 9px;
} }
#project-list ul li:first-child { #project-list ul li:first-child {
@ -1053,7 +1083,7 @@ div.p-list-img {
div.p-list-prj { div.p-list-prj {
float: left; float: left;
margin: .5em 0 .5em 1em; margin: .5em 0 .5em .8em;
} }
div.p-list-prj p { div.p-list-prj p {
@ -1061,7 +1091,7 @@ div.p-list-prj p {
} }
div.p-list-private { div.p-list-private {
bottom: 10px; bottom: 16px;
right: -6px; right: -3px;
position: relative; position: relative;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB