Domestic na Kanojo chap 26 | Show by Rock!! English Subbed | Карточный домик / House of Cards [S06] (2018) HDTVRip 720p | SunshineStudio

Design drafting

Posted in

#26 by witchcapture
2018-02-08 at 08:44
No, there's some issues with thinner screens at the moment :)
Though some things seem to be down to your browser, which browser is that if I may ask?
#27 by leery
2018-02-08 at 08:48
Just a regular old SeaMonkey.

I don't run the browser window maximised; that seems to break some sites. But even if I do, nothing in your mockup changes. How thin is a 'thin' screen anyway?
#28 by witchcapture
2018-02-08 at 09:11
The sidebar breaks below 1360px wide (+ whatever your scrollbar takes up) at the moment.

Everything seems to look correct in the latest SeaMonkey above that: link

(other than the dropdown caret being replaced by an ellipsis, which happens in Firefox too - will fix.)

Also looks like the emoji flags won't work on most platforms, so will need to rethink that.Last modified on 2018-02-08 at 09:16
#29 by savagetiger
2018-02-08 at 15:03
Should it really be a 5 star rating system when voting on this site is out of 10? It's not really accurate.
And the original title underneath the main is completely wrong somehow.

Where are you going to put the notifications?
#30 by witchcapture
2018-02-09 at 00:41
Well, with half-stars it's a 10-point system. The JP title is wrong here because "虚ノ少女" is really short and wouldn't be a good example of how the page would look for most VNs.

Notifications will be a bell icon next to your username, as seen in the last mockup: link
#31 by witchcapture
2018-02-16 at 09:14
Been a bit busy this past week but finally found some time; it should all be working now other than mobile: link

I'll post a zip with the source files in a couple of days once mobile support is fixed.

@yorhel Emoji flags aren't quite as widely supported as I had thought (plus, there's no politically neutral option for Arabic), so for now I've just replaced them with the language code. Do you think it's worth adding in SVG flags here?Last modified on 2018-02-16 at 09:33
#32 by yorhel
2018-02-16 at 11:51
@witchcapture: Looking nice! A few minor things:

Perhaps the font size of the description can be reduced a tiny bit on smaller screen sizes? On wide screens its fine like this (avoids long lines), but on smaller screens it mostly wastes space.

I also have my reservations regarding the 5 star rating display, even if it's just a scaling matter. I worry that it might be interpreted differently and affect voting behavior. I haven't fully decided on this yet, though, and it's always easy to change the representation later on in the development cycle should it be necessary.

The top menu for 'database' is now an on-click dropdown; Is it an idea to have it be an hover-style menu with the sub-links in the space directly below it - without overlapping or moving down the page contents? Or would that look too cluttered?

