Pin a specific rmlui commit

completely reworked stylesheet to use DP measurments
Attempting to style for mobile
2026-08-11 11:36:52 -05:00 · 2026-08-09 14:55:30 -05:00 · 2026-08-09 11:57:13 -05:00
4 changed files with 308 additions and 105 deletions
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -14,7 +14,8 @@
            android:label="Critterfolio"
            android:configChanges="orientation|screenSize|keyboardHidden"
            android:exported="true"
-            android:screenOrientation="fullSensor">
+            android:screenOrientation="fullSensor"
+            android:theme="@android:style/Theme.Black.NoTitleBar">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
@@ -22,4 +23,4 @@
            </intent-filter>
        </activity>
    </application>
-</manifest>
+</manifest>
--- a/assets/styles/main.rcss
+++ b/assets/styles/main.rcss
@@ -1,8 +1,7 @@
-
 * {
    box-sizing: border-box;
    font-family: "Hubballi";
- 
+
    --background-color: #2b2d2f;   
    --foreground-color: #f0eae1;   
    --accent-green: #606c38;       
@@ -13,19 +12,22 @@
    --border-dark: #191a1b;        
 }

+/* ==========================================================================
+   Mobile-First Base Styles (scaled via dp)
+   ========================================================================== */
+
 body {
    display: block;
    width: 100vw;
    height: 100vh;
-    font-size: 15pt;
+    font-size: 12dp;
    background-color: var(--background-color);
    color: var(--foreground-color);
-    margin: 0px;
-    padding: 24px;
+    margin: 0dp;
+    padding: 12dp;
 }

 /* Generic Structural Layout Defaults */
-
 div, section, article, header, footer, main, nav, aside {
    display: block;
 }
@@ -37,39 +39,37 @@ span, em, strong, a {
 /* Typographic Defaults */
 p {
    display: block;
-    margin: 0px;
+    margin: 0dp;
 }

 h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;
-    margin: 0px;
+    margin: 0dp;
 }

-h1 { font-size: 2em; }
+h1 { font-size: 1.6em; }
 h2 { font-size: 1.5em; }
 h3 { font-size: 1.17em; }

 em { font-style: italic; }
 strong { font-weight: bold; }

-/* ==========================================================================
-   Form Inputs & Interactive UI Components
-   ========================================================================== */
+/* Form Inputs & Interactive UI Components */
 button, input, select, textarea {
    display: inline-block;
    font-family: "Hubballi";
-    font-size: 14pt;
-    margin: 0px;
+    font-size: 14dp;
+    margin: 0dp;
    vertical-align: middle;
 }

 button {
-    padding: 6px 16px;
+    padding: 6dp 16dp;
    background-color: var(--accent-green);
    color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
    text-align: center;
    font-weight: bold;
 }
@@ -84,11 +84,11 @@ button:active {
 }

 input[type="text"], textarea {
-    padding: 8px 12px;
+    padding: 8dp 12dp;
    background-color: #212325;
    color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
    width: 100%;
 }

@@ -99,58 +99,56 @@ input[type="text"]:focus, textarea:focus {

 textarea {
    display: block;
-    height: 150px;
+    height: 120dp;
 }

-/*  ===================================
-    App Header
-    =================================== */
+/* App Header */
 #header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
-    padding: 12px 20px;
+    padding: 10dp 14dp;
    background-color: var(--accent-green);
-    border: 3px var(--border-dark);
-    border-radius: 8px;
-    margin-bottom: 24px;
+    border: 3dp var(--border-dark);
+    border-radius: 8dp;
+    margin-bottom: 14dp;
 }

 .header-title-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
-    gap: 16px;
+    gap: 12dp;
 }

 #header h1 {
-    font-size: 2.5em;
+    font-size: 1.6em;
    color: var(--foreground-color);
-    letter-spacing: 1px;
+    letter-spacing: 1dp;
 }

 .header-tag {
-    font-size: 12pt;
+    font-size: 10dp;
    font-weight: bold;
    background-color: var(--border-dark);
    color: var(--accent-gold);
-    padding: 2px 10px;
-    border-radius: 12px;
+    padding: 2dp 10dp;
+    border-radius: 12dp;
 }

 #new-critter-btn {
-    height: 48px;
-    width: 48px;
-    border-radius: 8px;
-    font-size: 28pt;
+    height: 40dp;
+    width: 40dp;
+    border-radius: 8dp;
+    font-size: 20dp;
    display: flex;
    align-items: center;
    justify-content: center;
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
    background-color: var(--accent-gold);
    color: var(--border-dark);
-    padding: 0px;
+    padding: 0dp;
 }

 #new-critter-btn:hover {
@@ -158,13 +156,11 @@ textarea {
    color: var(--foreground-color);
 }

