feat: add lightbox to help section images

code4romania · Sep 13, 2022 · 9544c3c · 9544c3c
1 parent e051621
commit 9544c3c
Show file tree

Hide file tree

Showing 19 changed files with 121 additions and 30 deletions.
diff --git a/help/ro/02-Utilizatori/02-add.md b/help/ro/02-Utilizatori/02-add.md
@@ -18,4 +18,6 @@ propria parola și instrucțiuni de accesare a panoului de administrare.
 Îți recomandăm să dai acces utilizatorilor pe adresele lor oficiale de
 e-mail și nu pe cele personale.
 
-![](/assets/help/020.png)
+<a href="/assets/help/020.png">
+    <img src="/assets/help/020.png" />
+</a>
diff --git a/help/ro/02-Utilizatori/04-edit.md b/help/ro/02-Utilizatori/04-edit.md
@@ -19,7 +19,9 @@ setare a parolei va fi trimis pe emailul nou introdus în profilul acelui
 utilizator.
 
 
-![](/assets/help/004.png)
+<a href="/assets/help/004.png">
+    <img src="/assets/help/004.png" />
+</a>
 
 Pentru a șterge un utilizator trebuie să parcurgi următorii pași:
 

diff --git a/help/ro/03-Setări/02-general.md b/help/ro/03-Setări/02-general.md
@@ -26,7 +26,9 @@ este necesar să parcurgi următorii pași:
     Managementul continutului.
 8)  Apasă **Salvează**
 
-![](/assets/help/016.png)
+<a href="/assets/help/016.png">
+    <img src="/assets/help/016.png" />
+</a>
 
 Îți recomandăm ca titlul și descrierea website-ului să fie cât mai clare
 pentru că acestea vor fi indexate în motoarele de căutare, iar vizitele

diff --git a/help/ro/03-Setări/03-branding.md b/help/ro/03-Setări/03-branding.md
@@ -27,7 +27,9 @@ recomandăm să folosești o culoare care se regăsește în logo-ul tău (sau
 un ton al culorii dominante din logo-ul tău) pentru că ea va fi folosită
 pentru butoanele din site, headere și alte elemente.**
 
-![](/assets/help/009.png)
+<a href="/assets/help/009.png">
+    <img src="/assets/help/009.png" />
+</a>
 
 Pentru adăugarea **logo-ului**, este necesar să parcurgi următorii pași:
 
@@ -44,4 +46,6 @@ Logo-ul va fi încărcat în website și se va afișa deasupra meniului din
 header, pe toate paginile website-ului. Cel mai bine ar fi ca logo-ul să
 fie în format .png fără margini nenecesare în jur.
 
-![](/assets/help/023.png)
+<a href="/assets/help/023.png">
+    <img src="/assets/help/023.png" />
+</a>
diff --git a/help/ro/03-Setări/04-integrations.md b/help/ro/03-Setări/04-integrations.md
@@ -33,4 +33,6 @@ parcurgi următorii pași:
     afișeze corect.
 </p>
 
-![](/assets/help/005.png)
+<a href="/assets/help/005.png">
+    <img src="/assets/help/005.png" />
+</a>
diff --git a/help/ro/03-Setări/05-notice.md b/help/ro/03-Setări/05-notice.md
@@ -20,7 +20,9 @@ Pentru a adăuga un anunț, este necesar să parcurgi următorii pași:
 7)  Inserează textul anunțului tău în câmpul **Text**.
 8)  Apasă **Salvează**
 
-![](/assets/help/006.png)
+<a href="/assets/help/006.png">
+    <img src="/assets/help/006.png" />
+</a>
 
 Pentru a dezactiva un anunț, este necesar să parcurgi următorii pași:
 

diff --git a/help/ro/03-Setări/06-social.md b/help/ro/03-Setări/06-social.md
@@ -17,4 +17,6 @@ este necesar să parcurgi următorii pași:
 7)  Iconițele platformelor de social media în câmpul cărora ai completat
     vor apărea în footerul website-ului.
 
-![](/assets/help/024.png)
+<a href="/assets/help/024.png">
+    <img src="/assets/help/024.png" />
+</a>
diff --git a/help/ro/03-Setări/07-donations.md b/help/ro/03-Setări/07-donations.md
@@ -37,7 +37,9 @@ donatorilor tăi, este necesar să parcurgi următorii pași:
     valoarea cu ajutorul săgeților.
 7)  Apasă **Salvează**
 
-![](/assets/help/011.png)
+<a href="/assets/help/011.png">
+    <img src="/assets/help/011.png" />
+</a>
 
 ### Integrarea procesatorului de plăți EuPlătesc
 