Regarding Emoji flags: I actually think a box with the ISO code like now is fine. Using country flags to represent languages has always been politically incorrect, even if it looks nicer. :(

Regarding other use of unicode symbols (e.g. gender): Fine for now, but we might have to replace those with SVG/PNG icons too. I remember using the Unicode symbols for the gender icons before, and had to replace those with actual icons because they didn't render well for some people. Hopefully font support is better now, but that's something we'll find out in further testing.

Once you have the zip ready I'll implement the VN pages on the backend so we can easily test the design on other VNs.
#33 by leery
2018-02-16 at 16:33
I'm no longer deigned a cover image. Yay for fancy responsive CSS!

Yeah, I know I'm the outlier here once again with my 942px window.innerWidth...

...I'll just go order some enlargement pills from the interwebs for this.
#34 by yorhel
2018-02-16 at 16:45
@leery: Heh, I was also about to comment on the high cut-off point for the mobile view, but was awaiting the "mobile support" to comment further, seeing as this is a known unfinished area.

(I doubt widths around 1000px are uncommon. In fact, it boggles my mind how many people browse the web fullscreen on a widescreen display, it's such a waste of space. But alas, many people do, so we have to account for both scenarios. And still not forget about mobile while we're at it - this design shows promise in all areas though, just needs some tuning).
#35 by witchcapture
2018-02-25 at 12:10
@yorhel Mobile now working!

Perhaps the font size of the description can be reduced a tiny bit on smaller screen sizes? On wide screens its fine like this (avoids long lines), but on smaller screens it mostly wastes space.
Yes, good idea. I've also made the title text smaller on smaller screens, it was *just a bit* too big for a 320px wide phone!

I also have my reservations regarding the 5 star rating display, even if it's just a scaling matter. I worry that it might be interpreted differently and affect voting behavior. I haven't fully decided on this yet, though, and it's always easy to change the representation later on in the development cycle should it be necessary.
Yeah, makes sense - I've replaced it with just the score as text ("8.28") now.

The top menu for 'database' is now an on-click dropdown; Is it an idea to have it be an hover-style menu with the sub-links in the space directly below it - without overlapping or moving down the page contents? Or would that look too cluttered?
That could be cool. I ran out of time today to implement that so I'll come back to that.

I forgot to implement a lightbox (large image view) for the gallery before, so that is now added. It does some fancy things like automatically preloading the next image in the set, which should improve the experience a bit on a slower connection.

Here's the .tar.gz of the html and assets: link

There's a very rudimentary build system there, just run build.sh (requires node, and `npm install` to have been run) or watch.sh (requires nodemon installed). CSS files are just concat-ed together, while the JS is run through buble to compile it from ES6 to ES5. The archive also includes the compiled files.

Let me know anything else you need!

Other than tweaking the top menu design (and fixing the borked footer in IE 11 - which appears in the middle of the screen for some reason), what would you say are the next steps here? Moving on to some forms (edit vn, login, etc...), maybe?Last modified on 2018-02-25 at 12:18
#36 by yorhel
2018-02-25 at 15:13
Looking good!

The lightbox looks good, but needs some work. It'll need a link to open the raw image and, if there's enough space, a thumbnail view for quick selection (for reference: t6685). But let's do that later, the current prototype is fine for now. Not to mention that the lightbox is a good candidate for an Elm implementation. :-)

Next steps: Definitely forms. Once I have a basic style and some guidelines for forms I'll have enough work for several weeks, if not months.

I have a 'v3' branch on the VNDB git where I'm working on the new layout, I'll integrate your build system and implement the VN pages on that.

It would help if we had a better way to collaborate. Could you try and see if you can get a local VNDB instance running? Don't spend too much time on it if things aren't working. If it takes more than an hour to get VNDB running, it means I have to fix something. If it does work and I'm done integrating stuff, you should be able to work directly on the git repo without too much trouble.
#37 by witchcapture
2018-02-27 at 23:54
Great! I'll try and get a local instance running, I don't anticipate too much trouble there :)
#38 by witchcapture
2018-03-03 at 09:38
Cool, got it up and running using Docker.

I had to make a small tweak to the docker configuration as I'm on macOS and inside the container /var/www was owned by root - Docker for Mac runs Docker inside a VM and shares the folder with a custom filesystem driver.

