The Box


dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
SteveM said:
Looks good! Only thing I noticed was that, if you make the window small enough, the timestamps for the comments run off the page.
That's a feature, not a bug! :p I made it that way intentionally, because I found no better way of displaying the time stamps. (I really try to focus on a clean design)

By the way, if anybody is a (real) web designer (which I'm not); feel free to create a new template for the box; the templates are all plain HTML files with *no code at all* in them. I've only introduced some special tags that produce the desired output. E.g. the code:
Code:
<html>
  <body>
    <lift:Applications.list search="orderby:titleasc">
      All tracked applications:
      [ul]
        <list:entry>
          [li]<entry:title/>[/li]
        </list:entry>
      [/ul]
    </lift:Applications.list>
  </body>
</html>
...will result in:
Code:
<html>
  <body>
    All tracked applications:
    [ul]
      [li]Application A[/li]
      [li]Application B[/li]
      [li]Application C[/li]
    [/ul]
  </body>
</html>
...And that's it. There are a number of such tags that can be used (I define them in src/main/scala/org/openpandora/box/snippet fyi). You can, as you can see, template anything and everything on the site. You'll find the templates in "src/main/webapp". Oh and if you wonder why I use such strange indentation; it's because the final generated HTML gets indented properly if I structure the tags that way; there's no other/better reason.

The template currently works pretty well, but if someone manages to produce something better, I'll replace the current template.

@sebt3, I'll implement what you suggested and see how it works, if it's OK I'll roll with it.
 
Last edited by a moderator:

sebt3

homebrew player (P. & C.)
Joined
Sep 9, 2008
Messages
4,855
Age
41
Location
France
Website
sebt3.openpandora.org
dflemstr said:
@sebt3, I'll implement what you suggested and see how it works, if it's OK I'll roll with it.
Cool :)

May I add :
- a list of new comment on our upload (for those that will upload, obviously... As I don't think I'll upload anything, I just forgot, but this could be cool to)

