Login at Espressoman.ro - Blog si forum de espressomani

vdub · 28-05-2020, 12:30

(28-05-2020, 12:28)orwo Wrote: Dark mode?

+1

bogy · 28-05-2020, 18:25

Cred ca detinem noi prea putine informatii pentru a intelege ce se intampla pe aici.

d2florin · 28-05-2020, 18:26

+10...

***Lyvyoo*** · 28-05-2020, 18:30

Zicea un coleg, e pacat sa strici ceva ce merge bine :))
Incerc sa vad care sunt soluțiile, dar nu va fi un comutator pt dark mode, ca in aplicatii ci va trebui sa treceti in alta tema pur si simplu. Promit sa investighez.
Pe mine unul ma dor ochii de la scris alb pe fundal negru :)

vdub · 28-05-2020, 18:48 (Edited 28-05-2020, 18:49 by vdub.)

Sau "if it ain't broken, fix till it is" :D. La asta ma pricep de minune asa ca te pot ajuta daca intampini probleme :D.
Lasand gluma la o parte, tema nu trebuie sa fie una "fizica", cu toate componentele si fisierele, separata de cea curenta.
Poate fi foarte simplu un nou fisier CSS, comutabil cu JS iar optiunea stocata cu ajutorul Web storage API (window.localStorage), ca preferinta/flag in browser-ul utilizatorului.
Cromatica de aici mi se pare potrivita: https://www.reddit.com/r/linuxhardware/

micrenda · 28-05-2020, 19:18 (Edited 28-05-2020, 19:19 by micrenda.)

Pentru Dark Mode se poate utiliza o extensia pentru Firefox numita Dark Reader.

Am incercat-o si trebuie, pentru rezultate mai bune sa setezi [Filter] ca optiune si rezultatul arata cam asa:

[Image: UPwFQt4.png]

***Lyvyoo*** · 28-05-2020, 19:21

Bravo micrenda, deci am rezolvat :)

vdub · 28-05-2020, 23:17 (Edited 29-05-2020, 00:03 by vdub.)

Cum vi se pare, continuam? :D

Inca una:

d2florin · 02-06-2020, 16:26

Salutare,
Activez și pe forumul volumio, o distribuție de linux, este un player audio.
Acest forum a migrat pe platforma discourse, din ce am observat pana acum pare mai interesant pe discourse, aveți de gând sa mutați și espressoman pe aceasta platforma?
Nu pot sa. Îmi dau cu părerea la avantaje dezavantaje doar ca vizual arata mult mai fain și mai rapid parca..
Ms

***Lyvyoo*** · 03-06-2020, 09:27

Migrarea e un fenomen complex, generator de probleme si inutil acum, dupa parerea mea. Poate doar spre Vbulletin, platforma pe care este facuta si softpedia, dar si acolo sunt anumite probleme.
Acum timpii de incarcare sunt foarte ok, versiunea de mobil chiar ok si usor de citit (cu alternativa Tapatalk).
Mai important este sa generam fiecare content interesant si util.

slavic1983 · 03-06-2020, 09:45

(28-05-2020, 23:17)vdub Wrote: Cum vi se pare, continuam? :D

Inca una:

Astea sunt mia usor de citit parca decat cele cu extensia firefox dark.

lorisl · 03-06-2020, 10:02

(28-05-2020, 23:17)vdub Wrote: Cum vi se pare, continuam? :D

Inca una:

Scuza-ma, nu am observat cand ai scris, altfel dadeam din start un mare like!
Pentru mine personal, dark theme e un mare plus. Eu am trecut pe majoritatea siteurilor ce le folosesc pe dark theme, si once you go dark...
Va recomand tuturor sa incercati pentru 2 3 zile sa folositi dark theme la cat mai multe site-uri. E o binecuvantare pentru ochii.

***Lyvyoo*** · 03-06-2020, 10:08

Pe mine unul ma dor ochii de la litere albe pe fundal negru, nu stiu care-i faza :)

vdub · 03-06-2020, 13:40

(03-06-2020, 10:02)lorisl Wrote: Scuza-ma, nu am observat cand ai scris, altfel dadeam din start un mare like!

Nicio problema, multumesc pentru feedback.

@Lyvyoo, intr-adevar, elementele albe pe fundal negru sunt deranjante si obositoare insa nuantele deschise de negru sunt mai calde si se contopesc armonios cu celelalte culori ale site-ului.
Daca primesc unda verde, mai tarziu iti trimit noul fisier stylesheet si un script JS simplu pentru comutarea variantei dark.

***Lyvyoo*** · 03-06-2020, 13:44

