Created new Design

[AlenToma]

Hi, i had sometime to work with the design and i made a new look you may like.

Have a look here https://raw.githubusercontent.com/AlenToma/WebToEpub/master/screanshot.PNG

the only changes i made is css and a litte html to the following files popup.html and added css/default.css.

if you like the changes you could add them.

i could do pull if you would like to, but im not so good with using it though :)

[dteviot]

@AlenToma It looks nice. Attach the files (or email them) and I'll add them.

[AlenToma]

Here is the files

https://github.com/AlenToma/WebToEpub/blob/master/plugin/popup.html And then create a folder with name css and add this https://github.com/AlenToma/WebToEpub/blob/master/plugin/css/default.css

I should note that i have only tested this design on chrome but im 99% sure it will work the same on firefox

So please try to test the design and tell me if you would like to add/change somthing

[dteviot]

D'oh! I should have realized you forked the code. Thanks. Will let you know

[dteviot]

@AlenToma Works nicely on Firefox. Thank you very much. You probably didn't notice, but I'm also trying to add dark mode support. https://github.com/dteviot/WebToEpub/issues/348 And I have to tell you, that styling looks awesome in dark mode.

Unfortunately, when the browser window (Firefox or Chrome) isn't full screen, important parts of the screen are cut off (see screenshot below) Which makes me a bit concerned how it will work on Mobile Devices. Although they are kind of moot at the moment. Mozilla no longer allows WebToEpub to run on Firefox for Android. (Actually, they've blocked nearly all extensions.)

Anyway, if you can tell me how to fix the clipping, I'll accept with thanks. I've just started putting a commit together with your changes, and dark mode, and changes to build script to include the new css file, and credits.

[AlenToma]

I will look at it.

[dteviot]

@AlenToma

but if i add this to a label, it will not work. Why is that?

This is the code that puts the correct text in. Basically, you need to add a "i18n" class to a <label> Or any other element that isn't a button, option th or td. https://github.com/dteviot/WebToEpub/blob/9b6cbf7e1fa0d26779d401957c5ee8b1348000f5/plugin/js/main.js#L317-L334

I need to convert this ti divs insted of table. I do not know the whole functionality of the app so when i do the workup there may be small errors.

I really wouldn't want to put you to that effort.

[AlenToma]

No and i ont do that i found the problem and im trying to fix it now :)

[DicerX]

@AlenToma This looks sweet; I do suggest to round the corners of the cells for a more modern aesthetic, similar to how the buttons are corners are rounded.

[dteviot]

I do suggest to round the corners of the cells

LOL I've been asked to do that as well, in the dark mode request I got.

[DicerX]

I really think I've some sort of OCD or something because I dislike the look of straight edged cells.

[AlenToma]

Np will do it.

[AlenToma]

Ok @dteviot

I have fixed the problem with the table.

Just get the latest css from

https://github.com/AlenToma/WebToEpub/blob/master/plugin/css/default.css

and it should be good to go.

[AlenToma]

Im good at css and htm and js but really bad at designing, it would be greet if someone create a new design i could fix.

[DicerX]

@AlenToma I'm shit at coding other than finding and replacing stuff, but I'm good at designing things on Photoshop.

Here's the design draft I made for Web-to-Epub a couple of days ago; if you can make it similar to this, I'll cripple my cultivation, cut off my arms, and kotow to you.

Here are the two screencaps:

1- This one zoomed out to show the scroll bar and how I ventured the whole thing.

https://imgur.com/8UGCA6W

2- Here is the zoomed-in shot, and how I would typically use it:

https://imgur.com/MuRDCS3

[AlenToma]

Friend its almost the same exept the novel image, background and the whole many other data that are not available in you design :)

But i could change the background to if that what @dteviot want

[dteviot]

Background has been done. For dark mode

[dteviot]

I'm just in the process of updating the CSS.

[AlenToma]

@dteviot It would be greet if we could hide the chapters Url by default unless the user want to show it,

That way the design dont get to big when the URL are very long

[dteviot]

That's doable. Please raise as a different issue and I'll take care of it.

[DicerX]

Second this, just in my experience the chapter titles are at times not shown at all. Thus, maybe allow hovering over the cell to show the full url instead.

[dteviot]

@alenToma container has margin: 10px; margin: auto;

Is the 10px a mistake?

[AlenToma]

hahaha its an old one, forgot to remove it. but margin: auto; override the prev one so there is no problem

[dteviot]

Pushed changes to ExperimentalTab branch. Attached is the zip, if @DicerX wants to take it for a test drive. I'm off to bed. Alen, again, thanks for your help. WebToEpub0.0.0.120.zip

