www.digitalmars.com         C & C++   DMDScript  

digitalmars.D - dlang.org should do it in style

reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
I just created 
https://github.com/D-Programming-Language/dlang.org/pull/769, which 
shifts the majority of dlang.org's look and feel to CSS styles.

With this work in tow, we get to use classic CSS styling to improve the 
look and feel of the site.

Please review. I'll be also looking forward to new styling ideas!


Andrei
Jan 16 2015
next sibling parent reply "weaselcat" <weaselcat gmail.com> writes:
On Friday, 16 January 2015 at 08:23:15 UTC, Andrei Alexandrescu 
wrote:

 I just created 
 https://github.com/D-Programming-Language/dlang.org/pull/769, 
 which shifts the majority of dlang.org's look and feel to CSS 
 styles.

 With this work in tow, we get to use classic CSS styling to 
 improve the look and feel of the site.

 Please review. I'll be also looking forward to new styling 
 ideas!


 Andrei


Related, but whatever happened to the dlang.org site redesign?
Jan 16 2015
parent Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/16/15 2:42 AM, weaselcat wrote:

 On Friday, 16 January 2015 at 08:23:15 UTC, Andrei Alexandrescu wrote:

 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, which
 shifts the majority of dlang.org's look and feel to CSS styles.

 With this work in tow, we get to use classic CSS styling to improve
 the look and feel of the site.

 Please review. I'll be also looking forward to new styling ideas!


 Andrei


 Related, but whatever happened to the dlang.org site redesign?


Redesign happens if somebody does it. By that definition, this is it. -- 
Andrei
Jan 16 2015
prev sibling parent reply David Soria Parra via Digitalmars-d <digitalmars-d puremagic.com> writes:
Andrei Alexandrescu via Digitalmars-d <digitalmars-d puremagic.com>
writes:


 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, which
 shifts the majority of dlang.org's look and feel to CSS styles.


talking about dlang.org, I wonder what happend to the redesign efforts.
Jan 16 2015
parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/16/15 2:38 PM, David Soria Parra via Digitalmars-d wrote:

 Andrei Alexandrescu via Digitalmars-d <digitalmars-d puremagic.com>
 writes:


 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, which
 shifts the majority of dlang.org's look and feel to CSS styles.


 talking about dlang.org, I wonder what happend to the redesign efforts.


As for the time being, this is pretty much it. I hope this will also 
spur others into action. -- Andrei
Jan 16 2015
parent reply "Mathias LANG" <geod24 gmail.com> writes:
On Friday, 16 January 2015 at 23:02:21 UTC, Andrei Alexandrescu 
wrote:

 On 1/16/15 2:38 PM, David Soria Parra via Digitalmars-d wrote:

 Andrei Alexandrescu via Digitalmars-d 
 <digitalmars-d puremagic.com>
 writes:


 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, 
 which
 shifts the majority of dlang.org's look and feel to CSS 
 styles.


 talking about dlang.org, I wonder what happend to the redesign 
 efforts.


 As for the time being, this is pretty much it. I hope this will 
 also spur others into action. -- Andrei


For those interested in contributing, here's the repo for the 
redesign effort: https://github.com/w0rp/new-dlang.org
Jan 16 2015
parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/16/15 3:05 PM, Mathias LANG wrote:

 On Friday, 16 January 2015 at 23:02:21 UTC, Andrei Alexandrescu wrote:

 On 1/16/15 2:38 PM, David Soria Parra via Digitalmars-d wrote:

 Andrei Alexandrescu via Digitalmars-d <digitalmars-d puremagic.com>
 writes:


 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, which
 shifts the majority of dlang.org's look and feel to CSS styles.


 talking about dlang.org, I wonder what happend to the redesign efforts.


 As for the time being, this is pretty much it. I hope this will also
 spur others into action. -- Andrei


 For those interested in contributing, here's the repo for the redesign
 effort: https://github.com/w0rp/new-dlang.org


Is there a place where this can be seen?

Sadly it seems there hasn't been an update in a while. Things should be 
easier to integrate now that we have dub running.

But I'd say the way to go is make room for things one at a time. For 
examples I just created 
https://github.com/D-Programming-Language/dlang.org/pull/776 which 
exposes additional elements to styling. Please review :o).


Andrei
Jan 16 2015
parent reply "Mathias LANG" <geod24 gmail.com> writes:
On Saturday, 17 January 2015 at 00:12:18 UTC, Andrei Alexandrescu 
wrote:

 On 1/16/15 3:05 PM, Mathias LANG wrote:

 On Friday, 16 January 2015 at 23:02:21 UTC, Andrei 
 Alexandrescu wrote:

 On 1/16/15 2:38 PM, David Soria Parra via Digitalmars-d wrote:

 Andrei Alexandrescu via Digitalmars-d 
 <digitalmars-d puremagic.com>
 writes:


 I just created
 https://github.com/D-Programming-Language/dlang.org/pull/769, 
 which
 shifts the majority of dlang.org's look and feel to CSS 
 styles.


 talking about dlang.org, I wonder what happend to the 
 redesign efforts.


 As for the time being, this is pretty much it. I hope this 
 will also
 spur others into action. -- Andrei


 For those interested in contributing, here's the repo for the 
 redesign
 effort: https://github.com/w0rp/new-dlang.org


 Is there a place where this can be seen?


