Added rounded corners to character image and faction image

datdamnzotz · Jun 12, 2023 · 850eb43 · 850eb43
1 parent 9557dcf
commit 850eb43
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/clj/orcpub/styles/core.clj b/src/clj/orcpub/styles/core.clj
@@ -92,16 +92,16 @@
    [:.list-style-disc
     {:list-style-type :disc
      :list-style-position :inside}]
-   
+
    [:.f-w-bold
     {:font-weight :bold}]
-   
+
    [:.flex-grow-1
     {:flex-grow 1}]
 
    [:.flex-basis-50-p
     {:flex-basis "50%"}]
-   
+
    [:.i
     {:font-style :italic}]
 
@@ -137,7 +137,7 @@
     {:margin-right "20px"}]
    [:.m-r-30
     {:margin-right "30px"}]
-   
+
    [:.m-r-80
     {:margin-right "80px"}]
 
@@ -228,7 +228,7 @@
 
    [:.orange-shadow
     {:box-shadow "0 1px 0 0 #f0a100"}]
-   
+
    [:.t-a-c
     {:text-align :center}]
    [:.t-a-l
@@ -309,7 +309,7 @@
 
    [:.overflow-auto
     {:overflow :auto}]
-   
+
    [:.posn-rel
     {:position :relative}]
    [:.posn-abs
@@ -428,7 +428,7 @@
 
    [:.b-b-2
     {:border-bottom "2px solid"}]
-   
+
    [:.b-w-3
     {:border-width "3px"}]
    [:.b-w-5
@@ -448,7 +448,7 @@
    [:.tooltip
     {:position "relative"
      :display "inline-block"
-     :border-bottom "1px dotted black" }]
+     :border-bottom "1px dotted black"}]
 
    [:.tooltip [:.tooltiptext
                {:visibility "hidden"
@@ -465,12 +465,21 @@
                 :padding "10px 10px"
                 :border-radius "6px"
                 :position "absolute"
-                :z-index "1"}
-               ]]
+                :z-index "1"}]]
 
    [:.tooltip:hover [:.tooltiptext
                      {:visibility "visible"}]]
 
+   [:.image-character-thumbnail
+    {:max-height "100px"
+     :max-width "200px"
+     :border-radius "5px"}]
+
+   [:.image-faction-thumbnail
+    {:max-height "100px"
+     :max-width "200px"
+     :border-radius "5px"}]
+
    (at-keyframes
     :fade-out
     [:from {:opacity 1
@@ -510,7 +519,7 @@
 
    [:.hover-opacity-full:hover
     {:opacity 1.0}]
-   
+
    [:.bg-light
     {:background-color "rgba(72,72,72,0.2)"}]
    [:.bg-lighter
@@ -922,8 +931,9 @@
 
     [:.header-tab
      {:background-color "rgba(0, 0, 0, 0.5)"
-      ;;:-webkit-backdrop-filter "blur(5px)"
-      ;;:backdrop-filter "blur(5px)"
+      :-webkit-backdrop-filter "blur(3px)"
+      :backdrop-filter "blur(3px)"
+      :border-radius "5px"
       }]
 
     [:.header-tab.mobile

diff --git a/src/cljs/orcpub/character_builder.cljs b/src/cljs/orcpub/character_builder.cljs
@@ -1824,10 +1824,9 @@
       [character-textarea entity-values ::char5e/flaws]]
      [:div.flex.align-items-c.w-100-p.m-t-30
       (if image-url
-        [:img.m-r-10 {:src image-url
+        [:img.m-r-10.image-character-thumbnail {:src image-url
                       :on-error (image-error :failed-loading-image image-url)
-                      :on-load (if image-url-failed image-loaded)
-               :style image-style}])
+                      :on-load (if image-url-failed image-loaded)}])
       [:div.flex-grow-1
        [:span.personality-label.f-s-18 "Image URL"]
        [character-input entity-values ::char5e/image-url nil set-image-url]
@@ -1838,11 +1837,10 @@
       [character-input entity-values ::char5e/faction-name]]
      [:div.flex.align-items-c.w-100-p.m-t-30
       (if faction-image-url
-        [:img.m-r-10 {:src faction-image-url
+        [:img.m-r-10.image-faction-thumbnail {:src faction-image-url
                       :on-error (image-error :failed-loading-faction-image faction-image-url)
                       :on-load (if faction-image-url-failed
-                                 faction-image-loaded)
-               :style image-style}])
+                                 faction-image-loaded)}])
       [:div.flex-grow-1
        [:span.personality-label.f-s-18 "Faction Image URL"]
        [character-input entity-values ::char5e/faction-image-url nil set-faction-image-url]

diff --git a/src/cljs/orcpub/dnd/e5/views.cljs b/src/cljs/orcpub/dnd/e5/views.cljs
@@ -1515,8 +1515,7 @@
     [:div.flex.justify-cont-s-b.w-100-p.align-items-c
      [:div.flex.align-items-c.align-items-t
       (if image-url
-        [:img.m-r-20.m-t-10.m-b-10 {:src image-url
-                                    :style thumbnail-style}])
+        [:img.m-r-20.m-t-10.m-b-10.image-character-thumbnail {:src image-url }])
       [:div.flex.character-summary.m-t-20.m-b-20
        (if (and character-name include-name?) [:span.m-r-20.m-b-5
                                                [:span.character-name character-name]