diff options
| -rw-r--r-- | deps.edn | 3 | ||||
| -rw-r--r-- | resources/src/icons/tubo.svg | 21 | ||||
| -rw-r--r-- | resources/src/images/tubo.png | bin | 1223 -> 0 bytes | |||
| -rw-r--r-- | src/backend/tubo/handler.clj | 2 | ||||
| -rw-r--r-- | src/frontend/tubo/components/layout.cljs | 13 | ||||
| -rw-r--r-- | src/frontend/tubo/components/navigation.cljs | 8 | ||||
| -rw-r--r-- | webpack.config.js | 4 |
7 files changed, 37 insertions, 14 deletions
@@ -26,6 +26,7 @@ cljs-ajax/cljs-ajax {:mvn/version "0.8.4"} akiroz.re-frame/storage {:mvn/version "0.1.4"} re-frame-utils/re-frame-utils {:mvn/version "0.1.0"} - nano-id/nano-id {:mvn/version "1.1.0"}} + nano-id/nano-id {:mvn/version "1.1.0"} + com.github.scopews/svgreq {:mvn/version "1.1.0"}} :main-opts ["-m" "shadow.cljs.devtools.cli"]} :run {:main-opts ["-m" "tubo.core"]}}} diff --git a/resources/src/icons/tubo.svg b/resources/src/icons/tubo.svg new file mode 100644 index 0000000..f606eab --- /dev/null +++ b/resources/src/icons/tubo.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="210mm" + height="297mm" + viewBox="0 0 210 297" + version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#shadow)"> + <path + fill="transparent" + d="M 164.02313,148.5 45.976869,215.31446 V 81.68554 Z" + stroke="#ffffff" + stroke-width="25" + /> + </g> + <filter id="shadow" x="-20%" y="-40%" width="180%" height="180%" > + <feDropShadow dx="15" dy="15" stdDeviation="8" flood-color="black" flood-opacity="0.4" /> + </filter> +</svg> diff --git a/resources/src/images/tubo.png b/resources/src/images/tubo.png Binary files differdeleted file mode 100644 index f519f7f..0000000 --- a/resources/src/images/tubo.png +++ /dev/null diff --git a/src/backend/tubo/handler.clj b/src/backend/tubo/handler.clj index 8813457..021dfb6 100644 --- a/src/backend/tubo/handler.clj +++ b/src/backend/tubo/handler.clj @@ -19,7 +19,7 @@ {:name "viewport" :content "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"}] [:title "Tubo"] - [:link {:rel "icon" :type "image/png" :href "/images/tubo.png"}] + [:link {:rel "icon" :type "image/png" :href "/icons/tubo.svg"}] (hiccup/include-css "/styles/tubo.css")] [:body [:div#app] diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs index 7fc8853..0b894ec 100644 --- a/src/frontend/tubo/components/layout.cljs +++ b/src/frontend/tubo/components/layout.cljs @@ -2,7 +2,8 @@ (:require [reagent.core :as r] [re-frame.core :as rf] - [tubo.utils :as utils])) + [tubo.utils :as utils] + [svgreq.core :as svgreq])) (defn thumbnail [thumbnail-url route name duration & {:keys [classes rounded?] :or {classes "h-44 xs:h-28" rounded? true}}] @@ -20,11 +21,11 @@ "LIVE" (utils/format-duration duration))]])]]) -(defn logo [] - [:img.mb-1 - {:src "/images/tubo.png" - :style {:maxHeight "25px" :maxWidth "40px"} - :title "Tubo"}]) +(defn logo + [& {:keys [height width]}] + (r/create-element + (svgreq/embed "resources/public/icons" "tubo" nil) + (js-obj "height" width "width" height))) (defn loading-icon [service-color & styles] diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs index 2d2216f..cfa5345 100644 --- a/src/frontend/tubo/components/navigation.cljs +++ b/src/frontend/tubo/components/navigation.cljs @@ -104,9 +104,9 @@ [layout/focus-overlay #(rf/dispatch [::events/toggle-mobile-nav]) show-mobile-nav?] [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-20 {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))} - [:div.flex.justify-center.py-8.items-center.text-white {:style {:background service-color}} - [layout/logo] [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]] + [:div.flex.justify-center.py-4.items-center.text-white {:style {:background service-color}} + [layout/logo :height 75 :width 75] [services-dropdown services service-id service-color] [:div.relative.py-4 [:ul.flex.font-roboto.flex-col @@ -139,10 +139,10 @@ [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20.font-nunito {:style {:background service-color}} [:div.flex.flex-auto.items-center - [:div.ml-4 + [:div.ml-2 [:a.font-bold {:href (rfe/href ::routes/home)} - [layout/logo]]] + [layout/logo :height 35 :width 35]]] [search-form] [:div.flex.flex-auto.justify-end.lg:justify-between {:class (when show-search-form? "hidden")} diff --git a/webpack.config.js b/webpack.config.js index c8bc893..e662148 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -19,8 +19,8 @@ module.exports = { new CopyPlugin({ patterns: [ { - from: path.resolve(__dirname, "resources/src/images"), - to: "images" + from: path.resolve(__dirname, "resources/src/icons"), + to: "icons" } ] }) |