http://w0rp.com:8010/

Disclaimer: I'm in no way involved with this. AFAIK, this is 
almost completely w0rp's effort.



 Sadly it seems there hasn't been an update in a while. Things 
 should be easier to integrate now that we have dub running.

 But I'd say the way to go is make room for things one at a 
 time. For examples I just created 
 https://github.com/D-Programming-Language/dlang.org/pull/776 
 which exposes additional elements to styling. Please review :o).


 Andrei


I agree.

Quick question: how's the website synced ATM ? Is it some 
post-commit hook, manual, cron job ?
The redesign use a Vibe.d webserver. I'm wondering whether this 
is a possibility for dlang.org.
Jan 17 2015
next sibling parent reply "MattCoder" <stop spam.com> writes:
On Saturday, 17 January 2015 at 15:28:57 UTC, Mathias LANG wrote:

 http://w0rp.com:8010/


I don't know about others but for me the layout above looks more 
attractive than the actual one.

In fact yesterday I was showing the main page for a friend on his 
smartphone (Moto G), and the code example at main page looks 
awful, since it's all wrapped on mobile. Here is an example what 
I'm talking about:
http://i.imgur.com/9JYNVNk.png

Matheus.
Jan 17 2015
parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 8:32 AM, MattCoder wrote:

 On Saturday, 17 January 2015 at 15:28:57 UTC, Mathias LANG wrote:

 http://w0rp.com:8010/


 I don't know about others but for me the layout above looks more
 attractive than the actual one.


I agree.


 In fact yesterday I was showing the main page for a friend on his
 smartphone (Moto G), and the code example at main page looks awful,
 since it's all wrapped on mobile. Here is an example what I'm talking
 about:
 http://i.imgur.com/9JYNVNk.png


To make a website look good on a mobile device, one needs to do work to 
make the website look good on a mobile device.


Andrei
Jan 17 2015
parent reply "MattCoder" <stop spam.com> writes:
On Saturday, 17 January 2015 at 17:59:07 UTC, Andrei Alexandrescu 
wrote:

 In fact yesterday I was showing the main page for a friend on 
 his
 smartphone (Moto G), and the code example at main page looks 
 awful,
 since it's all wrapped on mobile. Here is an example what I'm 
 talking
 about:
 http://i.imgur.com/9JYNVNk.png


 To make a website look good on a mobile device, one needs to do 
 work to make the website look good on a mobile device.


Indeed! But, if the "body" had a "width" setted this wouldn't 
occur.

For example, adding "width: 1024px" on body in style.css it will 
now be fine to see on mobile.

Matheus.
Jan 17 2015
next sibling parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 10:39 AM, MattCoder wrote:

 On Saturday, 17 January 2015 at 17:59:07 UTC, Andrei Alexandrescu wrote:

 In fact yesterday I was showing the main page for a friend on his
 smartphone (Moto G), and the code example at main page looks awful,
 since it's all wrapped on mobile. Here is an example what I'm talking
 about:
 http://i.imgur.com/9JYNVNk.png


 To make a website look good on a mobile device, one needs to do work
 to make the website look good on a mobile device.


 Indeed! But, if the "body" had a "width" setted this wouldn't occur.

 For example, adding "width: 1024px" on body in style.css it will now be
 fine to see on mobile.

 Matheus.


A tested PR would be great. Who can take this? -- Andrei
Jan 17 2015
parent reply "MattCoder" <stop spam.com> writes:
On Saturday, 17 January 2015 at 19:35:01 UTC, Andrei Alexandrescu 
wrote:

 A tested PR would be great. Who can take this? -- Andrei


A last note about this: using "width:1024px"  will fix the mobile 
"wrap-text" problem, but the site will look like this on higher 
resolutions: http://i.imgur.com/MZSmn87.png  (Look the space on 
the left and right).

So another solution would trying to set "min-width:1024px" on 
body tag, so the site will continue to be the same as is today 
even on higher resolutions, and I'm pretty sure this will correct 
the problem above on mobile devices. If anyone change I'd be glad 
to test.

PS: I'm assuming 1024 pixels because it's used as minimum 
standard these days.

