From 22a7c5aead28c4c60dd1681a2a2dbf8101878ab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Bl=C3=A1ha?= Date: Thu, 20 Jan 2022 15:56:15 +0100 Subject: [PATCH] Test pages --- packages/frontend/package.json | 2 +- .../pages/IssueDetail/IssueDetail.test.tsx | 35 + .../__snapshots__/IssueDetail.test.tsx.snap | 921 +++++++ .../src/pages/IssuesList/IssuesList.test.tsx | 15 + .../__snapshots__/IssuesList.test.tsx.snap | 2112 +++++++++++++++++ .../ProjectDetail/ProjectDetail.test.tsx | 32 + .../__snapshots__/ProjectDetail.test.tsx.snap | 822 +++++++ .../pages/ProjectsList/ProjectsList.test.tsx | 15 + .../__snapshots__/ProjectsList.test.tsx.snap | 220 ++ 9 files changed, 4173 insertions(+), 1 deletion(-) create mode 100644 packages/frontend/src/pages/IssueDetail/IssueDetail.test.tsx create mode 100644 packages/frontend/src/pages/IssueDetail/__snapshots__/IssueDetail.test.tsx.snap create mode 100644 packages/frontend/src/pages/IssuesList/IssuesList.test.tsx create mode 100644 packages/frontend/src/pages/IssuesList/__snapshots__/IssuesList.test.tsx.snap create mode 100644 packages/frontend/src/pages/ProjectDetail/ProjectDetail.test.tsx create mode 100644 packages/frontend/src/pages/ProjectDetail/__snapshots__/ProjectDetail.test.tsx.snap create mode 100644 packages/frontend/src/pages/ProjectsList/ProjectsList.test.tsx create mode 100644 packages/frontend/src/pages/ProjectsList/__snapshots__/ProjectsList.test.tsx.snap diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 34933eb0a..224b0c52a 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -17,7 +17,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test", + "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-markdown)/\"", "eject": "react-scripts eject" }, "eslintConfig": { diff --git a/packages/frontend/src/pages/IssueDetail/IssueDetail.test.tsx b/packages/frontend/src/pages/IssueDetail/IssueDetail.test.tsx new file mode 100644 index 000000000..a3dfb92c6 --- /dev/null +++ b/packages/frontend/src/pages/IssueDetail/IssueDetail.test.tsx @@ -0,0 +1,35 @@ +import renderer from "react-test-renderer" +import { IssueDetail } from "./IssueDetail" +import { testData } from "../../testData" +import { MemoryRouter, Route } from "react-router-dom" + +const project = testData.projects[0] +const issue = project.issues[0] + +describe("IssueDetail page", () => { + it("should renders correctly", () => { + const tree = renderer.create( + + } + /> + + ) + expect(tree).toMatchSnapshot() + }) + + it("should renders correctly if there is no related issue", () => { + const tree = renderer.create( + + } + /> + + ) + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/frontend/src/pages/IssueDetail/__snapshots__/IssueDetail.test.tsx.snap b/packages/frontend/src/pages/IssueDetail/__snapshots__/IssueDetail.test.tsx.snap new file mode 100644 index 000000000..5474931fe --- /dev/null +++ b/packages/frontend/src/pages/IssueDetail/__snapshots__/IssueDetail.test.tsx.snap @@ -0,0 +1,921 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IssueDetail page should renders correctly 1`] = ` +@media (min-width: 850px) { + .emotion-0 { + display: grid; + grid-template-columns: 1fr 300px; + -webkit-column-gap: 36px; + column-gap: 36px; + } +} + +.emotion-1 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + grid-column: 1/span 2; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #999; + font-size: 0.8em; +} + +.emotion-2 svg { + margin-right: 0.2em; +} + +.emotion-3 { + color: #294885; + margin: 0 0 16px; + font-family: themix; + font-size: 2em; +} + +.emotion-4 { + color: #999; + font-weight: normal; +} + +.emotion-5 { + margin-top: -16px; +} + +.emotion-6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-7 { + max-width: 750px; +} + +.emotion-8 { + margin: 0 0 16px; + font-size: 18px; + margin: 0; +} + +.emotion-10 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-block; + font-size: 1.2rem; + background-color: #294885; + color: white; + margin-top: 0.2rem; + padding: 0.6rem 1.2rem; + border-radius: 10px; + box-shadow: 0 0 0 #999; + -webkit-transition: box-shadow 300ms; + transition: box-shadow 300ms; +} + +.emotion-11 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; + grid-column: 1/1; +} + +.emotion-13 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-14 { + margin: 0 0 16px; +} + +.emotion-16 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-17 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-18 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-19 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-20 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 500px; + grid-column: 2/2; +} + +@media (min-width: 850px) { + .emotion-20 { + border: none; + } +} + +.emotion-23 a { + display: block; + font-size: 0.9em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.emotion-49 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 450px; + grid-column: 1/1; +} + +.emotion-51 { + margin: 12px 0 24px; +} + +.emotion-53 { + color: #999; + font-weight: normal; +} + +
+
+ + Poptávka: + +

+ Add hint to set videos to public +   + + # + 1 + +

+
+ + + + +  GitHub + +
+
+

+

+ When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. +

+ + +

+ Depends on #792 +

+

+
+ + Zaujala tě poptávka? + + + Napiš nám + +
+
+ + Projekt: + +

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu. +

+

+

+ Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky. +

+

+ + wordpress + + + php + + + javascript + + + google + +
+
+

+ + + + +   + Správce: + + + + Marek Dědič – Mlha + + +

+

+ + + + +   + E-mail + : + + + + mlha@skaut.cz + + +

+

+ + + + + +   + Demo + : + + + + demo-skaut-google-drive-gallery.skauting.cz/ + + +

+

+ + + + +   + Dokumentace + : + + + + napoveda.skaut.cz/dobryweb/cs-skaut-google-drive-gallery + + +

+

+ + + + +   + Repozitář + : + + + + github.com/skaut/skaut-google-drive-gallery + + +

+

+ + + + +   + Web + : + + + + wordpress.org/plugins/skaut-google-drive-gallery/ + + +

+

+ + + + + +   + Issue tracker + : + + + + github.com/skaut/skaut-google-drive-gallery/issues + + +

+
+
+ + Další poptávky projektu: + +
+

+ + If a shortcut name differs from the original, the name in gallery and breadcrumbs differs + +   + + # + 2 + +

+ When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). + +This is a bug and both should show the shortcut name. +
+
+

+ + Editing doesn't check path validity + +   + + # + 3 + +

+ When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: \`Directory "Galerie ODYWEB" wasn't found - it may have been deleted or renamed.\` Instead, it should verify that the path is valid and if it's not, should display a warning (and possibly move you to either the root directory, or the closest valid ancestor - however, this should not lead to you accidentally changing the gallery!) + +Last tested on 36dc1a10a353ba5bf2b98f33b49b1135a36ae3d3 +
+ +
+

+ + Add option to specify gallery by a Drive link + +   + + # + 5 + +

+ https://wordpress.org/support/topic/folder-link-instead-of-folder-name/ + +Basically, instead of searching for the folder in WP, you'd just paste the link to it into the editor and the plugin would figure out the path (Google Drive files now return a list of parents, so it could be done.) + +Depends on #111. +
+
+

+ + Add images to the block + +   + + # + 6 + +

+ Currently, images aren't listed in the editor - both block and TinyMCE plugin. This often confuses users. +
+
+

+ + Add video overlay + +   + + # + 7 + +

+ In the image grid, we should add an overlay to signify that an item is a video (for example a big play icon). +
+ + +
+

+ + Google app creation manual is outdated + +   + + # + 10 + +

+ https://napoveda.skaut.cz/dobryweb/en-skaut-google-drive-gallery/en-get-google-application +https://napoveda.skaut.cz/dobryweb/cs-skaut-google-drive-gallery/cs-ziskani-google-aplikace + +Google changed the consent screen layout and require some form of verification. +
+ +
+

+ + UX & design audit + +   + + # + 12 + +

+ Go over the design of: +- [ ] gallery view https://github.com/skaut/skaut-google-drive-gallery/issues/36 +- [ ] preview +- [ ] folder thumbnail - overlay, folder title and image count +- [ ] svg folder icon +- [ ] gallery breadcrumbs +- [ ] options page +- [ ] WP.org plugin page +- [ ] TinyMCE & Gutenberg editor plugins +- [ ] TinyMCE & Gutenberg "Authentication failed" dialogs + +Everything on the frontend needs to work at least with the default WP template and DSW templates. +
+
+
+`; + +exports[`IssueDetail page should renders correctly if there is no related issue 1`] = ` +

+ Poptávka + skaut + / + skaut-google-drive-gallery + / + 0 + zde není. +

+`; diff --git a/packages/frontend/src/pages/IssuesList/IssuesList.test.tsx b/packages/frontend/src/pages/IssuesList/IssuesList.test.tsx new file mode 100644 index 000000000..73a62c815 --- /dev/null +++ b/packages/frontend/src/pages/IssuesList/IssuesList.test.tsx @@ -0,0 +1,15 @@ +import renderer from "react-test-renderer" +import { IssuesList } from "./IssuesList" +import { testData } from "../../testData" +import { MemoryRouter } from "react-router-dom" + +describe("IssuesList page", () => { + it("should renders correctly", () => { + const tree = renderer.create( + + + + ) + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/frontend/src/pages/IssuesList/__snapshots__/IssuesList.test.tsx.snap b/packages/frontend/src/pages/IssuesList/__snapshots__/IssuesList.test.tsx.snap new file mode 100644 index 000000000..b8955e2a1 --- /dev/null +++ b/packages/frontend/src/pages/IssuesList/__snapshots__/IssuesList.test.tsx.snap @@ -0,0 +1,2112 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IssuesList page should renders correctly 1`] = ` +Array [ + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Add hint to set videos to public + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. + +Depends on #792 +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + If a shortcut name differs from the original, the name in gallery and breadcrumbs differs + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). + +This is a bug and both should show the shortcut name. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Editing doesn't check path validity + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: \`Directory "Galerie ODYWEB" wasn't found - it may have been deleted or renamed.\` Instead, it should verify that the path is valid and if it's not, should display a warning (and possibly move you to either the root directory, or the closest valid ancestor - however, this should not lead to you accidentally changing the gallery!) + +Last tested on 36dc1a10a353ba5bf2b98f33b49b1135a36ae3d3 +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Ctrl-click on folders does not work + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ Ctrl+click on a gallery item (subfolder) or breadcrumbs should open in a new tab +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Add option to specify gallery by a Drive link + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ https://wordpress.org/support/topic/folder-link-instead-of-folder-name/ + +Basically, instead of searching for the folder in WP, you'd just paste the link to it into the editor and the plugin would figure out the path (Google Drive files now return a list of parents, so it could be done.) + +Depends on #111. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Add images to the block + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ Currently, images aren't listed in the editor - both block and TinyMCE plugin. This often confuses users. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Add video overlay + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ In the image grid, we should add an overlay to signify that an item is a video (for example a big play icon). +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Increase test coverage + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ https://codecov.io/gh/skaut/skaut-google-drive-gallery +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Themes with "editor-styles" support change the look of the block editor + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ If the active theme contains +\`\`\`php +add_theme_support( 'editor-styles' ); +\`\`\` +its styles are also applied to the block editor, which then looks weird. We should implement our own styles for the editor. + +Example of such theme is the Twenty Seventeen theme. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Google app creation manual is outdated + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ https://napoveda.skaut.cz/dobryweb/en-skaut-google-drive-gallery/en-get-google-application +https://napoveda.skaut.cz/dobryweb/cs-skaut-google-drive-gallery/cs-ziskani-google-aplikace + +Google changed the consent screen layout and require some form of verification. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Directory preview images + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ Currently, the first image in a directory is used for its preview. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + UX & design audit + +

+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+ Go over the design of: +- [ ] gallery view https://github.com/skaut/skaut-google-drive-gallery/issues/36 +- [ ] preview +- [ ] folder thumbnail - overlay, folder title and image count +- [ ] svg folder icon +- [ ] gallery breadcrumbs +- [ ] options page +- [ ] WP.org plugin page +- [ ] TinyMCE & Gutenberg editor plugins +- [ ] TinyMCE & Gutenberg "Authentication failed" dialogs + +Everything on the frontend needs to work at least with the default WP template and DSW templates. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + User management smart table is not smart when the registration module is enabled + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ +

+ + wordpress + + + php + + + javascript + + + skautis + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Chyba v zobrazení + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ ![image](https://user-images.githubusercontent.com/8988898/130583907-9aaf6288-2129-42dd-88ef-0a27b0c7ddd1.png) + +

+ + wordpress + + + php + + + javascript + + + skautis + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + WordPress 5.x + Gutenberg + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ Musíme pořešit, jak nejlépe integrovat náš plugin s WP 5.x a hlavně Gutenbergem. + +Skrývání bloků, celých stránek... atd +

+ + wordpress + + + php + + + javascript + + + skautis + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Profilové fotky + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ Co do WordPressu tahat i profilové fotky, co si lidi do skautISu přidávají. Aby u profilu nějakou fotku měli... +

+ + wordpress + + + php + + + javascript + + + skautis + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Výběry pravidel v shortcode + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ Přidat Select2 do výběru pravidel v shortcode. +

+ + wordpress + + + php + + + javascript + + + skautis + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + Modul "Nábory" + +

+

+ + WordPress plugin: SkautIS integrace + +

+

+ modul pro nábory se zobrazením náborové mapy +příklad: http://is.skaut.cz/napoveda/programatori.Hotove-reseni-MapAdvertising-Interaktivni-mapa-naborovych-informaci-zakladni.ashx + +Otevírám k tomu diskuzi... +

+ + wordpress + + + php + + + javascript + + + skautis + +
, +] +`; diff --git a/packages/frontend/src/pages/ProjectDetail/ProjectDetail.test.tsx b/packages/frontend/src/pages/ProjectDetail/ProjectDetail.test.tsx new file mode 100644 index 000000000..f72f34816 --- /dev/null +++ b/packages/frontend/src/pages/ProjectDetail/ProjectDetail.test.tsx @@ -0,0 +1,32 @@ +import renderer from "react-test-renderer" +import { testData } from "../../testData" +import { MemoryRouter, Route } from "react-router-dom" +import { ProjectDetail } from "./ProjectDetail" + +const project = testData.projects[0] + +describe("ProjectDetail page", () => { + it("should renders correctly", () => { + const tree = renderer.create( + + } + /> + + ) + expect(tree).toMatchSnapshot() + }) + + it("should renders correctly if there is no related issue", () => { + const tree = renderer.create( + + } + /> + + ) + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/frontend/src/pages/ProjectDetail/__snapshots__/ProjectDetail.test.tsx.snap b/packages/frontend/src/pages/ProjectDetail/__snapshots__/ProjectDetail.test.tsx.snap new file mode 100644 index 000000000..cb706417d --- /dev/null +++ b/packages/frontend/src/pages/ProjectDetail/__snapshots__/ProjectDetail.test.tsx.snap @@ -0,0 +1,822 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ProjectDetail page should renders correctly 1`] = ` +@media (min-width: 850px) { + .emotion-0 { + display: grid; + grid-template-columns: 1fr 300px; + -webkit-column-gap: 36px; + column-gap: 36px; + } +} + +.emotion-1 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + grid-column: 1/span 2; +} + +.emotion-2 { + color: #294885; + margin: 0 0 16px; + font-family: themix; + font-size: 2em; +} + +.emotion-3 { + max-width: 750px; +} + +.emotion-4 { + margin: 0 0 16px; + font-size: 18px; + margin: 0; +} + +.emotion-6 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-8 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-9 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-10 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 500px; + grid-column: 2/2; +} + +@media (min-width: 850px) { + .emotion-10 { + border: none; + } +} + +.emotion-11 { + margin: 0 0 16px; +} + +.emotion-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #999; + font-size: 0.8em; +} + +.emotion-12 svg { + margin-right: 0.2em; +} + +.emotion-13 a { + display: block; + font-size: 0.9em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.emotion-14 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-39 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 450px; + grid-column: 1/1; + grid-row: 2/2; +} + +.emotion-41 { + margin: 12px 0 24px; +} + +.emotion-42 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-43 { + color: #999; + font-weight: normal; +} + +
+
+

+ WordPress plugin: Galerie obrázků a videí z Google Disku +

+
+

+

+ Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu. +

+

+

+

+ Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky. +

+

+ + wordpress + + + php + + + javascript + + + google + +
+
+
+

+ + + + +   + Správce: + + + + Marek Dědič – Mlha + + +

+

+ + + + +   + E-mail + : + + + + mlha@skaut.cz + + +

+

+ + + + + +   + Demo + : + + + + demo-skaut-google-drive-gallery.skauting.cz/ + + +

+

+ + + + +   + Dokumentace + : + + + + napoveda.skaut.cz/dobryweb/cs-skaut-google-drive-gallery + + +

+

+ + + + +   + Repozitář + : + + + + github.com/skaut/skaut-google-drive-gallery + + +

+

+ + + + +   + Web + : + + + + wordpress.org/plugins/skaut-google-drive-gallery/ + + +

+

+ + + + + +   + Issue tracker + : + + + + github.com/skaut/skaut-google-drive-gallery/issues + + +

+
+
+ + Poptávky u projektu: + +
+

+ + Add hint to set videos to public + +   + + # + 1 + +

+ When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. + +Depends on #792 +
+
+

+ + If a shortcut name differs from the original, the name in gallery and breadcrumbs differs + +   + + # + 2 + +

+ When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). + +This is a bug and both should show the shortcut name. +
+
+

+ + Editing doesn't check path validity + +   + + # + 3 + +

+ When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: \`Directory "Galerie ODYWEB" wasn't found - it may have been deleted or renamed.\` Instead, it should verify that the path is valid and if it's not, should display a warning (and possibly move you to either the root directory, or the closest valid ancestor - however, this should not lead to you accidentally changing the gallery!) + +Last tested on 36dc1a10a353ba5bf2b98f33b49b1135a36ae3d3 +
+ +
+

+ + Add option to specify gallery by a Drive link + +   + + # + 5 + +

+ https://wordpress.org/support/topic/folder-link-instead-of-folder-name/ + +Basically, instead of searching for the folder in WP, you'd just paste the link to it into the editor and the plugin would figure out the path (Google Drive files now return a list of parents, so it could be done.) + +Depends on #111. +
+
+

+ + Add images to the block + +   + + # + 6 + +

+ Currently, images aren't listed in the editor - both block and TinyMCE plugin. This often confuses users. +
+
+

+ + Add video overlay + +   + + # + 7 + +

+ In the image grid, we should add an overlay to signify that an item is a video (for example a big play icon). +
+ + +
+

+ + Google app creation manual is outdated + +   + + # + 10 + +

+ https://napoveda.skaut.cz/dobryweb/en-skaut-google-drive-gallery/en-get-google-application +https://napoveda.skaut.cz/dobryweb/cs-skaut-google-drive-gallery/cs-ziskani-google-aplikace + +Google changed the consent screen layout and require some form of verification. +
+ +
+

+ + UX & design audit + +   + + # + 12 + +

+ Go over the design of: +- [ ] gallery view https://github.com/skaut/skaut-google-drive-gallery/issues/36 +- [ ] preview +- [ ] folder thumbnail - overlay, folder title and image count +- [ ] svg folder icon +- [ ] gallery breadcrumbs +- [ ] options page +- [ ] WP.org plugin page +- [ ] TinyMCE & Gutenberg editor plugins +- [ ] TinyMCE & Gutenberg "Authentication failed" dialogs + +Everything on the frontend needs to work at least with the default WP template and DSW templates. +
+
+
+`; + +exports[`ProjectDetail page should renders correctly if there is no related issue 1`] = ` +

+ Projekt + owner + / + repo + zde není. +

+`; diff --git a/packages/frontend/src/pages/ProjectsList/ProjectsList.test.tsx b/packages/frontend/src/pages/ProjectsList/ProjectsList.test.tsx new file mode 100644 index 000000000..f37ccf536 --- /dev/null +++ b/packages/frontend/src/pages/ProjectsList/ProjectsList.test.tsx @@ -0,0 +1,15 @@ +import renderer from "react-test-renderer" +import { ProjectsList } from "./ProjectsList" +import { testData } from "../../testData" +import { MemoryRouter } from "react-router-dom" + +describe("ProjectsList page", () => { + it("should renders correctly", () => { + const tree = renderer.create( + + + + ) + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/frontend/src/pages/ProjectsList/__snapshots__/ProjectsList.test.tsx.snap b/packages/frontend/src/pages/ProjectsList/__snapshots__/ProjectsList.test.tsx.snap new file mode 100644 index 000000000..693b2c99c --- /dev/null +++ b/packages/frontend/src/pages/ProjectsList/__snapshots__/ProjectsList.test.tsx.snap @@ -0,0 +1,220 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ProjectsList page should renders correctly 1`] = ` +Array [ + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #d293ff33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + WordPress plugin: Galerie obrázků a videí z Google Disku + +

+

+

+ Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky. +

+ + wordpress + + + php + + + javascript + + + google + +
, + .emotion-0 { + margin: 0 0 16px; + padding-bottom: 24px; + border-bottom: 1px solid #29488510; + max-width: 600px; +} + +.emotion-1 { + color: #294885; + margin: 0 0 12px; + font-family: themix; +} + +.emotion-2 { + margin: 0 0 0.6em; +} + +.emotion-2 * { + font-size: 0.8rem; +} + +.emotion-3 { + margin: 0 0 16px; +} + +.emotion-4 { + background-color: #894cc033; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-5 { + background-color: #6d52b833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-6 { + background-color: #8b843b33; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +.emotion-7 { + background-color: #6317e833; + color: #444; + font-family: themix; + font-size: 0.8rem; + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin-right: 4px; +} + +
+

+ + WordPress plugin: SkautIS integrace + +

+

+

+ Plugin zajišťuje propojení skautských webů se skautISem. Dá se přes plugin registrovat, přihlašovat. Dokáže u stránek nastavovat oprávnění podle roli a dalších nastavení ve skautISu. Skrývá obsah podle toho jaká pravidla na stránce jsou nastavená. +

+ + wordpress + + + php + + + javascript + + + skautis + +
, +] +`;