Merge pull request #22 from pressbooks/front-end-improvements

feat: front end improvements
pressbooks · Sep 11, 2022 · 3644f1e · 3644f1e
2 parents a26824a + f141b75
commit 3644f1e
Show file tree

Hide file tree

Showing 22 changed files with 65 additions and 59 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -1,5 +1,4 @@
-/*TODO: check if we need base.css*/
-/*@import 'tailwindcss/base.css';*/
+@import 'tailwindcss/base.css';
 @import 'tailwindcss/components.css';
 @import 'tailwindcss/utilities.css';
 
@@ -17,4 +16,5 @@
   --bg-chip: #FFF;
   --support-color: #5a6171;
   --color-txt: #333333;
+  --border-color: #EEE;
 }
diff --git a/assets/css/book-card.css b/assets/css/book-card.css
@@ -1,21 +1,21 @@
 .book-cards .book-card {
-  @apply p-2 flex items-start justify-center gap-7 border rounded shadow-lg bg-white;
+  @apply p-4 flex items-start justify-center gap-6 border rounded shadow-lg bg-white;
 }
 
 .book-cards .book-card .book-cover {
-  @apply w-full max-w-xs;
+  @apply w-2/5;
 }
 
 .book-cards .book-card .book-cover img {
   @apply w-full rounded shadow object-cover;
 }
 
 .book-cards .book-card .book-info {
-  @apply mt-10 flex-1;
+  @apply mt-4 flex-1;
 }
 
 .book-cards .book-card .book-info h2 {
-  @apply text-2xl text-left font-medium normal-case;
+  @apply text-2xl text-left font-bold normal-case;
   color: var(--primary);
 }
 