Matheus.
Jan 17 2015
next sibling parent reply "H. S. Teoh via Digitalmars-d" <digitalmars-d puremagic.com> writes:
On Sat, Jan 17, 2015 at 08:04:56PM +0000, MattCoder via Digitalmars-d wrote:

 On Saturday, 17 January 2015 at 19:35:01 UTC, Andrei Alexandrescu wrote:

A tested PR would be great. Who can take this? -- Andrei


 
 A last note about this: using "width:1024px"  will fix the mobile
 "wrap-text" problem, but the site will look like this on higher
 resolutions: http://i.imgur.com/MZSmn87.png  (Look the space on the
 left and right).
 
 So another solution would trying to set "min-width:1024px" on body
 tag, so the site will continue to be the same as is today even on
 higher resolutions, and I'm pretty sure this will correct the problem
 above on mobile devices. If anyone change I'd be glad to test.
 
 PS: I'm assuming 1024 pixels because it's used as minimum standard
 these days.


[...]

I rather that we use font-based metrics (e.g. 40em) instead of pixel
sizes. That way the layout won't break or look horrible if the user
changes the default font sizes (e.g. for special needs, etc.) or doesn't
maximize his browser window.

But that's just my opinion.

Also, I am skeptical of a single style that will work for both desktop
and mobile browsers. Isn't that what mobile stylesheets are for? We can
have the same content, but we shouldn't break the desktop layout or make
it look laughably spaced out just for the sake of mobile devices. Let
the mobile devices have their own stylesheet.


T

-- 
Shin: (n.) A device for finding furniture in the dark.
Jan 17 2015
next sibling parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 2:24 PM, H. S. Teoh via Digitalmars-d wrote:

 On Sat, Jan 17, 2015 at 08:04:56PM +0000, MattCoder via Digitalmars-d wrote:

 On Saturday, 17 January 2015 at 19:35:01 UTC, Andrei Alexandrescu wrote:

 A tested PR would be great. Who can take this? -- Andrei


 A last note about this: using "width:1024px"  will fix the mobile
 "wrap-text" problem, but the site will look like this on higher
 resolutions: http://i.imgur.com/MZSmn87.png  (Look the space on the
 left and right).

 So another solution would trying to set "min-width:1024px" on body
 tag, so the site will continue to be the same as is today even on
 higher resolutions, and I'm pretty sure this will correct the problem
 above on mobile devices. If anyone change I'd be glad to test.

 PS: I'm assuming 1024 pixels because it's used as minimum standard
 these days.


 [...]

 I rather that we use font-based metrics (e.g. 40em) instead of pixel
 sizes. That way the layout won't break or look horrible if the user
 changes the default font sizes (e.g. for special needs, etc.) or doesn't
 maximize his browser window.

 But that's just my opinion.

 Also, I am skeptical of a single style that will work for both desktop
 and mobile browsers. Isn't that what mobile stylesheets are for? We can
 have the same content, but we shouldn't break the desktop layout or make
 it look laughably spaced out just for the sake of mobile devices. Let
 the mobile devices have their own stylesheet.


Could you please run some experiments and see where they take us? -- Andrei
Jan 17 2015
parent reply "H. S. Teoh via Digitalmars-d" <digitalmars-d puremagic.com> writes:
On Sat, Jan 17, 2015 at 02:36:03PM -0800, Andrei Alexandrescu via Digitalmars-d
wrote:

 On 1/17/15 2:24 PM, H. S. Teoh via Digitalmars-d wrote:


[...]

I rather that we use font-based metrics (e.g. 40em) instead of pixel
sizes. That way the layout won't break or look horrible if the user
changes the default font sizes (e.g. for special needs, etc.) or
doesn't maximize his browser window.

But that's just my opinion.

Also, I am skeptical of a single style that will work for both
desktop and mobile browsers. Isn't that what mobile stylesheets are
for? We can have the same content, but we shouldn't break the desktop
layout or make it look laughably spaced out just for the sake of
mobile devices. Let the mobile devices have their own stylesheet.


 
 Could you please run some experiments and see where they take us? --
 Andrei


I'm busy working on splitting up std.algorithm into more manageable
chunks... currently I can't even run the unittests on my machine anymore
because it eats up all available RAM.

So far I've managed to successfully extricate the set operations into
their own submodule (and pass unittests!).

So yeah... too busy to look into web stuff atm.


T

-- 
PNP = Plug 'N' Pray
Jan 17 2015
parent Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 3:18 PM, H. S. Teoh via Digitalmars-d wrote:

 On Sat, Jan 17, 2015 at 02:36:03PM -0800, Andrei Alexandrescu via
