Bug#772963: release-notes: cellphone friendly CSS
On 2015-02-25 02:22, Stéphane Blondon wrote: 2015-02-18 1:42 GMT+01:00 Stéphane Blondon stephane.blon...@gmail.com: I remember the warning from Google test suite about the use on small screen. I added css in order to increase the vertical space between the links in the table of contents. (There are several tables in the documentation.) The modified version is viewable as previously: http://stephane.yaal.fr/tmp/release-notes.amd64.html.icons/index.en.html I tried on my smartphone and it's better to browse. Can someone else check on his own phone? I committed the patch into the Github repository (in cellphone-css branch): https://github.com/sblondon/release-notes/tree/cellphone-css Do you think about other improvements? Excellent, I have merged the changes (rebased, as required by git svn). Thanks for providing these. 2015-02-20 11:59 GMT+01:00 Stephan Beck sb...@mailbox.org: since I am involved in other things as, for instance, my tag description translation work and other stuff, I opt out of participating in this particular thread/issue. Thank you for your attempt! I hope you the best for your others contributions. Regards, Indeed thanks for your (this and other) contributions to both of you. ~Niels -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
On 2015-02-25 02:22, Stéphane Blondon wrote: The modified version is viewable as previously: http://stephane.yaal.fr/tmp/release-notes.amd64.html.icons/index.en.html I tried on my smartphone and it's better to browse. Can someone else check on his own phone? I did try with Iceweasels responsive design mode and it looks really good. Thanks! -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
2015-02-18 1:42 GMT+01:00 Stéphane Blondon stephane.blon...@gmail.com: I remember the warning from Google test suite about the use on small screen. I added css in order to increase the vertical space between the links in the table of contents. (There are several tables in the documentation.) The modified version is viewable as previously: http://stephane.yaal.fr/tmp/release-notes.amd64.html.icons/index.en.html I tried on my smartphone and it's better to browse. Can someone else check on his own phone? I committed the patch into the Github repository (in cellphone-css branch): https://github.com/sblondon/release-notes/tree/cellphone-css Do you think about other improvements? 2015-02-20 11:59 GMT+01:00 Stephan Beck sb...@mailbox.org: since I am involved in other things as, for instance, my tag description translation work and other stuff, I opt out of participating in this particular thread/issue. Thank you for your attempt! I hope you the best for your others contributions. Regards, -- Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hi, Stéphane, Am 18.02.2015 um 01:42 schrieb Stéphane Blondon: [...] In case it's easier to apply my patches, I setted up a repository on GitHub: https://github.com/sblondon/release-notes/tree/cellphone-css It's a clone of Niels's git repository. The files are added into the cellphone-css branch. With this last patch, I think the main needs are filled but I remember the warning from Google test suite about the use on small screen. I will probably check that during the week or next week-end. since I am involved in other things as, for instance, my tag description translation work and other stuff, I opt out of participating in this particular thread/issue. I hope you don't mind. Regards Stephan signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
2015-02-17 8:53 GMT+01:00 Niels Thykier ni...@thykier.net: By all means, please do make a clone/branch on git.debian.org or github if that will facilitate your work, so you do not stall on me. In case it's easier to apply my patches, I setted up a repository on GitHub: https://github.com/sblondon/release-notes/tree/cellphone-css It's a clone of Niels's git repository. The files are added into the cellphone-css branch. With this last patch, I think the main needs are filled but I remember the warning from Google test suite about the use on small screen. I will probably check that during the week or next week-end. -- Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hi, Stéphane, Am 17.02.2015 um 01:04 schrieb Stéphane Blondon: I uploaded them at: http://stephane.yaal.fr/tmp/release-notes.amd64.html.sbeck/index.en.html Thanks, very kind of you. I think they are not well integrated with the others icons and the rest of the CSS. Well, they have been designed without glancing at the stylesheets and images available in /usr/share/xml/docbook/stylesheet/docbook-xsl-ns/images, that's true, and they may not fit too well in the pictorial imagery used there. I came across Martin Borgert's comment and focused on modern and slim. On the other hand, they don't come up to their inherent aesthetics on this draft background. Anyway, they are just a suggestion. (However if people think they are better, commit them instead of the current ones.) Let's wait for other comments. Anyway, I think I don't have r/w access to the referred svn directory, do I? The 'home' icon is confusing: it's an 'up' arrow so it means more 'go to the top of the page' than 'go to home page'. Indeed, but any house with a sloping roof, particularly saddle or gable roof, looks like an arrow pointing upwards, if you look at it freely enough, with imagination, without being permuted by too many predefined concepts. This is what I meant with a somewhat reductional design. The house is made up of the arrow forms. But the roof's slope may be increased so that it is not equal to the slope of the arrows. I have a website, too, but the provider does not support the scp command, and I am not willing to use simple ftp transfer anymore If your concerns with the FTP protocol is security, perhaps your provider accepts FTPS or SFTP? Thanks, I'll check this. I'd prefer ssh using the scp command, but that was not possible the last time I wanted to upload content. signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
On 2015-02-17 01:04, Stéphane Blondon wrote: I didn't find the arrows icons in the repository in Niels's master branch. Do you have directly updated /usr/share/xml/docbook/stylesheet/nwalsh? Hi, I do not quite have the capacity for tracking this thread right now. Feel free to continue this one without me and I will catch up when I can. By all means, please do make a clone/branch on git.debian.org or github if that will facilitate your work, so you do not stall on me. Thanks, ~Niels -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
I have added the 'important' and 'note' icons from Tango desktop project. There is no 'caution' icon in Tango so I changed the colors of the 'important' icon to add it. You can find the 3 icons attached to this message. The source for the 'caution' icon is added too in case of someone wants to modifiy it. You can find a temporary demo at: http://stephane.yaal.fr/tmp/release-notes.amd64.html.icons/ch-about.en.html I didn't find the arrows icons in the repository in Niels's master branch. Do you have directly updated /usr/share/xml/docbook/stylesheet/nwalsh? 2015-02-14 21:30 GMT+01:00 Stephan Beck sb...@mailbox.org: And, Stéphane, this time you may integrate it into the html file(s) and publish it, if you like. I uploaded them at: http://stephane.yaal.fr/tmp/release-notes.amd64.html.sbeck/index.en.html I think they are not well integrated with the others icons and the rest of the CSS. (However if people think they are better, commit them instead of the current ones.) The 'home' icon is confusing: it's an 'up' arrow so it means more 'go to the top of the page' than 'go to home page'. I have a website, too, but the provider does not support the scp command, and I am not willing to use simple ftp transfer anymore If your concerns with the FTP protocol is security, perhaps your provider accepts FTPS or SFTP? -- Stéphane
Bug#772963: release-notes: cellphone friendly CSS
Hi, Am 21.01.2015 um 09:10 schrieb W. Martin Borgert: On 2015-01-21 01:23, Stéphane Blondon wrote: Demos are temporary available : [...] 2. I find the icons (esp. the house icon, but also the arrows) too old-fashioned and too large. Not sure, whether there is anything more modern and slim, however. After looking at some designs of arrows and house/home icons which did not satisfy me, I have drafted a new design for both the arrow and the home icons (please find attached the new .png draft files). Well, it's a somewhat reductional design (particularly, in the case of the home icon) that, in my opinion, has a modern and slim touch, but I don't know what you think about it. It's just a draft and there has to be done some more work concerning details (background, maybe the size as well), but before going on, I'd like to hear your comments. And, Stéphane, this time you may integrate it into the html file(s) and publish it, if you like. I have a website, too, but the provider does not support the scp command, and I am not willing to use simple ftp transfer anymore, so I'm a bit stuck with that issue at the moment. I guess, I have to look for a new provider. Cheers, Stephan Beck signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Hi, Osamu, [...] Is there any chance to get access to the docbook-xml (source) file, as a draft, at least? [...] Basically, any part of HTML generation definitions in the packaged conversion scheme can be overridden by the user. Normal customization xslt file in the source of documentation starts off like: ... after some standard lines ... !-- Import our base stylesheet -- xsl:import href=file:///usr/share/xml/docbook/stylesheet/docbook-xsl/xhtml-1_1/chunk.xsl/ I guess you mean stylesheet when you refer to customization xslt file, don't you? You usually use the xsl:import element, or even the xsl:include element to use external rules and declarations in your base stylesheet. I haven't checked it with docbook-xml, but in XML the reference to the stylesheet is usually done via ?xml-stylesheet type=text/xsl href=[URI].xsl? (at least when we talk about a client-based transformation) By the way, in Debian-doc, is it done client-based or server-based (using php)? let's see it. It import chunk-common.xsl which seems to be the one making div, table, etc. All you need is to create a customized chunk-common.xsl and import it to your customization xslt file in the source of documentation before chunk.xsl so the customized definition wins over default one. Again, I haven't checked that issue with docbook5-xml yet (I understand that source of documentation refers to the docbook-xml source), but in XSLT, in the case of template rules having the same match attribute, the local template rules, which are those declared in your base stylesheet, override the imported ones. If you want to use the imported rules in addition to those declared in your base stylesheet, you have to use xsl:apply-imports/. [...] But I think this is not something we should do for this late in the freeze time. Let's stick with simple CSS only fix for now. Yes, I agree to that. Also, if Stephan Beck docbook-xml can be improved for its HTML, submitting bug report to the upstream of docbook-xml may be good idea. Well, not to use tables as a layout element is laid down in (1), (2), (3), for instance, and it reminds me of the early st(ages) of the web when everything was done using tables. I guess, it's a question of authoring, not one of the docbook-xml package, but I'm not quite sure about that. Moreover, I have decided to use the fairly new docbook5-xml which differs considerably from docbook-xml (4.xx), well, that's what the .doc says. I will check the possibilities for XSLT processing and (X)HTML output generation docbook5-xml ships with, and may suggest a way for getting rid of too much tables, or maybe not. Osamu (1)http://www.w3.org/TR/2009/NOTE-mwbp-guidelines-20091020/ CH. 3.28 (2) http://www.w3.org/TR/2008/REC-mobileOK-basic10-tests-20081208/ Chs. 3.22, 3.23 (3) http://css4you.de (German) Stephan signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Hi, Stéphane, The first quick and dirty solution (only touching the .html file) is to suppress the second table row in the.html file. The solution I provided is CSS only. If we need to change the HTML, I think your second solution (removing the table) is a better one. Well, it (the second one) was just a suggestion, not a solution. It works with 320x480 as one of the most common small screen sizes. I have tested some other screen sizes and my suggestion is not working that fine there, I admit. I retract it for the moment, expecting to give it another try or throw it in the garbage pale :-) Do you want I host your patch, so it will be easy to everyone to view your version? Thank you, but it should be revised first. Cheers, Stephan Beck signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Hi, Niels, The main problem with changing the HTML is that it is mostly generated beyond our control. So far I managed to extend the existing HTML using supported hooks for the given cases, but I fear this table might not have such a hook. Disclaimer, I know nothing more about docbook-xml than I can google - by all means, feel free to prove me wrong. I have started working with docbook5-xml some time ago. It might take me some time to prove you wrong, though ;-) What I forgot to ask (you) all along this thread is: Is there any chance to get access to the original docbook-xml file of the Release notes (as a draft)? It would be a nice chance to keep practising, even if it takes me a while. I've been doing it with some remorse, lately, as I still have to get that tag description translation work done, for, ehm, the lintian maintainer. :-) Regards Stephan signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Thank you Niels for the integration into master. :-) 2015-02-11 11:49 GMT+01:00 Osamu Aoki os...@debian.org: The main problem with changing the HTML is that it is mostly generated beyond our control. I would not say this but I agree customizing auto-generated HTML is not for the faint hearted (including myself.) I've seen the XML and XSLT stuff for the maint-guide and I don't plan to dive in this part. I agree to maintain and help in the future for CSS patches, not the XSLT part. Normal customization xslt file in the source of documentation starts off like: ... after some standard lines ... !-- Import our base stylesheet -- xsl:import href=file:///usr/share/xml/docbook/stylesheet/docbook-xsl/xhtml-1_1/chunk.xsl/ But I think this is not something we should do for this late in the freeze time. Let's stick with simple CSS only fix for now. I agree about this strategy. I will probalby update the icons for caution, info blocks this week-end. -- Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hi, On Tue, Feb 10, 2015 at 09:40:20PM +0100, Niels Thykier wrote: On 2015-02-10 21:08, Stéphane Blondon wrote: 2015-02-05 23:23 GMT+01:00 Stephan Beck sb...@mailbox.org: The first quick and dirty solution (only touching the .html file) is to suppress the second table row in the.html file. The solution I provided is CSS only. If we need to change the HTML, I think your second solution (removing the table) is a better one. A second solution I'll work on is to replace the table with a div id=navfooter containing a nav element that includes anchors and images. I think it's better to use table only for real tables, not as a space structuring design element. This solution will imply changes to the .css. I agree. Replacing the table (by a list for example) is a better solution. I don't know how much the maintainers are ready to change the rendering. [...] The main problem with changing the HTML is that it is mostly generated beyond our control. I would not say this but I agree customizing auto-generated HTML is not for the faint hearted (including myself.) So far I managed to extend the existing HTML using supported hooks for the given cases, but I fear this table might not have such a hook. That is what I usually do and stop. Provided there is a decent maintainer solution, I am happy to accept it. I just do not want to end up maintaining a custom XML - XHTML transformation only used by us (or a handwritten HTML-post processor for fixing style issues). Basically, any part of HTML generation definitions in the packaged conversion scheme can be overridden by the user. Normal customization xslt file in the source of documentation starts off like: ... after some standard lines ... !-- Import our base stylesheet -- xsl:import href=file:///usr/share/xml/docbook/stylesheet/docbook-xsl/xhtml-1_1/chunk.xsl/ let's see it. It import chunk-common.xsl which seems to be the one making div, table, etc. All you need is to create a customized chunk-common.xsl and import it to your customization xslt file in the source of documentation before chunk.xsl so the customized definition wins over default one. If this approach does not work, you replace import line in your customization xslt file with chunk.xsl file content and change its import chunk-common.xsl line pointing to your customized definition. I have not tried this but that is what I think possible. But I think this is not something we should do for this late in the freeze time. Let's stick with simple CSS only fix for now. Also, if Stephan Beck docbook-xml can be improved for its HTML, submitting bug report to the upstream of docbook-xml may be good idea. Osamu -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-31 17:14, Stéphane Blondon wrote: Thank you Niels for your help! I cloned your git repository and patched the debian.css file. I attach here the new file and a diff. If it's nicer for you, I could create a temporary repository on GitHub. I've got a account on alioth (sblondon-guest) too. The temporary demo: http://stephane.yaal.fr/tmp/release-notes.amd64.html/index.en.html Hi, Thanks, I have applied the patch and merged it into trunk. With the next rebuild, the release-notes will now be using this new design. \o/ Once again, thanks for your work (to all contributors). I admit I have lost track of this thread in the past 1-1½ week; please ping me if I overlooked a mail from you that you believe I should have replied too. Details about the patch below: [...] We tried to use word-wrap but the attempt fails. According to him, with CSS only, we could decrease the font size or hide the text. I tried the decrease the font size but it's not always enough. So in the patch, the chapter names are hidden on small screen, only the arrows are displayed. This solution fixes the problem on small screen. On larger screen, both chapter names and arrows are displayed. Seems like a reasonable work around. :) The home image is below the arrows. In my opinion, it would be better to display it at the same height than the arrows. I don't know if it's hard to do. If you can figure out how to do it, I would be interest in a patch for it. That said, it is not a deal breaker. :) * The Caution remarks (plus note etc.) has a so much margin that only 16-20 characters are shown per line[2]. In desktop mode it only takes 1-2 lines. It's not really easy to fix because there is css style directly in the page: div class=caution style=margin-left: 0.5in; margin-right: 0.5in; [...] Turns out it is fair simple to do, but it kills *all* inline styles[1]. I keep some of the added css in the patch and the caution, important and notes block got a lower margin on small screen. Ordered lists have the same behaviour (like unordered list). What do you think about these changes? Looks good to me, thanks. :) For next improvement, we could replace the caution and note images with more modern ones (from the publican project or tango desktop project for example). Sounds excellent. :) ~Niels -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
On 2015-02-10 21:08, Stéphane Blondon wrote: 2015-02-05 23:23 GMT+01:00 Stephan Beck sb...@mailbox.org: The first quick and dirty solution (only touching the .html file) is to suppress the second table row in the.html file. The solution I provided is CSS only. If we need to change the HTML, I think your second solution (removing the table) is a better one. A second solution I'll work on is to replace the table with a div id=navfooter containing a nav element that includes anchors and images. I think it's better to use table only for real tables, not as a space structuring design element. This solution will imply changes to the .css. I agree. Replacing the table (by a list for example) is a better solution. I don't know how much the maintainers are ready to change the rendering. [...] The main problem with changing the HTML is that it is mostly generated beyond our control. So far I managed to extend the existing HTML using supported hooks for the given cases, but I fear this table might not have such a hook. Disclaimer, I know nothing more about docbook-xml than I can google - by all means, feel free to prove me wrong. Provided there is a decent maintainer solution, I am happy to accept it. I just do not want to end up maintaining a custom XML - XHTML transformation only used by us (or a handwritten HTML-post processor for fixing style issues). ~Niels -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
2015-02-05 23:23 GMT+01:00 Stephan Beck sb...@mailbox.org: The first quick and dirty solution (only touching the .html file) is to suppress the second table row in the.html file. The solution I provided is CSS only. If we need to change the HTML, I think your second solution (removing the table) is a better one. A second solution I'll work on is to replace the table with a div id=navfooter containing a nav element that includes anchors and images. I think it's better to use table only for real tables, not as a space structuring design element. This solution will imply changes to the .css. I agree. Replacing the table (by a list for example) is a better solution. I don't know how much the maintainers are ready to change the rendering. However, it will permit to keep the text for little resolution by changing the list from horizontal to vertical with CSS. Do you want I host your patch, so it will be easy to everyone to view your version? -- Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hi Stéphane, hi Niels,
Am 31.01.2015 um 17:14 schrieb Stéphane Blondon:
[...]
I cloned the git as well and worked out another solution for the footer which I
announced in my previous message (suppressing the table and adding a nav
element).
Please have a look at the attached files:
(1) ch-whats-new.en.diff
(2) debian.css
Please comment on any issues you may find. There might be plenty of them :-)
In my next message I will propose some new designs for the home and the arrow
icons.
Kind regards
Stephan
Index: ch-whats-new.en_a.html
===
--- ch-whats-new.en_a.html (Revision 1)
+++ ch-whats-new.en_a.html (Arbeitskopie)
@@ -212,4 +212,4 @@
shipped with Stretch. See the a class=ulink href=http://wiki.debian.org/Teams/MySQL; target=_topDebian MySQL Team wiki page/a
for more information./p/divdiv class=sectiondiv class=titlepagedivdivh3 class=titlea id=idp38757168/a2.2.7. PHP applications/h3/div/div/divpThe Horde Application Framework is available in Jessie, via
the code class=systemitemphp-horde/codea id=idp38758640 class=indexterm/a package.
- /p/div/div/divdiv class=navfooterhr /table width=100% summary=Navigation footertrtd width=40% align=lefta accesskey=p href=ch-about.en.htmlimg src=images/prev.png alt=Prev //a /tdtd width=20% align=center /tdtd width=40% align=right a accesskey=n href=ch-installing.en.htmlimg src=images/next.png alt=Next //a/td/trtrtd width=40% align=left valign=topChapter 1. Introduction /tdtd width=20% align=centera accesskey=h href=index.en.htmlimg src=images/home.png alt=Home //a/tdtd width=40% align=right valign=top Chapter 3. Installation System/td/tr/table/div/body/html
\ No newline at end of file
+ /p/div/div/divdiv class=navfooterhr /navulli class=preva accesskey=p href=ch-about.en.htmlimg src=images/prev.png alt=Prev //aChapter 1. Introduction/lili class=homea accesskey=h href=index.en.htmlimg src=images/home.png alt=Home //a/lili class=nextChapter 3. Installation Systema accesskey=n href=ch-installing.en.htmlimg src=images/next.png alt=Next //a/li/ul/nav/div/body/html
\ No newline at end of file
/* Cascading stylesheet for the Debian Installer Installation Guide */
/* global style of the page */
body {
background-color: #EE;
border: 40px solid #EE;
margin: 0;
padding: 0 10px;
font-family: liberation sans, Myriad , Bitstream Vera Sans, Lucida Grande, Luxi Sans, Trebuchet MS, helvetica, verdana, arial, sans-serif;
line-height: 1.2em;
}
@media (max-width: 5in), (max-device-width: 5in) {
body {
border: 0px;
padding: 0px;
}
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
margin-top: 0;
padding: 2em 6em 6em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
padding: 2em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
background-color: #FF;
margin: 40px auto 4em;
padding: 1px 40px 20px 30px;
}
@media (max-width: 1024px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 45em;
}
}
@media (min-width: 1025px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 70em;
}
}
@media (max-width: 5in), (max-device-width: 5in) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 100%;
}
}
hr {
border-top: 1px dotted #808080;
margin: 0;
}
a:link {
color: #0035C7;
text-decoration: none;
}
a:visited {
color: #00207A;
text-decoration: none;
}
a:link:hover {
color: #00207A;
text-decoration: underline;
}
code {
font-family: liberation mono,bitstream vera mono,dejavu mono,monospace;
font-weight: bold;
word-wrap: break-word;
}
h1 {
color: #C70036;
line-height: 1.1em;
}
h2, h3, h4, h5, h6 {
color: #C70036;
}
@media (max-width: 5in), (max-device-width: 5in){
dl, dt, dd {
margin-left: 0.25em;
}
ul, ol {
padding-left: 1.5em;
}
}
/* for first page */
.book .titlepage h1.title {
text-align: center;
}
.titlepage h1.title {
text-align: left;
}
.authorgroup div {
text-align: center;
}
/* table in content */
.informaltable table {
border: 1px solid #AA;
}
.informaltable table th {
border-width: 0;
background-color: #C70036;
}
.informaltable table td {
border-width: 0;
}
.informaltable
Bug#772963: release-notes: cellphone friendly CSS
Am 31.01.2015 um 17:14 schrieb Stéphane Blondon: Thank you Niels for your help! I cloned your git repository and patched the debian.css file. I attach here the new file and a diff. If it's nicer for you, I could create a temporary repository on GitHub. I've got a account on alioth (sblondon-guest) too. Me, too (stebe-guest). It would be nice to exchange ideas there, if desired and possible. The temporary demo: http://stephane.yaal.fr/tmp/release-notes.amd64.html/index.en.html The home image is below the arrows. In my opinion, it would be better to display it at the same height than the arrows. I don't know if it's hard to do. The first quick and dirty solution (only touching the .html file) is to suppress the second table row in the.html file. (1) I've only applied it to the What's new in Debian 8.html, just as an example. In this case you do not have to change anything in the .css. Disadvantage: The footer has lost height. For now, I cannot provide a demo url and I don't want to attach a file because it's too large for a mailing list. Below you find a simple diff. A second solution I'll work on is to replace the table with a div id=navfooter containing a nav element that includes anchors and images. I think it's better to use table only for real tables, not as a space structuring design element. This solution will imply changes to the .css. (1) diff --suppress-common-lines ch-whats-new.en-old.html ch-whats-new.en.html 215c215 /p/div/div/divdiv class=navfooterhr /table width=100% summary=Navigation footertrtd width=40% align=lefta accesskey=p href=ch-about.en.htmlimg src=images/prev.png alt=Prev //a /tdtd width=20% align=center /tdtd width=40% align=right a accesskey=n href=ch-installing.en.htmlimg src=images/next.png alt=Next //a/td/trtrtd width=40% align=left valign=topChapter 1. Introduction /tdtd width=20% align=centera accesskey=h href=index.en.htmlimg src=images/home.png alt=Home //a/tdtd width=40% align=right valign=top Chapter 3. Installation System/td/tr/table/div/body/html \ no line-break at end of file --- /p/div/div/divdiv class=navfooterhr /table width=100% summary=Navigation footertrtd width=40% align=lefta accesskey=p href=ch-about.en.htmlimg src=images/prev.png alt=Prev //a Chapter 1. Introduction/tdtd width=20% align=centera accesskey=h href=index.en.htmlimg src=images/home.png alt=Home //a/tdtd width=40% align=right Chapter 3. Installation System a accesskey=n href=ch-installing.en.htmlimg src=images/next.png alt=Next //a/td/tr/table/div/body/html \ no line-break at end of file What do you think about these changes? For next improvement, we could replace the caution and note images with more modern ones (from the publican project or tango desktop project for example). I haven't had time to check but if there's still time I'll check some new designs. Regards Stephan signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Thank you Niels for your help! I cloned your git repository and
patched the debian.css file.
I attach here the new file and a diff. If it's nicer for you, I could
create a temporary repository on GitHub. I've got a account on alioth
(sblondon-guest) too.
The temporary demo:
http://stephane.yaal.fr/tmp/release-notes.amd64.html/index.en.html
Details about the patch below:
2015-01-27 8:46 GMT+01:00 Niels Thykier ni...@thykier.net:
On 2015-01-24 18:27, Stéphane Blondon wrote:
2015-01-21 17:48 GMT+01:00 Niels Thykier ni...@thykier.net:
There
are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
footer expands. It's the same problem in the current version of the
footer and is not due to the new css. For example, see with a little
screen :
https://www.debian.org/releases/stable/amd64/ch01s06.html
I don't think it's easy to fix without changing HTML. I will ask to a
web designer at work monday but I'm pessimistic.
Ok, let me know what he/she said.
We tried to use word-wrap but the attempt fails. According to him,
with CSS only, we could decrease the font size or hide the text.
I tried the decrease the font size but it's not always enough.
So in the patch, the chapter names are hidden on small screen, only
the arrows are displayed. This solution fixes the problem on small
screen.
On larger screen, both chapter names and arrows are displayed.
The home image is below the arrows. In my opinion, it would be better
to display it at the same height than the arrows. I don't know if it's
hard to do.
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
[...]
Turns out it is fair simple to do, but it kills *all* inline styles[1].
I keep some of the added css in the patch and the caution, important
and notes block got a lower margin on small screen.
Ordered lists have the same behaviour (like unordered list).
What do you think about these changes?
For next improvement, we could replace the caution and note images
with more modern ones (from the publican project or tango desktop
project for example).
--
Stéphane
diff --git a/debian.css b/debian.css
index 0d40995..593c4e5 100644
--- a/debian.css
+++ b/debian.css
@@ -85,7 +85,7 @@ h2, h3, h4, h5, h6 {
margin-left: 0.25em;
}
-ul {
+ul, ol {
padding-left: 1.5em;
}
}
@@ -172,22 +172,22 @@ pre.screen {
background-image: url('images/draft.png');
}
-
-/* Extracted from docbook.xml default output */
-
-h2.title {
-clear: both;
+@media (max-width: 5in), (max-device-width: 5in){
+.navfooter table {
+font-size: 0;
+}
}
-div.important, div.caution, div.note {
-margin-left: 0.5in;
-margin-right: 0.5in;
-}
-div.footnotes hr {
-width: 100;
+/* Infos blocks */
+.important, .caution, .note {
+margin-left: 2em;
+margin-right: 2em;
}
-ul.itemizedlist {
-list-style-type: disc;
+@media (max-width: 5in), (max-device-width: 5in){
+.important, .caution, .note {
+margin-left: 0.5em;
+margin-right: 0.5em;
+}
}
/* Cascading stylesheet for the Debian Installer Installation Guide */
/* global style of the page */
body {
background-color: #EE;
border: 40px solid #EE;
margin: 0;
padding: 0 10px;
font-family: liberation sans, Myriad , Bitstream Vera Sans, Lucida Grande, Luxi Sans, Trebuchet MS, helvetica, verdana, arial, sans-serif;
line-height: 1.2em;
}
@media (max-width: 5in), (max-device-width: 5in){
body {
border: 0px;
padding: 0px;
}
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
margin-top: 0;
padding: 2em 6em 6em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
padding: 2em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
background-color: #FF;
margin: 40px auto 4em;
padding: 1px 40px 20px 30px;
}
@media (max-width: 1024px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 45em;
}
}
@media (min-width: 1025px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 70em;
}
}
@media (max-width: 5in), (max-device-width: 5in){
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body
Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-27 08:46, Niels Thykier wrote:
On 2015-01-24 18:27, Stéphane Blondon wrote:
[...]
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
Like the footer, this margin create the same problem on little screen
for the current documentation (Debian 7.0).
The clean way to do it is to remove the style attribute and to it in
the css file. Do you think it's easy to do?
[...]
Turns out it is fair simple to do, but it kills *all* inline styles[1].
Simply apply attached patch and rebuild. All inline styles should now
be gone (for better and for worse). We might need to extract the
existing styles to keep the current look and feel.
[...]
~Niels
[1] Well, except the body used for displaying the draft image - but we
have an existing work-around for that.
Attached patch replaces my previous one and also extracts the inline
styles (I noticed) into the debian.css. I have tried to record them as
faithfully as I could.
I also attached the current debian.css file in full, in case it is
easier for you to work with that.
Thanks,
~Niels
From ba4d3e2eee49b89ab0329d8ca6d00ef870f0ee66 Mon Sep 17 00:00:00 2001
From: Niels Thykier ni...@thykier.net
Date: Tue, 27 Jan 2015 17:46:35 +0100
Subject: [PATCH 8/8] Extract inline css styles into debian.css
Signed-off-by: Niels Thykier ni...@thykier.net
---
debian.css | 20
html.xsl | 2 ++
2 files changed, 22 insertions(+)
diff --git a/debian.css b/debian.css
index 5397613..0d40995 100644
--- a/debian.css
+++ b/debian.css
@@ -171,3 +171,23 @@ pre.screen {
.navfooter table {
background-image: url('images/draft.png');
}
+
+
+/* Extracted from docbook.xml default output */
+
+h2.title {
+clear: both;
+}
+
+div.important, div.caution, div.note {
+margin-left: 0.5in;
+margin-right: 0.5in;
+}
+
+div.footnotes hr {
+width: 100;
+}
+
+ul.itemizedlist {
+list-style-type: disc;
+}
diff --git a/html.xsl b/html.xsl
index 0b58419..161a1ef 100644
--- a/html.xsl
+++ b/html.xsl
@@ -12,6 +12,8 @@
xsl:param name=section.autolabel1/xsl:param
xsl:param name=section.label.includes.component.label1/xsl:param
xsl:param name=use.id.as.filename1/xsl:param
+ xsl:param name=css.decoration0/xsl:param
+ xsl:param name=admon.style /
!--
Add a viewport and overwrite a few of the pre-defined styles
--
2.1.4
/* Cascading stylesheet for the Debian Installer Installation Guide */
/* global style of the page */
body {
background-color: #EE;
border: 40px solid #EE;
margin: 0;
padding: 0 10px;
font-family: liberation sans, Myriad , Bitstream Vera Sans, Lucida Grande, Luxi Sans, Trebuchet MS, helvetica, verdana, arial, sans-serif;
line-height: 1.2em;
}
@media (max-width: 5in), (max-device-width: 5in){
body {
border: 0px;
padding: 0px;
}
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
margin-top: 0;
padding: 2em 6em 6em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
padding: 2em;
}
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
background-color: #FF;
margin: 40px auto 4em;
padding: 1px 40px 20px 30px;
}
@media (max-width: 1024px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 45em;
}
}
@media (min-width: 1025px) {
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 70em;
}
}
@media (max-width: 5in), (max-device-width: 5in){
body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
max-width: 100%;
}
}
hr {
border-top: 1px dotted #808080;
margin: 0;
}
a:link {
color: #0035C7;
text-decoration: none;
}
a:visited {
color: #00207A;
text-decoration: none;
}
a:link:hover {
color: #00207A;
text-decoration: underline;
}
code {
font-family: liberation mono,bitstream vera mono,dejavu mono,monospace;
font-weight: bold;
word-wrap: break-word;
}
h1 {
color: #C70036;
line-height: 1.1em;
}
h2, h3, h4, h5, h6 {
color: #C70036;
}
@media (max-width: 5in), (max-device-width: 5in){
dl, dt, dd {
margin-left: 0.25em;
}
Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-24 18:27, Stéphane Blondon wrote:
2015-01-21 17:48 GMT+01:00 Niels Thykier ni...@thykier.net:
[...]
It was a Nokia Lumia Windows phone. I assume that means it was an
internet explorer. Regardless, I reproduced it in Iceweasel's developer
mode (see attached screenshot) using the (predefined) 320x480 window mode.
Thanks, I understand the problem. However it's not easy to fix. There
are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
footer expands. It's the same problem in the current version of the
footer and is not due to the new css. For example, see with a little
screen :
https://www.debian.org/releases/stable/amd64/ch01s06.html
I don't think it's easy to fix without changing HTML. I will ask to a
web designer at work monday but I'm pessimistic.
Ok, let me know what he/she said.
[...]
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
Like the footer, this margin create the same problem on little screen
for the current documentation (Debian 7.0).
The clean way to do it is to remove the style attribute and to it in
the css file. Do you think it's easy to do?
If not changing it, the rendering is the same with or without the css
on little screen: plenty lines.
If you can remove the stylee attribute, I will work on improving the
caution block.
Turns out it is fair simple to do, but it kills *all* inline styles[1].
Simply apply attached patch and rebuild. All inline styles should now
be gone (for better and for worse). We might need to extract the
existing styles to keep the current look and feel.
I'm ready to improve other points if needed.
Excellent, thanks.
~Niels
[1] Well, except the body used for displaying the draft image - but we
have an existing work-around for that.
diff --git a/html.xsl b/html.xsl
index 5cc4f74..b11ca41 100644
--- a/html.xsl
+++ b/html.xsl
@@ -10,6 +10,8 @@
xsl:param name=section.autolabel1/xsl:param
xsl:param name=section.label.includes.component.label1/xsl:param
xsl:param name=use.id.as.filename1/xsl:param
+ xsl:param name=css.decoration0/xsl:param
+ xsl:param name=admon.style /
xsl:template name=user.head.content
meta name=viewport content=width=device-width, initial-scale=1 /
Bug#772963: release-notes: cellphone friendly CSS
Anyway, by defining 480x800 window size with (1) with the reported Samsung Galaxy (I tried all Galaxy models available in (2,3) and also with Nokia Lumia's only model listed in (2,3) results in: The next arrow icon sticks to the right edge of the window and no previous arrow or house icon in sight either. ...because in fact I made the tests using the Release Notes page, which is the very first ;) (and, for that has no previous and no house icon either) Now, I have checked it with Chapter 2 What's new in Debian 8.html - everything's ok here, Galaxy and Lumia (480x800). With a 320x480 window size navfooter does not fit in and forces you to scroll to the right (no problem with navheader, though). Regards Stephan signature.asc Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
Am 24.01.2015 um 18:27 schrieb Stéphane Blondon:
2015-01-21 17:48 GMT+01:00 Niels Thykier ni...@thykier.net:
On 2015-01-21 01:23, Stéphane Blondon wrote:
* The next/previous arrows do not fit in the bottom of e.g. chapter 2.
There is /no/ problem in the top - only the bottom.
* Possibly related to the previous problem. I am having a hard time
clicking on the next arrow in the bottom (even after I scroll it
into view). The next arrow in the top does not seem to have the same
issue.
I don't see the problem. Which device and browser do you use?
It was a Nokia Lumia Windows phone. I assume that means it was an
internet explorer. Regardless, I reproduced it in Iceweasel's developer
mode (see attached screenshot) using the (predefined) 320x480 window mode.
I reproduced it with the mentioned developer's mode predefined small screen
option, too, but, in fact, the one who reported the problem was talking about a
480x800 screen size of his Samsung Galaxy cellphone, as far as I recall.
Another Web Developer's extension to Firefox/Iceweasel might be useful as well:
it provides the option to define any window size and to check out the result
from within Firefox.
There is a separate User Agent Switcher Firefox extension (2), also developped
by him, with which you can reproduce the representation with different user
agents. It is possible to import any existing user agent list or to set up a
user-defined list on your own and import it. An updated list of them is
available on (3).
Anyway, by defining 480x800 window size with (1) with the reported Samsung
Galaxy (I tried all Galaxy models available in (2,3) and also with Nokia Lumia's
only model listed in (2,3) results in: The next arrow icon sticks to the right
edge of the window and no previous arrow or house icon in sight either.
I am not a professional web designer, but as Stéphane puts it, the Chapter
2.html file is too crowded by style information that should be better put into
the .css, at least, that's my five cent.
I checked the Google's PageSpeed Insights and downloaded the latest
documentation on that issue W3C's CSS Device Adaptation, for instance. If I come
about a decent (laymen's ;) solution I am going to hand it in.
Regards,
Stephan Beck
(1) http://www.chrispederick.com/work/web-developer/
(2) http://www.chrispederick.com/work/user-agent-switcher
(3) http://techpatterns.com/forums/about304.html (by Harald Hope, BSD 2 Clause)
Thanks, I understand the problem. However it's not easy to fix. There
are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
footer expands. It's the same problem in the current version of the
footer and is not due to the new css. For example, see with a little
screen :
https://www.debian.org/releases/stable/amd64/ch01s06.html
I don't think it's easy to fix without changing HTML. I will ask to a
web designer at work monday but I'm pessimistic.
I am very pleased with the changes so far. If the missing next arrows
(above) and the huge margin (see below) issues can be resolved, I would
certainly not mind putting this live.
Great news! :)
I've updated the debian.css file in order to spend less space on
little screen for lists and table of content.
The URLs are the same:
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A01.%C2%A0Introduction.html
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html
http://stephane.yaal.fr/tmp/installer_docs/Release%20Notes%20for%20Debian%208%20%28jessie%29,%2064-bit%20PC_draft.html
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
Like the footer, this margin create the same problem on little screen
for the current documentation (Debian 7.0).
The clean way to do it is to remove the style attribute and to it in
the css file. Do you think it's easy to do?
If not changing it, the rendering is the same with or without the css
on little screen: plenty lines.
If you can remove the stylee attribute, I will work on improving the
caution block.
I'm ready to improve other points if needed.
signature.asc
Description: OpenPGP digital signature
Bug#772963: release-notes: cellphone friendly CSS
I forgot to tak about the patch!
Just add in debian.css:
@media (max-width: 5in), (max-device-width: 5in){
dl, dt, dd {
margin-left: 0.25em;
}
ul {
padding-left: 1.5em;
}
}
Or download the file from the provided demo.
Cheers
2015-01-24 18:27 GMT+01:00 Stéphane Blondon stephane.blon...@gmail.com:
2015-01-21 17:48 GMT+01:00 Niels Thykier ni...@thykier.net:
On 2015-01-21 01:23, Stéphane Blondon wrote:
* The next/previous arrows do not fit in the bottom of e.g. chapter 2.
There is /no/ problem in the top - only the bottom.
* Possibly related to the previous problem. I am having a hard time
clicking on the next arrow in the bottom (even after I scroll it
into view). The next arrow in the top does not seem to have the same
issue.
I don't see the problem. Which device and browser do you use?
It was a Nokia Lumia Windows phone. I assume that means it was an
internet explorer. Regardless, I reproduced it in Iceweasel's developer
mode (see attached screenshot) using the (predefined) 320x480 window mode.
Thanks, I understand the problem. However it's not easy to fix. There
are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
footer expands. It's the same problem in the current version of the
footer and is not due to the new css. For example, see with a little
screen :
https://www.debian.org/releases/stable/amd64/ch01s06.html
I don't think it's easy to fix without changing HTML. I will ask to a
web designer at work monday but I'm pessimistic.
I am very pleased with the changes so far. If the missing next arrows
(above) and the huge margin (see below) issues can be resolved, I would
certainly not mind putting this live.
Great news! :)
I've updated the debian.css file in order to spend less space on
little screen for lists and table of content.
The URLs are the same:
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A01.%C2%A0Introduction.html
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html
http://stephane.yaal.fr/tmp/installer_docs/Release%20Notes%20for%20Debian%208%20%28jessie%29,%2064-bit%20PC_draft.html
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
Like the footer, this margin create the same problem on little screen
for the current documentation (Debian 7.0).
The clean way to do it is to remove the style attribute and to it in
the css file. Do you think it's easy to do?
If not changing it, the rendering is the same with or without the css
on little screen: plenty lines.
If you can remove the stylee attribute, I will work on improving the
caution block.
I'm ready to improve other points if needed.
--
Stéphane
--
Imprimez ce message en A2 et en couleur au moins 500 fois!
Brûlez des arbres!!
-- envoyé depuis ma centrale à charbon
Stéphane
--
To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org
with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
2015-01-21 9:10 GMT+01:00 W. Martin Borgert deba...@debian.org: 2. I find the icons (esp. the house icon, but also the arrows) too old-fashioned and too large. Not sure, whether there is anything more modern and slim, however. For the record, the icons come from the Tango desktop project. The red arrows are Tango arrows; only the colors were been modified. http://tango.freedesktop.org/Tango_Desktop_Project -- Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
2015-01-21 17:48 GMT+01:00 Niels Thykier ni...@thykier.net:
On 2015-01-21 01:23, Stéphane Blondon wrote:
* The next/previous arrows do not fit in the bottom of e.g. chapter 2.
There is /no/ problem in the top - only the bottom.
* Possibly related to the previous problem. I am having a hard time
clicking on the next arrow in the bottom (even after I scroll it
into view). The next arrow in the top does not seem to have the same
issue.
I don't see the problem. Which device and browser do you use?
It was a Nokia Lumia Windows phone. I assume that means it was an
internet explorer. Regardless, I reproduced it in Iceweasel's developer
mode (see attached screenshot) using the (predefined) 320x480 window mode.
Thanks, I understand the problem. However it's not easy to fix. There
are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
footer expands. It's the same problem in the current version of the
footer and is not due to the new css. For example, see with a little
screen :
https://www.debian.org/releases/stable/amd64/ch01s06.html
I don't think it's easy to fix without changing HTML. I will ask to a
web designer at work monday but I'm pessimistic.
I am very pleased with the changes so far. If the missing next arrows
(above) and the huge margin (see below) issues can be resolved, I would
certainly not mind putting this live.
Great news! :)
I've updated the debian.css file in order to spend less space on
little screen for lists and table of content.
The URLs are the same:
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A01.%C2%A0Introduction.html
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html
http://stephane.yaal.fr/tmp/installer_docs/Release%20Notes%20for%20Debian%208%20%28jessie%29,%2064-bit%20PC_draft.html
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
It's not really easy to fix because there is css style directly in the page:
div class=caution style=margin-left: 0.5in; margin-right: 0.5in;
Like the footer, this margin create the same problem on little screen
for the current documentation (Debian 7.0).
The clean way to do it is to remove the style attribute and to it in
the css file. Do you think it's easy to do?
If not changing it, the rendering is the same with or without the css
on little screen: plenty lines.
If you can remove the stylee attribute, I will work on improving the
caution block.
I'm ready to improve other points if needed.
--
Stéphane
--
To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org
with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-21 01:23, Stéphane Blondon wrote: Hi Niels, I've done some improvements based on your previous remarks. I patched the files provided by your online demo. [...] Many thanks; I have applied these locally now. I will update my copy on people.debian.org soon. :) 2015-01-03 15:14 GMT+01:00 Niels Thykier ni...@thykier.net: I have a list of remarks below. Mind you, despite its length, it looks rather good in general. I took the liberty of walking through all of the chapters to find issues. * I think the next/previous arrows should have a different colour than grey as it does not stand out (even in production mode). In this new version, the arrows are red, not grey. It's easier to see them. The files are attached to this message (png files for direct use, svg files for modifications). Excellent, they are definitely more visible. * The grey box around the content seems a bit weird (desktop mode). In cell-phone mode, it looks fine. Perhaps it is just a preference rather than an actual issue. I'm not really convinced. The general style is based on Publican one. I don't want to change it if the improvement is not obvious. However, if several people think it's better without it, I will change my mind. Ok. * The draft image is wider than the white content background on my display (1366x768), which looks a bit weird. Admittedly, it is only for draft mode, but we do expose the draft mode to users currently[1]. For that, replace the included CSS in the draft page: ### before ### [...] ### after ### [...] ### end ### With the new CSS, the 'draft' image has the same width than the text. The footer displays the 'draft' picture too. Thanks, that is much better! * The table in 2.2 could do with separator between columns now and possibly alternating colouring for rows. At least on a 300px width phone. I added CSS rules to debian.css to display alterning color for rows and an hover color too. I think it fits your idea. (see demo link). The new debian.css file is attached to this message. [...] Much appreciated as well. :) * The next/previous arrows do not fit in the bottom of e.g. chapter 2. There is /no/ problem in the top - only the bottom. * Possibly related to the previous problem. I am having a hard time clicking on the next arrow in the bottom (even after I scroll it into view). The next arrow in the top does not seem to have the same issue. I don't see the problem. Which device and browser do you use? It was a Nokia Lumia Windows phone. I assume that means it was an internet explorer. Regardless, I reproduced it in Iceweasel's developer mode (see attached screenshot) using the (predefined) 320x480 window mode. The others remarks are not fixed. I prefer to ship partial improvements faster due to the freeze. What do you think about them? I am very pleased with the changes so far. If the missing next arrows (above) and the huge margin (see below) issues can be resolved, I would certainly not mind putting this live. Is it too late to be integrated in the documentation? No. :) The release-notes are not subject to the freeze in the same way as other packages. Unfixed below: [...] * The Caution remarks (plus note etc.) has a so much margin that only 16-20 characters are shown per line[2]. In desktop mode it only takes 1-2 lines. Attached a screenshot of this one as well for reference. Basically half the width is unused on a 320 width screen. [...] I suspect most of these are just minor issues that needs a bit of css fiddling - a few of them may require textual changes and some are probably unfixable (e.g. the shell commands and long links that we want to spell out). I would greatly appreciate further patches to solve these issues. Thanks, ~Niels [...] FTR: We should definitely look into some other other unfixed issues as well. That said, from my point of view they are not a priority for putting these changes live. As mentioned, if they two issues mentioned above can be resolved, I am ready to put this change series live. :) Once again, thanks for the patches and the effort, :) ~Niels
Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-21 01:23, Stéphane Blondon wrote: Demos are temporary available : ... http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html Nice! Two (minor) remarks: 1. The footer does not fit on my telephone in portrait format. The house icon is almost on the right side of the screen, not in the centre. (Samsung Galaxy, 480×800) 2. I find the icons (esp. the house icon, but also the arrows) too old-fashioned and too large. Not sure, whether there is anything more modern and slim, however. Anyway, it is already very well readable even on small phones. Thanks! -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hi Niels,
I've done some improvements based on your previous remarks. I patched
the files provided by your online demo.
Demos are temporary available :
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A01.%C2%A0Introduction.html
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html
http://stephane.yaal.fr/tmp/installer_docs/Release%20Notes%20for%20Debian%208%20%28jessie%29,%2064-bit%20PC_draft.html
2015-01-03 15:14 GMT+01:00 Niels Thykier ni...@thykier.net:
I have a list of remarks below. Mind you, despite its length, it looks
rather good in general. I took the liberty of walking through all of
the chapters to find issues.
* I think the next/previous arrows should have a different colour than
grey as it does not stand out (even in production mode).
In this new version, the arrows are red, not grey. It's easier to see
them. The files are attached to this message (png files for direct
use, svg files for modifications).
* The grey box around the content seems a bit weird (desktop mode).
In cell-phone mode, it looks fine. Perhaps it is just a preference
rather than an actual issue.
I'm not really convinced. The general style is based on Publican one.
I don't want to change it if the improvement is not obvious.
However, if several people think it's better without it, I will change my mind.
* The draft image is wider than the white content background on my
display (1366x768), which looks a bit weird. Admittedly, it is only
for draft mode, but we do expose the draft mode to users
currently[1].
For that, replace the included CSS in the draft page:
### before ###
body { background-image: url('images/draft.png');
background-repeat: no-repeat;
background-position: top left;
/* The following properties make the watermark fixed on the page. */
/* I think that's just a bit too distracting for the reader... */
/* background-attachment: fixed; */
/* background-position: center center; */
}
### after ###
.navheader, .navfooter { background-image: url('images/draft.png');
background-repeat: no-repeat;
background-position: top left;
}
.navheader table {
background-image: url('images/draft.png');
}
.navfooter table {
background-image: url('images/draft.png');
}
### end ###
With the new CSS, the 'draft' image has the same width than the text.
The footer displays the 'draft' picture too.
* The table in 2.2 could do with separator between columns now and
possibly alternating colouring for rows. At least on a 300px width
phone.
I added CSS rules to debian.css to display alterning color for rows
and an hover color too. I think it fits your idea.
(see demo link). The new debian.css file is attached to this message.
The new rules are lines 112-119:
.informaltable tbody tr:nth-child(even) {
background-color:#DD;
}
.informaltable tbody tr:hover {
background-color:#66;
color: #FF;
}
* The next/previous arrows do not fit in the bottom of e.g. chapter 2.
There is /no/ problem in the top - only the bottom.
* Possibly related to the previous problem. I am having a hard time
clicking on the next arrow in the bottom (even after I scroll it
into view). The next arrow in the top does not seem to have the same
issue.
I don't see the problem. Which device and browser do you use?
The others remarks are not fixed. I prefer to ship partial
improvements faster due to the freeze.
What do you think about them?
Is it too late to be integrated in the documentation?
Unfixed below:
* There are some items that might be difficult to tap with a small
cellphone according to google speedpage. See the links below. I
suspect some of these might be edge cases or could be solved with a
bit more margin between the items in the index.
* The Caution remarks (plus note etc.) has a so much margin that
only 16-20 characters are shown per line[2]. In desktop mode it
only takes 1-2 lines.
* I suspect we could do with less margins on smaller phones for
indented items (e.g. bullet lists or indices). E.g. have a look at
3.1.1 or the indices of one of the pages.
Though admittedly, there is probably a limit to what can be done
here.
* Any non-trivial shell command or file content will not fit on a
single line as it should. I doubt there is much we can do there
though.
* Same with most links that are spelled out. E.g.
https://www.debian.org/distrib;
is enough to fill an entire line on its own. NB: The full link is
longer.
* You can zoom out to see the grey area on the right handside. This
seem to happen even if there is no content to wide for the view.
On my phone it has a different grey colour than the one the phone
gives for The page is not wider than this. (e.g. in Chapter 6).
* The Appendices keep the first word of the title
Bug#772963: release-notes: cellphone friendly CSS
On Sun, Dec 14, 2014 at 01:48:27PM +0100, Stéphane Blondon wrote: Hello, I think it's a good idea but the « DRAFT » picture is hidden behind the improved CSS. A smaller picture, repeated horizontally would be more visible. Do you think it's useful? I can provide a patch if you want. Please. -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Hello, I think it's a good idea but the « DRAFT » picture is hidden behind the improved CSS. A smaller picture, repeated horizontally would be more visible. Do you think it's useful? I can provide a patch if you want. 2014-12-12 16:13 GMT+01:00 Osamu Aoki os...@debian.org: Package: release-notes Severity: normal Tags: patch As debian-reference (jessie) package and maint-guide (jessie and Debian web) has migrated to use new CSS for jessie, it is nicer to see the same CSS for the web and package. Please consider to apply attached patch. This will create web page as: https://people.debian.org/~osamu/release-notes/index.en.html ... https://people.debian.org/~osamu/release-notes/ch-installing.en.html ... Screen is shown with gradiation+shaded box. If screen size is smaller than 5 in., cosmetic side spaces are dropped. FYI: This is git patch. If you wish to manually add these binary PNG files manually, please use 3 PNG files found in the debian-reference patckage as png/*.png . If OK I can apply these to the subversion repo. -- System Information: Debian Release: 8.0 APT prefers testing-updates APT policy: (500, 'testing-updates'), (500, 'testing') Architecture: amd64 (x86_64) Kernel: Linux 3.16.0-4-amd64 (SMP w/4 CPU cores) Locale: LANG=en_US.utf8, LC_CTYPE=en_US.utf8 (charmap=UTF-8) Shell: /bin/sh linked to /bin/dash Init: systemd (via /run/systemd/system) -- Imprimez ce message en A2 et en couleur au moins 500 fois! Brûlez des arbres!! -- envoyé depuis ma centrale à charbon Stéphane -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
On 2014-12-12 16:13, Osamu Aoki wrote: Package: release-notes Severity: normal Tags: patch As debian-reference (jessie) package and maint-guide (jessie and Debian web) has migrated to use new CSS for jessie, it is nicer to see the same CSS for the web and package. Please consider to apply attached patch. This will create web page as: https://people.debian.org/~osamu/release-notes/index.en.html ... https://people.debian.org/~osamu/release-notes/ch-installing.en.html ... Screen is shown with gradiation+shaded box. If screen size is smaller than 5 in., cosmetic side spaces are dropped. FYI: This is git patch. If you wish to manually add these binary PNG files manually, please use 3 PNG files found in the debian-reference patckage as png/*.png . If OK I can apply these to the subversion repo. [...] Hi, Thanks for creating this patch - I love it. My only concern is that it overshadows the DRAFT watermark (I can see the remains of it in the top left corner of your page on my PC). If that could be fixed (or an alternative draft watermark/warning applied) I would readily apply this patch. ~Niels -- To UNSUBSCRIBE, email to debian-bugs-dist-requ...@lists.debian.org with a subject of unsubscribe. Trouble? Contact listmas...@lists.debian.org
Bug#772963: release-notes: cellphone friendly CSS
Package: release-notes
Severity: normal
Tags: patch
As debian-reference (jessie) package and maint-guide (jessie and Debian
web) has migrated to use new CSS for jessie, it is nicer to see the
same CSS for the web and package.
Please consider to apply attached patch.
This will create web page as:
https://people.debian.org/~osamu/release-notes/index.en.html
...
https://people.debian.org/~osamu/release-notes/ch-installing.en.html
...
Screen is shown with gradiation+shaded box.
If screen size is smaller than 5 in., cosmetic side spaces are dropped.
FYI: This is git patch. If you wish to manually add these binary PNG
files manually, please use 3 PNG files found in the debian-reference
patckage as png/*.png .
If OK I can apply these to the subversion repo.
-- System Information:
Debian Release: 8.0
APT prefers testing-updates
APT policy: (500, 'testing-updates'), (500, 'testing')
Architecture: amd64 (x86_64)
Kernel: Linux 3.16.0-4-amd64 (SMP w/4 CPU cores)
Locale: LANG=en_US.utf8, LC_CTYPE=en_US.utf8 (charmap=UTF-8)
Shell: /bin/sh linked to /bin/dash
Init: systemd (via /run/systemd/system)
From 1d058075b8804e4a5f86cc8faf16471f937e642e Mon Sep 17 00:00:00 2001
From: Osamu Aoki os...@debian.org
Date: Fri, 12 Dec 2014 23:12:49 +0900
Subject: [PATCH 1/2] Cellphone friendly CSS
---
debian.css | 150 ++---
html.xsl | 2 +
2 files changed, 125 insertions(+), 27 deletions(-)
diff --git a/debian.css b/debian.css
index dcb67d9..13bf394 100644
--- a/debian.css
+++ b/debian.css
@@ -1,44 +1,140 @@
-BODY {
- margin-top: 5%;
- margin-left: 5%;
- margin-right: 5%;
- margin-bottom: 5%;
+/* Cascading stylesheet for the Debian Installer Installation Guide */
+
+/* global style of the page */
+body {
+background-color: #EE;
+border: 40px solid #EE;
+margin: 0;
+padding: 0 10px;
+font-family: liberation sans, Myriad , Bitstream Vera Sans, Lucida Grande, Luxi Sans, Trebuchet MS, helvetica, verdana, arial, sans-serif;
+line-height: 1.2em;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+body {
+border: 0px;
+padding: 0px;
+}
+}
+
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
+margin-top: 0;
+padding: 2em 6em 6em;
+}
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part {
+padding: 2em;
+}
+
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
+background-color: #FF;
+margin: 40px auto 4em;
+padding: 1px 40px 20px 30px;
+}
+
+@media (max-width: 1024px) {
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
+max-width: 45em;
+}
+}
+@media (min-width: 1025px) {
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
+max-width: 70em;
+}
+}
+@media (max-width: 5in), (max-device-width: 5in){
+body div.book, body div.article, body div.set, body div.preface, body div.chapter, body div.section, body div.appendix, body div.part, body div.index {
+max-width: 100%;
+}
+}
+
+hr {
+border-top: 1px dotted #808080;
+margin: 0;
+}
+
+a:link {
+color: #0035C7;
+text-decoration: none;
+}
+a:visited {
+color: #00207A;
+text-decoration: none;
+}
+a:link:hover {
+color: #00207A;
+text-decoration: underline;
}
-DIV.revhistory {
- background-color: lightgrey;
- font-size: small;
+code {
+font-family: liberation mono,bitstream vera mono,dejavu mono,monospace;
+font-weight: bold;
+word-wrap: break-word;
}
-.revhistory P {
- margin-bottom: 0;
- margin-top: 0;
+h1 {
+color: #C70036;
+line-height: 1.1em;
}
-.mediaobject {
- text-align: center;
+h2, h3, h4, h5, h6 {
+color: #C70036;
}
-.programlisting {
- background-color: lightgrey;
- border: solid;
- border-width: thin;
+
+/* for first page */
+.book .titlepage h1.title {
+text-align: center;
+}
+.titlepage h1.title {
+text-align: left;
}
-.screen {
- background-color: lightgrey;
+.authorgroup div {
+text-align: center;
}
-.subtitle {
- text-align: center;
+
+/* table in content */
+
+.informaltable table {
+border: 1px solid #AA;
}
-.caution, .note, .informaltable table {
- border: 2px solid;
- border-collapse: collapse;
+.informaltable table th {
+border-width: 0;
+background-color: #CC;
}
-.systemitem {
- color: navy;
- font-weight: bold;
+.informaltable table td {
+border-width: 0;
}
+
+
+/* Terminal examples */
+pre.screen {
+
