Skip to content

feat: Add TOC filtering #585

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
Sep 25, 2024
Merged

feat: Add TOC filtering #585

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9c8f605
feat: Add TOC filtering
BenjaminMichaelis Sep 24, 2024
4961598
PR Feedback
BenjaminMichaelis Sep 24, 2024
2cc340d
PR Feedback
BenjaminMichaelis Sep 24, 2024
3a1d8b8
fix: Remove remaining stateful mutations
BenjaminMichaelis Sep 25, 2024
fdce1a7
Merge branch 'main' into BMichaelis/TOCFiltering
BenjaminMichaelis Sep 25, 2024
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
30 changes: 12 additions & 18 deletions EssentialCSharp.Web/Views/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@
<Transition name="slide-fade">
<div v-cloak v-if="sidebarShown" :class="{sidebarSmall: smallScreen}" class="sidebar toc-padding" id="sidebar">
<div v-cloak class="toc-menu">

<div style="display:grid; width:100%; margin-bottom:.75rem;">
<button v-on:click="openSearch" type="button" class="DocSearch DocSearch-Button DocSearch-Style" aria-label="Search">
<span class="DocSearch-Button-Container">
Expand Down Expand Up @@ -182,20 +181,23 @@
<span class="fs-5">Announcements</span>
</a>
</div>
<div>
<h5>
<div style="display: flex; align-items: center;">
<h5 style="margin-right: 8px;">
Contents
</h5>
<i class="fa-solid fa-filter" v-on:click="enableTocFilter = enableTocFilter === 'filter' ? 'none' : 'filter';"></i>
</div>
<div v-if="enableTocFilter === 'filter'" class="filter-input-container">
<input type="text" class="filter-input" v-model="searchQuery" placeholder="Filter TOC..." />
<button class="filter-btn">
<i class="fa fa-search icon-light"></i>
</button>
</div>
<button class="toc-label hide" v-on:click="sidebarTab = 'search'" id="search-btn">
SEARCH
<div v-if="sidebarTab == 'search'" class="bottom-border" id="search-border"></div>
</button>
</div>

<div v-cloak v-if="sidebarTab == 'toc'" class="toc-tree" id="toc">
<ul class="tree">
<toc-tree v-for="item in tocData" :item="item" :expanded-tocs="expandedTocs" :current-page="currentPage"></toc-tree>
<toc-tree v-for="item in filteredTocData" :item="item" :expanded-tocs="expandedTocs" :current-page="currentPage"></toc-tree>
</ul>
</div>
<div v-cloak>
Expand All @@ -206,14 +208,6 @@
}
</small>
</div>
<div v-cloak v-if="sidebarTab == 'search'" id="searchBar" class="search-window">
<div class="input">
<input type="text" />
<button class="search-btn">
<i class="fa fa-search icon-light"></i>
</button>
</div>
</div>
</div>
</Transition>
</div>
Expand Down Expand Up @@ -298,8 +292,8 @@
}
PREVIOUS_PAGE = @Json.Serialize(ViewBag.PreviousPage)
NEXT_PAGE = @Json.Serialize(ViewBag.NextPage)
TOC_DATA = @Json.Serialize(tocData)
NEXT_PAGE = @Json.Serialize(ViewBag.NextPage)
TOC_DATA = @Json.Serialize(tocData)
</script>

@* Recursive vue component template for rendering the table of contents. *@
Expand Down
31 changes: 31 additions & 0 deletions EssentialCSharp.Web/wwwroot/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,6 +385,37 @@ a:hover {
}
}

.filter-input-container {
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem;
box-sizing: border-box;
}

.filter-input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}

.filter-btn {
padding: 0.5rem;
border: 1px solid #ccc;
border-left: none;
background-color: #007bff;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
}

.filter-btn .fa-search {
font-size: 1rem;
}


/* Table of Contents For Chapters */

.toc-menu {
Expand Down
Loading
Loading