-/*  ===================================
-    Drawer List Styles
-    =================================== */
+/* Drawer List Styles */
 .critter-list {
    display: flex;
    flex-direction: column;
-    gap: 10px;
+    gap: 8dp;
 }

 .critter-card {
@@ -173,12 +169,12 @@ textarea {
    align-items: center;
    justify-content: space-between;
    width: 100%;
-    padding: 8px 14px;
+    padding: 8dp 10dp;
    background-color: var(--card-bg);
    color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-left: 10px var(--accent-green);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-left: 10dp var(--accent-green);
+    border-radius: 6dp;
    text-align: left;
 }

@@ -191,43 +187,43 @@ textarea {
    display: flex;
    flex-direction: row;
    align-items: center;
-    gap: 14px;
+    gap: 10dp;
    flex: 1;
 }

 .thumb-frame {
    background-color: var(--accent-green);
-    border: 2px var(--border-dark);
-    border-radius: 4px;
-    padding: 2px;
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
+    padding: 2dp;
 }

 .critter-thumb {
-    width: 50px;
-    height: 50px;
+    width: 40dp;
+    height: 40dp;
 }

 .critter-info {
    display: flex;
    flex-direction: column;
-    gap: 2px;
+    gap: 2dp;
    flex: 1;
 }

 .critter-card-header {
    display: flex;
    align-items: baseline;
-    gap: 12px;
+    gap: 10dp;
 }

 .critter-name {
-    font-size: 18pt;
-    margin: 0px;
+    font-size: 14dp;
+    margin: 0dp;
    color: var(--foreground-color);
 }

 .critter-id {
-    font-size: 11pt;
+    font-size: 9dp;
    font-weight: bold;
    color: var(--accent-gold);
 }
@@ -235,39 +231,37 @@ textarea {
 .info-pills {
    display: flex;
    flex-direction: row;
-    gap: 8px;
+    gap: 8dp;
 }

 .pill {
-    font-size: 12pt;
+    font-size: 10dp;
    background-color: #212325;
    color: var(--foreground-color);
-    border: 1px var(--accent-green);
-    padding: 1px 8px;
-    border-radius: 4px;
+    border: 1dp var(--accent-green);
+    padding: 1dp 6dp;
+    border-radius: 4dp;
 }

 .btn-delete {
-    padding: 4px 10px;
-    font-size: 11pt;
+    padding: 3dp 8dp;
+    font-size: 9dp;
    font-weight: bold;
    background-color: var(--accent-clay);
    color: #ffffff;
-    border: 2px var(--border-dark);
-    border-radius: 4px;
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
 }

 .btn-delete:hover {
    background-color: #a3561a;
 }

-/*  ===================================
-    Modals Layout
-    =================================== */
+/* Modals Layout */
 .modal-overlay {
    position: absolute;
-    top: 0px;
-    left: 0px;
+    top: 0dp;
+    left: 0dp;
    width: 100%;
    height: 100%;
    background-color: #1f1f1fdd;
@@ -279,55 +273,55 @@ textarea {
 .modal-content {
    background-color: var(--card-bg);
    color: var(--foreground-color);
-    border: 4px var(--border-dark);
-    border-radius: 10px;
-    width: 600px;
-    padding: 0px;
+    border: 4dp var(--border-dark);
+    border-radius: 10dp;
+    width: 94vw;
+    padding: 0dp;
    display: flex;
    flex-direction: column;
 }

 .modal-content-small {
-    width: 450px;
+    width: 88vw;
 }

 .modal-header {
    background-color: var(--accent-green);
    color: #ffffff;
-    padding: 12px 20px;
-    border-bottom: 3px var(--border-dark);
+    padding: 10dp 16px;
+    border-bottom: 3dp var(--border-dark);
 }

 .modal-header h2 {
-    font-size: 20pt;
+    font-size: 16dp;
    color: #ffffff;
 }

 .modal-body {
-    padding: 18px 20px;
+    padding: 14dp 16px;
    display: flex;
    flex-direction: column;
-    gap: 12px;
+    gap: 10dp;
 }

 .form-group {
    display: flex;
    flex-direction: column;
-    gap: 4px;
+    gap: 4dp;
 }

 .form-row {
    display: flex;
-    flex-direction: row;
-    gap: 12px;
+    flex-direction: column;
+    gap: 10dp;
 }

 .form-group.half {
-    width: 50%;
+    width: 100%;
 }

 .modal-content label {
-    font-size: 14pt;
+    font-size: 12dp;
    font-weight: bold;
    color: var(--foreground-color);
 }
@@ -335,32 +329,32 @@ textarea {
 .error {
    color: #ffffff;
    font-weight: bold;
-    padding: 8px;
-    border: 2px var(--border-dark);
+    padding: 8dp;
+    border: 2dp var(--border-dark);
    background-color: var(--accent-clay);
-    border-radius: 4px;
+    border-radius: 4dp;
 }

 .dialog-text {
-    font-size: 18pt;
+    font-size: 14dp;
    color: var(--foreground-color);
-    padding: 10px 0px;
+    padding: 10dp 0dp;
 }

 .modal-buttons {
-    padding: 14px 20px;
+    padding: 12dp 16px;
    background-color: #2b2d2f;
-    border-top: 3px var(--border-dark);
+    border-top: 3dp var(--border-dark);
    display: flex;
    flex-direction: row;
-    gap: 12px;
+    gap: 12dp;
    justify-content: flex-end;
 }

 .modal-buttons button {
-    min-width: 120px;
-    height: 42px;
-    font-size: 16pt;
+    min-width: 90dp;
+    height: 38dp;
+    font-size: 13dp;
 }

 .btn-cancel {
@@ -379,4 +373,144 @@ textarea {

 .btn-submit:hover {
    background-color: var(--accent-bright-green);
+}
+
+/* Extra Narrow Viewports (< 380dp) */
+@media (max-width: 380dp) {
+    #header h1 {
+        font-size: 1.3em;
+    }
+
+    .critter-name {
+        font-size: 12dp;
+    }
+
+    .info-pills {
+        flex-direction: column;
+        gap: 4dp;
+    }
+}
+
+/* ==========================================================================
+   Desktop / Larger Screens Media Query (Min-Width >= 600dp)
+   ========================================================================== */
+@media (min-width: 600dp) {
+    body {
+        padding: 24dp;
+        font-size: 15dp;
+    }
+
+    textarea {
+        height: 150dp;
+    }
+
+    #header {
+        padding: 12dp 20px;
+        margin-bottom: 24dp;
+    }
+
+    .header-title-group {
+        gap: 16dp;
+    }
+
+    #header h1 {
+        font-size: 2.5em;
+    }
+
+    .header-tag {
+        font-size: 12dp;
+    }
+
+    #new-critter-btn {
+        height: 48dp;
+        width: 48dp;
+        font-size: 28dp;
+    }
+
+    .critter-list {
+        gap: 10dp;
+    }
+
+    .critter-card {
+        padding: 8dp 14dp;
+    }
+
+    .critter-card-body {
+        gap: 14dp;
+    }
+
+    .critter-thumb {
+        width: 50dp;
+        height: 50dp;
+    }
+
+    .critter-card-header {
+        gap: 12dp;
+    }
+
+    .critter-name {
+        font-size: 18dp;
+    }
+
+    .critter-id {
+        font-size: 11dp;
+    }
+
+    .pill {
+        font-size: 12dp;
+        padding: 1dp 8dp;
+    }
+
+    .btn-delete {
+        padding: 4dp 10dp;
+        font-size: 11dp;
+    }
+
+    .modal-content {
+        width: 600dp;
+    }
+
+    .modal-content-small {
+        width: 450dp;
+    }
+
+    .modal-header {
+        padding: 12dp 20px;
+    }
+
+    .modal-header h2 {
+        font-size: 20dp;
+    }
+
+    .modal-body {
+        padding: 18dp 20px;
+        gap: 12px;
+    }
+
+    .form-row {
+        flex-direction: row;
+        gap: 12dp;
+    }
+
+    .form-group.half {
+        width: 50%;
+    }
+
+    .modal-content label {
+        font-size: 14dp;
+    }
+
+    .dialog-text {
+        font-size: 18dp;
+    }
+
+    .modal-buttons {
+        padding: 14px 20px;
+    }
+
+    .modal-buttons button {
+        min-width: 120dp;
+        height: 42dp;
+        font-size: 16dp;
+    }
 }
--- a/flake.nix
+++ b/flake.nix
@@ -19,13 +19,13 @@

        rmlui = pkgs.stdenv.mkDerivation rec {
          pname = "rmlui";
-          version = "master";
+          version = "6.2-unstable-2026-8-7";

          src = pkgs.fetchFromGitHub {
            owner = "mikke89";
            repo = "RmlUi";
-            rev = "master";
-            hash = "sha256-vfFtjNHw7coXWrGgtcFyuIsu5rctW5dBJoOt8MTZwDU=";
+            rev = "9cbb5440de3e86e7031544c26116fe7b814028b9";
+            hash = "sha256-5vyrVJhmNE/msJuVSESsKhiW9Pc+peA0NTYJDVoRanA=";
          };

          nativeBuildInputs = [
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -14,6 +14,7 @@
 #include <iostream>
 #include <map>
 #include <vector>
+
 static bool is_initalized = false;
 static bool is_running = false;
 static Rml::Context *ctx = nullptr;
@@ -22,48 +23,85 @@ static std::vector<CritterEntry> critter_list;
 static Rml::ElementDocument *doc;
 static AppData app_data;
 static SDLFileInterface file_interface;
+
 void shutdown() {
    Rml::Shutdown();
    Backend::Shutdown();
    SDL_Quit();
 }
+
 bool initialize() {
    if (!SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS)) {
        std::cout << "[ERROR] Failed to initialize SDL3: " << SDL_GetError() << "\n";
        return false;
    }
+
    if (!Backend::Initialize("CritterFolio", 800, 600, true)) {
        std::cout << "[ERROR] Failed to initialize backend.\n";
        return false;
    }
    std::cout << "[INFO] RmlUI Backend initialized.\n";
+
    Rml::SetSystemInterface(Backend::GetSystemInterface());
    Rml::SetRenderInterface(Backend::GetRenderInterface());
    Rml::SetFileInterface(&file_interface);
    Rml::Initialise();
    Rml::Lua::Initialise();
+
    std::cout << "[INFO] Preparing local DB...\n";
    if (!ensure_db_copied()) {
        std::cout << "[ERROR] Could not prepare local DB.\n";
        return false;
    }
+
    std::cout << "[INFO] Loading local DB...\n";
    if (!db_get_all_critters(critters)) {
        std::cout << "[ERROR] Local DB failed to initialize.\n";
        return false;
    }
    std::cout << "[INFO] Local DB initialized.\n";
+
    sync_map_to_list(critters, critter_list);
-    ctx = Rml::CreateContext("main", Rml::Vector2i(800, 600));
+
+    int window_width = 800;
+    int window_height = 600;
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            SDL_GetWindowSize(windows[0], &window_width, &window_height);
+        }
+        SDL_free(windows);
+    }
+
+    ctx = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
+    std::cout << "[INFO] Context created at " << window_width << "x" << window_height << "\n";
+
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+            ctx->SetDensityIndependentPixelRatio(display_scale);
+            SDL_Log("Display scale (dp ratio): %f", display_scale);
+        }
+        SDL_free(windows);
+    }
+    
+    SDL_Log("Context created at %dx%d", window_width, window_height);
    if (!ctx) {
        std::cout << "[ERROR] Failed to create context.\n";
        return false;
    }
    std::cout << "[INFO] Main context initialized.\n";
+
    Rml::LoadFontFace("./assets/fonts/Hubballi-Regular.ttf");
+
    Rml::Debugger::Initialise(ctx);
+
    return true;
 }
