diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..fcac132 Binary files /dev/null and b/.DS_Store differ diff --git a/app/assets/stylesheets/app_ui_settings.css b/app/assets/stylesheets/app_ui_settings.css deleted file mode 100644 index 39f5bbc..0000000 --- a/app/assets/stylesheets/app_ui_settings.css +++ /dev/null @@ -1,53 +0,0 @@ - -/* UI for AppUISettings page */ - -.switch-type-section { - display: flex; - gap: 16px; - margin-top: 16px; -} - -/* Manual select partial styling */ - -.internal-app-color-scheme { - display: flex; - gap: 16px; - flex-wrap: wrap; - margin-top: 32px; - - .color-scheme-column { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - - h4 { - font-size: 32px; - } - - p { - font-size: 20px; - } - - .preview { - height: 32px; - } - } -} - -/* Auto gen color scheme styling */ - -.auto-gen-container { - margin-top: 16px; - - .color-pallete-container { - margin-top: 16px; - display: flex; - flex-direction: column; - gap: 16px; - - h2 { - font-size: 36px; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 29915f7..fedd226 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -14,6 +14,8 @@ :root { --large-screen-size: 1400px; --medium-screen-size: 700px; + --internal-sidebar-width: 400px; + --internal-navbar-height: 4rem; } * { @@ -33,6 +35,20 @@ a { /* Default reset CSS - End */ +/* Apply styling for internal app: Meaning our app's UI not related to the users UI library */ + +h1, h2, h3, h4, h5, h6 { + color: var(--internal-app-header); +} + +p, span, a, svg, label { + color: var(--internal-app-text); +} + +body { + background-color: var(--internal-app-background); +} + .large-container { max-width: var(--large-screen-size); min-height: 100vh; @@ -40,7 +56,7 @@ a { padding: 64px 32px 64px 32px; } -.large-container { +.large-container, .internal-sidebar-page { h1 { font-size: 44px; } @@ -100,15 +116,14 @@ a { } .internal-app-navbar { - height: 4rem; + height: var(--internal-navbar-height); background-color: hsl(from var(--internal-app-background) h s calc(l - 10)); width: 100%; position: sticky; top: 0px; left: 0px; z-index: 1000; - border-bottom: 0.5px hsl(from var(--internal-app-background) h s calc(l + 40)) solid; - box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) hsl(from var(--internal-app-background) h s calc(l + 20)); + box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) hsl(from var(--internal-app-background) h s calc(l + 5)); display: flex; .navbar-content { @@ -125,8 +140,8 @@ a { font-size: 24px; } - .ui-settings-link { - width: 32px; + .ui-library-name { + font-size: 24px; margin-left: auto; } @@ -144,4 +159,170 @@ a { 100% { transform: rotate(359deg); } +} + + +/* UI for AppUISettings page */ + +.switch-type-section { + display: flex; + gap: 16px; + margin-top: 16px; +} + +/* Manual select partial styling */ + +.internal-app-color-scheme { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 32px; + + .color-scheme-column { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + h4 { + font-size: 32px; + } + + p { + font-size: 20px; + } + + .preview { + height: 32px; + } + } +} + +/* Auto gen color scheme styling */ + +.auto-gen-container { + margin-top: 16px; + + .color-pallete-container { + margin-top: 16px; + display: flex; + flex-direction: column; + gap: 16px; + + h2 { + font-size: 36px; + } + } +} + +/* Form styling for UI library page and potentially other form pages */ + +.internal-form-container { + max-width: 700px; + width: 100%; + min-height: 500px; + padding: 64px 32px 64px 32px; + border-radius: 8px; + margin: 0px auto 0px auto; + display: flex; + justify-content: center; + + form { + width: 75%; + display: flex; + flex-direction: column; + gap: 16px; + + .field-container { + display: flex; + flex-direction: column; + gap: 14px; + + label { + font-size: 24px; + } + + input { + font-size: 18px; + padding: 8px; + border-radius: 8px; + border: 1px solid black; + width: 100%; + } + } + + .action-buttons { + display: flex; + align-items: center; + gap: 20px; + + .submit { + padding: 4px 6px 4px 6px; + background-color: rgb(50, 50, 196); + color: rgb(234, 234, 241); + font-size: 16px; + padding: 8px; + border-radius: 8px; + cursor: pointer; + } + } + } +} + +/* Styling for sidebar popout/ main content positioned left/right */ + +.internal-sidebar-page { + display: flex; + width: 100%; + + .page-content { + max-width: calc(100% - var(--internal-sidebar-width)); + min-height: 100vh; + margin: 0px auto 0px 0px; + padding: 64px 32px 64px 32px; + } + + .internal-sidebar { + width: var(--internal-sidebar-width); + height: calc(100vh - var(--internal-navbar-height)); + position: sticky; + top: var(--internal-navbar-height); + right: 0px; + background-color: hsl(from var(--internal-app-background) h s calc(l - 10)); + padding: 10px; + + .sidebar-links { + display: grid; + grid-template-columns: auto auto; + gap: 16px; + + .icon-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px; + gap: 10px; + border: 1px solid hsl(from var(--internal-app-background) h s calc(l - 30)); + border-radius: 8px; + height: 140px; + + span { + font-size: 20px; + } + + svg { + width: 24px; + } + } + } + } +} + +turbo-frame[id='sidebar'] { + .back-link { + svg { + width: 24px; + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css deleted file mode 100644 index 7ace132..0000000 --- a/app/assets/stylesheets/colors.css +++ /dev/null @@ -1,10 +0,0 @@ -/* :root { - --black: hsl(253, 69%, 5%); - --dark-gray: hsl(268, 12%, 24%); - --light-gray: hsl(258, 16%, 66%); - --white: hsl(249, 33%, 96%); - --red: hsl(0, 82%, 48%); - --green: hsl(125, 68%, 40%); - --primary: hsl(270, 50%, 54%); - --secondary: hsl(211, 68%, 57%); -} */ \ No newline at end of file diff --git a/app/assets/stylesheets/internal_app_color_scheme.css b/app/assets/stylesheets/internal_app_color_scheme.css deleted file mode 100644 index 0047878..0000000 --- a/app/assets/stylesheets/internal_app_color_scheme.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Apply styling for internal app: Meaning our app's UI not related to the users UI library */ - -h1, h2, h3, h4, h5, h6 { - color: var(--internal-app-header); -} - -p, span, a, svg { - color: var(--internal-app-text); -} - -body { - background-color: var(--internal-app-background); -} \ No newline at end of file diff --git a/app/assets/stylesheets/ui_components.css b/app/assets/stylesheets/ui_components.css index 49e3f1a..c38889b 100644 --- a/app/assets/stylesheets/ui_components.css +++ b/app/assets/stylesheets/ui_components.css @@ -55,8 +55,6 @@ } .color-scheme-container { - margin-top: 32px; - display: flex; flex-wrap: wrap; align-items: start; @@ -96,7 +94,7 @@ } .color-scheme-text-container { - height: 10rem; + margin-bottom: 32px; } } @@ -117,4 +115,34 @@ width: 100%; object-fit: cover; } +} + +.large-container { + .button-actions-container { + margin-top: 32px; + display: flex; + align-items: center; + gap: 32px; + + .color-scheme-button { + display: flex; + align-items: center; + gap: 10px; + background-color: hsl(from var(--internal-app-background) h s calc(l - 20)); + padding: 14px 20px 14px 20px; + border-radius: 14px; + font-size: 20px; + transition: transform 0.5s ease-in-out; + transition: background 1s ease-in-out; + + svg { + width: 20px; + } + } + + .color-scheme-button:hover { + transform: scale(1.025); + background-color: hsl(from var(--internal-app-background) h s calc(l - 10)) + } + } } \ No newline at end of file diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 5faeb0f..85eeca2 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,7 +1,7 @@ require "ostruct" class ApplicationController < ActionController::Base - include UiLibraryColorScheme, InternalAppColorScheme + include UiLibraryColorScheme, InternalAppColorScheme, ApplicationHelper # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has. allow_browser versions: :modern end \ No newline at end of file diff --git a/app/controllers/concerns/internal_app_color_scheme.rb b/app/controllers/concerns/internal_app_color_scheme.rb index a86b055..c1a4bc9 100644 --- a/app/controllers/concerns/internal_app_color_scheme.rb +++ b/app/controllers/concerns/internal_app_color_scheme.rb @@ -17,8 +17,8 @@ def find_or_create_internal_app_color_scheme session[:internal_app_color_scheme] else session[:internal_app_color_scheme] = { - header: "hsl(0, 0, 0)", - text: "hsl(0, 0, 0)", + header: "hsl(131 0% 5.3%)", + text: "hsl(131 0% 14.1%)", background: "hsl(0, 0, 100)", } session[:internal_app_color_scheme] diff --git a/app/controllers/ui_components_controller.rb b/app/controllers/ui_components_controller.rb index b51ef18..2003255 100644 --- a/app/controllers/ui_components_controller.rb +++ b/app/controllers/ui_components_controller.rb @@ -1,4 +1,5 @@ class UiComponentsController < ApplicationController def index + redirect_to new_ui_library_path if !current_ui_library end end diff --git a/app/controllers/ui_libraries_controller.rb b/app/controllers/ui_libraries_controller.rb new file mode 100644 index 0000000..9a12d15 --- /dev/null +++ b/app/controllers/ui_libraries_controller.rb @@ -0,0 +1,16 @@ +class UiLibrariesController < ApplicationController + def new + @ui_library = UiLibrary.new + end + + def create + if @ui_library = UiLibrary.create(ui_library_params) + session[:ui_library_id] = @ui_library.id + redirect_to root_path + end + end +private + def ui_library_params + params.expect(ui_library: [:name]) + end +end \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..ad079f5 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,2 +1,5 @@ module ApplicationHelper + def current_ui_library + @_current_ui_library ||= UiLibrary.find_by_id(session[:ui_library_id]) + end end diff --git a/app/models/ui_library.rb b/app/models/ui_library.rb new file mode 100644 index 0000000..7bfaef7 --- /dev/null +++ b/app/models/ui_library.rb @@ -0,0 +1,2 @@ +class UiLibrary < ApplicationRecord +end diff --git a/app/services/css_bundler_service.rb b/app/services/css_bundler_service.rb index 8139b35..ef6ce60 100644 --- a/app/services/css_bundler_service.rb +++ b/app/services/css_bundler_service.rb @@ -18,9 +18,6 @@ def create_css_file @tmp_css_output_path = "tmp/output_css/output_css_file_#{uniq_id}.css" @css_file_paths = Dir.glob("app/assets/stylesheets/component-styles/*") File.open(@tmp_css_output_path, "w") do |f| - @css_file_paths.each do |file_path| - f.write "#{File.read(file_path)}\n" - end f.write """ :root { /* User UI Library Color Scheme */ @@ -35,6 +32,9 @@ def create_css_file --secondary: #{@color_scheme[:secondary]}; }\n """.strip + @css_file_paths.each do |file_path| + f.write "#{File.read(file_path)}\n" + end end end diff --git a/app/views/color_scheme/show.html.erb b/app/views/color_scheme/show.html.erb new file mode 100644 index 0000000..cfb9f1e --- /dev/null +++ b/app/views/color_scheme/show.html.erb @@ -0,0 +1,38 @@ +<%= turbo_frame_tag :sidebar do %> + <%= link_to root_path, class: "back-link" do %> + + <% end %> +
This is where you can choose what color associates with your brand
+All user friendly apps require a good color scheme.
+Every website requires these essential colors
+