Merge pull request #38 from cssbubble/main

advance search fixed at top navbar
2022-06-12 00:56:19 +01:00 · 2022-06-12 00:56:19 +01:00 · 811c824043
commit 811c824043
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@ -1,8 +1,8 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
+  import Icon from "./Icon.svelte"
  const dispatch = createEventDispatcher();

-  export let showSearch = null;
  let query = '';
  let result_items = [];
  let result_topics = [];
@ -11,7 +11,8 @@

  function resetQuery(){
    query = '';
-    showSearch =false;
+    result_items=[];
+    result_topics=[];
  }

  $: query && fetch(`/learn/items.json?_shape=array&name__contains=${query}&_size=6`)
@ -26,15 +27,15 @@
            result_topics = data;
        });
  
-  $: showSearch && elm && elm.focus();
+  $: elm && elm.focus();
  

 </script>

-<sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
+<!-- <sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
  <div class="transform overflow-hidden rounded-xl bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all fixed top-32 sm:inset-x-auto w-72 md:w-96">
    <div class="relative">
-      <!-- Heroicon name: solid/search -->
+      
      <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
@ -42,9 +43,9 @@
    </div>

    {#if !query }
-    <!-- Default state, show/hide based on command palette state -->
+   
    <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
-      <!-- Heroicon name: outline/globe -->
+      
      <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
@ -54,7 +55,7 @@
    
    {:else if result_items.length + result_topics.length > 0}

-    <!-- Results, show/hide based on command palette state -->
+    
    <ul class="scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
      {#if result_topics.length > 0}
      <li>
@ -81,9 +82,9 @@

    {:else}

-    <!-- Empty state, show/hide based on command palette state -->
+   
    <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
-      <!-- Heroicon name: outline/emoji-sad -->
+     
      <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
@ -93,4 +94,50 @@

    {/if}
  </div>
-</sl-dialog>
+</sl-dialog> -->
+
+<form class="hidden w-full md:pl-24 md:flex justify-center" on:submit|preventDefault>
+  <div class="fixed top-2">
+    <div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-96">
+      <div class="relative">
+        <svg class="pointer-events-none absolute top-3.5 left-4 h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+        </svg>
+        
+        
+        <input bind:this={elm} bind:value={query} type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." role="combobox" aria-expanded="false" aria-controls="options" >
+      </div>
+          
+      {#if result_items.length + result_topics.length > 0}    
+      
+      <button class="absolute top-3.5 right-4 text-primary" on:click="{e => resetQuery()}">
+        <span class="sr-only">Close search</span>
+        <Icon kind="close"/>
+      </button>
+
+      <ul class="scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
+        {#if result_topics.length > 0}
+        <li>
+          <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Topics</h2>
+          <ul class="mt-2 text-sm text-gray-800">
+              {#each result_topics as topic}
+              <li><a href="#/topic/{topic.name}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-primary hover:text-primary_light cursor-pointer" role="option" tabindex="-1">{topic.display_name}</a></li>
+              {/each}
+          </ul>
+        </li>
+        {/if}
+        {#if result_items.length > 0}
+        <li>
+          <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Items</h2>
+          <ul class="mt-2 text-sm text-gray-800">
+            {#each result_items as item}
+            <li><a href="#/item/{item.rowid}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-primary hover:text-primary_light cursor-pointer" role="option" tabindex="-1">{item.name}</a></li>
+            {/each}
+          </ul>
+        </li>
+        {/if}        
+      </ul>
+      {/if}
+    </div>
+  </div>
+</form>
--- a/src/App.svelte
+++ b/src/App.svelte
@ -8,10 +8,9 @@
    import TopicDetail from "./TopicDetail.svelte"
    import FormatList from "./FormatList.svelte"
    import FormatDetail from "./FormatDetail.svelte"
-    import CourseList from "./CourseList.svelte"
    import ItemDetail from "./ItemDetail.svelte"
    import Settings from "./Settings.svelte"
-    import AdvancedSearch from "./AdvancedSearch.svelte"
+    
    import NavButtonWithLabel from './NavButtonWithLabel.svelte';
    import { SearchIcon, LibraryIcon, ViewGridIcon, GiftIcon, CogIcon, BookmarkAltIcon, BookmarkIcon, SupportIcon } from "@rgossiaux/svelte-heroicons/outline";
    import Bookmarks from './Bookmarks.svelte';
@ -20,7 +19,6 @@
    let randomTopicName;
    let randomItemId;
    let alltopics = [];
-    let showSearch = null;

    function getRandomItemId(){
        fetch('/learn.json?_shape=array&sql=select+rowid+from+items+order+by+random()+limit+1').then(r => r.json())
@ -76,8 +74,6 @@
            <FormatList/>
        {:else if currentView.startsWith("/format/")}
            <FormatDetail format={currentView.split("/")[2]} {alltopics}/>
-        {:else if currentView === "/courses"}
-            <CourseList/>
        {:else if currentView.startsWith("/item/")}
            <ItemDetail itemid={currentView.split("/")[2]}/>
        {:else if currentView == "/randomtopic"}
@ -92,7 +88,7 @@
            <Settings/>
        {/if}

-        <AdvancedSearch {showSearch} on:closed="{e => showSearch = null}"/>
+        
    </svelte:fragment>

    <svelte:fragment slot="nav">
@ -134,15 +130,6 @@
            
        </a>

-        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:text-primary_light' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
-            <SearchIcon class=" flex-shrink-0 h-6 w-6"/>
-            <div class="flex flex-col items-start">
-                <h3 class="text-center"> Search</h3>
-                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
-            </div>
-            
-        </button>
-
        <NavButtonWithLabel isActive={currentView === "/wanttolearn"} target="#/wanttolearn" label="Want to learn">
            <BookmarkIcon class=" flex-shrink-0 h-6 w-6"/>
        </NavButtonWithLabel>
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@ -1,5 +1,8 @@
 <script>
+
    import Icon from "./Icon.svelte"
+    import AdvancedSearch from "./AdvancedSearch.svelte"
+
    let isNavDrawerOpen = false
    export let showNotificationBell = false;
    export let showProfileMenu = false;
@ -35,28 +38,32 @@

 <div >
  <!-- sticky top bar  -->
-  <div class="sticky top-0 z-10 flex-shrink-0 flex text-primary_light bg-primary shadow">
-    {#if isNavDrawerOpen == false}
-    <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
-      <span class="sr-only">Open sidebar</span>
-      <Icon kind="menu"/>
-    </button>
-    {/if}
+  <div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-primary_light bg-primary shadow h-16">
+    <div class="flex items-center">
+      {#if isNavDrawerOpen == false}
+      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+        <span class="sr-only">Open sidebar</span>
+        <Icon kind="menu"/>
+      </button>
+      {/if}

-    {#if isNavDrawerOpen}
-    <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
-      <span class="sr-only">Close sidebar</span>
-      <Icon kind="close"/>
-    </button>
-    {/if}
+      {#if isNavDrawerOpen}
+      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+        <span class="sr-only">Close sidebar</span>
+        <Icon kind="close"/>
+      </button>
+      {/if}

-    <div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
-      <a href="/" class="">LearnAwesome</a>
-      <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
+      <div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
+        <a href="/" class="">LearnAwesome</a>
+        <div class="w-1/5 mt-0.25 h-0.5 bg-primary_light group-hover:w-full ease-in-out duration-300"></div>
+      </div>
    </div>
+    
+    <AdvancedSearch/>
+   

-    <div class="flex-1 flex justify-between">
-      
+    <div class="flex-1 flex justify-between">  
      {#if showNotificationBell || showProfileMenu}
      <div class="ml-4 flex items-center md:ml-6">
        {#if showNotificationBell}
@ -65,7 +72,6 @@
          <Icon kind="bell"/>
        </button>
        {/if}
-
      </div>
      {/if}
    </div>
@ -88,7 +94,7 @@

    <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
      <div class="relative flex-1 flex flex-col w-64 w-full pb-4">
-        <div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-gradient-to-r from-lightGradOne to-lightGradTwo text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
+        <div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
          <nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
            <slot name="nav"></slot>
            {#if window.location.href.startsWith('http://127.0.0.1')}
@ -109,7 +115,7 @@
        <a href="/" class="">LearnAwesome</a>
        <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
      </div> -->
-      <div class="mt-12 flex-1 flex flex-col bg-gradient-to-r from-lightGradOne to-lightGradTwo text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
+      <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
        <nav class="flex-1 pb-4 space-y-1 pt-5">
          <slot name="nav"></slot>
          {#if window.location.href.startsWith('http://127.0.0.1')}
--- a/src/CourseList.svelte
+++ b/src/CourseList.svelte
@ -1,3 +0,0 @@
-<script>
-    
-</script>
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@ -21,7 +21,7 @@

 </script>

-<div class="sticky z-10 top-[50px] lg:-ml-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
+<div class="sticky z-10 top-16 lg:-ml-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
  <div class="relative pt-1">
    {#if  showForm == false}
    <div class="bg-primary rounded absolute top-0 right-0">
--- a/src/utility.js
+++ b/src/utility.js
@ -9,6 +9,7 @@ export function randomCover(itemid){
    '/static/book-cover-5.png',
    '/static/book-cover-6.png',
    '/static/book-cover-7.png',
+
  ]
  return images[itemid.charCodeAt(0) % images.length];  
 }
--- a/static/map.html
+++ b/static/map.html
@ -23,7 +23,7 @@ body {

 text {
  cursor: pointer;
-  fill: #7a28cb;
+  fill: #171717;
  
 }

@ -42,11 +42,11 @@ rect.parent,
 }

 .grandparent rect {
-  fill: #f4b393;
+  fill: #F68787;
 }

 .grandparent:hover rect {
-  fill: #f4d393;
+  fill: #FB3569;
 }

 .children rect.parent,
@ -56,24 +56,25 @@ rect.parent,

 .leaf rect.parent {
  cursor: pointer;
-  fill: #ffdbd1;
+  fill: #B7FBFF;
 }

 .leaf rect.parent:hover {
  cursor: pointer;
-  fill: #ffcfd4;
+  fill: #51EAEA;
 }

 .children rect.parent {
-  fill: #ceec97;
+  fill: #F1EB9A;
  fill-opacity: .5;
 }

 .children:hover rect.child {
-  fill: #deec97;
+  fill: #F8A978;
 }

        </style>
+
 	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    </head>
    <body>