-----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