Make photo rows flex and add photo labels

SharkJohny · SharkJohny · commit 94ec3433f3f2 · 2026-03-07T20:48:00.000+01:00
Add .photo-row { display:flex } to article styles (SCSS and compiled CSS) and clean up photo grid markup across manuals. Inserted .photo-info labels (Foto 01..04) in manual_na_instalaci.html, reorganized/indented photo-row divs and image tags in manual_fotky*.html, and removed an obsolete inline image from the Czech manual. Also adjusted trailing whitespace/newline for consistent markup.
diff --git a/HTML cz/manual_na_instalaci.html b/HTML cz/manual_na_instalaci.html
@@ -172,11 +172,7 @@
                 </span></span></span></b><!--[endif]--><b><span style="mso-ansi-language: SK;">Nakonec zkontrolujte, zda
             jsou všechny koberce bezpečně umístěné a nekloužou se.</span></b>
 </p>
-<p style="text-align: center;"><span style="font-size: 26pt;"><span face="Cambria, serif"
-            style="font-family: Cambria, serif;">FOTO 01</span></span></p>
-<p class="MsoNormal" style="text-align: center;"><span
-        style="font-family: 'Cambria',serif; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin; mso-ansi-language: SK;">&nbsp;</span><img
-        src="/user/documents/upload/blobid0-2.png?1771281912" alt="" /></p>
+
 
 
 
diff --git a/HTML/manual_fotky copy.html b/HTML/manual_fotky copy.html
@@ -16,11 +16,14 @@
         src="/user/documents/upload/assets/articles/cl2.jpg" alt="cl2" /></div>
 <p class="p2"><span style="font-size: 16pt; color: #ff6600;"><b>Foto podlahovej plochy spolujazdca + pohľad pod sedadlo
             spolujazdca</b></span></p>
-<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl3.jpg" alt="cl3" /><img
-        src="/user/documents/upload/assets/articles/cl4.jpg" alt="cl4" /></div>
+<div class="photo-row">
+    <img src="/user/documents/upload/assets/articles/cl3.jpg" alt="cl3" /><img
+        src="/user/documents/upload/assets/articles/cl4.jpg" alt="cl4" />
+</div>
 <p class="p4"><span style="font-size: 16pt; color: #ff6600;"><b>Foto podlahových plôch z&nbsp;druhého radu sedadiel +
             rozmery tunela Šírka, Výška a dĺžka</b></span><span class="s5"><span class="Apple-converted-space"><span
                 style="font-size: 16pt; color: #ff6600;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             </span>&nbsp;</span></span></p>
 <div class="photo-row"><img src="/user/documents/upload/assets/articles/cl5.jpg" alt="cl5" /><img
-        src="/user/documents/upload/assets/articles/cl6.jpg" alt="cl6" /></div>
+        src="/user/documents/upload/assets/articles/cl6.jpg" alt="cl6" />
+    </div>
diff --git a/HTML/manual_fotky.html b/HTML/manual_fotky.html
@@ -11,25 +11,44 @@
 <div class="photo-row"><img src="/user/documents/upload/assets/articles/cl1.jpg" alt="cl1" /><img
         src="/user/documents/upload/assets/articles/cl2.jpg" alt="cl2" /></div>
 <p class="p4"><b>Foto podlahovej plochy spolujazdca + pohľad pod sedadlo spolujazdca</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl3.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl2.jpg" alt="cl4" /></div>
 <p class="p4"><span class="s1">1/5</span><span class="s7"></span><b>Foto podlahových plôch z druhého radu sedadiel za
         šoférovou sedačkou</b></p>
+        <div class="photo-row"><img src="/user/documents/upload/assets/articles/cl5.jpg" alt="cl1" /><img
+                src="/user/documents/upload/assets/articles/cl6.jpg" alt="cl2" /></div>
 <p class="p4"><b>Foto podlahových plôch z druhého radu sedadiel za spolujazdcovou sedačkou</b></p>
-<p class="p5"><b>Pokračovanie na ďalšej strane !</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl7.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl8.jpg" alt="cl2" /></div>
+    
 <p class="p4"><span class="s1">2/5</span><span class="s7"></span><b>Foto podlahových plôch z druhého radu sedadiel
         celkový pohľad na druhú radu sedadiel +</b></p>
