Customized web-panel for DeepL Translator

Dancer18

Since the website of DeepL Translator does not provide a mobile view as a web panel, I was looking for a mod-script and got it from my son.
Here is the code which you save somewhere as deepl.user.jsand add it per drag&drop to your extensions:

// ==UserScript==
// @name         deepl
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  deepl force 100%
// @author       M.L.
// @match        https://www.deepl.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var box=document.querySelector('.lmt__sides_wrapper');
box.style.display = "block";

    Array.from(
        document.querySelectorAll('.lmt__side_container')
        ).forEach(col => (col.style.width = "100%"));
})();

    Array.from(
        document.querySelectorAll('.eSEOtericText, .dl_ad_pro_container, #lmt_quotes_article, .lmt__glossary_ad, .dl_footer, .dl_footerV2_container, .dl_body--redesign, .showSEOText')
        ).forEach(el => (el.style.display = "none"));   


document.body.setAttribute('style', 'min-width: 430px; overflow-x: hidden; background-color: #C0DADC !important');

document.querySelectorAll('.lmt--web .lmt__textarea_container').forEach(el => el.setAttribute('style', 'min-height: 200px; margin-bottom: 10px'));

Screenshot:

2021-02-24 09.46.13 forum.vivaldi.net b98071148699.jpg

You will of course get the translator-panel in your language (if it is provided yet).

UPDATE:
I published this extension at github.

lgq1349422030

I just tried this one, but sadly, it changed the DeepL in new tab to mobile layout, but in the web-panel, it still desktop layout.

Just...completely opposite way...

Dancer18

@lgq1349422030 said in Customized web-panel for DeepL Translator:

I just tried this one, but sadly, it changed the DeepL in new tab to mobile layout, but in the web-panel, it still desktop layout.

Just...completely opposite way...

Don't understand yet. Can you provide some screenshots?
Here there is no difference between mobile and desktop version.
In New tab it is like this:

hlehyaric

I can't understand either. Using @Dancer18's user.js, I get the same layout for main screen & webpanel.

pauloaguia

@lgq1349422030 Did you restart the browser (or at least refresh the panel) after you added that code?

lgq1349422030

@pauloaguia I think i totally understand now, the scripts look the same with which i used in tampermonkey, so ,obviously tampermonkey works on normal tab, but not works on web-panel.

I understand where i was wrong.

shifte

This CSS works with Stylus.
This is a small fix of @naporitan0sushi's CSS.
Reference URL:　https://www.naporitansushi.com/stylus-deepl/

/* Use horizontal column if the width is over 700px */
@media screen and (max-width: 700px) {
    
/* Vertical Column */
.lmt--web .lmt__sides_container .lmt__sides_wrapper {
  flex-flow: column !important;
}

/* Adjustment text area padding */
.lmt__textarea_container {
    padding-bottom: 40px !important;
    padding-top: 10px !important;
    min-height:20vh !important;
}

/* Adjustment width */
.lmt--web .lmt__side_container {
  width: calc(94vw);
}  


/* Delete header */
header.dl_header.dl_header--sticky {
  display: none;
}

/* Delete footer */
.dl_footerV2_container {
  display: none;
}

/* Delete bottom margin */
.dl_translator_page_container {
  height:100vh !important;
}

/* Delete arrows */
.lmt__language_container_switch  {
  display: none !important;
}

/*テキストエリア下の「DeepL Proの無料体験で、DeepLを最大限に活用しましょう」非表示*/
div#lmt_pro_ad_container {
  display: none !important;
}

/*「毎日、何百万もの人々がDeepLで翻訳していま」文章非表示*/
.dl_body--redesign.dl_top_element--wide.dl_visible_desktop_only.eSEOtericText {
  display: none;
}

/*「〜ドイツ企業のDeepL、Google翻訳を超える〜」文章非表示*/
.dl_top_element.dl_top_element--wide {
  display: none;
}

/*
Delete translation button
lmt__docTrans-tab-container {
  display: none !important;
}
*/
    
}

Dancer18

I updated the script a few days ago by editing a code line.
If you are using the script already and experience now a layout with horizontal containers, you can use the updated version replacing the old.

shifte

@Dancer18
Thank you so much!　

↓ It took me 20 minutes to get this 1 line. 　
.lmt--web .lmt__side_container {width: calc(94vw);}

Dancer18

@shifte Yes, me too. It was a coincidence of code-changing at DeepL and new Vivaldi update to 5.5.
At first I thought it was Vivaldi related.

KaKi87

Hello,
Would you please consider hosting your userscript in a git repository or anything else that would allow automated updates ?
Thanks

Dancer18

@KaKi87 Good idea! I did so now.
Here.

KaKi87

Thanks, however, the script is only working in tab but not in panel, whether I'm using Tampermonkey (as apparently recommended here) or Violentmonkey (my personal preference).

Dancer18

@KaKi87 I don't know Tampermonkey or Violentmonkey. However, deactivate it for DeepL site.
The script has the role of a chrome extension and doesn't need any other style extensions.
More than that other styling addons hinder it to work properly.
The script only works in absence of other style addons.

KaKi87

Violentmonkey and Tampermonkey are userscripts managers, i.e. extensions made for installing *.user.js files.

If not using one of those, then how to install the userscript ?

mib2berlin

@KaKi87
Hi, as @Dancer18 mention in the first post, create the deepl.user.js and drop in to the extension settings page of Vivaldi.
It is not a user script in sense of a .ccs mod or something.

Cheers, mib

Dancer18

@KaKi87 Yes, @mib2berlin, and I mentioned it in the description of the script too.
Copy save the file and drag it into the chrome extension page of vivaldi (I have put that page into the sidebar of vivaldi too.)
You will than asked whether you want to add it.

KaKi87

My bad, sorry.

So I tried dragging and dropping the deepl.user.js file into the Extensions page, but I'm getting the download dialog.

I retried with Developer mode enabled (without success), if that matters.

Thanks

Dancer18

@KaKi87 You probably get the download dialog because you encouraged me to upload the script to github.

After you provided my with a permalink tutorial I could manage to get the right URL.

Alternatively you are free to use the one posted in this topic at the very beginning: Link

KaKi87

Actually, that doesn't change anything :

Peek 2022-12-04 17-20.gif

But, I am indeed noticing that the code you uploaded to GitHub isn't identical to the one from your forum post.

The only point of uploading the file somewhere like I suggested is to save users from the copy/paste steps.

Thanks