Skip to content

Commit a13d5bc

Browse files
phiro56phiro56
authored
feat: restyle Commands Page with new layout and search functionality (#242)
feat: restyle Commands Page with new layout and search functionality - Add left sidebar with command categories and alphabetical list - Implement responsive design with mobile-first approach - Add search functionality with real-time filtering - Style command groups with improved readability - Add no-results message for empty searches <img width="1727" alt="Screenshot 2025-04-18 at 7 43 52 PM" src="https://github.com/user-attachments/assets/e9bdbf91-bef4-4277-b944-d4fc1233a59d" /> <img width="1728" alt="Screenshot 2025-04-18 at 7 43 59 PM" src="https://github.com/user-attachments/assets/00df6c44-0a11-4361-aa6a-b77d81886c71" /> Signed-off-by: Daniel Phillips <[email protected]>
1 parent 605cd1a commit a13d5bc

File tree

3 files changed

+196
-52
lines changed

3 files changed

+196
-52
lines changed

‎sass/_valkey.scss‎

Lines changed: 153 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,121 @@ p {
449449
}
450450
}
451451

452+
.left-aside {
453+
display: flex;
454+
width: 100%;
455+
background-color: #e2e8f0;
456+
flex-direction: column;
457+
458+
@include respond-min(768px) {
459+
flex-direction: row-reverse;
460+
}
461+
462+
h2 {
463+
font-size: 1.5rem;
464+
margin: 0 0 0.25rem 0;
465+
font-weight: 700;
466+
color: #000;
467+
text-transform: uppercase;
468+
469+
}
470+
471+
main {
472+
flex: 1;
473+
padding: 2rem;
474+
}
475+
476+
.main-inner {
477+
width: 100%;
478+
background-color: #fff;
479+
border-radius: 20px;
480+
padding: 1rem 2rem 2rem;
481+
}
482+
483+
aside {
484+
background-color: #f1f0fa;
485+
padding: 2rem;
486+
width: 100%;
487+
488+
@include respond-min(768px) {
489+
max-width: 420px;
490+
}
491+
492+
ul {
493+
list-style: none;
494+
padding: 0;
495+
margin: 0 0 2rem 0;
496+
497+
li {
498+
499+
a {
500+
display: block;
501+
background-color: #d1d9ff;
502+
padding: 1.2rem;
503+
margin-bottom: 1rem;
504+
color: #000;
505+
text-transform: uppercase;
506+
cursor: pointer;
507+
508+
&:hover {
509+
background-color: #b9c6ff;
510+
}
511+
}
512+
}
513+
}
514+
}
515+
}
516+
517+
.search-container {
518+
display: flex;
519+
align-items: center;
520+
margin: 0 -2rem 2rem;
521+
padding: 0 2rem 1rem;
522+
border-bottom: 1px solid rgb(104, 147, 238);
523+
524+
label {
525+
margin-right: 10px;
526+
font-size: 80%;
527+
}
528+
529+
input {
530+
flex: 1;
531+
width: 100%;
532+
min-width: 0px;
533+
outline: none;
534+
padding: 1rem;
535+
border: 1px solid #ccc;
536+
background: #fff;
537+
border-radius: 50px;
538+
font-size: 80%;
539+
540+
&:focus {
541+
border-color: #6983ff;;
542+
}
543+
}
544+
}
545+
546+
.no-results-message {
547+
color: #30176e;
548+
padding: 5rem 2rem 7rem;
549+
text-align: center;
550+
551+
span {
552+
font-size: 6rem;
553+
font-weight: 800;
554+
}
555+
556+
h4 {
557+
font-size: 1.75rem;
558+
margin: 0.75rem 0;
559+
}
560+
561+
p {
562+
font-size: 1.75rem;
563+
margin: 0;
564+
}
565+
}
566+
452567
.row {
453568
display: flex;
454569
margin: 0 auto;
@@ -505,6 +620,25 @@ p {
505620
@include sans-serif;
506621
}
507622

623+
.styled-title {
624+
padding-top: var(--chakra-space-16);
625+
padding-bottom: var(--chakra-space-16);
626+
color: var(--chakra-colors-white);
627+
text-align: center;
628+
background-image: linear-gradient(rgb(59, 42, 102), rgb(78, 81, 191));
629+
padding: 80px;
630+
631+
h1 {
632+
@include sans-serif;
633+
font-size: 4rem;
634+
font-weight: 700;
635+
line-height: 1;
636+
color: #fff;
637+
margin: 0;
638+
padding: 0;
639+
}
640+
}
641+
508642
#principles {
509643
dl {
510644
counter-reset: principles;
@@ -776,19 +910,28 @@ pre table {
776910
}
777911

778912
.command-group {
779-
.command-entry {
780-
border-bottom: 1px dotted $line;
781-
margin-top: 0.5rem;
782-
margin-bottom: 0.5rem;
783-
padding-top: 1rem;
913+
margin-bottom: 2rem;
914+
915+
h2 {
916+
border-bottom: 1px solid $line;
784917
padding-bottom: 1rem;
785-
918+
margin: 0;
919+
920+
span {
921+
font-weight: 400;
922+
}
786923
}
787-
.command-entry,
788-
.command-group-meta {
789-
margin-left: 1em;
924+
925+
.command-entry {
926+
font-size: 1.5rem;
927+
border-bottom: 1px solid $line;
928+
padding: 1.25rem 0;
929+
930+
a {
931+
text-decoration: underline;
932+
}
933+
790934
}
791-
792935
}
793936

794937
.index-entry {

‎templates/commands.html‎

Lines changed: 28 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% extends "right-aside.html" %}
1+
{% extends "left-aside.html" %}
22

33
{% import "macros/command.html" as commands %}
44

@@ -12,9 +12,17 @@
1212
{% set commands_entries = [] %}
1313
<!-- command search box -->
1414
<div class="search-container">
15+
<label>Search Commands:</label>
1516
<input type="text" id="search-box" placeholder="Search commands..." onkeyup="searchCommands()" />
1617
</div>
1718

19+
<!-- No results message -->
20+
<div id="no-results-message" class="no-results-message" style="display: none;">
21+
<span>&lt;/&gt;</span>
22+
<h4>We couldn't find any results matching your search</h4>
23+
<p>Check your spelling or try different keywords</p>
24+
</div>
25+
1826
{% for page in section.pages %}
1927
{% for json_path in [
2028
commands::command_json_path(slug=page.slug),
@@ -44,25 +52,25 @@
4452

4553
{% for command_group_name, command_group in grouped %}
4654
<div class="command-group">
47-
{% set command_group_description_name = command_group_name | replace(from="_", to="-") %}
48-
<h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_description_name].display }}</h2>
49-
<div class="command-group-meta">
50-
<p><small>{{ group_descriptions[command_group_description_name].description }}</small></p>
51-
<hr />
52-
</div>
53-
{% for entry in command_group | sort(attribute="0") %}
54-
<div class="command-entry"><code><a href="{{ entry[1] }}">{{ entry[0] }}</a></code> {{entry[2]}}</div>
55-
{% endfor %}
56-
<div class="command-group-meta">
57-
<small><a href="#top">Back to top</a></small>
58-
</div>
55+
{% set command_group_description_name = command_group_name | replace(from="_", to="-") %}
56+
<h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_description_name].display }}
57+
<span>{{ group_descriptions[command_group_description_name].description }}</span>
58+
</h2>
59+
{% for entry in command_group | sort(attribute="0") %}
60+
<div class="command-entry"><code><a href="{{ entry[1] }}">{{ entry[0] }}</a></code> {{entry[2]}}</div>
61+
{% endfor %}
62+
<div class="command-group-meta">
63+
<small><a href="#top">Back to top</a></small>
64+
</div>
5965
</div>
6066
{% endfor %}
6167