+
 bool load_document() {
    doc = ctx->LoadDocument("./assets/main.rml");
    if (!doc) {
@@ -75,6 +113,7 @@ bool load_document() {
    doc->Show();
    return true;
 }
+
 bool reload_doc() {
    if (doc) {
        Rml::Factory::ClearStyleSheetCache();
@@ -87,6 +126,7 @@ bool reload_doc() {
    }
    return true;
 }
+
 bool f5_was_pressed = false;
 bool f8_was_pressed = false;
 void handle_input() {
@@ -109,8 +149,10 @@ void handle_input() {
        }
    }
 }
+
 int main(int arc, char *argv[]) {
    std::cout << "[INFO] Starting CritterFolio...\n";
+
    is_initalized = initialize();
    if (!is_initalized) {
        std::cout << "[ERROR] Failed to initialize, shutting down.\n";
@@ -118,25 +160,51 @@ int main(int arc, char *argv[]) {
        return 1;
    }
    is_running = true;
+
    Rml::DataModelHandle app_data_handle;
+
    if (!setup_data_binding(ctx, app_data_handle, app_data, critter_list, critters)) {
        shutdown();
        return 1;
    }
+
    if (!load_document()) {
        shutdown();
        return 1;
    }
+
    std::cout << "[INFO] Main page loaded.\n";

    while (is_running) {
        is_running = Backend::ProcessEvents(ctx);
+
+        {
+            int window_count = 0;
+            SDL_Window **windows = SDL_GetWindows(&window_count);
+            if (windows && window_count > 0) {
+                int current_width = 0, current_height = 0;
+                SDL_GetWindowSize(windows[0], &current_width, &current_height);
+                
+                float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+                
+                if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
+                    ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
+                }
+                
+                if (display_scale != ctx->GetDensityIndependentPixelRatio()) {
+                    ctx->SetDensityIndependentPixelRatio(display_scale);
+                }
+            }
+            SDL_free(windows);
+        }
+        
        handle_input();
        ctx->Update();
        Backend::BeginFrame();
        ctx->Render();
        Backend::PresentFrame();
    }
+
    shutdown();
    return 0;
 }
Author	SHA1	Message	Date
chris bell	95a77fc570	Pin a specific rmlui commit	2026-08-11 11:36:52 -05:00
Chris Bell	906e5097dd	completely reworked stylesheet to use DP measurments	2026-08-09 14:55:30 -05:00
chris bell	6f6a92257a	Attempting to style for mobile	2026-08-09 11:57:13 -05:00