EDIT : An other solution is to merge this kind of dashboard with the welcome page (easier to implement, may be less usefull, but I don't know)
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
Ok, improved the loading speed of /applications/list by 500% by using lazy loading (search results are only loaded once you scroll down)

Will fix the user pages now.

sebt3 said:
EDIT : An other solution is to merge this kind of dashboard with the welcome page (easier to implement, may be less usefull, but I don't know)
Easier to implement? Nah, I can put the stuff wherever I want, there's not really any difference in difficulty. I'd like to put it on the User page because the information only is available once you're logged in; if I put it on the front page, people would wonder why it changes every so often.

Anyways, the user pages are currently broken since I'm adding stuff... stay tuned.
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
Added the update listing, it should be pretty solid now (I'm abusing some SQL internals to do version checking so my code is... 'interesting')

Anyways, I'd call the current code "final" for now, because I'm feature complete (About the comments: you can't really "reply" to comments so no need for that. The other two features (recommended apps, new comments to apps you uploaded) can be added later; the latter is difficult right now because I don't keep track of which comments have been read and which ones haven't).

So I'll do some code cleanup and release version 1.0, maybe host the app somewhere (we'll see if I can arrange something with ED) and we'll see about the rest.
 

GizmoTheGreen

Active Member
Joined
Jul 27, 2009
Messages
835
Age
30
Location
Tokyo, Japan
dflemstr said:
Added the update listing, it should be pretty solid now (I'm abusing some SQL internals to do version checking so my code is... 'interesting')

Anyways, I'd call the current code "final" for now, because I'm feature complete (About the comments: you can't really "reply" to comments so no need for that. The other two features (recommended apps, new comments to apps you uploaded) can be added later; the latter is difficult right now because I don't keep track of which comments have been read and which ones haven't).

So I'll do some code cleanup and release version 1.0, maybe host the app somewhere (we'll see if I can arrange something with ED) and we'll see about the rest.

unless you need an executable running, i got alot of space and bandwidth on my host...
though i only got the gizmothegreen.org domain.

so evildragon would be preffered i gues, haha
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
GizmoTheGreen said:
unless you need an executable running
Well I *do* need an executable running; a Servlet Container (for the application itself) and a database (for data durr) to be precise, so no dice ;)

Anyways, if anyone finds any last-second glitches, tell me; I'll probably tag for 1.0 on Monday so until then...
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
foxblock said:
Ah great, I will have a look at the German translation before then.
Please note that there are some things that I haven't put in the translation files yet; I'll finish core.properties today before 24:00 so tomorrow'll be a good day for translations ;)

EDIT: or I might just add the strings now, shouldn't take too long...

EDIT2: OK, the translation strings are in the repo
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
Congrats to PandoraPanic, you've just broken my layout test! ;)
I've managed to actually keep the font cycle going as you can see (the text is still aligned to the grid perfectly, thanks to Blueprint) but I don't know what to do with the categories listing... Does anyone know a neat CSS trick to vertically stack left-floats? Or would it be acceptable if the category listing was above PXML id etc? Other solutions?
darnlayouttests.png
 

foxblock

Asleep
Joined
Jun 17, 2009
Messages
1,563
Location
Germany
German translation, here ya go:

Code:
   # Core translation file for The Box
   
   # German translation by foxblock, 20.06.2010
   
   ################################################################################
   # Labels. These must not end with a period (".") and should be short.          #
   ################################################################################
   
   #
   # General
   #
   application=The Box
   greeting=Willkommen zur "Box", der Quelle fu00FCr PND-Dateien!
   
   #
   # Submit buttons
   #
   create=Erstellen
   save=Speichern
   comment.create=Kommentar schreiben
   user.create=Benutzerkonto erstellen
   user.login=Einloggen
   user.reset=Passwort zuru00FCcksetzen
   user.reset.sendlink=Passwortlink senden
   user.password.change=Passwort u00E4ndern
   
   #
   # File sizes
   #
   bytes=%n% B
   kilobytes=%n% kiB
   megabytes=%n% MiB
   gigabytes=%n% GiB
   
   #
   # Menu - Applications
   #
   applications.list=Programme
   applications.show=Programmdetails anzeigen
   applications.add=Programme hinzufu00FCgen
   applications.search=Erweiterte Suche
   
   #
   # Menu - Home
   #
   index=Startseite
   
   #
   # Menu - User
   #
   user.view=Benutzerkonto
   user.login=Einloggen
   user.logout=Ausloggen
   user.create=Registrieren
   user.lost-password=Passwort vergessen
   user.reset-password=Passwort zuru00FCcksetzen
   user.edit=Kontodetials
   user.change-password=Passwort u00E4ndern
   user.validate=Benutzer validieren
   
   #
   # Notifications - General
   #
   error=Fehler
   warning=Warnung
   notice=Information
   
   #
   # HTML
   #
   html.addacomment=Kommentar hinzufu00FCgen
   html.advanced=Erweiterte Suche
   html.author=Autor
   html.buildlabel=Build
   html.categories=Kategorien
   html.categorylabel=Kategorie
   html.change-password=Passwort u00E4ndern
   html.comment=Kommentar
   html.comments=Kommentare
   html.createuser=Benutzerkonto erstellen
   html.descriptionlabel=Beschreibung
   html.details=Details
   html.download=Herunterladen
   html.downloadhistory=Download-Historie
   html.downloads=Downloads
   html.downloadsbycategory=Downloads nach Kategorie
   html.downloadsthatday=Downloads an diesem Tag
   html.emaillabel=E-Mail
   html.edituser=Benutzerdetails bearbeiten
   html.search=Suche
   html.searchlabel=Suche
   html.keywordslabel=Stichworte
   html.languagelabel=Sprache
   html.loading=Laden
   html.login=Einloggen
   html.majorlabel=Major
   html.minorlabel=Minor
   html.newpasswordlabel=Neues Passwort
   html.oldpasswordlabel=Altes Passwort
   html.passwordlabel=Passwort
   html.pndfilelabel=PND-Datei
   html.pxmlid=PXML id
   html.releaselabel=Veröffentlichung
   html.recentuploads=Neueste Uploads
   html.repeatlabel=Wiederholen
   html.resetpassword=Passwort zuru00FCcksetzen
   html.upgrades=Aktualisierungen
   html.uploaded=Hochgeladen am
   html.uploader=Hochgeladen von
   html.uploadhistory=Upload-Historie
   html.uploadpnd=PND hochladen
   html.usernamelabel=Benutzername
   html.size=Größe
   html.search=Suche
   html.sendpasswordresetemail=E-Mail zum Passwort-Zuru00FCcksetzen schicken
   html.timezonelabel=Zeitzone
   html.title=Titel
   html.titlelabel=Titel
   html.trackedpackages=Verfolgte Pakete
   html.translations=Übersetzungen
   html.uploaded=Hochgeladen am
   html.version=Version
   
   ################################################################################
   # Fragments. These are lower-case sentence fragments that are assembled later. #
   ################################################################################
   
   #
   # HTML
   #
   html.orderby=ordne nach
   html.ordering.ascending=aufsteigend
   html.ordering.descending=absteigend
   html.order.author=Autor
   html.order.pxmlid=PXML id
   html.order.rating=Bewertung
   html.order.time=Hochladezeitpunkt
   html.order.title=Titel
   html.wrote=geschrieben
   
   ################################################################################
   # Messages. These need to be whole sentences and grammatically correct.        #
   ################################################################################
   
   #
   # General
   #
   fiddle=Wie bist du hier hereingekommen? Versuch nicht herumzuspielen!
   
   #
   # User
   #
   user.email.validationPending=Du musst dein Konto aktivieren bevor du dich einloggen kannst. Bitte schau in dein E-Mail Postfach.
   user.email.validationSent=Wir haben dir eine Bestu00E4tigungs-E-Mail zugeschickt, bitte verifiziere damit deine E-Mail Addresse.
   user.invalid=Diese Benutzer/Passwort-Kombination gibt es nicht.
   user.loggedin=Du hast dich erfolgreich eingeloggt.
   user.loggedinalready=Du bist bereits eingeloggt.
   user.mustlogin=Dafu00FCr musst du eingeloggt sein.
   user.mustlogout=Bitte log dich erst aus.
   user.password.changed=Passwort geu00E4ndert.
   user.profile.updated=Profil gespeichert.
   user.welcome=Willkommen!
   
   user.email.exists=Diese E-Mail-Adresse wurde bereits registriert.
   user.email.invalid=Ungu00FCltige E-Mail-Adresse.
   user.password.nomatch=Die Passwu00F6rter stimmen nicht u00FCberein.
   user.password.tiny=Passwort zu kurz (min: %length%)
   user.username.exists=Dieser Benutzername ist bereits vergeben.
   user.username.invalid=Ungu00FCltiger Benutzername (Nur Buchstaben, Unterstriche und Striche sind erlaubt).
   user.username.huge=Dieser Benutzername ist zu lang (max: %length%).
   user.username.tiny=Dieser Benutzername ist zu kurz (min: %length%).
   
   user.validation.subject=%hostname% E-Mail-Bestu00E4tigung.
   user.validation.resent=Bestu00E4tigungs-E-Mail wurde erneut gesendet.
   
   user.reset.invalidlink=Ungu00FCltiger Passwort-link.
   user.reset.getvalidlink=Einen neuen bekommen.
   user.reset.sent=Email zur Passwort-Zuru00FCcksetzung wurde abgeschickt.
   user.reset.subject=%hostname% Passwort-Zuru00FCcksetzung.
   user.reset.notfound=Die E-Mail-Adresse konnte nicht gefunden werden.
   
   user.change.wrongoldpw=Falsches altes Passwort.
   
   #
   # Email
   #
   email.disabled=E-Mail-System deaktiviert
   #
   # FileDispatcher
   #
   package.notfound=Das angeforderte Paket ist gelu00F6scht worden.
   file.notfound=Unbekannte Datei mit Namen %id% und Suffix %extension% in der Datenbankg namens %datastorage%.
   
   #
   # Packages
   #
   package.uploaded=Dein Paket wurde erfolgreich hochgeladen!
   package.processing=Der Server wird die Datei nun analysieren. Wir werden dich benachrichtigen wenn dieser Vorgang abgeschlosen wurde, hab etwas Geduld.
   package.abortlogout=Du wurdest ausgeloggt wu00E4hrend die Datei hochgeladen wurde.
   package.void=Es wurde keine Datei hochgeladen!
   
   #
   # Comments
   #
   comment.empty=Das Kommentar-Feld ist leer - du musst schon etwas schreiben.
   comment.huge=Kommentar zu lang (maximale Lu00E4nge: %length% Buchstaben).
   comment.created=Kommentar hinzugefu00FCgt.
   
   #
   # Ratings
   #
   rating.created=Bewertung abgegeben.
   rating.invalid=Ungu00FCltige Bewertung.
   rating.alreadyrated=Du hast dieses Programm bereits bewertet.
   rating.mustlogin=Du musst eingeloggt sein, um ein Programm bewerten zu ku00F6nnen.
   
   #
   # Searches
   #
   search.version.conflict=Mehrfache %versionfield% Version-Einschränkung angegeben.
   search.invalid=Fehlerhafte Suchanfrage.
   
   #
   # Validation
   #
   validation.application.missing=Die PXML-Datei enthu00E4lt keine Programm-Information!
   validation.title.missing=Es gibt keine Information u00FCber den Programmtitel in der PXML!
   validation.title.noenus=Es gibt keinen amerikanischen (en_US) Titel!
   validation.description.missing=Es gibt keine Programmbeschreibung in der PXML!
   validation.description.noenus=Es gibt keine amerikanische (en_US) Programmbeschreibung!
   validation.category.missing=Es wurden keine Kategorien angegeben!
   validation.category.nameless=Es gibt eine namenslose Kategorie in der PXML.
   validation.version.onlyone=Es darf nur genau ein version-Tag in der PXML geben!
   validation.osversion.toomany=Es gibt zu viele osversion-Tags!
   validation.author.toomany=Es gibt zu viele author-Tags!
   validation.string.lang.missing=Ein lokalisierter Wert braucht noch ein Sprachen-Attribut (lang)!
   validation.string.lang.invalid=Fehlerhaftes Sprachen-Attribut %lang%!
   validation.string.empty=Ein lokalisierter Wert braucht noch text-Information!
   validation.version.invalid=Eine %versionfield%-Versionsnummer ist unbrauchbar.
   validation.version.noint=Ungu00FCltiges %versionfield% - es muss eine ganze Zahl sein!
   
   #
   # HTML
   #
   html.addapps=Um neue Programme hochzuladen, musst du diese in Form einer PND-Datei hochladen.
   html.addinfo=Du musst nur die Datei hochladen, wir werden danach alle Details automatisch ausfu00FCllen. Nachdem die Datei hochgeladen wurde, werden die Metadaten aus der PXML.xml-Datei extrahiert und als Details verwendet. Du solltest deshalb versuchen, der PXML-Spezifikation so gut wie mu00F6glich zu folgen und mu00F6glichst viele Information einzubinden.
   html.newuser=Bitte gib alle unten benu00F6tigten Informationen an um ein neues Benutzerkonto zu erstellen.
   html.resetmail=Diese Seite wird dir dabei helfen, dein Passwort zuru00FCckzusetzen.
   html.upgradesforyou=Es sind Aktualisierungen für heruntergeladene Pakete verfügbar.
   
   ################################################################################
   # XHTML. This XML *must be valid* to avoid crashes.                            #
   # THE XML WILL NOT BE CHECKED BEFORE IT IS USED!                               #
   # YOU SHOULD VALIDATE IT YOURSELF!                                             #
   # Every entry that is supposed to be parsed as XML needs to start with "%%".   #
   # E.g. "html.m=<b>m</b>" will display "<b>m</b>" to the user, while            #
   #      "html.m=%%<b>m</b>" will display "m" in bold to the user.               #
   ################################################################################
   
   #
   # Internal
   #
   validation.pxmlnotfounderror.title=%filename% enthielte keine PXML-Daten.
   validation.pxmltruncatederror.title=%filename% braucht ein </PXML>-Tag.
   validation.xmlsyntaxerror.title=%filename% enthu00E4lt ungu00FCltige XML-Informationen.
   validation.pxmlsyntaxerror.title=%filename% enthu00E4lt ungu00FCltiges PXML-Markup.
   validation.pnginvaliderror.title=%filename% hat ein ungu00FCltiges Vorschau-Bild.
   validation.pxmlsyntaxwarning.title=%filename% hat kleinere Probleme.
   validation.added.title=%filename% wurde analysiert und hinzugefu00FCgt.
   validation.pxmlnotfounderror.body=%%<p>Das Paket enthielt keine <em>PXML</em>-Metadata.</p><p>Bitte lies <a href="http://pandorawiki.org/PXML_specification">die PXML-Spezifikation (englisch)</a> fu00FCr mehr Informationen.</p>
   validation.pxmltruncatederror.body=%%<p>Die <em>PXML-Region</em> endet ohne ein &lt;/PXML&gt;-Tag, was bedeutet, dass es <em>unmu00F6glich</em> fu00FCr uns ist, die Datei zu laden.</p>
   validation.xmlsyntaxerror.body=%%<p>Der Fehler war:</p><code>%error%</code><p>Bitte lies <a href="http://pandorawiki.org/PXML_specification">die PXML-Spezifikation (englisch)</a> fu00FCr mehr Informationen.</p>
   validation.pxmlsyntaxerror.body=%%<p>Der Fehler war:</p><code>%error%</code><p>Bitte lies <a href="http://pandorawiki.org/PXML_specification">die PXML-Spezifikation (englisch)</a> fu00FCr mehr Informationen.</p>
   validation.pnginvaliderror.body=%%<p>Es gibt einen Block mit einem <em>PNG</em>-Header nach der <em>PXML</em>-Datei. Wir haben vergebens versucht, diesen Block als Bild zu u00F6ffnen.</p>
   validation.pxmlsyntaxwarning.body=%%<p>Die Datei hat Fehler, wurde aber dennoch akzeptiert. Folgender Fehler trat auf:</p><code>%error%</code>
   validation.added.body=%%<p>Du kannst die neuen Programme in der Liste mit den anderen finden.</p>
   
   #
   # External
   #
   html.loginmsg=%%Bitte <lift:Menu.item name="UserLogin">einloggen</lift:Menu.item> um Zugang zu Kommentaren, Bewertungen und mehr zu erhalten!
   html.loginview=%%Du bist nicht eingeloggt. Bitte <lift:Menu.item name="UserLogin">logge dich ein</lift:Menu.item> oder <lift:Menu.item name="UserCreate">registriere dich</lift:Menu.item> um dein Benutzerkonto aufzurufen.

I am not sure about a few translation strings, I would have to see the context to properly translate them, so I could not hurt to look over the final, live result.

@Layout question:
How about shortening the author string when it exceeds a certain length and appending some dots "..."

foxblock out
 

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
foxblock said:
I am not sure about a few translation strings, I would have to see the context to properly translate them, so I could not hurt to look over the final, live result.
Thanks again, and sorry for the late reply. If you aren't awake any longer, I'll give you however much time you want to look over the translations tomorrow. I've already spotted some things that are worded strangely but I dare not fix them myself ;)

foxblock said:
@Layout question:
How about shortening the author string when it exceeds a certain length and appending some dots "..."
This isn't officially supported in CSS2, but I'll use some CSS3 backports and Opera hacks and see what I can do. So far I've managed to display an ellipsis in Firefox, WebKit, IE and Opera which should be enough I think. Anyways, good solution! It should be live in a sec.

@JayFoxRox, the Unicode escapes weren't preserved because of the "#%" forum software; I did a "s/u(?=[0-9A-F]{4})/\u/"

EDIT: Also doing a database reset
 
Last edited by a moderator:

foxblock

Asleep
Joined
Jun 17, 2009
Messages
1,563
Location
Germany
JayFoxRox said:
foxblock said:
Code:
user.email.validationPending=Du mu00FCsst dein Konto aktivieren bevor du dich einloggen kannst. Bitte schau in dein E-Mail Postfach.

Sounds fishy - "Du müsst" or what is this?

Yeah, it has to be an "u", will edit it.

@dflemstr: I can send you the file directly if that's easier for you (so it does not get messed up).
Also please tell me which lines sound wrong to you so I can have another look at them.

@Layout: I would go for the first (sans-serif) version, looks much better to me. But it also might look good to only have the navigation links ("Programs","user" and sub-links) in the serif font.

foxblock out
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
If you're having problems with unicode escapes, please note that there are editors that can escape stuff automatically for you. I use Netbeans because I already have that installed for other stuff, but there are other tools available. If you don't want to cope with it, just use ü ä ö etc and I'll escape them for you.

foxblock said:
@dflemstr: I can send you the file directly if that's easier for you (so it does not get messed up).
Well I'm using Git after all, so you can just download the repo and send me a patch; the clone URL is git://github.com/dflemstr/box.git
But feel free to upload the file in a ZIP somewhere; I don't have a problem with that.
foxblock said:
Also please tell me which lines sound wrong to you so I can have another look at them.
I've added comments to the file you provided; you'll find the commented file in the "feature/german-translation" branch of the repo (or just go here directly)

foxblock said:
@Layout: I would go for the first (sans-serif) version, looks much better to me. But it also might look good to only have the navigation links ("Programs","user" and sub-links) in the serif font.
Titillium (the current sans-serif I'm using everywhere) is extremely light and therefore difficult to read on small resolutions, and I just want a font suite that flows well together so I won't mix Titillium with a weight of 400 and Fontin (the half-serif font you're seeing) which is much heavier. I have a sans-serif that matches the half-serif I'm working with now, will see how that looks.

EDIT: How it looks (All using Fontin and Fontin Sans):
http://img149.imageshack.us/img149/4987/fontsample1.png
http://img686.imageshack.us/img686/6593/fontsample2.png
http://img338.imageshack.us/img338/2107/fontsample3.png

I'm really leaning more towards Fontin because of its readability on small screens. The labels for fields could maybe be a little bit less italic, but I like this setup in general.

You can try out the font for yourselves; I've updated the site to use the font branch. Just remember to hit Shift+F5 to clear CSS caches.

By the way, old browsers that don't support web fonts won't be seeing these typefaces anyways, so it's a really trivial issue.
 
Last edited by a moderator:

dflemstr

It's a ball.
Joined
Jul 31, 2008
Messages
2,514
Location
Stockholm, Sweden
Website
Visit site
foxblock said:
I still like the sans-serif (aka current aka 1) version more.
OK, I'll see if I can find a font that doesn't have those blur issues that Titillium has (because I tried browsing the site on an Android phone and it was *horrible*; the text is unreadable). I'm changing the site to use sans-serif faces more and more.
foxblock said:
also the corrected translation here: http://pastebin.com/BMMc2chM
If you have any questions, you know where to find me ;)
"Unknown paste ID, it may have expired or been deleted!"

--EDIT: now the file is available again, nvm

@Reyhn, yeah I could leave the choice to the user but I don't want to keep track of 80 font files (I already use 45 font files as it is; 9 actual files in 5 different formats (eot, svg, svgz, ttf, woff)) and the site would become *heavy* with conditional CSS (it is extremely speedy at the moment, rendering-wise)

EDIT2: I don't know how many times I've typed in the following in the URL bar already:
Code:
javascript:displayNotice("error", "Test", '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non sollicitudin odio. Nam erat dolor, imperdiet id blandit id, consectetur non eros.</p><code>Test code</code><p>Phasellus dictum leo at sapien pulvinar et volutpat erat interdum. In nisi justo, vehicula ut interdum at, semper eu felis.</p><a href="http://google.com/">Search Google.</a>', null);
 
Last edited by a moderator:
Top