6268
<script>
6369
function searchCommands() {
6470
var input = document.getElementById("search-box").value.toLowerCase();
6571
var groups = document.querySelectorAll(".command-group");
72+
var noResultsMessage = document.getElementById("no-results-message");
73+
var totalVisible = 0;
6674

6775
groups.forEach(function (group) {
6876
var items = group.querySelectorAll(".command-entry");
@@ -72,12 +80,16 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
7280
if (text.includes(input)) {
7381
item.style.display = "";
7482
found = true;
83+
totalVisible++;
7584
} else {
7685
item.style.display = "none";
7786
}
7887
});
7988
group.style.display = found ? "" : "none";
8089
});
90+
91+
// Show/hide no results message based on search results
92+
noResultsMessage.style.display = totalVisible === 0 ? "block" : "none";
8193
}
8294
</script>
8395

@@ -86,34 +98,6 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
8698
document.getElementById("search-box").focus();
8799
});
88100
</script>
89-
90-
<style>
91-
.search-container {
92-
margin: 20px 0;
93-
text-align: center;
94-
}
95-
96-
#search-box {
97-
width: 60%;
98-
padding: 10px;
99-
font-size: 16px;
100-
border: 2px solid #ddd;
101-
border-radius: 4px;
102-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
103-
transition: border-color 0.3s ease, box-shadow 0.3s ease;
104-
}
105-
106-
#search-box:focus {
107-
border-color: #007bff;
108-
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
109-
}
110-
111-
#search-box::placeholder {
112-
color: #aaa;
113-
font-style: italic;
114-
}
115-
</style>
116-
117101
{% endblock main_content %}
118102

119103
{% block related_content %}
@@ -138,5 +122,7 @@ <h2>Alphabetical Command List</h2>
138122

139123

140124
{% block subhead_content %}
141-
<h1 class="page-title">Documentation: Command Reference</h1>
125+
<div class="styled-title">
126+
<h1>Documentation: Command Reference</h1>
127+
</div>
142128
{% endblock subhead_content %}

‎templates/left-aside.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% extends "default.html" %}
2+
3+
{% block content %}
4+
{% block subhead_content %}{% endblock subhead_content %}
5+
<div class="left-aside">
6+
<main>
7+
<div class="main-inner">
8+
{% block main_content %}{% endblock main_content %}
9+
</div>
10+
</main>
11+
<aside>
12+
{% block related_content %}{% endblock related_content %}
13+
</aside>
14+
</div>
15+
{% endblock content %}

0 commit comments

Comments
 (0)