diff --git a/help/ro/03-Setări/08-languages.md b/help/ro/03-Setări/08-languages.md
@@ -35,7 +35,9 @@ pași:
     editabil
 9)  Apasă **Salvează**
 
-![](/assets/help/017.png)
+<a href="/assets/help/017.png">
+    <img src="/assets/help/017.png" />
+</a>
 
 Pentru a **edita** o limbă deja adăugată, este necesar să parcurgi
 următorii pași:

diff --git a/help/ro/03-Setări/09-menus.md b/help/ro/03-Setări/09-menus.md
@@ -24,7 +24,9 @@ pași:
 5)  Apasă butonul **Adaugă**
 6)  Alege **tipul** de element de meniu potrivit
 
-![](/assets/help/001.png)
+<a href="/assets/help/001.png">
+    <img src="/assets/help/001.png" />
+</a>
 
 
 ## Tipuri elemente meniu

diff --git a/help/ro/04-Conținut/03-pages.md b/help/ro/04-Conținut/03-pages.md
@@ -40,7 +40,9 @@ parcurgi următorii pași:
 5)  Pagina se va deschide într-un tab nou al browserului pe care îl
     folosești
 
-![](/assets/help/015.png)
+<a href="/assets/help/015.png">
+    <img src="/assets/help/015.png" />
+</a>
 
 Pentru **a edita o pagină deja existentă**, este necesar să parcurgi
 următorii pași:
@@ -65,7 +67,9 @@ este necesar să parcurgi următorii pași:
 5)  Confirmă duplicarea apăsând pe butonul **Duplică**
 6)  Pagina duplicată a fost adăugată în lista paginilor existente
 
-![](/assets/help/029.png)
+<a href="/assets/help/029.png">
+    <img src="/assets/help/029.png" />
+</a>
 
 Pentru a **șterge** **o pagină**, este necesar să parcurgi următorii
 pași:

diff --git a/help/ro/04-Conținut/04-blocks.md b/help/ro/04-Conținut/04-blocks.md
@@ -23,7 +23,9 @@ pași:
 Fiecare bloc de conținut poate fi duplicat, șters sau i se poate schimba
 proporția cu ajutorul butoanelor din dreapta lui.
 
-![](/assets/help/003.png)
+<a href="/assets/help/003.png">
+    <img src="/assets/help/003.png" />
+</a>
 
 1)  Butonul de coloane micșorează sau mărește blocul de conținut.
 2)  Săgeata restrânge sau extinde cardul pentru a edita pagina mai ușor
@@ -43,7 +45,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   tipul “Întrebări frecvente” sau pentru liste cu multă informație
   la fiecare item.
 
-![](/assets/help/007.png)
+<a href="/assets/help/007.png">
+    <img src="/assets/help/007.png" />
+</a>
 
 ---
 
@@ -55,7 +59,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
 - un bloc Call to action este format din: Titlu, Text, Text Buton și
   Link buton
 
-![](/assets/help/012.png)
+<a href="/assets/help/012.png">
+    <img src="/assets/help/012.png" />
+</a>
 
 ---
 
@@ -115,7 +121,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   în care se introduce id-ul unic primit la deschiderea contului de
   PayPal)
 
-![](/assets/help/014.png)
+<a href="/assets/help/017.png">
+    <img src="/assets/help/017.png" />
+</a>
 
 ---
 
@@ -127,7 +135,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
 - Aici vei putea pune link către video-uri de pe Youtube sau Vimeo de
   exemplu.
 
-![](/assets/help/022.png)
+<a href="/assets/help/022.png">
+    <img src="/assets/help/022.png" />
+</a>
 
 ---
 
@@ -140,7 +150,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
 - Pentru a adăuga un formular într-o pagină este necesar ca acest
   formular să existe deja creat în secțiunea de Formulare
 
-![](/assets/help/002.png)
+<a href="/assets/help/002.png">
+    <img src="/assets/help/002.png" />
+</a>
 
 ---
 
@@ -153,7 +165,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   Imagini (se pot adăuga în aceste bloc imagini deja existente în
   Biblioteca Media)
 
-![](/assets/help/028.png)
+<a href="/assets/help/028.png">
+    <img src="/assets/help/028.png" />
+</a>
 
 ---
 
@@ -199,7 +213,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   celelalte elemente din bloc - sus, centru, jos) și Imagine (se pot
   adăuga în aceste bloc imagini deja existente în Biblioteca Media)
 
-![](/assets/help/013.png)
+<a href="/assets/help/013.png">
+    <img src="/assets/help/013.png" />
+</a>
 
 ---
 