Hai sa vedem, daca merge cu placere. Eventual cer un sfat si dezvoltatorilor Mybb pentru integrare mai buna.

vdub · 04-06-2020, 16:46 (Edited 04-06-2020, 19:02 by vdub.)

Bun, in incercarea de a gasi o solutie compatibila cu majoritatea browserelor si evita FOUC(flash of unstyled content), azi am testat cateva scenarii in care am folosit pe rand document.write, atributul disabled in tagul link si schimbarea dinamica a locatiei fisierului CSS pentru comutarea intre light/default si dark la apasarea butonului switch.

Cum document.write vine la pachet cu unele probleme, implementarea metodei fiind realizata doar in cazuri extreme atunci cand situatia o impune, am optat pentru varianta in care am folosit atributul disabled, suportat de majoritatea browserelor.

Am o solutie si pentru browserele mai vechi pe care o vom implementa mai tarziu daca inca exista utilizatori care nu pot selecta dark theme.

Fisierul CSS (neoptimizat si structurat automat de Firefox Developer Edition cu care am facut testele. Il vom optimiza si comprima intr-o versiune viitoare, cand va deveni stufos)
Versiunea fisierului CSS prezentata in postarea anterioara poate fi descarcata/copiata de aici: https://www.techlabs.ro/dark.css
- trebuie pus in head dupa

Code:
<link type="text/css" rel="stylesheet" href="https://www.espressoman.ro/forum/cache/themes/theme6/showthread.css" />

astfel:

Code:
<link type="text/css" rel="stylesheet" href="locatia fisierului dark.css" title="dark" />

Scriptul JS
Constanta loc contine locatia fisierului dark.css iar dummy, locatia unui fisier CSS gol... de exemplu dark_empty.css
Stiu, in locul fisierului dummy as fi putut sa sterg tagul <link> si folosesc newSS = document.createElement('link')..... appendChild(newSS).... ori de cate ori era activat dark theme, dar am preferat un http request in plus in detrimentul unui script mai stufos :).

Code:
<script>

        const themeSwitch = (themeSwitch) => {

            const styles = document.getElementsByTagName('link');

            const loc = ''; // locatia fisierului dark.css

            const dummy = ''; // locatia fisierului CSS gol

            let pref;

            // continuam doar atunci cand Web Storage API este suportat de browser

            if (typeof(Storage) !== 'function') {

                // Web Storage API nu este suportat. Eliminam fisierul dark.css

                for (let n = 0; n < styles.length; n++) {

                    if (styles[n].title === 'dark') {

                        styles[n].parentNode.removeChild(styles[n]);

                        // probabil nu suporta nici atributul disabled asa ca mai bine revenim la default theme inlocuind dark.css cu dummy CSS

                        styles[n].href = dummy;

                        break;

                    }

                }

                return;

            }

            // actualizam variabila pref(boolean)

            pref = JSON.parse(localStorage.getItem('theme'));

            // daca nu exista, setam pref = false(default theme)

            if (pref === null) {

                localStorage.setItem('theme', JSON.stringify(false));

                pref = false;

            }

            // comutam valorile pref la apasarea butonului si actualizam localStorage

            if (themeSwitch) {

                pref = (themeSwitch !== pref);

                localStorage.setItem('theme', JSON.stringify(pref));

            }

            for (let i = 0; i < styles.length; i++) {

                if (styles[i].title === 'dark') {

                    // daca browserul nu suporta atributul disabled, comutam dark theme alteram href attr

                    if (undefined === styles[i].disabled) {

                        styles[i].href = pref ? loc : dummy;

                        return;

                    }

                    // utilizam atributul disabled si astfel evitam FOUC

                    styles[i].disabled = !pref;

                    break;

                }

            }

        };

        themeSwitch();

    </script>

trebuie plasat tot in head dupa dark.css inclus anterior, anume:

Code:
<link type="text/css" rel="stylesheet" href="locatia fisierului dark.css" title="dark" />

Butonul

Code:
<li><a href="javascript:void(0)" onclick="themeSwitch(true)"> <i class="fa fa-moon-o fa-2x"></i><br></a></li>

trebuie inclus astfel:

si va arata cam asa:
[Image: QB8lsVj.png]

Reiterez pasii:
1. Adaugarea celor doua fisiere dark.css respectiv dark_empty.css in folderul temei actuale sau oriunde altundeva pe server
2. Actualizarea celor doua constante loc si dummy
3. Plasarea scriptului in <head> dupa fisierul CSS dark.css
4. Includerea noului stylesheet dark.css dupa showthread.css
5. Butonul Theme dupa Search

Cam asta e tot.

