Skip to content

fix(ui): update layout in PAT section to avoid overlaps & overflows #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 28, 2025
+73 −70
Merged

fix(ui): update layout in PAT section to avoid overlaps & overflows #331

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2e5edc8
fix(ui): prevent overlaps and overflow by updating layout in PAT sect…
zamora-carlos Jun 27, 2025
4b1c90b
feat(ui): replace native checkbox styles with custom design
zamora-carlos Jun 27, 2025
7ac52e7
fix(ui): add missing cursor-pointer styles to inputs in ingest form
zamora-carlos Jun 27, 2025
5d0bd1e
fix(ui): apply top margin to example repositories section if token is…
zamora-carlos Jun 27, 2025
68f2132
Merge branch 'main' into fix/ui-pat-section-layout
cyclotruc Jun 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 73 additions & 70 deletions src/server/templates/components/git_form.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script>
function changePattern(element) {
console.log("Pattern changed", element.value);
console.log('Pattern changed', element.value);
let patternType = element.value;
const files = document.getElementsByName("tree-line");
const files = document.getElementsByName('tree-line');

Array.from(files).forEach((element) => {
if (element.textContent.includes("Directory structure:")) {
if (element.textContent.includes('Directory structure:')) {
return;
}

Expand All @@ -21,15 +21,16 @@
function toggleAccessSettings() {
const container = document.getElementById('accessSettingsContainer');
const checkbox = document.getElementById('showAccessSettings');
const row = document.getElementById('controlsRow');
const examples = document.getElementById('exampleRepositories')
const show = checkbox.checked;

container.classList.toggle('hidden', !show);
row.classList.toggle('mb-12', show);
examples.classList.toggle('lg:mt-0', show);
}
</script>
<div class="relative">
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
<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]">
<div class="rounded-xl relative z-20 p-8 sm:p-10 border-[3px] border-gray-900 bg-[#fff4da]">
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
<!-- Ingest Form -->
Expand Down Expand Up @@ -63,77 +64,79 @@
<input type="hidden" name="pattern" value="">
<!-- Controls row: pattern selector, file size slider, PAT checkbox with PAT field below -->
<div id="controlsRow"
class="mt-7 flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10 relative">
<!-- Pattern selector + file size slider (side by side) -->
<div class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-10 flex-1 w-full">
<!-- Pattern selector -->
<div class="w-full md:w-[260px]">
<div class="relative">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
<!-- Pattern type selector -->
<div class="relative flex items-center">
<select id="pattern_type"
onchange="changePattern(this)"
name="pattern_type"
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
<option value="exclude"
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
Exclude
</option>
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
</select>
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<!-- Pattern input field -->
<input type="text"
id="pattern"
name="pattern"
placeholder="*.md, src/ "
value="{{ pattern if pattern else '' }}"
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
</div>
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">
<!-- Pattern selector -->
<div class="w-full relative self-center">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
<!-- Pattern type selector -->
<div class="relative flex items-center">
<select id="pattern_type"
onchange="changePattern(this)"
name="pattern_type"
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900 cursor-pointer">
<option value="exclude"
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
Exclude
</option>
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
</select>
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<!-- Pattern input field -->
<input type="text"
id="pattern"
name="pattern"
placeholder="*.md, src/ "
value="{{ pattern if pattern else '' }}"
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
</div>
<!-- File size selector -->
<div class="w-full md:w-[200px]">
<label for="file_size" class="block text-gray-700 mb-1">
Include files under: <span id="size_value" class="font-bold">50kB</span>
</label>
<input type="range"
id="file_size"
name="max_file_size"
min="0"
max="500"
required
value="{{ default_file_size }}"
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] ">
</div>
</div>
<!-- File size selector -->
<div class="w-full self-center">
<label for="file_size" class="block text-gray-700 mb-1">
Include files under: <span id="size_value" class="font-bold">50kB</span>
</label>
<input type="range"
id="file_size"
name="max_file_size"
min="0"
max="500"
required
value="{{ default_file_size }}"
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]">
</div>
<!-- PAT checkbox with PAT field below -->
<div class="relative flex flex-col items-start justify-center w-full md:w-64">
<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">
<!-- PAT checkbox -->
<div class="flex items-center space-x-2">
<input type="checkbox"
id="showAccessSettings"
class="w-4 h-4 rounded border-gray-900"
onchange="toggleAccessSettings()"
{% if token %}checked{% endif %}>
<label for="showAccessSettings" class="text-gray-900">Private Repository</label>
<label for="showAccessSettings"
class="flex gap-2 text-gray-900 cursor-pointer">
<div class="relative w-6 h-6">
<input type="checkbox"
id="showAccessSettings"
onchange="toggleAccessSettings()"
{% if token %}checked{% endif %}
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]" />
<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"
style="clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)"></span>
</div>
Private Repository
</label>
{% include "components/badge_new.jinja" %}
</div>
<!-- PAT field -->
<div id="accessSettingsContainer"
class="{% if not token %}hidden {% endif %}mt-2 w-full md:absolute md:left-0 md:top-full md:z-30">
class="{% if not token %}hidden {% endif %}mt-3 w-full">
<div class="relative w-full">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
Expand All @@ -157,8 +160,7 @@
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<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">
</path>
<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" />
</svg>
</a>
</div>
Expand All @@ -168,7 +170,8 @@
</form>
<!-- Example repositories section -->
{% if show_examples %}
<div class="mt-4">
<div id="exampleRepositories"
class="{% if token %}lg:mt-0 {% endif %} mt-4">
<p class="opacity-70 mb-1">Try these example repositories:</p>
<div class="flex flex-wrap gap-2">
{% for example in examples %}
Expand Down
Loading