Elara6331/distrohop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Add some hints and improve UI design
All checks were successful
ci/woodpecker/push/build/1 Pipeline was successful
Details
ci/woodpecker/push/build/2 Pipeline was successful
Details
ci/woodpecker/push/manifest Pipeline was successful
Details

Browse Source
This commit is contained in:
Elara 2025-02-14 21:02:48 -08:00
parent ad1cac023c
commit 3cb97935eb
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/icons/material-symbols/info-outline.svg Normal file
View File

@ -0,0 +1 @@
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 474 B

24
templates/home.html
View File

@ -96,7 +96,7 @@
<div class="field mt-4 is-align-self-stretch">
<p class="control">
<button class="button is-dark is-rounded is-fullwidth" type="submit">
<button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
<div class="icon-text">
<span class="icon is-aligned m-0">#icon("map/search")</span>
<span>Search</span>
@ -110,11 +110,17 @@
<div x-cloak x-data="{tags: []}" x-transition:enter x-show="activeTab == 'tags'" class="columns">
<div class="column is-half is-offset-one-quarter has-text-centered">
<form action="/search/tags" x-ref="tagsForm">
<template x-if="tags.length == 0">
<div class="has-text-centered">
<p class="is-size-5">Tags you add will appear here...</p>
</div>
</template>
<div class="field is-grouped is-grouped-multiline">
<template x-for="(tag, idx) in tags">
<div>
<div class="tags has-addons">
<span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
<span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-dark is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
</div>
<input class="is-hidden" name="tag" :value="tag.join('=')">
</div>
@ -122,7 +128,17 @@
<span></span>
</div>
<div class="mt-5 field has-addons">
<div class="icon-text mt-5 has-text-grey">
<span class="icon is-aligned">#icon("material-symbols/info-outline")</span>
<p class="is-size-7 has-text-grey">
Try searching for
<code class="is-clickable" @click="tags.push(['lib', 'pcre2-8'])">lib=pcre2-8</code>,
<code class="is-clickable" @click="tags.push(['lib', 'libaudit.so.1'])">lib=libaudit.so.1</code>,
<code class="is-clickable" @click="tags.push(['bin', 'firefox'])">bin=firefox</code>,
etc.
</p>
</div>
<div class="mt-0 field has-addons">
<div class="control is-expanded">
<input @keydown.comma.prevent="pushTag(tags, $refs.newTagInput)" class="input" x-ref="newTagInput" placeholder="bin=nano">
</div>
@ -149,7 +165,7 @@
</p>
</div>
<button class="button is-dark is-rounded is-fullwidth" type="submit">
<button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
<div class="icon-text">
<span class="icon is-aligned m-0">#icon("map/search")</span>
<span>Search</span>