[Libreoffice-qa] Bug Submission Assistant : CSS / HTML integration

[Loic Dachary]

On 09/20/2011 11:12 AM, Ivan M. wrote:
> Hi Loic,
>
Hi !
> Most of the effects in the PSD can be achieved with CSS3, unless you
> want to spend hours aligning drop shadows and rounded rectangles, I'd
> highly recommend it, and I'd be happy to help out.
> The remainder is turning out to be a bit of a pain as the objects
> aren't perfectly aligned. I'll try get the header and the remaining
> graphics to you tomorrow.
>
I must confess that I'm ignorant of the status of CSS3 and browser compatibility. Would it be a problem or can it be ignored ?
> Attached is 1) the bugtest logo in Vegur and 
Could you please make it just "Bug" instead of "BugTest" ?
> 2) an image sprite of all
> the left hand menu states (I assume you know how to do use image
> sprites with CSS). I'd use a simple <a> element with display: block,
> 255 x 64px (with appropriate padding).
>
I've integrated them at and it looks a lot better already ;-)

I used individual images instead of sprites because I plan to run http://yostudios.github.com/Spritemapper/ when I'm finished to create an image such as
http://cardstories.org/stable/cardstories/static/cardstories.png and update the background offsets accordingly in the CSS for me. That saves me the tedious maintenance of sprites offset. Do you know of a better technique ?

I completed the CSS/HTML integration, using placeholder images and modifying the javascript to adapt for it. You can see how it looks at:

https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=login
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=component
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=subcomponent
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=version
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=description
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=submit
https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=complete

How do you suggest we proceed from there ?

> Regards,
> Ivan.
>
> On Mon, Sep 19, 2011 at 9:15 AM, Loic Dachary <loic at dachary.org> wrote:
>> On 09/18/2011 10:27 AM, Loic Dachary wrote:
>>
>> On 09/17/2011 07:41 PM, Loic Dachary wrote:
>>
>> Hi,
>>
>> I've sent you the source files Aleksandar (in cc) sent me for the design of
>> http://wiki.documentfoundation.org/Bug_Submission_Assistant_-_ToDo#Web_design
>> I'm very happy that you're willing to help with CSS/HTML integration because
>> exporting the necessary images is above my paygrade :-)
>> Regarding the staging area, I'm using
>> https://freedesktop.dachary.org/libreoffice/bug/bug.html
>> which is built from
>> http://cgit.freedesktop.org/libreoffice/website/tree/bug
>> and installed according to
>> http://wiki.documentfoundation.org/Bug_Submission_Assistant#Implementation
>>
>> In order to actually see the various states, one has to run the application,
>> which is inconvenient. I will create a static page demonstrating all the
>> possible states. So that it can be easily copied without the need to
>> actually install the reverse proxy. For the rest, I will follow your advice
>> on how to proceed.
>> If I'm given a set of images I can take care of the CSS / HTML integration.
>> I actually enjoy it ;-) Only I'm not skilled at exporting images...
>>
>> Hi,
>>
>> If ?skin is added to the Bug Submission Assistant URL, links are shown to
>> display all the states. For instance ?skin=submit will show the page as it
>> would look just before the user submit the form. For HTML/CSS integration,
>> it helps to visualize the states locally without the need to actually
>> install the corresponding reverse proxy.
>> http://cgit.freedesktop.org/libreoffice/website/commit/?id=42e0dad5868972db7891a19668a2585b73813cd5
>>
>> You can now install the Bug Submission Assistant locally with
>>
>> git clone http://cgit.freedesktop.org/libreoffice/website
>> cd website/bug
>> make # requires http://xmlsoft.org/XSLT/xsltproc.html
>> http://tidy.sourceforge.net/ and http://curl.haxx.se/
>> browser bug/bug.html?skin
>>
>> as explained at
>> http://wiki.documentfoundation.org/Bug_Submission_Assistant#Installation_and_maintainance
>>
>> You can also see how it currently looks at
>>
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=login
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=component
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=subcomponent
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=description
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=submit
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin=complete
>>
>> I will make the necessary changes to replace the <select> box with stylable
>> menus based on <div> because that requires javascript side modifications. I
>> will be on irc.freenode.net#libreoffice-dev all day if you need me.
>>
>> Cheers
>>
>>
>> I integrated the subcomponent menu and the list of steps to the left,
>> because that involved some javascript. I cut images from Aleksandar
>> screenshots, to use as placeholders until the real images properly exported
>> with transparency and all are available. You can see the result at:
>>
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html
>>
>> and you can quickly go thru the various steps as explained above with the
>> links on top of
>>
>> https://bugassistant.libreoffice.org/libreoffice/bug/bug.html?skin
>>
>> I'll keep working on the integration, using placeholder images, until the
>> real images are available.
>>
>> Cheers
>>
>>

-------------- next part --------------
A non-text attachment was scrubbed...
Name: loic.vcf
Type: text/x-vcard
Size: 327 bytes
Desc: not available
URL: <http://lists.freedesktop.org/archives/libreoffice-qa/attachments/20110920/cab4f575/attachment.vcf>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 262 bytes
Desc: OpenPGP digital signature
URL: <http://lists.freedesktop.org/archives/libreoffice-qa/attachments/20110920/cab4f575/attachment.pgp>