Styling

main.py

@@ -141,6 +141,7 @@ else:
 
 hdrs = (
         HighlightJS(langs=['python', 'c', 'c++']),
+        Link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css", type="text/css"),
         # Meta(name="htmx-config", content='{"defaultSwapStyle":"outerHTML"}')
         )
 
@@ -232,11 +233,12 @@ def html_create_feedback_updown_button(qe_id, ans_id, selected=0, disabled=False
                 hx_swap="outerHTML", style=f"background-color:{up_col}")
     down = Button("👎", hx_get=f"{toggle_url}/-1", disabled=disabled, target_id=html_target_id,
                   hx_swap="outerHTML", style=f"background-color:{down_col}")
-    button_row = Div(up, down, id=html_target_id)
+    button_row = Div(up, down, id=html_target_id, _class="box col-xs-1",
+                     style=f"flex: 0 0 auto; display: flex; gap: 5px; margin-right: 10px;")
     return button_row
 
 
-def html_augment_evaluation_text_with_feedback(eval_html, qe_obj, ans_id):
+def html_augment_signle_evaluation_text_with_feedback(eval_html, qe_obj, ans_id):
     """
     Will plot the + / - buttons for feedback.
 
@@ -248,7 +250,9 @@ def html_augment_evaluation_text_with_feedback(eval_html, qe_obj, ans_id):
     answer_eval_js = json.loads(qe_obj.answer_eval_text)
     buttons = html_create_feedback_updown_button(qe_obj.id, ans_id, answer_eval_js[ans_id]["EVAL"],
                                                  disabled=(qe_obj.submitted == 1))
-    final_div = Div(eval_html, buttons, style=" background-color: #f0f0f0;")
+    final_div = Div(eval_html, buttons,
+                    style=" background-color: #f0f0f0; display: flex; "
+                          "width: 98%; margin: 16px; padding: 3px; align-items: center;", cls="row")
     return final_div
 
 
@@ -355,13 +359,16 @@ def html_format_code_review_form(qe_obj):
     list_of_citerias = []
     for caug_code, caug_txt in eval_code.CODE_AUGMENTATIONS:
         crit_tag = [H3(caug_code), P(caug_txt)]
-        list_of_citerias.extend(crit_tag)
+        # list_of_citerias.extend(crit_tag)
         # yeah, I know . . .
+        eval_txt_fb_list = []
         for k, eval_line in enumerate(enhanced_answer):
             if caug_code == eval_line["criteria"]:
-                eval_txt = P(eval_line["explanation"])
-                eval_txt_fb = html_augment_evaluation_text_with_feedback(eval_txt, qe_obj, k)
-                list_of_citerias.append(eval_txt_fb)
+                eval_txt = Div(P(eval_line["explanation"]), style="flex: 1; margin-right: 10px;", cls="box col-xs-11")
+                eval_txt_fb = html_augment_signle_evaluation_text_with_feedback(eval_txt, qe_obj, k)
+                eval_txt_fb_list.append(eval_txt_fb)
+        criteria_div = Div(*crit_tag, *eval_txt_fb_list, style="border: 1px solid black; margin: 10px; padding: 10px")
+        list_of_citerias.append(criteria_div)
     textual_feedback = html_get_textual_feedback_form(qe_obj)
     return html_render_code_output(c_code), *list_of_citerias, textual_feedback
 
@@ -429,7 +436,7 @@ def html_render_code_output(code):
     return txtarea
 
 
-def html_render_answer_from_db(session_id):
+def html_render_answer_from_db(session_id, show_submit_form=True):
     eval_request_status, state_obj = get_latest_eval_request_status(session_id)
     # state_rows = session_state_table(limit=1, where=f"session_id == '{session_id}'", order_by="id DESC")
     # print(eval_request_status, state_obj)
@@ -442,7 +449,8 @@ def html_render_answer_from_db(session_id):
             return (None,)
         qe_obj = qe_obj_lst[0]
         return (html_format_code_review_form(qe_obj),
-                html_render_inputbox(target_html_id=HTML_RESULTS_AREA, region_html_id=HTML_SUBMIT_CODE_AREA))
+                html_render_inputbox(target_html_id=HTML_RESULTS_AREA,
+                                     region_html_id=HTML_SUBMIT_CODE_AREA) if show_submit_form else None)
     if eval_request_status == EVAL_STATE_TIMEDOUT:
         return html_eval_request_timed_out(),
     if eval_request_status == EVAL_STATE_QUERY:
@@ -510,14 +518,14 @@ def call_gpt_and_store_result(session_obj_id, code_to_check):
         traceback.print_exc()
 
 
-def tl_html_results_and_feedback_area(session_id):
+def tl_html_results_and_feedback_area(session_id, show_submit_form=True):
     """
     Top level component that will render the code evaluation overlapped with feedback submission form.
 
     :param session_id:
     :return:
     """
-    results_feedback_area = html_render_answer_from_db(session_id)
+    results_feedback_area = html_render_answer_from_db(session_id, show_submit_form)
     return Div(*results_feedback_area, id=HTML_RESULTS_AREA)
 
 
@@ -570,7 +578,7 @@ def html_render_login_to_get_access_part(session):
     :return:
     """
     content = []
-    content.append(H3("Log in to give feedback!"))
+    content.append(H4("Log in to give feedback!"))
     content.append(P("We will record your name, hugginface name, hf profile page, email address. "
                      "We will try HARD not to make them public but . . ."))
     content.append(P("Your feedback will be made public but in an anonymized form."))
@@ -621,7 +629,7 @@ function checkPopupClosed() {
       href=redirect_link, onclick="return openPopup(this.href); return false;")
     content.append(login_button)
     content.append(P(" "))
-    div = Div(*content, id=HTML_USER_DATA)
+    div = Div(*content, id=HTML_USER_DATA, style="background-color: #f0f0f0; padding: 10px;")
     return div
 
 def html_render_welcome_user(user_info):
@@ -636,7 +644,7 @@ def html_render_welcome_user(user_info):
     # content.append(Img(src=OPENID_PROVIDER_URL + user_info["picture"], alt="Picture"))
     content.append(P("Your feedback will be made public but in an anonymized form."))
     content.append(P(A("Logout", href=f"/logout")))
-    div = Div(*content, id=HTML_USER_DATA)
+    div = Div(*content, id=HTML_USER_DATA, style="background-color: #f0f0f0; padding: 10px;")
     return div
 
 
@@ -777,10 +785,10 @@ def get(session):
     ]
 
     input_area = html_render_inputbox(target_html_id=HTML_RESULTS_AREA, region_html_id=HTML_SUBMIT_CODE_AREA)
-    results_feedback_area = tl_html_results_and_feedback_area(session_id)
+    results_feedback_area = tl_html_results_and_feedback_area(session_id, show_submit_form=False)
     clear_area = render_clear_area(session_id, HTML_CLEAR_FORM)
     # print(session)
-    return title, Main(*preamble, input_area, results_feedback_area, clear_area)
+    return title, Main( *preamble, input_area, results_feedback_area, clear_area)
 
 
 @rt("/submit_to_eval", methods="post")