Skip to content

Commit 8377d73

Browse files
committed
dostosowanie wyglądu strony dla większych ekranów (wciąż podstawowo celujemy w mobilne urządzenia, ale na tabletach będzie to lepiej wyglądało)
1 parent b3eb776 commit 8377d73

File tree

1 file changed

+129
-116
lines changed

1 file changed

+129
-116
lines changed

site/templates/organization.html

Lines changed: 129 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -37,107 +37,116 @@ <h1 class="text-black text-3xl">{{ data.nazwa }}</h1>
3737
</div>
3838

3939
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dane do dostawy</h1>
40-
<div class="pb-4">
41-
<div
42-
class="flex justify-between bg-white border-solid border border-gray-400 rounded-t-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
43-
role="button"
44-
tabindex="0"
45-
onclick="copyText(this)"
46-
onkeydown="handleCopyKeydown(event, this)"
47-
>
48-
{{ data.dostawa.ulica }}
49-
<svg
50-
xmlns="http://www.w3.org/2000/svg"
51-
fill="none"
52-
stroke-width="1.5"
53-
stroke="currentColor"
54-
class="size-6"
40+
41+
<!-- Two-column layout on medium screens and up -->
42+
<div class="md:grid md:grid-cols-2 md:gap-6">
43+
<!-- Left column: Address -->
44+
<div class="pb-4">
45+
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
46+
<div
47+
class="flex justify-between bg-white border-solid border border-gray-400 rounded-t-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
48+
role="button"
49+
tabindex="0"
50+
onclick="copyText(this)"
51+
onkeydown="handleCopyKeydown(event, this)"
5552
>
56-
<use href="#icon-copy"></use>
57-
</svg>
58-
</div>
59-
<div
60-
class="flex justify-between bg-white border-solid border border-gray-400 p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
61-
role="button"
62-
tabindex="0"
63-
onclick="copyText(this)"
64-
onkeydown="handleCopyKeydown(event, this)"
65-
>
66-
{{ data.dostawa.kod }}
67-
<svg
68-
xmlns="http://www.w3.org/2000/svg"
69-
fill="none"
70-
stroke-width="1.5"
71-
stroke="currentColor"
72-
class="size-6"
53+
{{ data.dostawa.ulica }}
54+
<svg
55+
xmlns="http://www.w3.org/2000/svg"
56+
fill="none"
57+
stroke-width="1.5"
58+
stroke="currentColor"
59+
class="size-6"
60+
>
61+
<use href="#icon-copy"></use>
62+
</svg>
63+
</div>
64+
<div
65+
class="flex justify-between bg-white border-solid border border-gray-400 p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
66+
role="button"
67+
tabindex="0"
68+
onclick="copyText(this)"
69+
onkeydown="handleCopyKeydown(event, this)"
7370
>
74-
<use href="#icon-copy"></use>
75-
</svg>
76-
</div>
77-
<div
78-
class="flex justify-between bg-white border-solid border border-gray-400 rounded-b-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
79-
role="button"
80-
tabindex="0"
81-
onclick="copyText(this)"
82-
onkeydown="handleCopyKeydown(event, this)"
83-
>
84-
{{ data.dostawa.miasto }}
85-
<svg
86-
xmlns="http://www.w3.org/2000/svg"
87-
fill="none"
88-
stroke-width="1.5"
89-
stroke="currentColor"
90-
class="size-6"
71+
{{ data.dostawa.kod }}
72+
<svg
73+
xmlns="http://www.w3.org/2000/svg"
74+
fill="none"
75+
stroke-width="1.5"
76+
stroke="currentColor"
77+
class="size-6"
78+
>
79+
<use href="#icon-copy"></use>
80+
</svg>
81+
</div>
82+
<div
83+
class="flex justify-between bg-white border-solid border border-gray-400 rounded-b-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
84+
role="button"
85+
tabindex="0"
86+
onclick="copyText(this)"
87+
onkeydown="handleCopyKeydown(event, this)"
9188
>
92-
<use href="#icon-copy"></use>
93-
</svg>
89+
{{ data.dostawa.miasto }}
90+
<svg
91+
xmlns="http://www.w3.org/2000/svg"
92+
fill="none"
93+
stroke-width="1.5"
94+
stroke="currentColor"
95+
class="size-6"
96+
>
97+
<use href="#icon-copy"></use>
98+
</svg>
99+
</div>
94100
</div>
95-
</div>
96101

