Re: [tor-relays] Simplifying ExoneraTor
Hi guys, I've made some simple (improvements?) changes to the ExoneraTor page - I've basically made the "about" section a sticky footer (no JS) and spaced the content a little better. I've tested it across Firefox/Chrome/Safari/iOS and it looks good on all of them. Maybe we could also add some information about the expected IP and date formats in the whitespace, too. The updated version can be found at: http://tucker.wales/tor/exonerator/ Please let me know what you think. Kind Regards, Joshua Lee Tucker @tuckerwales
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 16/07/15 23:16, Joshua Lee Tucker wrote:
Hi guys,
Hello Joshua,
I've made some simple (improvements?) changes to the ExoneraTor page - I've basically made the "about" section a sticky footer (no JS) and spaced the content a little better. I've tested it across Firefox/Chrome/Safari/iOS and it looks good on all of them.
It does look great! Can I ask you to explain the changes in more detail by going through my questions in the diff below? I'd want to know what things are changed and why. Did I mention that I'm not good at web development? :)
Maybe we could also add some information about the expected IP and date formats in the whitespace, too.
Let's talk about that. I'm also not sure if putting examples into the two input text boxes is such a good idea. I heard that it can confuse people by thinking there's already an IP address entered, so why would they have to put in another one, which is even more problematic on browsers with date selector. It also hides the fact that ExoneraTor supports searches by IPv6 addresses. Maybe we can put in different placeholders and add some good explanations below the form. I still think that less is more with respect to text length, but if we can come up with some smart text there, that might do it.
The updated version can be found at: http://tucker.wales/tor/exonerator/
Please let me know what you think.
It's great! Thanks for working on this! So, here's the diff with my questions: @@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ExoneraTor</title> <link rel="stylesheet" href="css/bootstrap.min.css"> +<link rel="stylesheet" href="css/styles.css"> <link href="images/favicon.ico" type="image/x-icon" rel="icon"> </head> <body> Is it good practice to use a custom .css file in combination with Bootstrap, or should we try to only use Bootstrap's classes, properties, etc. to come up with the approximate design that we want? Or, would it be possible to stick with Bootstrap-only styles for now until there's no other way than using our own style file to do the thing we want? @@ -17,10 +18,15 @@ </div><!-- page-header --> </div><!-- col --> </div><!-- row --> - - <div class="row"> <div class="col-xs-12"> <div class="text-center"> +<div class="row vbottom15"> +<div class="col-xs-12"> +<h4>Enter the details of the relay that you would like to check below:</h4> +</div> +</div> +<div class="row"></div> <form class="form-inline"> <div class="form-group"> <label for="inputIp" class="control-label">IP address</label> What's the purpose of that last row there that doesn't come with any columns? @@ -35,6 +41,9 @@ </div><!-- text-center --> </div><!-- col --> </div><!-- row --> +</div><!-- container --> +<footer> +<div class="container"> <div class="row"> <div class="col-xs-6"> <h3>About Tor</h3> I guess the <footer> is what moves the footer to the bottom, together with our styles.css, right? Is that a common HTML thing, a Bootstrap-specific thing, a custom tag that only works with our styles.css, or how does this work? Is this the most Bootstrap-y way to do it? (As you notice, I'm trying to stick to the defaults as long as possible.) @@ -54,7 +63,9 @@ <p class="text-center small">"Tor" and the "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en">registered trademarks</a> of The Tor Project, Inc.</p> </div><!-- col --> </div><!-- row --> - -</div><!-- container --> +</div> +</footer> </body> </html> Makes sense. By the way, is it good practice to add these comments, or is that just something that old people do who first learned HTML in the late 90's and whose favorite HTML editor is vim? Thanks a lot! All the best, Karsten
Kind Regards,
Joshua Lee Tucker @tuckerwales
_______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVqK5kAAoJEJD5dJfVqbCruzIIAM4FIR724JAOzpxqvSa8pg0v KLOFd4IepvS8sCdp5Qz54nMBLE17peXO3joNN3yydXJveftqCf/gTgxjlACjSkNA Ugp1r9gHr+Oldg7wocacySk6tGddCvb8rS27Zho9nOhXJTMawiwAe/wFOhsl/ZXv G7svWNFFBBm6+2FjANis7uelGIfsCRQsBlDgku4XqvhwTlcV3S9Cta7SrO2RE6Er iWkzZi1fbfJUsMI+qS0iYx0fWd1P9B+pDBF6N09w4HppSjk3eKncKkaG2SY6LiW9 TLItFL79Ka7elQNB3rxAhr0a4QdmzPzp2zgrew3gztSRqzU1c9pXpbs7qaUHc/k= =6YUL -----END PGP SIGNATURE-----
Hi Karsten, thanks for the feedback. I've updated the copy on my webserver (http://tucker.wales/tor/exonerator/) to clean up the markup a little (I rushed the previous version out at 3AM). I've also improved readibility by using indentation, as is now generally accepted in web development.
Maybe we could also add some information about the expected IP and date formats in the whitespace, too.
Let's talk about that. I'm also not sure if putting examples into the two input text boxes is such a good idea. I heard that it can confuse people by thinking there's already an IP address entered, so why would they have to put in another one, which is even more problematic on browsers with date selector. It also hides the fact that ExoneraTor supports searches by IPv6 addresses. Maybe we can put in different placeholders and add some good explanations below the form. I still think that less is more with respect to text length, but if we can come up with some smart text there, that might do it.
I think we could accomplish a good way of providing that information - let me have a little play around over the next few days/week and I'll try to propose a good solution.
So, here's the diff with my questions:
@@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ExoneraTor</title> <link rel="stylesheet" href="css/bootstrap.min.css"> +<link rel="stylesheet" href="css/styles.css"> <link href="images/favicon.ico" type="image/x-icon" rel="icon"> </head> <body>
Is it good practice to use a custom .css file in combination with Bootstrap, or should we try to only use Bootstrap's classes, properties, etc. to come up with the approximate design that we want? Or, would it be possible to stick with Bootstrap-only styles for now until there's no other way than using our own style file to do the thing we want?
It's completely good practice to use custom css styles/files alongside Bootstrap. It's the only real way to add custom styling to the page and this method of creating a "sticky footer" is actually suggested in the Bootstrap examples.
@@ -17,10 +18,15 @@ </div><!-- page-header --> </div><!-- col --> </div><!-- row --> - - <div class="row"> <div class="col-xs-12"> <div class="text-center"> +<div class="row vbottom15"> +<div class="col-xs-12"> +<h4>Enter the details of the relay that you would like to check below:</h4> +</div> +</div> +<div class="row"></div> <form class="form-inline"> <div class="form-group"> <label for="inputIp" class="control-label">IP address</label>
What's the purpose of that last row there that doesn't come with any columns?
I've removed that in the new version, it wasn't meant to be there.
@@ -35,6 +41,9 @@ </div><!-- text-center --> </div><!-- col --> </div><!-- row --> +</div><!-- container --> +<footer> +<div class="container"> <div class="row"> <div class="col-xs-6"> <h3>About Tor</h3>
I guess the <footer> is what moves the footer to the bottom, together with our styles.css, right? Is that a common HTML thing, a Bootstrap-specific thing, a custom tag that only works with our styles.css, or how does this work? Is this the most Bootstrap-y way to do it? (As you notice, I'm trying to stick to the defaults as long as possible.)
Correct - the margin added to the bottom of the body, along with the position and height CSS attributes of <footer>, is what moves the footer to the bottom of the page. The <footer> tag is HTML5, so it won't work on older browsers - because of this, I've changed the markup to use div.footer in the updated version instead of a <footer> tag. This ensures compatibility with older, non-HTML5 browsers.
@@ -54,7 +63,9 @@ <p class="text-center small">"Tor" and the "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en">registered trademarks</a> of The Tor Project, Inc.</p> </div><!-- col --> </div><!-- row --> - -</div><!-- container --> +</div> +</footer> </body> </html>
Makes sense. By the way, is it good practice to add these comments, or is that just something that old people do who first learned HTML in the late 90's and whose favorite HTML editor is vim?
It's up to the author, to be honest - it can't hurt to keep them there, I would agree that it helps greatly to improve readibility (especially when using a lot of divs). Thanks, Joshua Lee Tucker @tuckerwales
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 17/07/15 14:58, Joshua Lee Tucker wrote:
Hi Karsten, thanks for the feedback.
Hi Joshua,
I've updated the copy on my webserver (http://tucker.wales/tor/exonerator/) to clean up the markup a little (I rushed the previous version out at 3AM). I've also improved readibility by using indentation, as is now generally accepted in web development.
Great, I just pushed two commits based on your suggestions. I made some minor edits like changing those 180px to 200px because that apparently fixed a problem in Firefox that always displayed a scrollbar before. I also chose two spaces as indentation rather than tabs. Minor stuff. New version with your tweaks deployed here: https://exonerator.torproject.org/
Maybe we could also add some information about the expected IP and date formats in the whitespace, too.
Let's talk about that. I'm also not sure if putting examples into the two input text boxes is such a good idea. I heard that it can confuse people by thinking there's already an IP address entered, so why would they have to put in another one, which is even more problematic on browsers with date selector. It also hides the fact that ExoneraTor supports searches by IPv6 addresses. Maybe we can put in different placeholders and add some good explanations below the form. I still think that less is more with respect to text length, but if we can come up with some smart text there, that might do it.
I think we could accomplish a good way of providing that information - let me have a little play around over the next few days/week and I'll try to propose a good solution.
Great, let me know what you come up with!
So, here's the diff with my questions:
Your answers below all make sense to me. Thanks for explaining things in detail! Thanks a lot! All the best, Karsten
@@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ExoneraTor</title> <link rel="stylesheet" href="css/bootstrap.min.css"> +<link rel="stylesheet" href="css/styles.css"> <link href="images/favicon.ico" type="image/x-icon" rel="icon"> </head> <body>
Is it good practice to use a custom .css file in combination with Bootstrap, or should we try to only use Bootstrap's classes, properties, etc. to come up with the approximate design that we want? Or, would it be possible to stick with Bootstrap-only styles for now until there's no other way than using our own style file to do the thing we want?
It's completely good practice to use custom css styles/files alongside Bootstrap. It's the only real way to add custom styling to the page and this method of creating a "sticky footer" is actually suggested in the Bootstrap examples.
@@ -17,10 +18,15 @@ </div><!-- page-header --> </div><!-- col --> </div><!-- row --> - - <div class="row"> <div class="col-xs-12"> <div class="text-center"> +<div class="row vbottom15"> +<div class="col-xs-12"> +<h4>Enter the details of the relay that you would like to check below:</h4> +</div> +</div> +<div class="row"></div> <form class="form-inline"> <div class="form-group"> <label for="inputIp" class="control-label">IP address</label>
What's the purpose of that last row there that doesn't come with any columns?
I've removed that in the new version, it wasn't meant to be there.
@@ -35,6 +41,9 @@ </div><!-- text-center --> </div><!-- col --> </div><!-- row --> +</div><!-- container --> +<footer> +<div class="container"> <div class="row"> <div class="col-xs-6"> <h3>About Tor</h3>
I guess the <footer> is what moves the footer to the bottom, together with our styles.css, right? Is that a common HTML thing, a Bootstrap-specific thing, a custom tag that only works with our styles.css, or how does this work? Is this the most Bootstrap-y way to do it? (As you notice, I'm trying to stick to the defaults as long as possible.)
Correct - the margin added to the bottom of the body, along with the position and height CSS attributes of <footer>, is what moves the footer to the bottom of the page.
The <footer> tag is HTML5, so it won't work on older browsers - because of this, I've changed the markup to use div.footer in the updated version instead of a <footer> tag. This ensures compatibility with older, non-HTML5 browsers.
@@ -54,7 +63,9 @@ <p class="text-center small">"Tor" and the "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en">registered
trademarks</a>
of The Tor Project, Inc.</p> </div><!-- col --> </div><!-- row --> - -</div><!-- container --> +</div> +</footer> </body> </html>
Makes sense. By the way, is it good practice to add these comments, or is that just something that old people do who first learned HTML in the late 90's and whose favorite HTML editor is vim?
It's up to the author, to be honest - it can't hurt to keep them there, I would agree that it helps greatly to improve readibility (especially when using a lot of divs).
Thanks,
Joshua Lee Tucker @tuckerwales
_______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVqSmOAAoJEJD5dJfVqbCrubAH/RlnLXSlMxmvcO/VZJ/6jzn3 1V9SBS5N3VTW/JQ9JoBiEhoEEvWvPSQKxNRl7QYnhNeyP3oe+EoSizNr9NN6VOc5 WszxTg3ckEB4eRBhXk2jvOJ2mu6oKj+ucFWJDbfw+owtzvZnLPFJPXpUMc6vL2LA ieTyYIaJXQYNoSPkH7ezSYH1WDGNRyyEhDyZt2aUdTEq2VdGZP3EwS7PDOWaEE1Z K4g+3P7gK7byUdwaZ9zpO3e393ZvGnFP58/lcTDFj3mpa+RU8XvsCB6W3nEwMTT+ wz1zbzVT7FvC9CxcHkum21E6GWXOogxx1tyvJ2TjE+8MAKJOlVSpD3UpwtBIobw= =F28f -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 17/07/15 18:13, Karsten Loesing wrote:
On 17/07/15 14:58, Joshua Lee Tucker wrote:
Hi Karsten, thanks for the feedback.
Hi Joshua,
I've updated the copy on my webserver (http://tucker.wales/tor/exonerator/) to clean up the markup a little (I rushed the previous version out at 3AM). I've also improved readibility by using indentation, as is now generally accepted in web development.
Great, I just pushed two commits based on your suggestions. I made some minor edits like changing those 180px to 200px because that apparently fixed a problem in Firefox that always displayed a scrollbar before. I also chose two spaces as indentation rather than tabs. Minor stuff.
Actually, and this idea crossed my mind one minute after hitting send, is it a good idea to put in a fixed number of pixels here? What if a translated version of ExoneraTor uses more or less space? Is there a way to get rid of the 200px? Thanks again! All the best, Karsten P.S.: Sorry, list, for discussing (web) development things here. If we should move elsewhere (tor-dev@?), please somebody say so.
New version with your tweaks deployed here:
https://exonerator.torproject.org/
Maybe we could also add some information about the expected IP and date formats in the whitespace, too.
Let's talk about that. I'm also not sure if putting examples into the two input text boxes is such a good idea. I heard that it can confuse people by thinking there's already an IP address entered, so why would they have to put in another one, which is even more problematic on browsers with date selector. It also hides the fact that ExoneraTor supports searches by IPv6 addresses. Maybe we can put in different placeholders and add some good explanations below the form. I still think that less is more with respect to text length, but if we can come up with some smart text there, that might do it.
I think we could accomplish a good way of providing that information - let me have a little play around over the next few days/week and I'll try to propose a good solution.
Great, let me know what you come up with!
So, here's the diff with my questions:
Your answers below all make sense to me. Thanks for explaining things in detail!
Thanks a lot!
All the best, Karsten
@@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ExoneraTor</title> <link rel="stylesheet" href="css/bootstrap.min.css"> +<link rel="stylesheet" href="css/styles.css"> <link href="images/favicon.ico" type="image/x-icon" rel="icon"> </head> <body>
Is it good practice to use a custom .css file in combination with Bootstrap, or should we try to only use Bootstrap's classes, properties, etc. to come up with the approximate design that we want? Or, would it be possible to stick with Bootstrap-only styles for now until there's no other way than using our own style file to do the thing we want?
It's completely good practice to use custom css styles/files alongside Bootstrap. It's the only real way to add custom styling to the page and this method of creating a "sticky footer" is actually suggested in the Bootstrap examples.
@@ -17,10 +18,15 @@ </div><!-- page-header --> </div><!-- col --> </div><!-- row --> - - <div class="row"> <div class="col-xs-12"> <div class="text-center"> +<div class="row vbottom15"> +<div class="col-xs-12"> +<h4>Enter the details of the relay that you would like to check below:</h4> +</div> +</div> +<div class="row"></div> <form class="form-inline"> <div class="form-group"> <label for="inputIp" class="control-label">IP address</label>
What's the purpose of that last row there that doesn't come with any columns?
I've removed that in the new version, it wasn't meant to be there.
@@ -35,6 +41,9 @@ </div><!-- text-center --> </div><!-- col --> </div><!-- row --> +</div><!-- container --> +<footer> +<div class="container"> <div class="row"> <div class="col-xs-6"> <h3>About Tor</h3>
I guess the <footer> is what moves the footer to the bottom, together with our styles.css, right? Is that a common HTML thing, a Bootstrap-specific thing, a custom tag that only works with our styles.css, or how does this work? Is this the most Bootstrap-y way to do it? (As you notice, I'm trying to stick to the defaults as long as possible.)
Correct - the margin added to the bottom of the body, along with the position and height CSS attributes of <footer>, is what moves the footer to the bottom of the page.
The <footer> tag is HTML5, so it won't work on older browsers - because of this, I've changed the markup to use div.footer in the updated version instead of a <footer> tag. This ensures compatibility with older, non-HTML5 browsers.
@@ -54,7 +63,9 @@ <p class="text-center small">"Tor" and the "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en">registered
trademarks</a>
of The Tor Project, Inc.</p> </div><!-- col --> </div><!-- row --> - -</div><!-- container --> +</div> +</footer> </body> </html>
Makes sense. By the way, is it good practice to add these comments, or is that just something that old people do who first learned HTML in the late 90's and whose favorite HTML editor is vim?
It's up to the author, to be honest - it can't hurt to keep them there, I would agree that it helps greatly to improve readibility (especially when using a lot of divs).
Thanks,
Joshua Lee Tucker @tuckerwales
_______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVqSqrAAoJEJD5dJfVqbCrm70H/1OiDNJtHuKqVkqTkIdoyfE/ /Iu8oOsHhKaNDBMXrxnvGqbiJ9O0Fsx9cfwdHiIzANW0YQN9J0Y1MGdhub9WIH/6 WxKBwMdHZN934CH6PRZEjZl+Ltp9gXWEGzZh8gb6O/kPv99f6I0QaMYoEAFMcNzN /IchE+mPdPZ3JRNxjSdLrC9wrR2MCa58kxyeugo9uAIeT8gUHs6j53d3ZXk4L5Zr FH4pjsWPYZUGvDsvDGP8iJPxvH0ZFLSW1lZIuox8lIVFs59XrVe3w8K0nQZclzdc i9PRmj474z+nL/TBQ7+W41dEYkCyN3GvdebHjdEvjZWP8XfAOwD6hi74zk3Sgh8= =Ay75 -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 17/07/15 18:17, Karsten Loesing wrote:
On 17/07/15 18:13, Karsten Loesing wrote:
On 17/07/15 14:58, Joshua Lee Tucker wrote:
Hi Karsten, thanks for the feedback.
Hi Joshua,
I've updated the copy on my webserver (http://tucker.wales/tor/exonerator/) to clean up the markup a little (I rushed the previous version out at 3AM). I've also improved readibility by using indentation, as is now generally accepted in web development.
Great, I just pushed two commits based on your suggestions. I made some minor edits like changing those 180px to 200px because that apparently fixed a problem in Firefox that always displayed a scrollbar before. I also chose two spaces as indentation rather than tabs. Minor stuff.
Actually, and this idea crossed my mind one minute after hitting send, is it a good idea to put in a fixed number of pixels here? What if a translated version of ExoneraTor uses more or less space? Is there a way to get rid of the 200px?
And there's another problem: we broke the print output, which is quite important here. I just reverted this change to make the print output usable again. If you can come up with a fix to that, I'll put it back in. Thanks! All the best, Karsten
Thanks again!
All the best, Karsten
P.S.: Sorry, list, for discussing (web) development things here. If we should move elsewhere (tor-dev@?), please somebody say so.
New version with your tweaks deployed here:
Maybe we could also add some information about the expected IP and date formats in the whitespace, too.
Let's talk about that. I'm also not sure if putting examples into the two input text boxes is such a good idea. I heard that it can confuse people by thinking there's already an IP address entered, so why would they have to put in another one, which is even more problematic on browsers with date selector. It also hides the fact that ExoneraTor supports searches by IPv6 addresses. Maybe we can put in different placeholders and add some good explanations below the form. I still think that less is more with respect to text length, but if we can come up with some smart text there, that might do it.
I think we could accomplish a good way of providing that information - let me have a little play around over the next few days/week and I'll try to propose a good solution.
Great, let me know what you come up with!
So, here's the diff with my questions:
Your answers below all make sense to me. Thanks for explaining things in detail!
Thanks a lot!
All the best, Karsten
@@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ExoneraTor</title> <link rel="stylesheet" href="css/bootstrap.min.css"> +<link rel="stylesheet" href="css/styles.css"> <link href="images/favicon.ico" type="image/x-icon" rel="icon"> </head> <body>
Is it good practice to use a custom .css file in combination with Bootstrap, or should we try to only use Bootstrap's classes, properties, etc. to come up with the approximate design that we want? Or, would it be possible to stick with Bootstrap-only styles for now until there's no other way than using our own style file to do the thing we want?
It's completely good practice to use custom css styles/files alongside Bootstrap. It's the only real way to add custom styling to the page and this method of creating a "sticky footer" is actually suggested in the Bootstrap examples.
@@ -17,10 +18,15 @@ </div><!-- page-header --> </div><!-- col --> </div><!-- row --> - - <div class="row"> <div class="col-xs-12"> <div class="text-center"> +<div class="row vbottom15"> +<div class="col-xs-12"> +<h4>Enter the details of the relay that you would like to check below:</h4> +</div> +</div> +<div class="row"></div> <form class="form-inline"> <div class="form-group"> <label for="inputIp" class="control-label">IP address</label>
What's the purpose of that last row there that doesn't come with any columns?
I've removed that in the new version, it wasn't meant to be there.
@@ -35,6 +41,9 @@ </div><!-- text-center --> </div><!-- col --> </div><!-- row --> +</div><!-- container --> +<footer> +<div class="container"> <div class="row"> <div class="col-xs-6"> <h3>About Tor</h3>
I guess the <footer> is what moves the footer to the bottom, together with our styles.css, right? Is that a common HTML thing, a Bootstrap-specific thing, a custom tag that only works with our styles.css, or how does this work? Is this the most Bootstrap-y way to do it? (As you notice, I'm trying to stick to the defaults as long as possible.)
Correct - the margin added to the bottom of the body, along with the position and height CSS attributes of <footer>, is what moves the footer to the bottom of the page.
The <footer> tag is HTML5, so it won't work on older browsers - because of this, I've changed the markup to use div.footer in the updated version instead of a <footer> tag. This ensures compatibility with older, non-HTML5 browsers.
@@ -54,7 +63,9 @@ <p class="text-center small">"Tor" and the "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en">registered
trademarks</a>
of The Tor Project, Inc.</p> </div><!-- col --> </div><!-- row --> - -</div><!-- container --> +</div> +</footer> </body> </html>
Makes sense. By the way, is it good practice to add these comments, or is that just something that old people do who first learned HTML in the late 90's and whose favorite HTML editor is vim?
It's up to the author, to be honest - it can't hurt to keep them there, I would agree that it helps greatly to improve readibility (especially when using a lot of divs).
Thanks,
Joshua Lee Tucker @tuckerwales
_______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVrK8jAAoJEJD5dJfVqbCr2E8H/i+VanHvFbRUTgXMjvFsTMl0 eTjINEH5RDLlEor2iwtwfHrFzhrncx7wK9oXRHGoY1HXXFfmusNI9RGBRWLiKURB M4bgKGxeb7RIe1wbOLHUHDjlVgoqG9Wf172wIS7X2THsVLViTkcxeiKKIRaeEtsg PgoaGFt5CoCz9Ux+jsKvpBW+eHA4jIBqxs1RaNb9PmnZUyMOGlFqeZx/kzi6WgzU F5g8wzrDEE35vkLbWvYXEi8L47A6KVJszNzojj8yqP3eKAnyO52nJrfVB76oQOza TWobLr8ypVlo+I/dO6RgS81et+zVK4HI/9lWmVW5cA+lgjbT3bS+HmNq9fHqnlg= =GTeZ -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA512 Hi Karsten, And there's another problem: we broke the print output, which is quite important here. I just reverted this change to make the print output usable again. If you can come up with a fix to that, I'll put it back in. Thanks I've fixed that issue with the following addition to the CSS: @media print { .footer { position: relative; } } This utlises standard CSS media rules, and is supported by most (all?) modern browsers. I've tested it on Firefox, Chrome and Safari. The change is live over at http://tucker.wales/tor/exonerator/ Thanks, Joshua Lee Tucker @tuckerwales -----BEGIN PGP SIGNATURE----- Comment: Joshua Lee Tucker <josh@tucker.wales> iQGcBAEBCgAGBQJVrMDHAAoJEOQUyuEbWOnyxFMMAJ8xYFVDry6+YECDRop44rjE xPa4ntVHXuI3TuT9YFXYSneIxx+xSgwtDc4J/zN5K7o3aKSbTyyhZtND4ch7p9Vc L9HRlRN9Z8GILFJl0mjh/vGnRPErhYCeMRvPuncZVt5cGXq6K8ovN0J811Ycep/e lp4lMfIyVcHzJX0hsDY1VQxsr7vpOJqHSbD+Cv9sLG82xoxesLZ2yIY/nU0alXGW wiw8xE3FHlu6iukzU/rcmSlKe6sj8Sn9Q2bCutrU0WEhtiokP2banixnqNuZ8Jd1 5GYjAWMCji65dX8m0oCnJGsLKgC/ER86Dt/0ILLt8ELtwM5vHlzDLTOLjA7qpA6V NWWLg54fPwWrY08d44dtn7bEZ6bQ+lVPevH9srO4MR3EHlOx/FEUv79S9Vjzt4r0 x12aEmO7dF6GhoqjYKK4o1V1o1oOcP8vyn5cw0v3Hjm0UP8JzCryjQGOIbZckjfb rRCwiIamkDizEeZbfVKd3Tqi6UNiy9vCik5WdW2+oA== =nJLc -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 20/07/15 11:36, Joshua Lee Tucker wrote:
Hi Karsten,
And there's another problem: we broke the print output, which is quite important here. I just reverted this change to make the print output usable again. If you can come up with a fix to that, I'll put it back in. Thanks
I've fixed that issue with the following addition to the CSS:
@media print { .footer { position: relative; } }
This utlises standard CSS media rules, and is supported by most (all?) modern browsers. I've tested it on Firefox, Chrome and Safari.
The change is live over at http://tucker.wales/tor/exonerator/
Looks much better, changed! Thanks! The issue with the hard-coded 180 (or 200) pixels remains though. Do you have any idea how to fix that? (Or does it look good for you and you have no idea what I'm talking about?) All the best, Karsten
Thanks,
Joshua Lee Tucker @tuckerwales
_______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVrP+rAAoJEJD5dJfVqbCr8hEH/jwXtvlmyx2ajpPDEfiA5BmZ IEvmrrJrhfFuE84mkgqQYdX+5Kh0D9Ms7fIyasGlhY8vqbsGzg6ui20ZJd3tchS5 wb+VWlwv2XOrr4v7Ah/Y3Cr6PZyM6Ns8XzkCiMj5K8yPtwpVlLdh11EULrlqaGvJ Ys5QZJ5lOy1Cx482S/VYq+39UVI4ULvIGgAcoTAS1Md5Le8rRgSZXXsPlIfaGgqN L3kPvHtAOfBZ9nACRqR3n0bxNAd47hqgz2UiON8NF+KEEptnuAmYB9BtJYnZnun+ lMrmCIn1mbAFFSk93LqSVi5EuDbQeam3yiQVwErTTa+I8pe/xfVKis0GkeKG7Oo= =g30a -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA512 Hi Karsten, The issue with the hard-coded 180 (or 200) pixels remains though. Do you have any idea how to fix that? (Or does it look good for you and you have no idea what I'm talking about?) I understand the concern, and as far as I am aware there is no way of overcoming this without the use of JavaScript. If it helps, I know that this approach (fixed height) is used widely throughout the industry. The addition of a little padding is usually more than enough of a precaution, since generally text length between languages doesn't differ TOO much. FYI, the live version has a footer height of 180px (causing the scrollbars to appear) - I guess that was my fault as I didn't change it to 200px in my version, sorry about that. Thanks, Joshua Lee Tucker @tuckerwales -----BEGIN PGP SIGNATURE----- Comment: Joshua Lee Tucker <josh@tucker.wales> iQGcBAEBCgAGBQJVrQdLAAoJEOQUyuEbWOnyCWwMAMESQ/pS5jjp4wv1ek20d2UX 1iZUVZLauZeivsYaVVWq3X6hRAAJR0JyrORcO3nQRjV3XmlN4x+TqbgBflxSOGU+ FOmuUgzQ7Eg5COU8YgMbQe8mngRMtmWwouU7ox8N+xGSFTf+8t5usRdUIMijZWmJ soCTep9uU5peieF2s81U8e+q+LFEXXLFLfBNeNjvvOP3s0SIWWoq3Q6zw3RwLqI0 DUvh8mCoQ9SZ0E8yx4XYHRzONmaEyrVffRGVr10IaQ4F5Z4ETy+wgOfT0yoITgz2 IUmZeiUjIHW7a1HWbLI10HH+/Z7Z+0j21nvbsfQmbSf4gmprqHD8Md+NENX4omHK 2CzSPD593A/1fRSrT70qtonDV5vhi8BM6WAnIev8/KitZs/YzKv+OdxPjuq3U+l/ 9uXd3Hrh/L+infVk9fi5kmwg08bi4WZXhRD8d/nj0pZxq00RHtxLBH3oGD+GCBbL MafFqM6CD5nnlS6ogTBxD87s9zHIjaWqLneQKb2jfg== =r/Oa -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 On 20/07/15 16:36, Joshua Lee Tucker wrote:
Hi Karsten,
The issue with the hard-coded 180 (or 200) pixels remains though. Do you have any idea how to fix that? (Or does it look good for you and you have no idea what I'm talking about?)
I understand the concern, and as far as I am aware there is no way of overcoming this without the use of JavaScript. If it helps, I know that this approach (fixed height) is used widely throughout the industry. The addition of a little padding is usually more than enough of a precaution, since generally text length between languages doesn't differ TOO much.
Okay, makes sense.
FYI, the live version has a footer height of 180px (causing the scrollbars to appear) - I guess that was my fault as I didn't change it to 200px in my version, sorry about that.
I noticed that you changed that back, and even the 200px are not enough anymore, because I made some text changes this morning. I just changed it to 300px to have some room for future text changes and for translations. Thanks! All the best, Karsten -----BEGIN PGP SIGNATURE----- Version: GnuPG v1 Comment: GPGTools - http://gpgtools.org iQEcBAEBAgAGBQJVrQodAAoJEJD5dJfVqbCrbQgIAM6Kv2W3thE+nlQeNd6p8w5m 7qmfKeS6yeeK5TFAHWshXSGVBJgHSTqPUmvVdTQVRKP3Fs4c7HCvboDaE3tiAHHV S8q9VA0SPdtPWJpodVgh5XUFzJpUEw9H2aWVZZlkeG8dJq7immaZE35ob/VXRudM 5f3JYYDLuqz04y0zgXRJ28OYKQBAg4dcDmsOfwOhMjQlzaBeu+cuEOP3hVLgbED3 i8KRCPHhtdzqprjQqa6b3DvVq1006oKao/YFwAGNsmoDIdRdHVd2FWQ/3LAjwDdh XxP2uvqiZtbS4dWii1an0I3riwYS32BLcyczghcaPqSy0iICkkDD128WK744H/0= =JgPT -----END PGP SIGNATURE-----
participants (2)
-
Joshua Lee Tucker -
Karsten Loesing