mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Added list sorting styles, Yet to add functionality
This commit is contained in:
parent
2a882a43ff
commit
0b976d9f91
@ -1,4 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13.3h-5.7V19h-2.6v-5.7H5v-2.6h5.7V5h2.6v5.7H19z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
Before Width: | Height: | Size: 161 B After Width: | Height: | Size: 166 B |
1
resources/assets/icons/sort-down.svg
Normal file
1
resources/assets/icons/sort-down.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.034l6.57-6.554h-4.927V2.966h-3.286V14.48H5.43z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 168 B |
1
resources/assets/icons/sort-up.svg
Normal file
1
resources/assets/icons/sort-up.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.966L5.43 9.52h4.927v11.514h3.286V9.52h4.927z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 165 B |
@ -197,6 +197,9 @@ div[class^="col-"] img {
|
||||
display: grid;
|
||||
grid-column-gap: $-l;
|
||||
grid-row-gap: $-l;
|
||||
&.half {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
&.third {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
@ -956,6 +959,9 @@ div[class^="col-"] img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
&.v-center {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
|
@ -255,3 +255,36 @@ $btt-size: 40px;
|
||||
height:100%;
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.list-sort-container {
|
||||
display: inline-block;
|
||||
.list-sort {
|
||||
display: inline-grid;
|
||||
margin-left: $-s;
|
||||
grid-template-columns: 120px 40px;
|
||||
border: 2px solid #DDD;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-sort-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
color: #888;
|
||||
}
|
||||
.list-sort-type {
|
||||
text-align: left;
|
||||
}
|
||||
.list-sort-type, .list-sort-dir {
|
||||
padding: $-xs $-s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-sort-dir {
|
||||
border-left: 2px solid #DDD;
|
||||
fill: #888;
|
||||
.svg-icon {
|
||||
transition: transform ease-in-out 120ms;
|
||||
}
|
||||
&:hover .svg-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
@ -1,6 +1,28 @@
|
||||
|
||||
<div class="content-wrap card {{ $booksViewType === 'list' ? 'thin' : '' }}">
|
||||
<h1 class="list-heading">{{ trans('entities.books') }}</h1>
|
||||
<div class="grid halves v-center">
|
||||
<h1 class="list-heading">{{ trans('entities.books') }}</h1>
|
||||
<div class="text-right">
|
||||
|
||||
<div class="list-sort-container">
|
||||
<div class="list-sort-label">Sort</div>
|
||||
<div class="list-sort">
|
||||
<div class="list-sort-type dropdown-container" dropdown>
|
||||
<div dropdown-toggle>Name</div>
|
||||
<ul>
|
||||
<li><a href="#">Name</a></li>
|
||||
<li><a href="#">Created Date</a></li>
|
||||
<li><a href="#">Popularity</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-sort-dir">
|
||||
@icon('sort-up')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@if(count($books) > 0)
|
||||
@if($booksViewType === 'list')
|
||||
<div class="entity-list">
|
||||
|
Loading…
Reference in New Issue
Block a user