-----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 [email protected] >> 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----- _______________________________________________ tor-relays mailing list [email protected] https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
