Merge branch 'newimages'

Author: SPRINX0\prochazka

content/screenshots-dark.md

@@ -0,0 +1,10 @@
+---
+title: "Screenshots"
+subtitle: See DbGate in action
+layout: page
+permalink: /screenshots/
+---
+
+[Mixed themes](/screenshots) \| **Dark theme** \| [Light theme](/screenshots-light)
+
+{{< allscreenshots theme="dark" >}}

content/screenshots-light.md

@@ -0,0 +1,10 @@
+---
+title: "Screenshots"
+subtitle: See DbGate in action
+layout: page
+permalink: /screenshots/
+---
+
+[Mixed themes](/screenshots) \| [Dark theme](/screenshots-dark) \| **Light theme**
+
+{{< allscreenshots theme="light" >}}

content/screenshots.md

@@ -5,4 +5,6 @@ layout: page
 permalink: /screenshots/
 ---
 
+**Mixed theme** \| [Dark theme](/screenshots-dark) \| [Light theme](/screenshots-light) 
+
 {{< allscreenshots >}}

data/screenshots.yml

@@ -1,100 +1,100 @@
 - feature: datagrid
   items:
-  - src: datagrid.png
+  - name: datagrid
     description: Data grid with expandable columns
-  - src: masterdetail.png
+  - name: masterdetail
     description: Master/detail view
-  - src: formview.png
+  - name: formview
     description: Form view
-  - src: freetable.png
+  - name: freetable
     description: Free table editor with macro preview
-  - src: macros.png
+  - name: macros
     description: Macros in table data editor
-  - src: perspective1.png
+  - name: perspective1
     description: Perspective with nested data
 - feature: sqledit
   items:
-  - src: query.png
+  - name: query
     description: Query editor
-  - src: joinwizard.png
+  - name: joinwizard
     description: SQL join wizard
-  - src: sqlgen.png
+  - name: sqlgen
     description: SQL Generator
-  - src: mongoquery.png
+  - name: mongoquery
     description: Run query on MongoDB database
-  - src: sqlpreview.png
+  - name: sqlpreview
     description: SQL preview
 - feature: designer
   items:
-  - src: mongoquerydesign.png
-    description: Perspective query builder with MongoDB database
-  - src: querydesigner.png
+  # - name: mongoquerydesign
+  #   description: Perspective query builder with MongoDB database
+  - name: querydesigner
     description: Query designer
 - feature: export
   items:
-  - src: export.png
-    description: Export data screen
-  - src: importpreview.png
-    description: Preview of imported MS Excel file
-  - src: dbshell.png
-    description: JavaScript scripting
+  - name: exportcsv
+    description: CSV export
+  # - name: importpreview
+  #   description: Preview of imported MS Excel file
+  # - name: dbshell
+  #   description: JavaScript scripting
 - feature: other
   items:
-  - src: diagram.png
+  - name: diagram
     description: ER diagram
-  - src: charts.png
+  - name: charts
     description: Charts
-  - src: darkmode.png
-    description: Dark mode
-  - src: commandpalette.png
+  # - name: darkmode
+  #   description: Dark mode
+  - name: commandpalette
     description: Command palette
-  - src: keyboard.png
+  - name: keyboard
     description: Configure keyboard shortcuts
-  - src: map.png
+  - name: map
     description: Show points on map
 - feature: database
   items:
-  - src: connection.png
+  - name: connection
     description: Connection to database
-  - src: connsearch.png
+  - name: connsearch
     description: Search in connections and databases
 - feature: plugin
   items:
-  - src: plugin.png
+  - name: plugin
     description: View MS Excel plugin details
 - feature: mongo
   items:
-  - src: mongosave.png
+  - name: mongosave
     description: MongoDB data editor with save data preview
-  - src: collection.png
+  - name: collection
     description: Browse and expand MongoDB collection
 - feature: dbedit
   items:
-  - src: fkeditor.png
+  - name: fkeditor
     description: Foreign key editor
-  - src: structure.png
+  - name: structure
     description: View table structure
 - feature: dbcompare
   items:
-  - src: dbcompare.png
+  - name: dbcompare
     description: Database compare tool
-  - src: comparesettings.png
+  - name: comparesettings
     description: DB compare settings
-- feature: integration
-  items:
-  - src: db-login.png
-    description: Database login
-  - src: multi-db.png
-    description: Multiple database, multiple connection layout
-  - src: single-conn.png
-    description: Multiple database, single connection layout
-  - src: single-db.png
-    description: Single DB layout
+# - feature: integration
+#   items:
+#   - name: db-login
+#     description: Database login
+#   - name: multi-db
+#     description: Multiple database, multiple connection layout
+#   - name: single-conn
+#     description: Multiple database, single connection layout
+#   - name: single-db
+#     description: Single DB layout
 - feature: administration
   items:
