-----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: > >> 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 iQEcBAEBAgAGBQJVrK8jAAoJEJD5dJfVqbCr2E8H/i+VanHvFbRUTgXMjvFsTMl0 eTjINEH5RDLlEor2iwtwfHrFzhrncx7wK9oXRHGoY1HXXFfmusNI9RGBRWLiKURB M4bgKGxeb7RIe1wbOLHUHDjlVgoqG9Wf172wIS7X2THsVLViTkcxeiKKIRaeEtsg PgoaGFt5CoCz9Ux+jsKvpBW+eHA4jIBqxs1RaNb9PmnZUyMOGlFqeZx/kzi6WgzU F5g8wzrDEE35vkLbWvYXEi8L47A6KVJszNzojj8yqP3eKAnyO52nJrfVB76oQOza TWobLr8ypVlo+I/dO6RgS81et+zVK4HI/9lWmVW5cA+lgjbT3bS+HmNq9fHqnlg= =GTeZ -----END PGP SIGNATURE----- _______________________________________________ tor-relays mailing list tor-relays@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays