[#96] Use u-height-stretch instead of…

…u-height-100vh in sidebar

#96

Author: andreasknoepfle

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# Unreleased 
+
+## Breaking 
+
+- Sidebars use `u-height-strech` instead of `u-height-100vh`. This requires the project to run autoprefixer.
+  If you can't run autoprefixer in your project, set `config :bitstyles_phoenix, autoprefixer: false` to get the 
+  old behaviour.
+
 ## v2.1.1 - 2022-12-02
 
 - Fixed version backwards compatibility

config/config.exs

@@ -1,6 +1,7 @@
 import Config
 
 config :bitstyles_phoenix,
-  trim_e2e_classes: [enabled: true]
+  trim_e2e_classes: [enabled: true],
+  autoprefixer: true
 
 config :phoenix, :json_library, Jason

demo/config/config.exs

@@ -9,7 +9,8 @@ import Config
 
 config :bitstyles_phoenix,
   translate_errors: {BitstylesPhoenixDemoWeb.ErrorHelpers, :translate_error, []},
-  icon_file: {BitstylesPhoenixDemoWeb.Endpoint, :static_path, ["/assets/images/icons.svg"]}
+  icon_file: {BitstylesPhoenixDemoWeb.Endpoint, :static_path, ["/assets/images/icons.svg"]},
+  autoprefixer: false
 
 config :bitstyles_phoenix_demo, BitstylesPhoenixDemoWeb.Gettext,
   default_locale: "en",

demo/mix.exs

@@ -71,7 +71,8 @@ defmodule BitstylesPhoenixDemo.MixProject do
       ],
       bitstyles: [
         "cmd mkdir -p priv/static/assets",
-        "cmd cp -R assets/node_modules/bitstyles/assets/* priv/static/assets"
+        "cmd cp -R assets/node_modules/bitstyles/assets/* priv/static/assets",
+        "cmd cp -R ../assets/logo.svg priv/static/assets/images/"
       ],
       "bitstyles.watch": [
         "bitstyles",

lib/bitstyles_phoenix.ex

@@ -53,10 +53,20 @@ defmodule BitstylesPhoenix do
 
   ```elixir
   config :bitstyles_phoenix,
-    bitstyles_version: "1.5.0"
+    bitstyles_version: "3.0.0"
   ```
   Release candidate versions are currently not supported.
 
+  ### Autoprefixer
+
+  Bitstyles phoenix will use some classes that require autoprefixer even for newer browers.
+  If you can't run autoprefixer for some reason (not recommended) you can set `autoprefixer: false`
+  to make bitstyles_phoenix only output classes that are well supported in recent browsers.
+
+  ```elixir
+  config :bitstyles_phoenix, autoprefixer: false
+  ```
+
   ### Translating error messages
 
   Generated phoenix apps usally come with a helper for [translating error messages](https://github.com/phoenixframework/phoenix/blob/496123b66c03c9764be623d2c32b4af611837eb0/installer/templates/phx_web/views/error_helpers.ex#L23-L46)

lib/bitstyles_phoenix/alpine3/sidebar.ex

@@ -49,7 +49,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...> </.ui_js_sidebar_layout>
         ...> """
         """
-        <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
+        <div class="u-flex u-height-stretch" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">

lib/bitstyles_phoenix/bitstyles.ex

@@ -8,6 +8,10 @@ defmodule BitstylesPhoenix.Bitstyles do
     "#{@cdn_url}@#{@default_version}"
   end
 
+  def autoprefixer do
+    Application.get_env(:bitstyles_phoenix, :autoprefixer, true)
+  end
+
   @doc """
   Returns the classnames for the configured version.
   Input classnames are assumed to be from the #{@default_version} version of bitstyles.
@@ -25,6 +29,7 @@ defmodule BitstylesPhoenix.Bitstyles do
     mapping =
       case class do
         "u-border-radius-" <> variant -> "u-round-#{variant}"
+        "u-height-stretch" -> "u-height-100vh"
         _ -> class
       end
 

lib/bitstyles_phoenix/component/sidebar.ex

@@ -38,7 +38,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...> </.ui_sidebar_layout>
         ...> """
         """
-        <div class="u-flex u-height-100vh">
+        <div class="u-flex u-height-stretch">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
@@ -200,7 +200,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...> </.ui_sidebar_layout>
         ...> """
         """
-        <div class="u-flex u-height-100vh">
+        <div class="u-flex u-height-stretch">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
@@ -238,7 +238,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...> </.ui_sidebar_layout>
         ...> """
         """
-        <div class="u-flex u-height-100vh">
+        <div class="u-flex u-height-stretch">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
@@ -297,7 +297,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
     assigns =
       assigns
       |> assign(
-        class: classnames(["u-flex u-height-100vh", assigns[:class]]),
+        class: classnames(["u-flex", wrapper_height(), assigns[:class]]),
         extra: extra,
         sidebar_extra: sidebar_extra,
         large_extra: large_extra,
@@ -425,4 +425,15 @@ defmodule BitstylesPhoenix.Component.Sidebar do
     <div class={@class} {@extra}><%= render_slot(@inner_block) %></div>
     """
   end
+
+  defp wrapper_height() do
+    # height: strech is not supported by recent browsers yet.
+    # So if we can't have autoprefixer for some reason, we should
+    # use height: 100vh.
+    if BitstylesPhoenix.Bitstyles.autoprefixer() do
+      "u-height-stretch"
+    else
+      "u-height-100vh"
+    end
+  end
 end