Dark theme nu este completa dar voi continua sa o actualizez si odata cu ea, fisierul https://www.techlabs.ro/dark.css ce va ramane in continuare disponibil la aceeasi adresa.
Voi anunta aici ori de cate ori il modific sau cine se va ocupa de implementare, poate verifica singur versiunea disponibila.

Am actualizat dark.css si incropit repede o pagina cu scopul de a testa si raporta eventuale incompatibilitati cu diferite browsere: https://www.techlabs.ro/demo/ .

Abia acum am realizat ca s-a strecurat o greseala in codul butonului. Varianta corecta este urmatoarea:

Code:
<li><a href="javascript:void(0)" onclick="themeSwitch(true)"> <i class="fa fa-moon-o fa-2x"></i><br>Theme</a></li>

***Lyvyoo*** · 05-06-2020, 01:21

Supeeer!
N-am cunostinte in IT, doar cat m-am autoeducat pentru a putea intretine corespunzator forumul, insa cred ca am inteles ce ai vrut sa faci, cel putin pana la un moment dat.

Ar fi de precizat ca ceea ce vezi tu in Source ori prin Chrome / INspect element, nu vad si eu insirate in acelasi fel in panoul de comanda. Mai exact, daca pe server forumul arata cam asa, in panoul de comanda am o traducere (in php cred) a fisierelor de pe server in template-uri, grupate dupa caracteristici. Ca sa ai o imagine, poti intra pe un simulator de backend al Mybb aici. User admin pass: demo si mai departe la Templates & Style / Templates / Default Templates

Greutatea pana acum a fost (si este) sa traduc ceea ce spui tu, facand modificarile in aceste template-uri. Spre exemplu, pentru scriptul JS a trebuit sa intru in grupul de template-uri Ungruped Templates / Headerinclude iar pentru buton a trebuit sa intru in grupul Header Templates / Header

Cele doua stylesheets le-am adaugat prin procedura Templates & Style / Themes / Default (sau tema mea) / Add Stylesheet. Cheia reusitei acestei instalari la care ai lucrat cred ca este aici. Mai precis trebuie sa ii spun forumului cui sa ataseze acel dark.css Daca la proprietatile lui dark.css (Themes / options / Properties ) aleg Globally, atunci tema dark se duce in tot site-ul. Daca aleg usercp.php atunci are efect doar asupra panoului de control al userilor si tot asa...
[Image: Gv2uxia.png]

Ideal ar fi sa atasez tema dark butonului dar nu imi dau seama cum sa fac asta. Practic noul buton functioneaza acum doar pt a face header-ul dark nu si restul site-ului.

In acelasi timp e posibil sa fiu pe o pista gresita...

Multumesc pentru implicare!

vdub · 05-06-2020, 02:00 (Edited 05-06-2020, 02:03 by vdub.)

Eu nu am mai lucrat cu vBulletin, SMF si myBB de mai bine de 10 ani asa ca nu stiu ce s-a mai schimbat intre timp in materie de template engines.
Admin panel-ul pare sa fie mai prietenos decat la inceputuri... poate prea prietenos cu cineva care-si doreste acces facil la cod dar odata invatate chichitele, sunt convins ca administrarea devine floare la ureche.

Acum cateva minute am actualizat dark.css astfel incat sa cuprinda si paginile postarilor cu care nu stiu ce s-a intamplat acum cateva zile dupa ce am facut screenshot-urile.
Probabil m-am gandit ca solutia oferita nu prezinta interes si nu am salvat modificarile facute la momentul respectiv.
https://www.techlabs.ro/dark.css

Referitor la implementare, fisierul css trebuie inclus dupa global.css, square.css si showthread.css astfel incat noile proprietati sa aiba prioritate, deci da, trebuie sa bifezi globally intrucat dark theme va fi extinsa in toate paginile cat de curand.

Esti pe calea cea buna :D, copiaza noul dark.css, bifeaza globally si sereaza ordinea astfel incat sa fie plasat sub fisierele mentionate.

EDIT
Ai uitat de cele doua constante, loc si dummy.
const loc = 'https://espressoman.ro/forum/dark.css';
iar
const dummy = 'https://espressoman.ro/forum/dark_empty.css'

***Lyvyoo*** · 05-06-2020, 02:24

Toate modificarile au fost facute.
Acum e bifat Globally la proprietatile lui dark.css / dark_empty.css, ordinea fiind mai jos. Tot site-ul e dark din prima, nu ca optiune, iar butonul Theme nu comuta nimic...
Undeva e o problema.

[Image: 7hcg9Kg.png]

vdub · 05-06-2020, 02:43

Este dark by default pentru ca lipseste title="dark" property si nu poate fi identificat, respectiv dezactivat de script.
In loc de