Digitalmars-d wrote:

 On 1/17/15 2:24 PM, H. S. Teoh via Digitalmars-d wrote:


 [...]

 I rather that we use font-based metrics (e.g. 40em) instead of pixel
 sizes. That way the layout won't break or look horrible if the user
 changes the default font sizes (e.g. for special needs, etc.) or
 doesn't maximize his browser window.

 But that's just my opinion.

 Also, I am skeptical of a single style that will work for both
 desktop and mobile browsers. Isn't that what mobile stylesheets are
 for? We can have the same content, but we shouldn't break the desktop
 layout or make it look laughably spaced out just for the sake of
 mobile devices. Let the mobile devices have their own stylesheet.


 Could you please run some experiments and see where they take us? --
 Andrei


 I'm busy working on splitting up std.algorithm into more manageable
 chunks... currently I can't even run the unittests on my machine anymore
 because it eats up all available RAM.

 So far I've managed to successfully extricate the set operations into
 their own submodule (and pass unittests!).

 So yeah... too busy to look into web stuff atm.


Thanks! I filed https://issues.dlang.org/show_bug.cgi?id=13997, who can 
get into it? -- Andrei
Jan 17 2015
prev sibling parent "MattCoder" <stop spam.com> writes:
On Saturday, 17 January 2015 at 22:27:08 UTC, H. S. Teoh via 
Digitalmars-d wrote:

 Also, I am skeptical of a single style that will work for both 
 desktop
 and mobile browsers. Isn't that what mobile stylesheets are 
 for? We can
 have the same content, but we shouldn't break the desktop 
 layout or make
 it look laughably spaced out just for the sake of mobile 
 devices. Let
 the mobile devices have their own stylesheet.


Sure, but for what I see adding: "min-width:1024px;" (or what 
unit you want) on body will NOT break the site on desktop and 
will make the site more readable on mobile.

Ideally you would want a stylesheet for mobile, but this would 
take more time than adding a single line in the current 
stylesheet.

Matheus.
Jan 17 2015
prev sibling parent via Digitalmars-d <digitalmars-d puremagic.com> writes:
On Sat, Jan 17, 2015 at 02:24:48PM -0800, H. S. Teoh via Digitalmars-d wrote:

 Also, I am skeptical of a single style that will work for both desktop
 and mobile browsers. Isn't that what mobile stylesheets are for?


If you do your html and style right in the first place, it will
be mostly the same. At most you might reposition a sidebar or something.
Jan 17 2015
prev sibling parent reply Jacob Carlborg <doob me.com> writes:
On 2015-01-17 19:39, MattCoder wrote:


 Indeed! But, if the "body" had a "width" setted this wouldn't occur.

 For example, adding "width: 1024px" on body in style.css it will now be
 fine to see on mobile.


No, that's not the correct solution. The correct solution is to use 
media queries in the CSS and specify different widths depending on the 
resolution. Also known as responsive design.

Or you have a separate mobile site.

-- 
/Jacob Carlborg
Jan 18 2015
next sibling parent "Ola Fosheim =?UTF-8?B?R3LDuHN0YWQi?= writes:
On Sunday, 18 January 2015 at 10:01:37 UTC, Jacob Carlborg wrote:

 On 2015-01-17 19:39, MattCoder wrote:


 Indeed! But, if the "body" had a "width" setted this wouldn't 
 occur.

 For example, adding "width: 1024px" on body in style.css it 
 will now be
 fine to see on mobile.


 No, that's not the correct solution. The correct solution is to 
 use media queries in the CSS and specify different widths 
 depending on the resolution. Also known as responsive design.


+

<meta name = "viewport" content = 
"width=device-width,initial-scale=1.0">
Jan 18 2015
prev sibling parent "MattCoder" <stop spam.com> writes:
On Sunday, 18 January 2015 at 10:01:37 UTC, Jacob Carlborg wrote:

 On 2015-01-17 19:39, MattCoder wrote:


 Indeed! But, if the "body" had a "width" setted this wouldn't 
 occur.

 For example, adding "width: 1024px" on body in style.css it 
 will now be
 fine to see on mobile.


 No, that's not the correct solution. The correct solution is to 
 use media queries in the CSS and specify different widths 
 depending on the resolution. Also known as responsive design.

 Or you have a separate mobile site.


Just to be clear, I didn't mention in my previous post that 
"width: 1024px" or "min-width: 1024px" is the correct solution, I 
just suggest this because it's a little effort (add 1 line in the 
stylesheet) to make it look less ugly in mobile than it looks 
today (http://i.imgur.com/9JYNVNk.png).

Matheus.
Jan 18 2015
prev sibling parent Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 7:28 AM, Mathias LANG wrote:

 Quick question: how's the website synced ATM ? Is it some post-commit
 hook, manual, cron job ?


make rebase -j && make clean && make rsync -j

make clean is a complete bear. All - please make dub generation better.


 The redesign use a Vibe.d webserver. I'm wondering whether this is a
 possibility for dlang.org.


I think it is. I will explore that with our webmaster. But beware - the 
least productive thing right now is yet another project I need to work on.


Andrei
Jan 17 2015