updated UI with pencil icon wobble and positioning

hazelgrove · Jun 25, 2024 · 294f669 · 294f669
1 parent 5edf1c9
commit 294f669
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/haz3lweb/view/ExerciseMode.re b/src/haz3lweb/view/ExerciseMode.re
@@ -77,7 +77,7 @@ let view =
   let title_view = {
     Cell.simple_cell_view([
       div(
-        ~attr=Attr.class_("title-cell"),
+        ~attr=Attr.many([Attr.class_("title-cell")]),
         [
           settings.instructor_mode
             ? settings.editing_title
@@ -86,7 +86,6 @@ let view =
                       Attr.many([
                         Attr.class_("title-text"),
                         Attr.value(eds.title),
-                        Attr.id("title-input"),
                         Attr.on_keydown(evt =>
                           if (evt##.keyCode === 13) {
                             let new_title = Obj.magic(evt##.target)##.value;
@@ -109,8 +108,13 @@ let view =
                     ~attr=Attr.many([Attr.class_("title-text")]),
                     [
                       text(eds.title),
-                      Widgets.button(Icons.pencil, _ =>
-                        inject(Set(EditingTitle))
+                      div(
+                        ~attr=Attr.class_("pencil-icon"),
+                        [
+                          Widgets.button(Icons.pencil, _ =>
+                            inject(Set(EditingTitle))
+                          ),
+                        ],
                       ),
                     ],
                   )

diff --git a/src/haz3lweb/www/style.css b/src/haz3lweb/www/style.css
@@ -714,12 +714,27 @@ select {
 
 .title-cell {
   padding-left: 1em;
+  display: flex;
+  align-items: center;
 }
 
 .title-cell .title-text {
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--light-text-color);
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+
+.title-cell .pencil-icon {
+  margin-left: 0.5em;
+  cursor: pointer;
+  color: #7a6219;
+}
+
+.title-cell .pencil-icon:hover {
+  animation: wobble 0.6s ease 0s 1 normal forwards;
 }
 
 .cell-prompt {