Code:
<link type="text/css" rel="stylesheet" href="https://www.espressoman.ro/forum/cache/themes/theme6/dark.css" />

Ar trebui sa fie

Code:
<link type="text/css" rel="stylesheet" href="https://www.espressoman.ro/forum/cache/themes/theme6/dark.css" title="dark" />

Poti adauga manual linia de mai sus in Templates > Default Templates > Ungrouped Templates -> headerinclude

***Lyvyoo*** · 05-06-2020, 02:53

Am modificat si e la fel.
Am inlocuit acea adresa si cu https://espressoman.ro/forum/dark.css si tot la fel e dark din prima si nu se poate schimba Sad

Code:
 
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />

<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />

<link href='https://fonts.googleapis.com/css?family=Exo+2:400,600' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link type="text/css" rel="stylesheet" href="https://espressoman.ro/forum/dark.css" title="dark" />

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1806"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1806"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1809"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/tipsy.js"></script>

{$stylesheets}

<script type="text/javascript">

......

vdub · 05-06-2020, 02:58 (Edited 05-06-2020, 02:58 by vdub.)

Ai uitat de fisierele vechi incluse mai devreme:

Cu ocazia asta actualizeaza si dark.css: https://www.techlabs.ro/dark.css

***Lyvyoo*** · 05-06-2020, 03:17

Iar ajungem la faza cu traducerea in template-uri a ceea ce vezi tu Sad

Eu nu am in headerinclude ceea ce ai pus in screenshot, fisierul fiind exact cel din postarea mea de mai sus + niste script-uri. Am cautat si in Head si nu sunt nici acolo acele linii. Incerc sa dau de ele prin alta parte Confused

L.E. Se pare ca tu vezi acele linii pt ca eu am headerinclude asa:

Code:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/tipsy.js"></script>

{$stylesheets}

<script type="text/javascript">

Acel {$stylesheets} incarca liniile din care tu mi-ai spus sa sterg. Ca sa dispara de acolo singura solutie este sa sterg dark.css si dark_empty din acea lista

vdub · 05-06-2020, 03:27 (Edited 05-06-2020, 03:28 by vdub.)

Stiu ca sursa contine codul HTML interpretat de browser si nu poate fi comparata cu ce vezi in admin panel insa am indicat fisierele in screenshot crezand ca mai tii minte unde le-ai adaugat si le poti sterge :).
Acum am vazut continutul din headerinclude postat mai sus, dark.css trebuie pus dupa {$stylesheets} adica variabila care contine toate celelalte css-uri, altfel nu va avea prioritate.

Cat despre ultimele doua fisiere, nu stiu ce sa zic... probabil le-ai creat manual mai devreme si bifat globally.

***Lyvyoo*** · 05-06-2020, 03:35

Gataaaa!!!!!
Sa traiasca!
Cei care ati vrut dark theme, faceti cheta de un bax de artizanale si trimiteti la Slatina!
Felicitari!

vdub · 05-06-2020, 03:46 (Edited 05-06-2020, 03:46 by vdub.)

Nu nu, mai bine ti le trimit tie sa ai grija de ele pana la urmatorul eveniment :D.
Inca odata, v1.1 este incomplet, descarca v1.2 si actualizeaza dark.css.

Multumesc ;)

Laddu · 05-06-2020, 07:48

Ar trebui sa adăugați și un buton pentru tema mobila

junioru11 · 05-06-2020, 07:56 (Edited 05-06-2020, 08:01 by junioru11.)

Dispar numele utilizatorilor in noua tema, Liviu e singurul care mai are nume vizibil. Incercat in firefox si chrome...
[Image: bwHj6pF.png]

vdub · 05-06-2020, 10:48 (Edited 05-06-2020, 10:49 by vdub.)

@Laddu, tema mobila parca are un link in footer, la el te referi? Cred ca o singura data am folosit varianta mobile si chiar nu stiu ce probleme are.

@junioru11 plus altele... pentru ca azi-noapte, Liviu nu a mai avut rabdare sa copieze cateva randuri de CSS dintr-o parte in alta :).

***Lyvyoo*** · 05-06-2020, 12:47

La aceasta adresa este v1.1 Nu stiu de v1.2...

Pentru mobil avem tema separata, care necesita modificari separate, banuiesc ca asemanatoare. Problema ar fi ca momentan modul dark intuneca marginile nu si suprafata pe care sta scrisul intr-o postare, iar in tema mobila nu prea avem margini.

Numele de utilizator nu au disparut ci s-au albit. Daca le selectezi exista. Aici tot vdub cred ca ne poate ajuta.

About us

Navigation

Quick links