+
 <p class="p4"><b>šírka , výška a hĺbka tunelu v druhej rade sedadiel (ak tunel nieje tak netreba)</b></p>
-<p class="p5"><b>Pokračovanie na ďalšej strane !</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl9.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl10.jpg" alt="cl2" /></div>
+        <div class="photo-row"><img src="/user/documents/upload/assets/articles/cl11.jpg" alt="cl1" /><img
+                src="/user/documents/upload/assets/articles/cl12.jpg" alt="cl2" /></div>
+
 <p class="p4"><span class="s1">3/5</span><span class="s7"></span><b>V prípade že ste si objednali rohož do kufra alebo
         jeden z našich setov prosím o zaslanie</b></p>
 <p class="p4"><b>nasledujúcich fotografií</b></p>
 <p class="p4"><b>1.Celkový pohľad na kufor</b></p>
 <p class="p4"><b>2.hĺbka kufra s položeným metrom</b></p>
 <p class="p4"><b>3.detail s hodnotou hĺbky kufra na metry</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl13.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl14.jpg" alt="cl2" /></div>
 <p class="p4"><b>detaily (výčnelky,ostrovšeky,uložnie prestory atď.)</b></p>
-<p class="p5"><b>Pokračovanie na ďalšej strane !</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl15.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl16.jpg" alt="cl2" /></div>
+
 <p class="p4"><span class="s1">4/5</span><span class="s7"></span><b>šírka kufra v najužšom bode + detail z hodnotu na
         metri</b></p>
+        <div class="photo-row"><img src="/user/documents/upload/assets/articles/cl17.jpg" alt="cl1" /><img
+                src="/user/documents/upload/assets/articles/cl18.jpg" alt="cl2" /></div>
 <p class="p4"><b>šírka kufra v najširšom bode + detail z hodnotu na metri</b></p>
+<div class="photo-row"><img src="/user/documents/upload/assets/articles/cl19.jpg" alt="cl1" /><img
+        src="/user/documents/upload/assets/articles/cl20.jpg" alt="cl2" /></div>
 <p class="p4"><b>Všetky fotky nám prosím zasielajte cez aplikáciu </b><span class="s8"><b>Whatsapp na tel.č.: +421 903
             660 720</b></span></p>
 <p class="p4"><b>alebo na email: info@luxurycardesign.sk</b></p>
diff --git a/HTML/manual_na_instalaci.html b/HTML/manual_na_instalaci.html
@@ -75,10 +75,12 @@
 
 <div class="photo-row">
     <div class="photo">
+        <div class="photo-info">Foto 01</div>
         <img src="https://cdn.myshoptet.com/usr/www.luxurycardesign.sk/user/documents/upload/blobid0.png?1771177367"
             alt="cl1" />
     </div>
     <div class="photo">
+        <div class="photo-info">Foto 03</div>
         <img src="https://cdn.myshoptet.com/usr/www.luxurycardesign.sk/user/documents/upload/blobid1.png?1771177367"
             alt="cl2" />
     </div>
@@ -87,10 +89,12 @@
 <div class="photo-row">
 
     <div class="photo">
+        <div class="photo-info">Foto 02</div>
         <img src="https://cdn.myshoptet.com/usr/www.luxurycardesign.sk/user/documents/upload/blobid0-1.png?1771177467"
             alt="cl1" />
     </div>
     <div class="photo">
+        <div class="photo-info">Foto 04</div>
         <img src="https://cdn.myshoptet.com/usr/www.luxurycardesign.sk/user/documents/upload/blobid1-1.png?1771177467"
             alt="cl2" />
     </div>
diff --git a/assets/css/_article.scss b/assets/css/_article.scss
@@ -23,6 +23,9 @@
     }
   }
 }
+.photo-row {
+  display: flex;
+}
 
 @media screen and (min-width: 767px) {
   .photo-row {
diff --git a/assets/css/luxuryCar.css b/assets/css/luxuryCar.css
diff --git a/assets/css/luxuryCar.css.map b/assets/css/luxuryCar.css.map

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,9 @@`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`	`}`
	`26`	`+.photo-row {`
	`27`	`+ display: flex;`
	`28`	`+}`
`26`	`29`
`27`	`30`	`@media screen and (min-width: 767px) {`
`28`	`31`	`.photo-row {`