97-
{% if data.dostawa.kod_paczkomatu %}
98-
<div class="pb-4">
99-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Kod paczkomatu</h2>
100-
<div
101-
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
102-
role="button"
103-
tabindex="0"
104-
onclick="copyText(this)"
105-
onkeydown="handleCopyKeydown(event, this)"
106-
>
107-
{{ data.dostawa.kod_paczkomatu }}
108-
<svg
109-
xmlns="http://www.w3.org/2000/svg"
110-
fill="none"
111-
viewBox="0 0 24 24"
112-
stroke-width="1.5"
113-
stroke="currentColor"
114-
class="size-6"
115-
>
116-
<use href="#icon-copy"></use>
117-
</svg>
118-
</div>
119-
</div>
120-
{% endif %}
102+
<!-- Right column: Paczkomat and Phone -->
103+
<div class="pb-4">
104+
{% if data.dostawa.kod_paczkomatu %}
105+
<div class="pb-4">
106+
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Kod paczkomatu</h2>
107+
<div
108+
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
109+
role="button"
110+
tabindex="0"
111+
onclick="copyText(this)"
112+
onkeydown="handleCopyKeydown(event, this)"
113+
>
114+
{{ data.dostawa.kod_paczkomatu }}
115+
<svg
116+
xmlns="http://www.w3.org/2000/svg"
117+
fill="none"
118+
viewBox="0 0 24 24"
119+
stroke-width="1.5"
120+
stroke="currentColor"
121+
class="size-6"
122+
>
123+
<use href="#icon-copy"></use>
124+
</svg>
125+
</div>
126+
</div>
127+
{% endif %}
121128

122-
<div class="pb-4">
123-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Telefon dla kuriera</h2>
124-
<div
125-
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
126-
role="button"
127-
tabindex="0"
128-
onclick="copyText(this)"
129-
onkeydown="handleCopyKeydown(event, this)"
130-
>
131-
{{ data.dostawa.telefon }}
132-
<svg
133-
xmlns="http://www.w3.org/2000/svg"
134-
fill="none"
135-
stroke-width="1.5"
136-
stroke="currentColor"
137-
class="size-6"
138-
>
139-
<use href="#icon-copy"></use>
140-
</svg>
129+
<div>
130+
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Telefon dla kuriera</h2>
131+
<div
132+
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1 cursor-pointer transition-all duration-150 ease-in-out active:bg-gray-50 active:shadow-inner active:border-l-2 active:border-r-2"
133+
role="button"
134+
tabindex="0"
135+
onclick="copyText(this)"
136+
onkeydown="handleCopyKeydown(event, this)"
137+
>
138+
{{ data.dostawa.telefon }}
139+
<svg
140+
xmlns="http://www.w3.org/2000/svg"
141+
fill="none"
142+
stroke-width="1.5"
143+
stroke="currentColor"
144+
class="size-6"
145+
>
146+
<use href="#icon-copy"></use>
147+
</svg>
148+
</div>
149+
</div>
141150
</div>
142151
</div>
143152

@@ -200,29 +209,33 @@ <h2 class="text-sectionTitle text-lg font-medium mb-1">{{ produkt.nazwa }}</h2>
200209
<div class="flex justify-center">
201210
<div class="w-11/12">
202211
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dodatkowe informacje</h1>
203-
<div class="pb-4">
204-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h2>
205-
<div class="bg-white border-solid border border-gray-400 rounded-lg p-2 mt-1">{{ data.krs }}</div>
206-
</div>
212+
213+
<!-- Two-column layout on medium screens and up -->
214+
<div class="md:grid md:grid-cols-2 md:gap-6">
215+
<div class="pb-4">
216+
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h2>
217+
<div class="bg-white border-solid border border-gray-400 rounded-lg p-2 mt-1">{{ data.krs }}</div>
218+
</div>
207219

208-
<div class="pb-4">
209-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
210-
<a
211-
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1"
212-
href="{{data.strona}}"
213-
target="_blank"
214-
>
215-
{{ data.strona }}
216-
<svg
217-
xmlns="http://www.w3.org/2000/svg"
218-
fill="none"
219-
stroke-width="1.5"
220-
stroke="currentColor"
221-
class="size-6 ml-2"
220+
<div class="pb-4">
221+
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
222+
<a
223+
class="flex justify-between bg-white border-solid border border-gray-400 rounded-lg p-3 mt-1"
224+
href="{{data.strona}}"
225+
target="_blank"
222226
>
223-
<use href="#icon-external-link"></use>
224-
</svg>
225-
</a>
227+
{{ data.strona }}
228+
<svg
229+
xmlns="http://www.w3.org/2000/svg"
230+
fill="none"
231+
stroke-width="1.5"
232+
stroke="currentColor"
233+
class="size-6 ml-2"
234+
>
235+
<use href="#icon-external-link"></use>
236+
</svg>
237+
</a>
238+
</div>
226239
</div>
227240
</div>
228241
</div>

0 commit comments

Comments
 (0)