Skip to content

New improvements -> Sidebar, UI Upgrade #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
indigotechtutorials wants to merge 3 commits into
base: main
Choose a base branch
from
Open

New improvements -> Sidebar, UI Upgrade #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dfcd9c5
new changes
indigotechtutorials Dec 3, 2025
ea9a171
sidebar! too easy
indigotechtutorials Dec 3, 2025
1afe112
ui improv sidebar. add back button sidebar navigation
indigotechtutorials Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
53 changes: 0 additions & 53 deletions app/assets/stylesheets/app_ui_settings.css
View file
Open in desktop

This file was deleted.

193 changes: 187 additions & 6 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
:root {
--large-screen-size: 1400px;
--medium-screen-size: 700px;
--internal-sidebar-width: 400px;
--internal-navbar-height: 4rem;
}

* {
Expand All @@ -33,14 +35,28 @@ 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;
margin: 0px auto 0px auto;
padding: 64px 32px 64px 32px;
}

.large-container {
.large-container, .internal-sidebar-page {
h1 {
font-size: 44px;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -125,8 +140,8 @@ a {
font-size: 24px;
}

.ui-settings-link {
width: 32px;
.ui-library-name {
font-size: 24px;
margin-left: auto;
}

Expand All @@ -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;
}
}
}
10 changes: 0 additions & 10 deletions app/assets/stylesheets/colors.css
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions app/assets/stylesheets/internal_app_color_scheme.css
View file
Open in desktop

This file was deleted.

34 changes: 31 additions & 3 deletions app/assets/stylesheets/ui_components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@
}

.color-scheme-container {
margin-top: 32px;

display: flex;
flex-wrap: wrap;
align-items: start;
Expand Down Expand Up @@ -96,7 +94,7 @@
}

.color-scheme-text-container {
height: 10rem;
margin-bottom: 32px;
}
}

Expand All @@ -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))
}
}
}
2 changes: 1 addition & 1 deletion app/controllers/application_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
4 changes: 2 additions & 2 deletions app/controllers/concerns/internal_app_color_scheme.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
Loading