[DicerX]

@dteviot hovering over buttons makes the text inside them illegible. Also, I recommend adding a switch for day-light mode if possible.

[dteviot]

@DicerX Fix for buttons is easy. Versions on Google drive updated. Please explain what you mean by "switch for day-light mode"

[DicerX]

Oh sorry, will be using that shortly. That aside, I meant the addition of a button to switch from dark mode to light mode. Something like so:

https://dribbble.com/shots/7635203-Light-Dark-mode-toggle-switcher/attachments/396864?mode=media

On Fri, 18 Sep 2020 at 7:23 pm, dteviot notifications@github.com wrote:

@DicerX https://github.com/DicerX

Fix for buttons is easy. Versions on Google drive updated.

Please explain what you mean by "switch for day-light mode"

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/dteviot/WebToEpub/issues/383#issuecomment-694759112, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMLZSGO7QXFP3MV4OR4VSTLSGMRI3ANCNFSM4RQBDGRQ .

[dteviot]

But, the whole point of dark mode is to automatically pick up the preference from the User's OS settings, and set it accordingly.

[DicerX]

Hmmm, this is a little confusing since the system default themes are manually set on windows, unless you're on Mac OS, I believe.

Currently, the only solution for this on windows is to either manually dig up the personalisation tab on Windows or the browser settings and switch themes. Or, and I just looked this up, download a third-party app called Auto Dark Mode to get the automatic situation of the theme.

On Fri, 18 Sep 2020 at 7:32 pm, dteviot notifications@github.com wrote:

But, the whole point of dark mode is to automatically pick up the preference from the User's OS settings, and set it accordingly.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dteviot/WebToEpub/issues/383#issuecomment-694763489, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMLZSGIQ4WVUEWIQJXDOZP3SGMSLLANCNFSM4RQBDGRQ .

[DicerX]

@dteviot regarding the button's text, I suggest the removal of the depressed shadows , they make the text harder to read and more pronounced than the rest of the design.

[AlenToma]

I second all of @DicerX suggestions.

And i would have worked on it right a way, except that i have made to many changes to my current fork.

So i would like to apply @DicerX suggestions after @dteviot have checked in all the changes we have made on other issues so i could re fork from github and then keep working on the design.

That offcourse after @dteviot have approved of those suggestions.

@dteviot i would like to mention that the addons work very good on Microsoft edge to, you may include it in your read me :)

[dteviot]

@AlenToma, @DicerX I'm happy for you to fix the depressed shadows. As regards manual toggle in WebToEpub for dark mode, I'm not totally comfortable with it. But I'll accept a three state option {useOS, always light, always dark} with useOS as default is OK, provided it doesn't make the styles or other logic complicated.

[AlenToma]

I was also thinking of moving the image up as @DicerX suggeted and move the image url up under Filename.

But i will need for you to check in the latest update so i could re fork you project so i could make changes and let you only copy the files changed

[dteviot]

@AlenToma Go ahead.
Also, I think the "Pack Epub" button needs to be more noticeable. For people who are using extension for first time, it's not obvious. Typically, it would be at bottom of screen, but scrolling down can be a pain.
Maybe add a second copy of bottom at bottom of page? I'm not sure.

[dteviot]

