[p2pu-dev] A few questions about the CSS and JavaScript

[Dirk Uys]

Hi Zuzel

On Sun, Apr 22, 2012 at 1:52 AM, zuzel.vp <zuzel.vp at gmail.com> wrote:

>
> On Fri, Apr 20, 2012 at 9:46 AM, Dirk Uys <dirk at p2pu.org> wrote:
>
>> Hi Zuzel
>>
>> I'm busy adding a tab to the challenge creation and challenge edit pages
>> to define a badge that will be awarded when someone finishes the challenge.
>>
>
> Please add it only to challenge edit at the moment to avoid too much
> conflicts with the part I am working on right now.
>

Will do


>
>
>>
>> I saw that we use the same template for project creation and project
>> editing. Does this avoid a lot of code duplication, or should we maybe
>> separate the two templates?
>>
>
> To include a tab you will probably not need to modify the edit_summary
> template but include a link on project_edit. There are no major reasons for
> project_edit to be the same template in both cases except maybe reusing
> css. We could start by moving the tabs to two small templates included from
> project_edit. If some template you are editing becomes to complicated feel
> free to split it as necessary.
>

Cool, I'll postpone splitting the template for now since I think we will
get conflicts atm.


>
>> I also saw that the file upload inputs get modified by an onload function
>> added by
>> https://github.com/p2pu/lernanta/blob/master/lernanta/media/js/script.js#L267to use ajax. This makes it difficult to upload an image together with other
>> data in a single form, since the onload function makes a lot of assumptions
>> about how image uploading should happen. I can maybe work around this for
>> badge creation, but I don't want to create too many ugly hacks?
>>
>
> Not all the input files get modified, the one in challenge creation page
> does not. Use that one as example:
> https://github.com/p2pu/lernanta/blob/master/lernanta/templates/projects/project_edit_summary.html
>

I did some hunting and after a bit of head scratching I realized why that
file input doesn't get modified. In
https://github.com/p2pu/lernanta/blob/master/lernanta/templates/projects/project_edit.html#L9the
bodyid gets set to project_create when creating a new challenge. In
the
javascript (
https://github.com/p2pu/lernanta/blob/master/lernanta/media/js/script.js#L174)
the bodyid is used to specify an onload function for the page.

For bodyid equals to "project_create", some javascript gets injected to
modify file upload behavior. (see
https://github.com/p2pu/lernanta/blob/master/lernanta/media/js/script.js#L258
)


>
>> I would propose that maybe we change the strategy how we modify the
>> behavior for file inputs. I think we should specify the ajax upload feature
>> it in the template where the file input is used. Then at least it's
>> explicit? Something like <code>attachFileUploadHandler(input-id,
>> preview-id) </code> in the js block?
>>
>
> If the solution I used for the challenge creation tab does not work in you
> case then do that trying not to duplicate to much code. I think the places
> that are uploading files right now are: edit profile, edit project, create
> project, new signup answer, edit school has some images as well.
>

I think we can resolve the problem without duplicating code. I'll see what
I can come up with.


>
>> I also saw that almost all of the CSS is in
>> https://github.com/p2pu/lernanta/blob/master/lernanta/media/css/batucada.css.
>> Do we get any benefits from having all the CSS together in one file? I
>> don't know what other strategies we could follow to structure the CSS, but
>> maybe we can have different CSS files with specific groupings of CSS for
>> the different parts of the website?
>>
>>
> Cleaning
> https://github.com/p2pu/lernanta/blob/master/lernanta/media/css/batucada.csswill be a major tasks but we could start doing it bit by bit. The only
> benefit is that is lees files to include at base.html but that is not a
> major benefit. Whatever we do it will be better that is clear the logic
> division between the css files we have.
>

Typically I would split CSS according to the different parts of a site:
like having a base.css and then specific css files for the different parts
like project.css, profile.css, home.css, learn.css, task.css, etc. What do
you think about a strategy like this?



> Should I send discussions like this to you or should I send it to the dev
>> list? Feel free to forward this to the dev list
>>
>>
> You can add the dev list on CC.
>
>
>> Cheers
>> Dirk
>>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.p2pu.org/pipermail/p2pu-dev/attachments/20120423/60a0b1a6/attachment.html>