From db0fc679dcef0360c4b99d28d9126026b893af70 Mon Sep 17 00:00:00 2001 From: Frederick Muriuki Muriithi Date: Fri, 10 Dec 2021 09:06:31 +0300 Subject: Implement better styling Issue: https://github.com/genenetwork/gn-gemtext-threads/blob/main/topics/gn1-migration-to-gn2/partial-correlations.gmi * Separate the form elements that allow selection from the elements that display previous selections. This allows styling of the "active" area of the form in a different way from the "display" area of the form, allowing the user to see information on their previous choices, even while making further selections for the partial correlations. --- .../static/new/css/partial_correlations.css | 30 +++++ .../wqflask/templates/partial_correlations.html | 140 ++++++++++++--------- 2 files changed, 108 insertions(+), 62 deletions(-) create mode 100644 wqflask/wqflask/static/new/css/partial_correlations.css diff --git a/wqflask/wqflask/static/new/css/partial_correlations.css b/wqflask/wqflask/static/new/css/partial_correlations.css new file mode 100644 index 00000000..ebc00302 --- /dev/null +++ b/wqflask/wqflask/static/new/css/partial_correlations.css @@ -0,0 +1,30 @@ +#partial-correlations-form { + width: 100%; + display: grid; + grid-column-gap: 1em; +} + +#main-form { + grid-column-start: 1; + grid-column-end: 2; +} + +#form-display-area { + grid-column-start: 2; + grid-column-end: 3; +} + +.label-element-combo { + width: 100%; + display: grid; +} + +.with-trait > label { + width: 80%; + grid-column-start: 2; +} + +.with-trait > input { + width: 20%; + grid-column-start: 2; +} diff --git a/wqflask/wqflask/templates/partial_correlations.html b/wqflask/wqflask/templates/partial_correlations.html index b61f7fc4..ddf6fb4e 100644 --- a/wqflask/wqflask/templates/partial_correlations.html +++ b/wqflask/wqflask/templates/partial_correlations.html @@ -1,10 +1,17 @@ {%extends "base.html"%} +{%block title%}Partial Correlations:{%endblock%} + +{%block css%} + +{%endblock%} + {%block content%} -
-
+ + +
{%with messages = get_flashed_messages(with_categories=true)%} {%if messages:%}
    @@ -15,60 +22,10 @@ {%endif%} {%endwith%} - - - - {%if primary_trait:%} - -

    - Primary Trait: {{primary_trait["name"]}} -  - {{primary_trait["symbol"]}} - {{primary_trait["description"]}} -

    - {%endif%} - - {%if control_traits:%} - -

    - Control Traits: -

      - {%for trait in control_traits:%} -
    • - {{trait["name"]}} - {{trait["symbol"]}} -  - {{trait["description"]}}
      • - {%endfor%} -
    -

    - {%endif%} - - {%if target_traits:%} - -

    - Target Traits: -

      - {%for trait in target_traits:%} -
    • - {{trait["name"]}} - {{trait["symbol"]}} -  - {{trait["description"]}}
      • - {%endfor%} -
    -

    - {%endif%} - - - {%if step == "select-primary":%}

    Please select the primary trait (X)

    {%for trait in traits_list:%} -
    +
    Select a maximum of three (3) control traits (Z)

    {%for trait in traits_list:%} -
    +
    Select at least one target trait (Y)

    {%for trait in traits_list:%} -
    +
    +
    -
    +
    -
    +
    + + + {%if primary_trait:%} + + +
    +
    Primary Trait (X)
    +
    + {{primary_trait["name"]}} -  + {{primary_trait["symbol"]}} - {{primary_trait["description"]}} +
    +
    + {%endif%} + + {%if target_traits:%} + +
    +
    Target Traits (Y)
    +
    +
      + {%for trait in target_traits:%} +
    • + {{trait["name"]}} - {{trait["symbol"]}} -  + {{trait["description"]}}
      • + {%endfor%} +
    +
    +
    + {%endif%} + + {%if control_traits:%} + +
    +
    Control Traits (Z)
    +
    +
      + {%for trait in control_traits:%} +
    • + {{trait["name"]}} - {{trait["symbol"]}} -  + {{trait["description"]}}
      • + {%endfor%} +
    +
    +
    + {%endif%} +
    + + {%endblock%} -- cgit v1.2.3