1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01:00

Added list sorting styles, Yet to add functionality

This commit is contained in:
Dan Brown 2018-12-01 21:28:21 +00:00
parent 2a882a43ff
commit 0b976d9f91
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 65 additions and 5 deletions

View File

@ -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

View 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

View 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

View File

@ -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 {

View File

@ -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);
}
}
}

View File

@ -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">