Skip to content

Commit 29dbf0a

Browse files
zamora-carlosfilipchristiansen
zamora-carlos
authored and
filipchristiansen
committed
fix(ui): update layout in PAT section to avoid overlaps & overflows (#331)
* fix(ui): prevent overlaps and overflow by updating layout in PAT section of ingest form * feat(ui): replace native checkbox styles with custom design * fix(ui): add missing cursor-pointer styles to inputs in ingest form * fix(ui): apply top margin to example repositories section if token is present
1 parent 37c956f commit 29dbf0a

File tree

1 file changed

+73
-70
lines changed

1 file changed

+73
-70
lines changed

‎src/server/templates/components/git_form.jinja‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
22
function changePattern(element) {
3-
console.log("Pattern changed", element.value);
3+
console.log('Pattern changed', element.value);
44
let patternType = element.value;
5-
const files = document.getElementsByName("tree-line");
5+
const files = document.getElementsByName('tree-line');
66
77
Array.from(files).forEach((element) => {
8-
if (element.textContent.includes("Directory structure:")) {
8+
if (element.textContent.includes('Directory structure:')) {
99
return;
1010
}
1111
@@ -21,15 +21,16 @@
2121
function toggleAccessSettings() {
2222
const container = document.getElementById('accessSettingsContainer');
2323
const checkbox = document.getElementById('showAccessSettings');
24-
const row = document.getElementById('controlsRow');
24+
const examples = document.getElementById('exampleRepositories')
2525
const show = checkbox.checked;
26+
2627
container.classList.toggle('hidden', !show);
27-
row.classList.toggle('mb-12', show);
28+
examples.classList.toggle('lg:mt-0', show);
2829
}
2930
</script>
3031
<div class="relative">
3132
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
32-
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
33+
<div class="rounded-xl relative z-20 p-8 sm:p-10 border-[3px] border-gray-900 bg-[#fff4da]">
3334
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
3435
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
3536
<!-- Ingest Form -->
@@ -63,77 +64,79 @@
6364
<input type="hidden" name="pattern" value="">
6465
<!-- Controls row: pattern selector, file size slider, PAT checkbox with PAT field below -->
6566
<div id="controlsRow"
66-
class="mt-7 flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10 relative">
67-
<!-- Pattern selector + file size slider (side by side) -->
68-
<div class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-10 flex-1 w-full">
69-
<!-- Pattern selector -->
70-
<div class="w-full md:w-[260px]">
71-
<div class="relative">
72-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
73-
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
74-
<!-- Pattern type selector -->
75-
<div class="relative flex items-center">
76-
<select id="pattern_type"
77-
onchange="changePattern(this)"
78-
name="pattern_type"
79-
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
80-
<option value="exclude"
81-
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
82-
Exclude
83-
</option>
84-
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
85-
</select>
86-
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
87-
xmlns="http://www.w3.org/2000/svg"
88-
viewBox="0 0 24 24"
89-
fill="none"
90-
stroke="currentColor"
91-
stroke-width="2"
92-
stroke-linecap="round"
93-
stroke-linejoin="round">
94-
<polyline points="6 9 12 15 18 9" />
95-
</svg>
96-
</div>
97-
<!-- Pattern input field -->
98-
<input type="text"
99-
id="pattern"
100-
name="pattern"
101-
placeholder="*.md, src/ "
102-
value="{{ pattern if pattern else '' }}"
103-
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
104-
</div>
67+
class="mt-7 grid gap-6 grid-cols-1 sm:grid-cols-[3fr_2fr] md:gap-x-10 lg:grid-cols-[5fr_4fr_4fr] lg:gap-y-0">
68+
<!-- Pattern selector -->
69+
<div class="w-full relative self-center">
70+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
71+
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
72+
<!-- Pattern type selector -->
73+
<div class="relative flex items-center">
74+
<select id="pattern_type"
75+
onchange="changePattern(this)"
76+
name="pattern_type"
77+
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900 cursor-pointer">
78+
<option value="exclude"
79+
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
80+
Exclude
81+
</option>
82+
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
83+
</select>
84+
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
85+
xmlns="http://www.w3.org/2000/svg"
86+
viewBox="0 0 24 24"
87+
fill="none"
88+
stroke="currentColor"
89+
stroke-width="2"
90+
stroke-linecap="round"
91+
stroke-linejoin="round">
92+
<polyline points="6 9 12 15 18 9" />
93+
</svg>
10594
</div>
95+
<!-- Pattern input field -->
96+
<input type="text"
97+
id="pattern"
98+
name="pattern"
99+
placeholder="*.md, src/ "
100+
value="{{ pattern if pattern else '' }}"
101+
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
106102
</div>
107-
<!-- File size selector -->
108-
<div class="w-full md:w-[200px]">
109-
<label for="file_size" class="block text-gray-700 mb-1">
110-
Include files under: <span id="size_value" class="font-bold">50kB</span>
111-
</label>
112-
<input type="range"
113-
id="file_size"
114-
name="max_file_size"
115-
min="0"
116-
max="500"
117-
required
118-
value="{{ default_file_size }}"
119-
class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000] ">
120-
</div>
103+
</div>
104+
<!-- File size selector -->
105+
<div class="w-full self-center">
106+
<label for="file_size" class="block text-gray-700 mb-1">
107+
Include files under: <span id="size_value" class="font-bold">50kB</span>
108+
</label>
109+
<input type="range"
110+
id="file_size"
111+
name="max_file_size"
112+
min="0"
113+
max="500"
114+
required
115+
value="{{ default_file_size }}"
116+
class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
121117
</div>
122118
<!-- PAT checkbox with PAT field below -->
123-
<div class="relative flex flex-col items-start justify-center w-full md:w-64">
119+
<div class="flex flex-col items-start w-full sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-3.5">
124120
<!-- PAT checkbox -->
125121
<div class="flex items-center space-x-2">
126-
<input type="checkbox"
127-
id="showAccessSettings"
128-
class="w-4 h-4 rounded border-gray-900"
129-
onchange="toggleAccessSettings()"
130-
{% if token %}checked{% endif %}>
131-
<label for="showAccessSettings" class="text-gray-900">Private Repository</label>
122+
<label for="showAccessSettings"
123+
class="flex gap-2 text-gray-900 cursor-pointer">
124+
<div class="relative w-6 h-6">
125+
<input type="checkbox"
126+
id="showAccessSettings"
127+
onchange="toggleAccessSettings()"
128+
{% if token %}checked{% endif %}
129+
class="cursor-pointer peer appearance-none w-full h-full rounded-sm border-[3px] border-current bg-white m-0 text-current shadow-[3px_3px_0_currentColor]" />
130+
<span class="absolute inset-0 w-3 h-3 m-auto scale-0 transition-transform duration-150 ease-in-out shadow-[inset_1rem_1rem_#FE4A60] bg-[CanvasText] origin-bottom-left peer-checked:scale-100"
131+
style="clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)"></span>
132+
</div>
133+
Private Repository
134+
</label>
132135
{% include "components/badge_new.jinja" %}
133136
</div>
134137
<!-- PAT field -->
135138
<div id="accessSettingsContainer"
136-
class="{% if not token %}hidden {% endif %}mt-2 w-full md:absolute md:left-0 md:top-full md:z-30">
139+
class="{% if not token %}hidden {% endif %}mt-3 w-full">
137140
<div class="relative w-full">
138141
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
139142
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
@@ -157,8 +160,7 @@
157160
stroke="currentColor"
158161
viewBox="0 0 24 24"
159162
xmlns="http://www.w3.org/2000/svg">
160-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
161-
</path>
163+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
162164
</svg>
163165
</a>
164166
</div>
@@ -168,7 +170,8 @@
168170
</form>
169171
<!-- Example repositories section -->
170172
{% if show_examples %}
171-
<div class="mt-4">
173+
<div id="exampleRepositories"
174+
class="{% if token %}lg:mt-0 {% endif %} mt-4">
172175
<p class="opacity-70 mb-1">Try these example repositories:</p>
173176
<div class="flex flex-wrap gap-2">
174177
{% for example in examples %}

0 commit comments

Comments
 (0)