-  - src: connadmin.png
+  - name: connadmin
     description: Connection administration (Premium)
-  - src: roleadmin.png
+  - name: roleadmin
     description: Role administration (Premium)
-  - src: authadmin.png
+  - name: authadmin
     description: Authentization administration (Premium)

data/slider_images.yml

@@ -1,18 +1,18 @@
-- src: datagrid.png
+- src: datagrid-dark
   alt: Data Grid screenshot
-- src: query.png
+- src: query-light
   alt: Query console screenshot
-- src: diagram.png
+- src: diagram-dark
   alt: Diagram screenshot
-- src: redis.png
-  alt: Redis connection screenshot
-- src: export.png
+# - src: redis
+#   alt: Redis connection screenshot
+- src: exportcsv-light
   alt: Export dialog screenshot
-- src: darkmode.png
-  alt: Dark mode screenshot
-- src: querydesigner.png
+# - src: darkmode
+#   alt: Dark mode screenshot
+- src: querydesigner-dark
   alt: Query designer screenshot
-- src: mongosave.png
+- src: mongosave-light
   alt: MongoDB save dialog screenshot
-- src: dbcompare.png
+- src: dbcompare-light
   alt: Database compare screenshot

layouts/partials/carousel.html

@@ -5,7 +5,7 @@
         <!-- Slides -->
 
         {{ range .Site.Data.slider_images }}
-        <div class="swiper-slide"><img src="/screenshots/{{ .src }}" alt="{{ .alt }}" /></div>
+        <div class="swiper-slide"><img src="/themeshots/{{ .src }}.png" alt="{{ .alt }}" /></div>
         {{ end }}
         ...
     </div>

layouts/partials/image-modal.html

@@ -1,24 +1,32 @@
+{{ $theme := .theme }}
+{{ if not $theme }}
+  {{ if modBool .index 2 }}
+    {{ $theme = "dark" }}
+  {{ else }}
+    {{ $theme = "light" }}
+  {{ end }}
+{{ end }}
 <div>
   <a
-    onClick="document.getElementById('image-modal-{{.src}}').classList.add('is-active')"
+    onClick="document.getElementById('image-modal-{{.name}}').classList.add('is-active')"
     title="View large image"
   >
     <figure class='image {{ .ratio | default "is-16by9" }}'>
-      <img src="/screenshots/{{ .src }}" alt="{{ .alt }}" />
+      <img src="/themeshots/{{ .name }}-{{ $theme }}.png" alt="{{ .alt }}" />
     </figure>
   </a>
-  <div class="modal" id="image-modal-{{.src}}">
+  <div class="modal" id="image-modal-{{.name}}">
     <div
       class="modal-background"
-      onClick="document.getElementById('image-modal-{{.src}}').classList.remove('is-active')"
+      onClick="document.getElementById('image-modal-{{.name}}').classList.remove('is-active')"
     ></div>
     <div class="modal-content">
-      <img src="/screenshots/{{ .src }}" alt="{{ .alt }}" />
+      <img src="/themeshots/{{ .name }}-{{ $theme }}.png" alt="{{ .alt }}" />
     </div>
     <button
       class="modal-close is-large"
       aria-label="close"
-      onClick="document.getElementById('image-modal-{{.src}}').classList.remove('is-active')"
+      onClick="document.getElementById('image-modal-{{.name}}').classList.remove('is-active')"
     ></button>
   </div>
 </div>

layouts/partials/screenshots.html

@@ -1,9 +1,10 @@
 {{ $cls := .columns_class }}
-{{ range .collection }}
+{{ $theme := .theme }}
+{{ range $index, $element := .collection }}
 <div class='{{ $cls | default "column is-4-desktop is-6-tablet"}}'>
     <div class="card">
         <div class="card-image">
-            {{ partial "image-modal.html" (dict "src" .src "alt" .description) }}
+            {{ partial "image-modal.html" (dict "name" .name "alt" .description "index" $index "theme" $theme) }}
         </div>
         <div class="card-content">
             <div class="content">

layouts/shortcodes/allscreenshots.html

@@ -1,5 +1,6 @@
+{{ $theme := .Get "theme"}}
 <div class="columns is-multiline">
     {{ range $.Site.Data.screenshots }}
-    {{ partial "screenshots.html" (dict "collection" .items) }}
+    {{ partial "screenshots.html" (dict "collection" .items "theme" $theme) }}
     {{ end }}
 </div>