diff --git a/member_group_size_calc/templates/member_group_size_calc/index.html b/member_group_size_calc/templates/member_group_size_calc/index.html
index d13dfd92f6c5a61bfd7d21177a0c8f87853ea527..bbf26e1d69b0d91ddaa3b03c2ad0d98e7a84ea2a 100644
--- a/member_group_size_calc/templates/member_group_size_calc/index.html
+++ b/member_group_size_calc/templates/member_group_size_calc/index.html
@@ -41,43 +41,44 @@
</div>
</div>
- <div class="text-lg mb-4">
+ <div class="flex gap-3 text-lg mb-4 flex-col items-center md:flex-row">
Počet členů sdružení či orgánu:
<input
id="member-count"
class="w-[7ch]"
type="number"
value="0"
- ><button
+ >
+ <button
id="calculate"
- class="ml-3 px-4 py-2 bg-black text-white duration-100 font-bebas hover:bg-white hover:text-black"
+ class="px-4 py-2 bg-black text-white duration-100 font-bebas hover:bg-white hover:text-black"
>OK</button>
</div>
- <div class="mb-4 flex gap-3 items-start">
+ <div class="mb-4 flex gap-3 items-center flex-col-reverse md:items-start md:flex-row">
<table class="inline-block table-auto">
<thead>
<tr>
<th
- class="px-3 py-2 bg-black text-white text-center text-xl font-bebas border border-black"
+ class="px-5 py-2 bg-black text-white text-center text-xl border border-black"
colspan="2"
>Počty členů</th>
</tr>
</thead>
- <tbody>
- <tr class="border border-black">
- <th class="font-bold text-left px-4 py-2">Setina</th>
+ <tbody class="border-x border-b border-gray-100">
+ <tr>
+ <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Setina</th>
<th class="font-normal px-4 py-2" id="hundredth">0</th>
</tr>
- <tr class="border border-black">
+ <tr class="bg-gray-100">
<th class="font-bold text-left px-4 py-2">Desetina</th>
<th class="font-normal px-4 py-2" id="tenth">0</th>
</tr>
- <tr class="border border-black">
- <th class="font-bold text-left px-4 py-2">Pětina</th>
+ <tr>
+ <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Pětina</th>
<th class="font-normal px-4 py-2" id="fifth">0</th>
</tr>
- <tr class="border border-black">
+ <tr class="bg-gray-100">
<th class="font-bold text-left px-4 py-2">2x odmocnina</th>
<th class="font-normal px-4 py-2" id="two-square-roots">0</th>
</tr>
@@ -88,22 +89,22 @@
<thead>
<tr>
<th
- class="px-3 py-2 bg-black text-white text-center text-xl font-bebas border border-black"
+ class="px-5 py-2 bg-black text-white text-center text-xl border border-black"
colspan="2"
>Hodnoty podle jednacího řádu</th>
</tr>
</thead>
- <tbody>
- <tr class="border border-black">
- <th class="font-bold text-left px-4 py-2">Rozeslání členského podnětu</th>
+ <tbody class="border-x border-b border-gray-100">
+ <tr>
+ <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Rozeslání členského podnětu</th>
<th class="font-normal px-4 py-2" id="member-motion">0</th>
</tr>
- <tr class="border border-black">
+ <tr class="bg-gray-100">
<th class="font-bold text-left px-4 py-2">Zařazení na běžící jednání</th>
<th class="font-normal px-4 py-2" id="ongoing-motion">0</th>
</tr>
- <tr class="border border-black">
- <th class="font-bold text-left px-4 py-2">Svolání jednání</th>
+ <tr>
+ <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Svolání jednání</th>
<th class="font-normal px-4 py-2" id="motion-start">0</th>
</tr>
</tbody>
diff --git a/shared/static/shared/style.css b/shared/static/shared/style.css
index 7f9ffed091c55388c1180be20ca522404990ad1c..b54a184b0e396110a90e38705c12381f49ecca55 100644
--- a/shared/static/shared/style.css
+++ b/shared/static/shared/style.css
@@ -533,10 +533,6 @@ html {
margin-bottom: 0.75rem;
}
-.ml-3 {
- margin-left: 0.75rem;
-}
-
.block {
display: block;
}
@@ -565,6 +561,14 @@ html {
flex-direction: row;
}
+.flex-col {
+ flex-direction: column;
+}
+
+.flex-col-reverse {
+ flex-direction: column-reverse;
+}
+
.items-start {
align-items: flex-start;
}
@@ -585,11 +589,34 @@ html {
border-width: 1px;
}
+.border-x {
+ border-left-width: 1px;
+ border-right-width: 1px;
+}
+
+.border-b {
+ border-bottom-width: 1px;
+}
+
+.border-r {
+ border-right-width: 1px;
+}
+
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
+.border-gray-100 {
+ --tw-border-opacity: 1;
+ border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-r-gray-100 {
+ --tw-border-opacity: 1;
+ border-right-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
.bg-amber-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
@@ -623,9 +650,9 @@ html {
padding-bottom: 0.5rem;
}
-.px-3 {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
}
.text-left {
@@ -725,6 +752,14 @@ html {
.md\:w-full {
width: 100%;
}
+
+ .md\:flex-row {
+ flex-direction: row;
+ }
+
+ .md\:items-start {
+ align-items: flex-start;
+ }
}
@media (min-width: 1024px) {