librelist archives

« back to archive

Doing some example files and CSS refactors

Doing some example files and CSS refactors

From:
Brennan Novak
Date:
2015-03-22 @ 20:42
Greetings People Converse.js. I've been tinkering a little bit with
Converse and am much impressed with it. I'm experimenting with some on
my local machine and was curious if you'd be interested in exploring /
pull requests in the following directions:

1. Splitting up the CSS into a few separate files (for better
readability & editing)
2. Making an example file like "chat.html' which is just the client sans
the rest of your public site
3. Perhaps an alternate converse.css style, which makes the app be a
full screen view

Anywho, if you're interested in seeing such experiments and think you
may want to merge them back into the project, let me know!  Thanks for
all your hard work. Super cool stuff :)

Cheers,
BNVK
https://brennannovak.com

Re: [conversejs] Doing some example files and CSS refactors

From:
Jc Brand
Date:
2015-03-23 @ 10:39
Hi Brennan

I'm very glad you like it.

I've done what I could to make the HTML/CSS sane and proper, but it would
be great to get your expert input on how it can be improved.

The CSS has evolved over time, so there's probably quite a bit of cruft in
there.

Please see my replies inline.

On Sun, Mar 22, 2015 at 09:42:35PM +0100, Brennan Novak wrote:
> Greetings People Converse.js. I've been tinkering a little bit with
> Converse and am much impressed with it. I'm experimenting with some on
> my local machine and was curious if you'd be interested in exploring /
> pull requests in the following directions:
> 
> 1. Splitting up the CSS into a few separate files (for better
> readability & editing)

Sure. Just be aware that we use the Sass preprocessor, so the source files are
in the ./sass directory.

You probably already have Sass available and know how to use it, in any case
running "make dev" should install all the dependencies for converse.js
(including Sass).

I then use "make css" to generate the CSS files. You however don't need to use
"make" if you don't want to.

> 2. Making an example file like "chat.html' which is just the client sans
> the rest of your public site

See "dev.html", which serves this purpose. It still has some CSS from the
website, but we can remove that.

> 3. Perhaps an alternate converse.css style, which makes the app be a
> full screen view

That would be great and I know it's something people are interested in.

I'm not exactly sure how one would approach this. There's definitely a strong
UX element to this which would need to be fleshed out.

I've done some work on making converse.js responsive, so if you resize the
screen to mobile size, the chat boxes expand to take up the whole screen.

The chat boxes are then on top of one another. I think it would be cool to be
able to swipe or drag to move a chat box out of the way in order
to see another one behind it, but this is not yet possible.

> Anywho, if you're interested in seeing such experiments and think you
> may want to merge them back into the project, let me know!  Thanks for
> all your hard work. Super cool stuff :)

Thanks! Definitely interested and willing to work with you to get your
contributions merged.

By the way, I've made some static mockups which might help you.

See for example here:

* https://conversejs.org/mockup/index.html
* https://conversejs.org/mockup/minimal.html
* https://conversejs.org/mockup/controlbox.html (I see this one's a bit broken)
* https://conversejs.org/mockup/chatroom.html

They're all included in the source bundle for converse.js, in the "mockup" dir.

I recently wrote some initial documentation on how the theme/skin converse.js,
but currently there's not yet much info. In any case, here are those docs:
https://conversejs.org/docs/html/theming.html

Regards
JC