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 [email protected] 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 [email protected] 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 :)