[libreoffice-design] Re: Bug Submission Assistant : CSS / HTML integration

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


-- 
Unsubscribe instructions: E-mail to design+help@global.libreoffice.org
Problems? http://www.libreoffice.org/get-help/mailing-lists/how-to-unsubscribe/
Posting guidelines + more: http://wiki.documentfoundation.org/Netiquette
List archive: http://listarchives.libreoffice.org/global/design/
All messages sent to this list will be publicly archived and cannot be deleted