Merge remote-tracking branch 'origin/patch-2' into patch-2

amir20 · Nov 22, 2023 · 8f8878c · 8f8878c
2 parents 825f212 + 0881255
commit 8f8878c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ Here is the Docker Compose file:
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
-          - 8080:8080
+          - 8888:8080
 
 For advanced options like [authentication](https://dozzle.dev/guide/authentication), [remote hosts](https://dozzle.dev/guide/remote-hosts) or common [questions](https://dozzle.dev/guide/faq) see documentation at [dozzle.dev](https://dozzle.dev/guide/getting-started).
 
@@ -76,7 +76,7 @@ If it's not enabled please follow [this tutorial](https://github.com/containers/
 Once you have the podman remote socket you can run Dozzle on podman.
 
 ```
-podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8080:8080 amir20/dozzle:latest
+podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8888:8080 amir20/dozzle:latest
 ```
 
 ## Security

diff --git a/assets/components/Search.vue b/assets/components/Search.vue
@@ -1,23 +1,20 @@
 <template>
-  <div
-    class="fixed -right-px -top-px z-10 flex w-96 items-center gap-4 rounded-bl border border-secondary/20 bg-base-darker p-4 shadow"
-    v-show="showSearch"
-    v-if="search"
-  >
-    <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify />
-      <input
-        class="input input-ghost flex-1"
-        type="text"
-        placeholder="Find / RegEx"
-        ref="input"
-        v-model="searchFilter"
-        @keyup.esc="resetSearch()"
-      />
+  <transition name="slide">
+    <div class="fixed right-px top-12 z-10 flex items-center p-4" v-show="showSearch" v-if="search">
+      <div class="input input-primary flex h-auto items-center !shadow-lg">
+        <mdi:magnify />
+        <input
+          class="input input-ghost w-72 flex-1"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="input"
+          v-model="searchFilter"
+          @keyup.esc="resetSearch()"
+        />
+        <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
+      </div>
     </div>
-
-    <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
@@ -32,5 +29,31 @@ onKeyStroke("f", (e) => {
   }
 });
 
+onMounted(() => {
+  onKeyStroke(
+    "f",
+    (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.stopPropagation();
+        resetSearch();
+      }
+    },
+    { target: input.value },
+  );
+});
+
 onUnmounted(() => resetSearch());
 </script>
+
+<style lang="postcss" scoped>
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-150px);
+  opacity: 0;
+}
+</style>