@AlenToma Actually, I had another thought. The list of chapter titles, they are input elements to allow a user to change chapter titles. However, I suspect no one ever uses that ability (or even realizes that's what they are). So maybe they should just be hyperlinks? Note, not asking you do make this change. Just your opinion. As is probably clear, I'm not a designer or graphic artist.

@DicerX might like to comment also

[AlenToma]

I really think its already good as it is. I made new changes to the design so it look much better, have a look

https://raw.githubusercontent.com/AlenToma/WebToEpub/master/screanshot-darkMode.PNG

the changes is to those files below https://github.com/AlenToma/WebToEpub/blob/master/plugin/popup.html https://github.com/AlenToma/WebToEpub/blob/master/plugin/css/default.css

Now the default look out is dark. And there is a checkbox at top with darkMode/ lightMode so user can change those.

What i did not do is when the use change the background mode, it should be saved somewhere, and i really dont know where to putt it, and even if i did im pretty sure you will do a better job, so i left it to you.

@DicerX and @dteviot Please have a look and let me know what you think

[AlenToma]

And yes, there should be anther css file with the name LightMode.css When the mode is changes then add/delete the css Link.

Note: LightMode.css should only contain those below

body {
    background: inherit !important;;
    color: inherit !important;;;
}

input, button, select, progress, textarea {
    background: inherit !important;
    color: inherit !important;
}

    button:hover {
        color: inherit !important;
    }

[AlenToma]

did a little test with other sites and found smal design bug that i fixed, please update those file agen if you already did that otherwise nevermind

[dteviot]

@AlenToma It looks very nice. My only comment is that having a light/dark toggle right at the top of the page looks strange to me. It's hardly the most important thing on the page. I think it would be better as an option under advanced. The other thought is there should be three options for dark mode

• always dark mode
• always light mode
• use current OS selection.

The other thought is, Dark mode looks nice, so get rid of the light theme and just have dark.

[DicerX]

@AlenToma First, I must applaud you for your excellent choice of reading material. And secondly, the design just looks terrific. I would see if I can refine it a little ice I get home. I honestly think that there are too many cells initially; for instance, the cells: Filename, Language, and Starting URL are seldom used, and I would very much love having them in the advanced tab instead. This would provide a lot more space while giving a much cleaner look.

Regarding @dteviot recommending of completely removing the light mode in favour of just dark mode is something that I'm not into since during the day, I would appreciate the light mode much more than the dark mode, and vice versa.

The second recommendation of how odd the light/dark switch button is, I've to agree somewhat. It needs to be a little subdued, meaning the icon being much smaller and placed in the top right corner, preferably. That way, it'd not distract the user as much.

As always, much love to both of you :)

[DicerX]

I really think its already good as it is. I made new changes to the design so it look much better, have a look

https://raw.githubusercontent.com/AlenToma/WebToEpub/master/screanshot-darkMode.PNG

the changes is to those files below https://github.com/AlenToma/WebToEpub/blob/master/plugin/popup.html https://github.com/AlenToma/WebToEpub/blob/master/plugin/css/default.css

Now the default look out is dark. And there is a checkbox at top with darkMode/ lightMode so user can change those.

What i did not do is when the use change the background mode, it should be saved somewhere, and i really dont know where to putt it, and even if i did im pretty sure you will do a better job, so i left it to you.

@DicerX and @dteviot Please have a look and let me know what you think

Oh lol @AlenToma changed the URL of his design to another screenshot to avoid us seeing the dual cultivation novel XD

[AlenToma]

Hahaha no man im just testing believe me im not reading it not that i would never do thogh 👍 now about three option, im not so sure about that so im leaving it to you guys to decide, so there will be a Select option instead of switch.

now about refining the the option, i do not really have an opinion on that as i really like more information, and i assum that when someone save the file someone would be able to rename the file also so i really do not understand why filename exist.

Now i worked hard today, descide what to do and i would do.

[DicerX]

As always it's much appreciated, I'm just leeching off the glory of you two :)

On Sun, 20 Sep 2020 at 2:36 pm, Alen Toma notifications@github.com wrote:

Hahaha no man im just testing believe me im not reading it not that i would never do thogh 👍

now about three option, im not so sure about that so im leaving it to you guys to decide, so there will be a Select option instead of switch.

now about refining the the option, i do not really have an opinion on that as i really like more information, and i assum that when someone save the file someone would be able to rename the file also so i really do not understand why filename exist.

Now i worked hard today, descide what to do and i would do.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dteviot/WebToEpub/issues/383#issuecomment-695711048, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMLZSGKATKJ6LRWXQHUEOG3SGWBE5ANCNFSM4RQBDGRQ .

[dteviot]

@AlenToma @DicerX Filename is (was?) necessary on Firefox for Android, (FFA) as there is no dialog to ask for filename when saving. At current time, Mozilla has stopped supporting extensions on FFA, so it's moot until they support them again. And I use the filename a lot. Language can be very important for non-English language users. WebToEpub is not good at picking the right language, so needs to be easy to fix.

I'm going to make an executive decision and say
: will be 3 state choice for dark/light mode. will default to OS selection. I'll take care of implementing. (Which can be injecting either a dark or light CSS after the main CSS.)

[dteviot]

And will be under advanced.

[AlenToma]

Ok will do those changes now, and add then under advance. and about refining, we should forget it it look good anyway

[DicerX]

Ya, I was about to say let's go with flat buttons but then I realised that that would be too much of a hassle and not much change either way lol.

[dteviot]

@AlenToma @DicerX Have created. https://github.com/dteviot/WebToEpub/issues/386

[dteviot]

Thought was, I'll take alen's current set, remove the light/dark toggle (so it's just auto) and commit Then I can add the option tomorrow.

[DicerX]

Any Zip so that I can test drive the extension?

[dteviot]

@DicerX I'm working on it.