Help pictures added

src/rawsalad/databrowser/templates/app.html

@@ -112,6 +112,9 @@ <h3>Oto kolekcje, które udostępniamy</h3>
         strony i nie należy jej traktować jak podręcznik opisujący 
         pełną funkcjonalność dostępną na stronie <b>Otwarte dane</b>
         </p>
+      </section>
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Ile na edukację?</h2>
         <h3>Wybór kolekcji danych i przeglądanie</h3>
         <p>
@@ -134,6 +137,13 @@ <h3>Wybór kolekcji danych i przeglądanie</h3>
         dysponentom. Ponowne kliknięcie w <b>Zadanie 3.2</b> ukryje przed nami 
         tę część danych. 
         </p>
+      </section>
+      <section style="padding: 20px; width: 45%;" class="right">
+        <img src="/site_media/img/help/001.png" style="margin-top: 50px;" alt="Zrzut ekranu" />
+      </section>
+
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Czy tylko MEN?</h2>
         <h3>Otwieranie dodatkowych kolekcji</h3>
         <p>
@@ -153,6 +163,14 @@ <h3>Otwieranie dodatkowych kolekcji</h3>
         wyświetlona. Wśród nich znajduje się również <b>Budżet instytucjonalny</b>
         w dwóch wydaniach – na rok <b>2011</b> i 2012. Wybieramy pierwszy z nich. 
         </p>
+      </section>
+      <section style="padding: 20px; width: 45%;" class="right">
+        <img src="/site_media/img/help/help_02_a.png" style="margin-top: 50px;" alt="Zrzut ekranu" />
+        <img src="/site_media/img/help/help_02_b.png" style="margin-top: 20px;" alt="Zrzut ekranu" />
+      </section>
+
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Ile dla kogo?</h2>
         <h3>Czym są arkusze</h3>
         <p>
@@ -166,6 +184,13 @@ <h3>Czym są arkusze</h3>
         stanie, w jakim ją poprzednio zostawiliśmy – otwarta jest edukacja i 
         wychowanie. Wróćmy jednak do budżetu instytucjonalnego. 
         </p>
+      </section>
+      <section style="padding: 20px; width: 45%;" class="right">
+        <img src="/site_media/img/help/help_03.png" style="margin-top: 50px;" alt="Zrzut ekranu" />
+      </section>
+
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Po kolei...</h2>
         <h3>Sortowanie danych</h3>
         W tabeli widzimy alfabetycznie ułożone instytucje uczestniczące w 
@@ -180,6 +205,10 @@ <h3>Sortowanie danych</h3>
         niebieski guzik „<b>Sortuj</b>”. Łatwo teraz zobaczyć, że MEN otrzymuje dużo 
         mniej od np. GUS-u. 
         </p>
+      </section>
+
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Tylko wybrane...</h2>
         <h3>Filtrowanie danych</h3>
         <p>
@@ -195,6 +224,14 @@ <h3>Filtrowanie danych</h3>
         Teraz możemy nacisnąć niebieski guzik „<b>Filtruj</b>”. Jak widać tylko 
         Ministerstwo Skarbu posiada mniejszy udział w budżecie państwa.
         </p>
+      </section>
+      <section style="padding: 20px; width: 45%;" class="right">
+        <img src="/site_media/img/help/help_05_a.png" style="margin-top: 50px;" alt="Zrzut ekranu" />
+        <img src="/site_media/img/help/help_05_b.png" style="margin-top: 20px;" alt="Zrzut ekranu" />
+      </section>
+
+      <div class="clear"></div>
+      <section style="padding: 0px 20px; width: 45%;" class="left">
         <h2>Ciekawe, co na to...</h2>
         <h3>Udostępnianie i pobieranie</h3>
         <p>
@@ -218,9 +255,6 @@ <h3>Udostępnianie i pobieranie</h3>
         biurowego, środowiska statystycznego czy dowolnego języka programowania.
         </p>
       </section>
-      <section style="padding: 20px; width: 45%;" class="right">
-        <img src="/site_media/img/help/001.png" alt="Zrzut ekranu" />
-      </section>
     </article>