Skip to content

Commit

Permalink
Update story ui, rework colors and add dynamic title bar theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@motform
motform committed Apr 5, 2022
1 parent 72f4c38 commit 242f4e5
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 102 deletions.
20 changes: 8 additions & 12 deletions resources/public/css/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@
--accent-37: #f3f3f3;
--accent-38: #f9f9f9;
--accent-39: #ffffff;
--neutral-background: linear-gradient(90deg, #0b1418, #0c1519, #0e171b, #0f181c, #111a1e);
--neutral-gradient: linear-gradient(90deg, #172024, #182125, #1a2326, #1b2427, #1d2629);
--neutral-background: linear-gradient(90deg, #111a1e, #30373b);

--fantasy-0: #001410;
--fantasy-1: #002d26;
Expand All @@ -51,8 +50,7 @@
--fantasy-6: #027e6a;
--fantasy-7: #03977f;
--fantasy-8: #03b094;
--fantasy-background: linear-gradient(90deg, #0b1418, #081416, #051414, #021412, #001410);
--fantasy-gradient: linear-gradient(90deg, #002d26, #00322a, #00372e, #003c32, #014237);
--fantasy-background: linear-gradient(90deg, #001410, #002d26);

--sci-fi-0: #1a1601;
--sci-fi-1: #332b01;
Expand All @@ -62,9 +60,8 @@
--sci-fi-5: #977f03;
--sci-fi-6: #b09403;
--sci-fi-7: #c9a903;
--sci-fi-background: linear-gradient(90deg, #0b1418, #0e1412, #12150c, #161506, #1a1601);
--sci-fi-gradient: linear-gradient(90deg, #332b01, #393001, #3f3501, #453a01, #4c4002);

--sci-fi-background: linear-gradient(90deg, #1a1601, #332b01);

--poetic-0: #01111a;
--poetic-1: #012233;
--poetic-2: #02334c;
Expand All @@ -73,10 +70,8 @@
--poetic-5: #036697;
--poetic-6: #0377b0;
--poetic-7: #0388c9;
--poetic-background: linear-gradient(90deg, #0b1418, #08131c, #061220, #031124, #011128);
--poetic-gradient: linear-gradient(90deg, #012233, #012639, #012a3f, #012e45, #02334c);

--background-mixed: linear-gradient(90deg, #01111a, #031315, #091614, #12170f, #1a1601);
--poetic-background: linear-gradient(90deg, #01111a, #02334c);
--background-mixed: linear-gradient(90deg, #30373b, #002d26, #02334c, #332b01);

--bg: #0B1418;
--fg: #fff;
Expand All @@ -86,8 +81,9 @@
--spinner-fill: var(--accent-35);

--blurred-broder: #c8cacb10;
--blurred--0: #c8cacb11;
--blurred-0: #c8cacb22;
--blurred-0: #c8cacb22;
--blurred-0: #bbbbbb10;
--blurred-1: #c8cacb35;
--blurred-2: #c8cacb44;
}
113 changes: 42 additions & 71 deletions resources/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ button:disabled:hover {
button:disabled {
background-color: var(--blurred-0);
border-color: var(--blurred-0);
color: var(--accent-15);
color: var(--blurred-2);
cursor: not-allowed;
}

Expand Down Expand Up @@ -431,6 +431,10 @@ textarea:focus {
.spinner-small-2 { animation: fade 1.75s ease infinite alternate; animation-delay: 0.5s;}
.spinner-small-3 { animation: fade 1.75s ease infinite alternate; animation-delay: 1s;}

.spinner-container {
width: 100%;
}

@keyframes fade {
0% { opacity: 100; }
100% { opacity: 0; transform: translate(0, 10px)}
Expand Down Expand Up @@ -577,7 +581,6 @@ textarea:focus {
border-color: var(--blurred-2);
}


.prompt-title {
font: 24px/24px "Obviously Wide", "Arial Narrow", sans-serif;
text-transform: uppercase;
Expand Down Expand Up @@ -610,46 +613,6 @@ textarea:focus {
color: var(--fg);
}

/* comparsion */

.comparsion {
padding: 0px 0px 0px var(--space-3-4);
width: 100vw;
overflow: scroll;

display: grid;
grid-gap: 40px;
grid-auto-flow: column;
height: 95vh;
}

.comparsion-paragraph {
background-color: var(--blurred-0);
border: 1px solid var(--blurred-0);
line-height: 1.5;
font-size: 14px;
}

.comparsion-paragraph:hover {
cursor: pointer;
background-color: var(--blurred-1);
border-color: var(--blurred-0);
}

/* reader */

.reader {
max-width: 800px;
margin-top: var(--space-half);
background-color: var(--blurred-0);
border: 1px solid var(--blurred-0);
line-height: 1.4;
}

.reader h2 {
font: 70px/80px "Obviously Narrow", "Arial Narrow", sans-serif;
}

/* map */

.map {
Expand Down Expand Up @@ -702,14 +665,15 @@ textarea:focus {
.personality {
height: 45px;
width: 45px;
border-radius: 9999px;
border-radius: 50%;
background: var(--accent-8);
cursor: pointer;
/* z-index: 0; */
align-items: center;
justify-content: center;
color: var(--bg);
transition: transform 0.5s;
border: 1px solid var(--blurred-0);
}

.personality-active {
Expand Down Expand Up @@ -737,21 +701,21 @@ textarea:focus {
}


.personality-neutral-inactive { background-color: var(--accent-5); }
.personality-neutral-inactive:hover, .prompt-personality-toggle:hover > .personality-neutral-inactive { background-color: var(--accent-15); }
.personality-neutral-active { background-color: var(--accent-30); }
.personality-neutral-inactive { background-color: var(--accent-10); }
.personality-neutral-inactive:hover, .prompt-personality-toggle:hover > .personality-neutral-inactive { background-color: var(--accent-30); }
.personality-neutral-active { background-color: var(--accent-30); }

.personality-fantasy-inactive { background-color: var(--fantasy-1); }
.personality-fantasy-inactive:hover, .prompt-personality-toggle:hover > .personality-fantasy-inactive { background-color: var(--fantasy-5); }
.personality-fantasy-active { background-color: var(--fantasy-7); }
.personality-fantasy-inactive { background-color: var(--fantasy-5); }
.personality-fantasy-inactive:hover, .prompt-personality-toggle:hover > .personality-fantasy-inactive { background-color: var(--fantasy-7); }
.personality-fantasy-active { background-color: var(--fantasy-7); }

.personality-sci-fi-inactive { background-color: var(--sci-fi-1); }
.personality-sci-fi-inactive:hover, .prompt-personality-toggle:hover > .personality-sci-fi-inactive { background-color: var(--sci-fi-4); }
.personality-sci-fi-active { background-color: var(--sci-fi-6); }
.personality-sci-fi-inactive { background-color: var(--sci-fi-3); }
.personality-sci-fi-inactive:hover, .prompt-personality-toggle:hover > .personality-sci-fi-inactive { background-color: var(--sci-fi-7); }
.personality-sci-fi-active { background-color: var(--sci-fi-7); }

.personality-poetic-inactive { background-color: var(--poetic-1); }
.personality-poetic-inactive:hover, .prompt-personality-toggle:hover > .personality-poetic-inactive { background-color: var(--poetic-5); }
.personality-poetic-active { background-color: var(--poetic-7); }
.personality-poetic-inactive { background-color: var(--poetic-4); }
.personality-poetic-inactive:hover, .prompt-personality-toggle:hover > .personality-poetic-inactive { background-color: var(--poetic-7); }
.personality-poetic-active { background-color: var(--poetic-7); }

@keyframes gradient {
0% { background-position: 0% 50%; }
Expand All @@ -765,9 +729,9 @@ textarea:focus {
.story {
font-size: 20px;
line-height: 1;
height: 94vh;
height: 85vh;
display: grid;
grid-template-rows: 60% 40%;
grid-template-rows: 50% 50%;
align-items: start;
justify-items: center;
width: 100%;
Expand All @@ -776,7 +740,7 @@ textarea:focus {
.story-views {
width: 100%;
height: 100%;
padding: 0 calc(var(--space-full) - 5px);
padding: 0 var(--space-full);
}

.paragraph {
Expand Down Expand Up @@ -849,6 +813,7 @@ textarea:focus {
grid-column: span 3;
cursor: pointer;
width: 100%;
height: 100vh;
}

.parent {
Expand Down Expand Up @@ -1120,10 +1085,16 @@ h1 {
/* radial map */

.radial-map {
width: 45vw;
height: 100%;
}

.radial-map-story {
background-color: var(--blurred--0);
border: 1px solid var(--blurred-0);
border-radius: 20px;
width: 40vw;
}

.neutral-tree-map-node-root {
fill: var(--accent-30);
stroke: var(--accent-30);
Expand Down Expand Up @@ -1201,8 +1172,8 @@ h1 {
}

.fantasy-tree-map-node-current-dim {
fill: var(--fantasy-3);
stroke: var(--fantasy-3);
fill: var(--fantasy-4);
stroke: var(--fantasy-4);
stroke-width: 3px;
cursor: pointer;
}
Expand All @@ -1227,7 +1198,7 @@ h1 {
}

.fantasy-tree-map-node-inactive {
fill: var(--fantasy-3);
fill: var(--fantasy-4);
cursor: pointer;
}

Expand Down Expand Up @@ -1258,8 +1229,8 @@ h1 {
}

.sci-fi-tree-map-node-current-dim {
fill: var(--sci-fi-3);
stroke: var(--sci-fi-3);
fill: var(--sci-fi-4);
stroke: var(--sci-fi-4);
stroke-width: 3px;
cursor: pointer;
}
Expand All @@ -1284,7 +1255,7 @@ h1 {
}

.sci-fi-tree-map-node-inactive {
fill: var(--sci-fi-3);
fill: var(--sci-fi-4);
cursor: pointer;
}

Expand Down Expand Up @@ -1315,8 +1286,8 @@ h1 {
}

.poetic-tree-map-node-current-dim {
fill: var(--poetic-3);
stroke: var(--poetic-3);
fill: var(--poetic-4);
stroke: var(--poetic-4);
stroke-width: 3px;
cursor: pointer;
}
Expand All @@ -1341,7 +1312,7 @@ h1 {
}

.poetic-tree-map-node-inactive {
fill: var(--poetic-3);
fill: var(--poetic-4);
cursor: pointer;
}

Expand Down Expand Up @@ -1378,7 +1349,7 @@ h1 {

.fantasy-tree-map-link {
fill: none;
stroke: var(--fantasy-3);
stroke: var(--fantasy-4);
stroke-width: 1px;
}

Expand All @@ -1397,7 +1368,7 @@ h1 {

.sci-fi-tree-map-link {
fill: none;
stroke: var(--sci-fi-3);
stroke: var(--sci-fi-4);
stroke-width: 1px;
}

Expand All @@ -1416,7 +1387,7 @@ h1 {

.poetic-tree-map-link {
fill: none;
stroke: var(--poetic-3);
stroke: var(--poetic-4);
stroke-width: 1px;
}

Expand Down
2 changes: 1 addition & 1 deletion resources/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000">
<meta name="theme-color" content="#4e5558">
<link rel="icon" href="assets/favicon.png" type="image/png" />
<link rel="stylesheet" href="/css/reset.css" type="text/css">
<link rel="stylesheet" href="/css/fonts.css" type="text/css">
Expand Down
3 changes: 2 additions & 1 deletion src/org/motform/multiverse/components/map.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,15 @@
(fn [this]
(draw-radial-map (rdom/dom-node this) (r/props this) map-id)))

(defn radial-map-d3 []
(defn radial-map-d3 [opts]
(let [map-id (str "mapid-" (random-uuid))]
(r/create-class
{:display-name (str "radial-tree-map-" map-id)
:component-did-mount (redraw map-id)
:component-did-update (redraw map-id)
:reagent-render (fn []
[:section.radial-map
{:class (str "radial-map-" (-> opts :source name))}
[:svg {:id map-id}]])})))

(defn radial-map [source story-id settings dimensions]
Expand Down
8 changes: 4 additions & 4 deletions src/org/motform/multiverse/components/personality.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@
(defn toggle-story [personality active-personality dominant-personality]
(let [active? (= personality active-personality)
replacement-avalible? (and active? (not= personality dominant-personality))]
[:div.personality.shadow-medium.tooltip-container.h-stack.centered
[:div.personality.shadow-medium.h-stack.centered.tooltip-container
{:class (str (toggle-class personality active-personality)
(when replacement-avalible? " personality-replace"))
:on-pointer-down (cond replacement-avalible? #(rf/dispatch [:open-ai/replace-completions personality])
(not active?) #(do (rf/dispatch [:personality/active personality])
(rf/dispatch [:open-ai/replace-completions personality])))}
[:span.tooltip.rounded.shadow-small
{:style (merge {:top "15%" :left "120%"}
{:style (merge {:top "125%" :left "50%"}
(when replacement-avalible? {:width "174px"}))}
(if replacement-avalible? "Replace suggestions" (name personality))]]))

(defn toggles [page]
(defn toggles []
(let [active-personality @(rf/subscribe [:personality/active])
dominant-personality @(rf/subscribe [:personality/dominant-personality])]
[:aside.personalities.v-stack.gap-quarter.centered
[:aside.personalities.h-stack.gap-quarter.centered
(for [personality @(rf/subscribe [:personality/personalities])]
^{:key personality}
[toggle-story personality active-personality dominant-personality])]))
Loading

0 comments on commit 242f4e5

Please sign in to comment.