andk
Add some semantic markup to html pages
Let's consider PAUSE's "Show my files" page. Its look is err... very spartan. Plain list of files, badly aligned (if you have a file which name is longer than ~50 characters).
"Delete files" for the first moment looks better because of colors. But it is false impression. Long file names are still badly aligned, colors do not help. Lines of the file list are highlighted using 3 colors: red, green and blue. A release is usually represented by 3 files: .meta, .readme, and .tar.gz files. It would be nice if all the files of the same type highlighted with one color, e. g. tarballs are blue, readmes are green, metas are red, but trial releases (which consists of tarball file only, no readme and no meta) break the system.
The spartan look could be changed at user side. For example, there is "Stylish" extension for Firefox (it also exists for Chromium, Chrome, Safari and Opera) which allows users to provide a custom style sheet for a web page or entire site, so users can tune fonts, colors, backgrounds etc with a great flexibility.
However, user style sheet is hardly applicable to PAUSE due to very spartan markup:
<pre>
CHECKSUMS 31798 Sat, 19 Nov 2016 20:11:05 GMT
Dist-Zilla-Plugin-Hook-0.006.meta 7885 Tue, 11 Aug 2015 20:12:08 GMT
Dist-Zilla-Plugin-Hook-0.006.readme 13380 Tue, 11 Aug 2015 20:12:08 GMT
Dist-Zilla-Plugin-Hook-0.006.tar.gz 55402 Tue, 11 Aug 2015 20:14:49 GMT
...
</pre>
(I typed it in into several lines for convenience, actually it is one huge line, where line breaks are encoded by using <br>). We have only one element — pre, which has neither id nor class attributes.
It will be nice if PAUSE generate a bit of semantic markup, for example:
<pre class="filelist">
<span class="checksum"><span class="filename">CHECKSUMS</span> <span class="size">31798</span> <span class="date">Sat, 19 Nov 2016 20:11:05 GMT</span></span>
<span class="release"><span class="meta"><span class="filename">Dist-Zilla-Plugin-Hook-0.006.meta</span> <span class="size">7885</span> <span class="date">Tue, 11 Aug 2015 20:12:08 GMT</span></span>
<span class="readme"><span class="filename">Dist-Zilla-Plugin-Hook-0.006.readme</span> <span class="size">13380</span> <span class="date">Tue, 11 Aug 2015 20:12:08 GMT</span></span>
<span class="tarball"><span class="filename">Dist-Zilla-Plugin-Hook-0.006.tar.gz</span> <span class="size">55402</span> <span class="date">Tue, 11 Aug 2015 20:14:49 GMT</span></span></span>
<span class="release trial"><span class="tarball"><span class="filename">Dist-Zilla-Plugin-Hook-0.006_01.tar.gz</span> <span class="size">55402</span> <span class="date">Tue, 11 Aug 2015 20:14:49 GMT</span></span></span>
<span class="release trial"><span class="tarball delete"><span class="filename">Dist-Zilla-Plugin-Hook-0.006_02.tar.gz</span> <span class="size">55402</span> <span class="date">Scheduled for deletion (due to ...)</span></span></span>
...
</pre>
HTML source code looks a bit ugly, but creating a user style sheet for such code will be a trivial task:
.meta, .readme { color: grey; }
.tarball { color: black; }
.trial { color: blue; }
.delete { color: red; }
.release { margin-top: 1em; margin-bottom: 1em; }
Such markup also greatly simplifies other user-side tricks. For example, someone may want to use another format for dates, convert times to local time zone, convert sizes from bytes to kilobytes, hide meta and readme files to have more compact compact list of releases, etc.
[... ] creating a user style sheet for such code will be a trivial task
If it's trivial, please consider proposing a pull request...
If it's trivial, please consider proposing a pull request...
The fix should be trivial for a person familiar with the infrastructure, but I am not. (I am a bit familiar with HTML, CSS, and JavaScript(ing), but not with web application frameworks.) I searched source code for "Show my files" and found lib/pause_1999/config.pm:
show_files => {
verb => "Show my files",
priv => "user",
cat => "User/01Files/02show",
desc => "find . -ls resemblance",
},
Oops. It says me nothing about where the code generating "Show my files" page is. :-(
Meanwhile, you can look at result I achieved by user-side scripting and styling. Installing extension is not required, you can just look at screenshots. (User-side scripting would not be required if PAUSE provides semantic markup.)
Try searching for "show_files" next.
On Wed, Nov 23, 2016 at 2:29 PM, van-de-bugger [email protected] wrote:
If it's trivial, please consider proposing a pull request...
The fix should be trivial for a person familiar with the infrastructure, but I am not. (I am a bit familiar with HTML, CSS, and JavaScript(ing), but not with web application frameworks.) I searched source code for "Show my files" and found lib/pause_1999/config.pm:
show_files => { verb => "Show my files", priv => "user", cat => "User/01Files/02show", desc => "find . -ls resemblance", },Oops. It says me nothing about where the code generating "Show my files" page is. :-(
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/andk/pause/issues/231#issuecomment-262645660, or mute the thread https://github.com/notifications/unsubscribe-auth/AASfy7rDU6Uh7zKbcOFgd2o3NM-HvYtdks5rBL5DgaJpZM4K3Ygy .
JFYI, I'm refactoring Web UI with Mojolicious now and I'll address this issue there.
