Gibt es eine einfache Möglichkeit, DeepL-Translator in mobiler Darstellung zu zeigen?

tob1as

Mein Lösungsansatz ist rein CSS basiert, dazu nutze ich die Erweiterung Stylus mit folgenden Einstellungen:

EDIT: Hab noch Header und Menü rausgeschmissen und den Abstand zwischen den Boxen verringert.

@media only screen and (max-width: 600px) {
    .lmt__sides_container {
        display: block!important;
    }

    .lmt__side_container,
    .lmt__dict {
        width: 85vw!important;
    }

    .lmt--web {
        padding-top: 10px!important;
    }

    .lmt--web .lmt__textarea_separator--has-top-toolbar {
        margin-top: 10px!important;
    }

    .lmt__docTrans-tab-container,
    .dl_header,
    .dl_header_menu_v2,
    .dl_footerV2_container,
    .eSEOtericText {
        display: none!important;
    }

    #dl_menu_deepl_pro_mobile,
    #lmt_pro_ad_container,
    #dl_quotes_container {
        display: none!important;
    }
}

Dancer18

@tob1as Super! Mir war das damals mit Stylus nicht gelungen.

tob1as

@dancer18 Hab auch ne Weile rumprobieren müssen

EDIT: Per CSS @media Rule beschränke ich in Stylus die Webpanel-Regeln auf Bildschirmgröße <600px. Dann habe ich im Webpanel die gewünschten Anpassungen und im normalen Tab die reguläre DeepL-Ansicht.

Habe die URL für das Webpanel leicht modifiziert:
https://www.deepl.com/translator# (also mit der Raute am Ende)

~~Stylus kann ich so einstellen, dass er nur auf diese exakte URL anspringt, denn in einem normalen Tab möchte ich die Standard-Anzeige von DeepL mit beiden Boxen nebeneinander.~~

webaschtl

Hatte mich ziemlich taggenau vor 2 Jahren diesbzgl. direkt an deepl gewendet:

Frage:
https://www.deepl.com/de/translator gibt es nicht auch in einer "vertikalen Darstellung" des Input- und Output-Textfelds, zB zur Einbindung als Web Panel

Antwort:
vielen Dank für Ihre Anfrage, es freut uns sehr, dass Sie an DeepL interessiert sind. Wir bedauern, Ihnen mitteilen zu müssen, dass die von Ihnen gewünschte Funktion derzeit nicht verfügbar ist. Wir kündigen regulär alle Neuigkeiten über unsere Firma und die neuen Features auf unserer Webseite und auf den sozialen Medien an. Schauen Sie in unseren Blog (https://www.deepl.com/blog.html) oder folgen Sie uns auf Facebook (https://www.facebook.com/DeepLcom/) und auf Twitter (https://twitter.com/DeepLcom), um keine News über DeepL zu verpassen.

Wie 2 Jahre danach die Antwort ausfallen würde? Könnte man ja vielleicht nochmals ausprobieren ; )

Dancer18

@tob1as Gefällt mir! In meinem Code (bzw. dem meines Sohnes) geht es noch um Verbergen des Footers. Das ist mir gelungen bis auf die Box mit den angebotenen Sprachen:

Dancer18

@webaschtl Warum nicht? Ich hatte sie vor ca. 1 Jahr angeschrieben, bekam dieselbe Antwort, und deshalb gibt es die Code-Addon-Lösung bzw. Stylus-CSS-Lösung.

HINWEIS:
Inzwischen gibt es eine Beta-Version von DeepL als Addon.

Im zukünftigen Release soll es auch eine seitenweite Übersetzungs-Funktion geben. Immerhin lassen sich mit dieser Erweiterung markierte Passagen übersetzen.

Supergut finde ich die Möglichkeit, zB. im Editor dieses Forums einen deutschen Text zu schreiben, und mit Klick auf den DeepL-Icon wird dieser automatisch übersetzt. (Funktioniert nicht im Mail-Editor, aber in allen anderen Editoren.)

tob1as

@dancer18 Probier's mal mit

.eSEOtericText {
        display: none!important;
    }

webaschtl

@dancer18 said in Gibt es eine einfache Möglichkeit, DeepL-Translator in mobiler Darstellung zu zeigen?:

@webaschtl Warum nicht?

War keine Absicht, diesen Thread zu öffnen – doch glaubte mich zu erinnern, dass ich bereits einmal vor diesem Problem stand. Vor 2 Jahren also.
Nutze aber weiterhin Deepl (etwas aufwändig/umständlich) als "Suchmaschine", damals also das Thema Paneel nicht mehr weiter verfolgt. Bin zudem kein Paneel-Liebhaber...

Dancer18

@tob1as Super! Jetzt würde ich das natürlich gern auch in den js-code einbauen.
(Im Augenblick benutze ich Stylus + Erweiterung (mit js-code).

Hat jemand eine Idee?

tob1as

@dancer18 Du kannst einfach das eSEOtericText in deinen JS-Code aufnehmen:

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

luetage

@webaschtl Das ist eine Standard Copypasta. Die wirst du vermutlich genauso nochmal erhalten. Ich bezweifle ein Techniker hat damals einen Blick darauf geworfen.

luetage

@tob1as Mit Verlaub, aber ich glaube die Bessere Lösung ist das ganze in ein style Element zu packen und CSS zu nutzen, ganz so wie es Stylus auch regelt. Ein leeres Gerüst dafür:

(function () {
  "use strict";
  const css = `
    .class {
      display: none;
    }
  `;
  function _async() {
    return new Promise((resolve) => {
      requestAnimationFrame(resolve);
    });
  }
  async function _wait() {
    while (!document.body) {
      await _async();
    }
    return true;
  }
  function inject() {
    _wait().then(() => {
      const style = document.createElement("style");
      style.id = "usrjs-deepl";
      style.innerHTML = css;
      document.getElementsByTagName("head")[0].appendChild(style);
    });
  }
  inject();
})();

Dancer18

This post is deleted!

Dancer18

@tob1as said in Gibt es eine einfache Möglichkeit, DeepL-Translator in mobiler Darstellung zu zeigen?:

@dancer18 Du kannst einfach das eSEOtericText in deinen JS-Code aufnehmen:

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

~~@tob1as Das hab ich ja schon dort aufgenommen. Jedoch ohne Wirkung, im Gegensatz zu den anderen elements.~~

EDIT:// Ich habe im Skript wichtige Kommata vergessen bei den verschiedenen elements.

Im Anschluß poste ich das aktuelle Skript nochmal. Das funktioniert ohne Stylus (wobei ich nichts gegen Stylus habe!!!)

Dancer18

Hier das aktuelle Skript ohne Footer:

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

(function() {
    'use strict';

    var box=document.querySelector('.lmt__sides_container');
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: 0; background-color: #C0DADC !important');

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