Added list sorting styles, Yet to add functionality

diff --git a/resources/assets/icons/add.svg b/resources/assets/icons/add.svg
index 75e3753dc4147668c1c5a1d21b14b036ee9dc948..edd367b2d8c17c8e5d65b7e2ae14e729ac949193 100644 (file)
--- a/resources/assets/icons/add.svg
+++ b/resources/assets/icons/add.svg
@@ -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>
\ No newline at end of file
+<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>
\ No newline at end of file

diff --git a/resources/assets/icons/sort-down.svg b/resources/assets/icons/sort-down.svg
new file mode 100644 (file)
index 0000000..61fa6c7
--- /dev/null
+++ b/resources/assets/icons/sort-down.svg
@@ -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>
\ No newline at end of file

diff --git a/resources/assets/icons/sort-up.svg b/resources/assets/icons/sort-up.svg
new file mode 100644 (file)
index 0000000..985cc62
--- /dev/null
+++ b/resources/assets/icons/sort-up.svg
@@ -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>
\ No newline at end of file

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index b5b147a32ed03bdb56ddda16aae7ec4354080540..cde2dfcca60e60277186ff1964a94aebc6984a0b 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -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 {

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 2c657891a5e15e4324ac60c3c02383e62d7c7080..ff88cb1d4aa2db0f2b96b7391a5e91b537ab4971 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -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);
+    }
+  }
+}
\ No newline at end of file

diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php
index 8e2d5c93d2a20f9ba62e0ed9f1bda5b94c017bae..0e5f5c88718822fb870e065ae95d70ec294c9e6e 100644 (file)
--- a/resources/views/books/list.blade.php
+++ b/resources/views/books/list.blade.php
@@ -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">