Open
Description
Description:
The presentation style for the "Examples to try" links differs between the "Scoring Search" tab (ScoringSearch.vue) and the "Variant Search" tab (VariantSearch.vue) on the main search page.
- Scoring Search: Uses a more structured grid layout (
example-grid) with icons, bold titles (example-title), and smaller detail text (example-details), including a highlighted example. Links arerouter-linkcomponents pointing to theScoringView. - Variant Search: Uses simple paragraph tags (
<p>) with basicrouter-linkcomponents pointing to theVariantView. The styling is less distinct.
This inconsistency can be slightly jarring for users switching between tabs.
Expected Behavior:
The "Examples to try" section should have a consistent visual appearance and structure across all relevant search tabs where examples are provided. The more detailed and visually appealing style used in ScoringSearch.vue should ideally be adopted for other tabs as well.
Tasks:
- Analyze
ScoringSearch.vue: Examine the CSS classes (example-text,example-grid,example-link,example-content,example-title,example-details,example-highlight) and the HTML structure (nested divs, icons) used for the example links. - Refactor
VariantSearch.vueTemplate:- Replace the current
<p>tags containing the examplerouter-links. - Implement the same HTML structure (
divs with classes likeexample-grid,example-link,example-content, etc.) as used inScoringSearch.vue. - Add appropriate icons (e.g.,
mdi-dna). - Apply the corresponding CSS classes to achieve the desired styling.
- Replace the current
- Refactor
GeneSearch.vueTemplate (If Applicable):- Check if
GeneSearch.vueincludes example links. If it does, apply the same refactoring as in Step 2. If not, this step can be skipped.
- Check if
- Consolidate Styles (Optional but Recommended):
- Consider extracting the common CSS rules for example links (
.example-grid,.example-link, etc.) into a shared CSS file or a global style block to avoid duplication, if not already done.
- Consider extracting the common CSS rules for example links (
- Verify: Ensure the example links look consistent across all relevant search tabs in both light and dark themes.
Motivation:
Creates a more consistent and polished user interface across the different search modes, improving the overall user experience and visual appeal.