@@ -28,7 +28,7 @@
 }
 
 .book-cards .book-card .book-info > p span:not(:first-child) {
-  @apply before:mr-1 before:content-['|'];
+  @apply before:mr-1 before:content-['|'] before:font-semibold;
 }
 
 .book-cards .book-card .book-info .book-extra-info {

diff --git a/assets/css/dropdown.css b/assets/css/dropdown.css
@@ -8,15 +8,15 @@
 
 .dropdown button.trigger {
   border: inherit;
-  @apply flex items-center gap-2 bg-white px-5 py-3 border-b border-b-gray-900 rounded-md shadow normal-case font-normal focus:outline-none;
+  @apply flex items-center gap-2 bg-white px-5 py-3 rounded-md shadow normal-case font-normal focus:outline-none;
 }
 
 .dropdown button.trigger.open {
   @apply rounded-b-none;
 }
 
-.dropdown button.trigger span {
-  @apply h-5 w-5 text-gray-400;
+.dropdown button.trigger svg {
+  @apply h-4 w-4 text-gray-500;
 }
 
 .dropdown button.trigger:focus {

diff --git a/assets/css/header.css b/assets/css/header.css
@@ -5,10 +5,9 @@
 }
 
 .page-template-page-catalog .header .header__inside {
-  @apply px-4 py-0;
+  @apply px-4 py-1;
 }
 
-
 .page-template-page-catalog .header__nav-icon__icon,
 .page-template-page-catalog .header__nav-icon__icon:after,
 .page-template-page-catalog .header__nav-icon__icon:before {
@@ -26,8 +25,8 @@
   @apply px-4 flex mx-auto w-full max-w-8xl;
 }
 
-.page-template-page-catalog .hero h1{
-  @apply normal-case;
+.page-template-page-catalog .hero h1 {
+  @apply text-4xl normal-case font-bold mx-auto leading-snug lg:text-5xl lg:max-w-screen-md;
   color: var(--primary);
 }
 
@@ -36,5 +35,5 @@
 }
 
 .page-template-page-catalog .hero-content div {
-  @apply lg:w-7/12 mx-auto;
+  @apply mx-auto lg:max-w-screen-md;
 }
diff --git a/assets/css/pagination.css b/assets/css/pagination.css
@@ -6,7 +6,7 @@
   @apply m-0 p-0 gap-1 inline-flex list-none;
 }
 
-.pagination .page-list .page-item a, .pagination .page-list .page-item span {
+.pagination .page-list .page-item a, .pagination .page-list .page-item span:not(.sr-only) {
   @apply relative inline-flex items-center bg-transparent border border-transparent rounded px-4 py-2 text-sm font-medium focus:outline-none;
   color: var(--accent);
 }
@@ -15,7 +15,7 @@
   outline-color: var(--accent);
 }
 
-.pagination .page-list .page-item.active span {
+.pagination .page-list .page-item.active a {
   background-color: var(--accent);
   color: var(--primary-fg);
 }
@@ -70,6 +70,7 @@
 .pagination .go-to-page > div button {
   @apply py-2 px-3 border-y border-none rounded-l-none rounded-r normal-case font-normal hover:shadow focus:outline-none;
   background-color: var(--accent);
+  color: var(--primary-fg);
 }
 
 .pagination .go-to-page > div button:focus {

diff --git a/assets/css/search-box.css b/assets/css/search-box.css
@@ -3,7 +3,7 @@
 }
 
 .search-box .search {
-  @apply w-full flex flex-1 items-center bg-white border-b border-b-gray-900 rounded my-5 md:my-0;
+  @apply w-full flex flex-1 items-center bg-white shadow rounded my-5 md:my-0;
 }
 
 .search-box .refine-filters {
@@ -50,7 +50,7 @@
 }
 
 .search-box .results-per-page, .search-box .results-sort-by {
-  @apply py-3 px-4 rounded border-b border-gray-400 shadow focus:outline-none
+  @apply py-3 px-4 rounded shadow focus:outline-none
 }
 
 .search-box .results-per-page:focus, .search-box .results-sort-by:focus {

diff --git a/assets/css/side-filters.css b/assets/css/side-filters.css
@@ -1,7 +1,7 @@
 .side-filters .side-filter > button, .side-filters .side-filter > label {
   @apply py-3 px-4 w-full flex items-center justify-between border-b border-transparent rounded-none normal-case font-normal focus:outline-none;
   background-color: var(--primary-fg);
-  border-bottom-color: var(--color-txt);
+  border-bottom-color: var(--border-color);
   color: var(--color-txt);
   font-weight: 700;
 }
@@ -19,11 +19,15 @@
   outline-color: var(--primary-dark);
 }
 
-.side-filters .side-filter > button > span.icon {
-  @apply h-4 w-4;
+.side-filters .side-filter > button svg {
+  @apply h-4 w-4 transform duration-300;
   color: var(--accent);
 }
 
+.side-filters .side-filter > button[aria-expanded=true] svg {
+  @apply rotate-180;
+}
+
 .side-filters .side-filter:first-child {
   @apply rounded-t;
 }
@@ -67,11 +71,11 @@
 }
 
 .side-filters .side-filter.selectable ul li:hover {
-  background-color: #eef2f5;
+  background-color: var(--border-color);
 }
 
 .side-filters .side-filter.selectable input:not([type=checkbox]) {
-  @apply py-2 px-2 w-full border-b text-sm focus:outline-none;
+  @apply py-2 px-4 w-full border-b text-sm focus:outline-none;
 }
 
 .side-filters .side-filter.selectable input:focus {
@@ -97,7 +101,7 @@
 }
 
 .side-filters .reset-filters, .side-filters .submit-filters {
-  @apply w-full p-3 text-xs font-bold uppercase border hover:shadow focus:outline-none;
+  @apply w-full p-3 text-base font-bold uppercase border hover:shadow focus:outline-none;
   color: var(--primary-fg);
 }
 

diff --git a/assets/images/catalogbg.jpg b/assets/images/catalogbg.jpg
diff --git a/assets/images/catalogbg.png b/assets/images/catalogbg.png
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -30,7 +30,7 @@ window.selectableFilters = ({open, items, selected}) => {
     search: '',
     displayAmount: 10,
     toggle() {
-      this.open ^= true;
+      this.open = ! this.open;
     },
     empty() {
       return this.filteredItems().length === 0;
@@ -64,19 +64,21 @@ window.dropdown = ({selected, options}) => {
     options: options,
     toggle() {
       if (this.open) {
-        return this.close()
+        return this.close();
       }
 
-      this.$refs.button.focus()
+      this.$refs.button.focus();
 
-      this.open = true
+      this.open = true;
     },
     close(focusAfter) {
-      if (!this.open) return
+      if (!this.open) {
+        return;
+      }
 
-      this.open = false
+      this.open = false;
 
-      focusAfter && focusAfter.focus()
+      focusAfter && focusAfter.focus();
     }
   };
 };

diff --git a/dist/assets/app.2ef07558.css b/dist/assets/app.2ef07558.css
diff --git a/dist/assets/app.6a0de658.js → dist/assets/app.3fae8142.js b/dist/assets/app.6a0de658.js → dist/assets/app.3fae8142.js
diff --git a/dist/assets/app.80483770.css b/dist/assets/app.80483770.css
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,14 +1,14 @@
 {
   "assets/js/app.js": {
-    "file": "assets/app.6a0de658.js",
+    "file": "assets/app.3fae8142.js",
     "src": "assets/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app.2ef07558.css"
+      "assets/app.80483770.css"
     ]
   },
   "assets/js/app.css": {
-    "file": "assets/app.2ef07558.css",
+    "file": "assets/app.80483770.css",
     "src": "assets/js/app.css"
   }
 }
diff --git a/resources/views/catalog.blade.php b/resources/views/catalog.blade.php
@@ -4,7 +4,7 @@
     <div class="hero" style="background-image: url({{$catalogBg}})">
         <div>
             <div class="hero-content">
-                <h1>{{ get_the_title() }}</h1>
+                <h1>{!! wp_kses_post(get_the_title()) !!}</h1>
                 <div>
                     {!! wp_kses_post(get_the_content()) !!}
                 </div>

diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
@@ -17,9 +17,7 @@ class="trigger"
 		>
 			{{ $options[$request[$name]] ?? $options[$default] }}
 
-			<span>
-				@include('PressbooksNetworkCatalog::icons.chevron-down')
-			</span>
+            @include('PressbooksNetworkCatalog::icons.chevron-down')
 		</button>
 
 		<input type="hidden" name="{{ $name }}" :value="selected">

diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
@@ -10,7 +10,7 @@ class="pagination"
                     <a
                         href="{{ $request->fullUrlWithQuery(['pg' => $pagination['currentPage'] - 1]) }}"
                         rel="prev"
-                        aria-label="{{ __('Previous page', 'pressbooks-network-catalog') }}"
+                        aria-label="{{ __('Go to previous page', 'pressbooks-network-catalog') }}"
                     >
                         @include('PressbooksNetworkCatalog::icons.chevron-left')
                     </a>
@@ -23,13 +23,19 @@ class="pagination"
                         <span>{{ $page }}</span>
                     </li>
                 @else
-                    @if($page === (int) ($request->pg ?? 1))
+                    @if($page === $pagination['currentPage'])
                         <li class="page-item active" aria-current="true">
-                            <span>{{ $page }}</span>
+                            <a href="{{ $request->fullUrlWithQuery(['pg' => $page]) }}">
+                                <span class="sr-only">{{ __('Current page, page', 'pressbooks-network-catalog') }}</span>
+                                {{ $page }}
+                            </a>
                         </li>
                     @else
                         <li class="page-item">
-                            <a href="{{ $request->fullUrlWithQuery(['pg' => $page]) }}">{{ $page }}</a>
+                            <a href="{{ $request->fullUrlWithQuery(['pg' => $page]) }}">
+                                <span class="sr-only">{{ __('Go to page', 'pressbooks-network-catalog') }}</span>
+                                {{ $page }}
+                            </a>
                         </li>
                     @endif
                 @endif
@@ -40,7 +46,7 @@ class="pagination"
                     <a
                         href="{{ $request->fullUrlWithQuery(['pg' => $pagination['currentPage'] + 1]) }}"
                         rel="next"
-                        aria-label="{{ __('Next page', 'pressbooks-network-catalog') }}"
+                        aria-label="{{ __('Go to next page', 'pressbooks-network-catalog') }}"
                     >
                         @include('PressbooksNetworkCatalog::icons.chevron-right')
                     </a>
@@ -52,7 +58,7 @@ class="pagination"
             <label :for="$id('pagination-go-to')">{{ __('Go to page', 'pressbooks-network-catalog') }}</label>
             <div>
                 <div class="go-to-page-input">
-                    <input type="text" name="pg" :id="$id('pagination-go-to')" placeholder="##"/>
+                    <input type="text" name="pg" :id="$id('pagination-go-to')" placeholder="##" />
                 </div>
                 <button type="submit">{{ __('Go', 'pressbooks-network-catalog') }}</button>
             </div>

diff --git a/resources/views/components/selectable-filter.blade.php b/resources/views/components/selectable-filter.blade.php
@@ -8,9 +8,7 @@ class="side-filter selectable"
 >
 	<button @click="toggle" :aria-expanded="open" type="button">
 		<span>{{ $title }}</span>
-		<span class="icon">
-			@include('PressbooksNetworkCatalog::icons.chevron-down')
-		</span>
+        @include('PressbooksNetworkCatalog::icons.chevron-down')
 	</button>
 	<div x-show="open" x-cloak>
 		@if($searchable ?? false)

diff --git a/resources/views/partials/book-card.blade.php b/resources/views/partials/book-card.blade.php
@@ -5,11 +5,11 @@
 	<div class="book-info">
 		<h2><a href="{{ $book->url }}">{{ $book->title }}</a></h2>
 		<p>
-			<span>{{ $book->license }}</span>
+			<span>{{ $book->license }}&nbsp;</span>
 			@if( $book->h5pCount)
-				<span>{{ sprintf(__('%d H5P Activites', 'pressbooks-network-catalog'), $book->h5pCount) }}</span>
+				<span>&nbsp;{{ sprintf(__('%d H5P Activites', 'pressbooks-network-catalog'), $book->h5pCount) . ' ' }}&nbsp;</span>
 			@endif
-			<span>{{ $book->language }}</span>
+			<span>&nbsp;{{ $book->language }}</span>
 		</p>
 
 		<div class="book-extra-info">

diff --git a/resources/views/partials/sidebar-filters.blade.php b/resources/views/partials/sidebar-filters.blade.php
@@ -22,9 +22,7 @@
 <div class="side-filter" x-data="{open: {{ !empty($request->from) || !empty($request->to) ? 'true' : 'false'}}}">
 	<button @click="open = !open" :aria-expanded="open" type="button">
 		<span>{{ __('Last Updated', 'pressbooks-network-catalog') }}</span>
-        <span class="icon">
-			@include('PressbooksNetworkCatalog::icons.chevron-down')
-		</span>
+        @include('PressbooksNetworkCatalog::icons.chevron-down')
 	</button>
     <div id="last-updated-wrapper" x-cloak :class="!open && 'hidden'" x-data="{ tab: 'from', selectedFrom: formatDate('{{$request->from ?? 'DD/MM/YYYY'}}'), selectedTo: formatDate('{{$request->to ?? 'DD/MM/YYYY'}}') }">
         <nav class="last-update-tabs">
@@ -64,7 +62,7 @@
 
 <div class="side-filter checkbox">
 	<label>
-		<span>{{ __('Has H5P Activities', 'pressbooks-network-catalog') }}</span>
+		<span>{{ __('H5P Activities', 'pressbooks-network-catalog') }}</span>
 		<input
 			id="h5p"
 			name="h5p"

diff --git a/src/ActiveFilters.php b/src/ActiveFilters.php
@@ -33,7 +33,7 @@ public function getFilters(Request $request): Collection
 		if ($request->has('h5p')) {
 			$this->items->push([
 				'key' => 'h5p',
-				'label' => __('Has H5P Activities', 'pressbooks-network-catalog'),
+				'label' => __('H5P Activities', 'pressbooks-network-catalog'),
 				'type' => 'h5p',
 			]);
 		}

diff --git a/src/CatalogManager.php b/src/CatalogManager.php
@@ -49,6 +49,6 @@ protected function getActiveFilters(): Collection
 
     protected function getBackgroundImage(): string
     {
-        return plugin_dir_url( __DIR__ ) . 'assets/images/catalogbg.png';
+        return plugin_dir_url( __DIR__ ) . 'assets/images/catalogbg.jpg';
     }
 }