@@ -214,7 +230,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   Imagine (se selectează din Biblioteca Media, Text field.caption și
   URL (link care se poate accesa prin click pe imagine)
 
-![](/assets/help/019.png)
+<a href="/assets/help/019.png">
+    <img src="/assets/help/019.png" />
+</a>
 
 ---
 
@@ -229,7 +247,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   persoanelor să fie afișate în acest bloc) și Persoane (se
   selectează dintre persoanele deja create în meniul **Persoane**)
 
-![](/assets/help/010.png)
+<a href="/assets/help/010.png">
+    <img src="/assets/help/010.png" />
+</a>
 
 ---
 
@@ -243,7 +263,9 @@ proporția cu ajutorul butoanelor din dreapta lui.
   progres, se poate selecta din săgeți sau se poate introduce manual
   valoarea), Text Buton și Link Buton
 
-![](/assets/help/018.png)
+<a href="/assets/help/018.png">
+    <img src="/assets/help/018.png" />
+</a>
 
 ---
 

diff --git a/help/ro/04-Conținut/05-blog.md b/help/ro/04-Conținut/05-blog.md
@@ -209,7 +209,9 @@ următorii pași:
 7)  Completează descrierea categoriei în câmpul **Descriere**
 8)  Apasă butonul **Salvează**
 
-![](/assets/help/027.png)
+<a href="/assets/help/027.png">
+    <img src="/assets/help/027.png" />
+</a>
 
 Pentru **a vizualiza o categorie**, este necesar să parcurgi următorii
 pași:
@@ -273,4 +275,6 @@ pași:
 6)  Confirmă ștergerea prin apăsarea butonului **Șterge**
 7)  Categoria a fost ștearsă și mutată în **Șterse**
 
-![](/assets/help/026.png)
+<a href="/assets/help/026.png">
+    <img src="/assets/help/026.png" />
+</a>
diff --git a/help/ro/04-Conținut/06-forms.md b/help/ro/04-Conținut/06-forms.md
@@ -33,7 +33,9 @@ pași:
     butonului **Adaugă câmp nou.**
 10) Apasă **Salvează**
 
-![](/assets/help/021.png)
+<a href="/assets/help/021.png">
+    <img src="/assets/help/021.png" />
+</a>
 
 Pentru **a vizualiza un formular deja creat**, este necesar să parcurgi
 următorii pași:

diff --git a/help/ro/04-Conținut/08-form-submissions.md b/help/ro/04-Conținut/08-form-submissions.md
@@ -16,7 +16,9 @@ Factory: ONG. Pentru aceasta, este necesar să parcurgi următorii pași:
 5)  Vei ajunge în pagina în care sunt listate toate întrebările, cu
     răspunsul aferent
 
-![](/assets/help/025.png)
+<a href="/assets/help/025.png">
+    <img src="/assets/help/025.png" />
+</a>
 
 Pentru **a șterge un răspuns**, este necesar să parcurgi următorii pași:
 

diff --git a/help/ro/04-Conținut/10-media.md b/help/ro/04-Conținut/10-media.md
@@ -60,7 +60,9 @@ Pentru a **descărca** o imagine din secțiunea **Imagini** din
 6)  Imaginea se va deschide într-un tab nou, de unde o poți salva
     conform browserului folosit.
 
-![](/assets/help/008.png)
+<a href="/assets/help/008.png">
+    <img src="/assets/help/008.png" />
+</a>
 
 ---
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
         "laravel-vue-i18n": "^2.2.2",
         "latinize": "^0.5.0",
         "lodash": "^4.17.21",
+        "luminous-lightbox": "^2.4.0",
         "mitt": "^3.0.0",
         "postcss": "^8.4.16",
         "postcss-100vh-fix": "^1.0.2",

diff --git a/resources/js/components/Help/Topic.vue b/resources/js/components/Help/Topic.vue
@@ -21,12 +21,17 @@
     </div>
 
     <div
-        class="flex-1 p-4 overflow-y-auto prose-sm prose sm:px-6 prose-blue"
+        ref="content"
+        class="flex-1 p-4 overflow-y-auto prose-sm prose sm:px-6 prose-blue prose-img:cursor-zoom-in"
         v-html="topic.content"
     />
 </template>
 
 <script>
+    import { ref, onMounted } from 'vue';
+    import { Luminous } from 'luminous-lightbox';
+    import 'luminous-lightbox/dist/luminous-basic.css';
+
     export default {
         name: 'HelpTopic',
         props: {
@@ -36,5 +41,21 @@
             },
         },
         emits: ['topic:close'],
+        setup() {
+            const content = ref(null);
+
+            onMounted(() => {
+                content.value.querySelectorAll('img').forEach((image) => {
+                    new Luminous(image, {
+                        sourceAttribute: 'src',
+                        appendToNode: content.value,
+                    });
+                });
+            });
+
+            return {
+                content,
+            };
+        },
     };
 </script>