diff --git a/util/docker-init.sh b/util/docker-init.sh
index b54e513f..49ef9278 100755
--- a/util/docker-init.sh
+++ b/util/docker-init.sh
@@ -11,10 +11,17 @@ mkdevuser() {
# Create a new user with the same UID and GID as the owner of the VNDB
# directory. This allows for convenient exchange of files without worrying
# about permission stuff.
+ # If the owner is root, we're probably running under Docker for Mac or
+ # similar and don't need to match UID/GID
USER_UID=`stat -c '%u' /var/www`
USER_GID=`stat -c '%g' /var/www`
- groupadd -g $USER_GID devgroup
- useradd -u $USER_UID -g $USER_GID -m -s /bin/bash devuser
+ if test $USER_UID -eq 0; then
+ groupadd devgroup
+ useradd -m -s /bin/bash devuser
+ else
+ groupadd -g $USER_GID devgroup
+ useradd -u $USER_UID -g $USER_GID -m -s /bin/bash devuser
+ fi

# So you can easily do a 'psql -U vndb'
echo '*:*:*:vndb:vndb' >/home/devuser/.pgpass

Also had to add m4 to the list of packages to install in the Dockerfile.

Will press on with the forms!

Edit: might have spoken too soon, http://localhost:3000/f/style-yh.css and the other assets all 404, even though they exist on the filesystem. Is that expected or did I break something? :P
Should I be using the non-docker setup instead?Last modified on 2018-03-03 at 09:53
#39 by yorhel
2018-03-03 at 10:02
Does the 'devuser' have write access to /var/www in that case?

http://localhost:3000/f/style-yh.css and the other assets all 404. Is that expected or did I break something?
That's okay, the v3 branch is my playground, and I didn't commit a few files that I was sure weren't going to be used anyway.

I've already implemented most of the VN page and am currently working on the build system and Dockerfile. Expect that to be up in a few minutes!Last modified on 2018-03-03 at 10:03
#40 by yorhel
2018-03-03 at 10:28
There we go. If you do a git pull and docker rebuild, you should have the new layout with working assets (...assuming your 'devuser' has write access).

Here's how I organized the files: link

EDIT: If you want to do DB modifications or upload files, etc, you can easily switch between the v3 and master branches. I recommend that you don't use the same directory for that, because the generated files may clash. So do a separate 'git clone' of the master branch and run docker from there. You can re-use the docker image generated from the v3 branch, just not the other way around.

All of this hinges on the 'devuser' being able to write to /var/www though.

EDIT#2: If your patch doesn't work, try this instead:
diff --git a/util/docker-init.sh b/util/docker-init.sh
index b54e513f..72569eb7 100755
--- a/util/docker-init.sh
+++ b/util/docker-init.sh
@@ -13,8 +13,8 @@ mkdevuser() {
# about permission stuff.
USER_UID=`stat -c '%u' /var/www`
USER_GID=`stat -c '%g' /var/www`
- groupadd -g $USER_GID devgroup
- useradd -u $USER_UID -g $USER_GID -m -s /bin/bash devuser
+ groupadd -g $USER_GID -o devgroup
+ useradd -u $USER_UID -g $USER_GID -m -o -s /bin/bash devuser

# So you can easily do a 'psql -U vndb'
echo '*:*:*:vndb:vndb' >/home/devuser/.pgpass
Last modified on 2018-03-03 at 10:40
#41 by witchcapture
2018-03-03 at 10:59
Woohoo! All working now, thanks.

devuser does have write access to /var/www - I can create a file with 'touch' and it shows inside the docker container as owned by devuser and on the host as owned by my user. Though, it's looking like inside the container, /var/www is owned by devuser if I check? That's weird. I'll look in to that a little more later. Maybe something changes later on in the docker boot process.

I've already implemented most of the VN page and am currently working on the build system and Dockerfile. Expect that to be up in a few minutes!

Awesome! Looks like it's coming together :D

Edit: will also try that second docker-init patch you postedLast modified on 2018-03-03 at 11:00
#42 by yorhel
2018-03-03 at 11:21
I can create a file with 'touch' and it shows inside the docker container as owned by devuser and on the host as owned by my user
That's exactly how it should be. Interesting though, that behavior combined with your patch suggests that the files inside Docker on Mac have dynamic ownership, and appear to be owned by whoever is accessing the file; If that is indeed the case then your patch is the correct approach. I did find link on this subject - their solution is to just chown the dir when running on Mac.
#43 by yorhel
2018-03-03 at 12:23
I've just set up a v3.weatherslawblog.com instance, which runs the new code & layout on the actual database. This should help with testing and allows for early feedback (though the current version is much too early for feedback :P).

(Warning: Spoilers everywhere)
#44 by witchcapture
2018-03-17 at 06:57
That's exactly how it should be. Interesting though, that behavior combined with your patch suggests that the files inside Docker on Mac have dynamic ownership, and appear to be owned by whoever is accessing the file; If that is indeed the case then your patch is the correct approach. I did find link on this subject - their solution is to just chown the dir when running on Mac.
Yeah, this looks to be the case. I can `ls -la` as root and it shows the files owned by root, su devuser and it shows the files owned by devuser. That's an interesting way of handling things.

Looking at the V3 instance I see a few things that I overlooked, like VN images with a wide aspect ratio and releases without a link, so that's pretty helpful.

Didn't manage to get to this last week sorry, but I'll come up with some different designs for forms and post back here. I'm thinking VN editing might be a good place to start because it has a fair variety of form elements.
#45 by yorhel
2018-03-18 at 09:55
I can `ls -la` as root and it shows the files owned by root, su devuser and it shows the files owned by devuser. That's an interesting way of handling things.
Very much so. I've applied your patch to handle this nicely.

I'm thinking VN editing might be a good place to start because it has a fair variety of form elements.
Definitely, looking forward to it!

Don't bother implementing this in Perl - the forms will go into elm/ anyway. You can just drop a HTML in the static/ dir to play around with. - you can set 'xml_pretty' in data/config3.pl to '2' to get easily editable HTML from the server. Likewise, don't bother too much with JS beyond what is necessary for quick prototyping, for the same reason. :-)

(If you're brave you can implement the html-generating code into elm/ directly and implement some of the interactive elements - but for now the priority is to get overall layout & styling and ideas for widgets right)


EDIT: I got myself a new monitor yesterday. 4k resolution and large enough to not require any scaling. I thought I already had a sense of the difficulty in making things look right on every display, but the differences between various displays and resolutions is even larger than I had imagined. That, of course, only reinforces the need for this redesign.

And in case you hadn't noticed, I'm the type to sprinkle TODO's all over the code. A 'grep -R TODO lib/VNDB' will give a nice overview of some stuff that I haven't implemented yet or where I have some ideas for improvements.Last modified on 2018-03-18 at 11:08
#46 by witchcapture
2018-03-24 at 09:05
Very much so. I've applied your patch to handle this nicely.

Great!

EDIT: I got myself a new monitor yesterday. 4k resolution and large enough to not require any scaling. I thought I already had a sense of the difficulty in making things look right on every display, but the differences between various displays and resolutions is even larger than I had imagined. That, of course, only reinforces the need for this redesign.
Oh, definitely, browsing at 4k is pretty spacious! Hopefully we'll be able to make things work well at every resolution.

Here's what I've come up with so far for the VN editing page: link
There's also a flatter alternate version that is the same layout, just without the panels: link (might need to tweak the background of the VN page to match if we went this route). This one is perhaps a little cleaner.

On mobile devices it would just be shown in one column, and the sidebar would become a dropdown, should be pretty straightforward.

Let me know what you think here or any ideas for improvement :)
#47 by yorhel
2018-03-24 at 09:23
Looks good. We can deviate from the current form structure if there's a better way, but for VN editing this structure is alright. We can remove the 'All items' with this layout - the menu already allows for quick navigation.

I prefer the panel version though, getting too flat makes it easy to lose track of the structure of the page.
#48 by witchcapture
2018-03-24 at 09:30
Great, sounds good. I'll get to work turning it into HTML!
#49 by savagetiger
2018-03-24 at 12:28
Is it going to default to showing everything then? Because scrolling is easier when adding things for the first time then having to click through 5 tabs.
And I like the second better, but I guess that's just my preference for minimalism, maybe if the lines went further across between the sections?
#50 by witchcapture
2018-04-06 at 23:40
I've fixed a few oversights in the VN page that being able to test it with real data exposed, and I'm mostly done with the edit page, but I appear to have come down with a case of the flu so I might be out of it for a few days :( I'll post back with patches once the edit page is done.

Reply

You must be logged in to reply to this thread.