Skip to content

Commit

Permalink
Small layout improvements in admin and config screens.
Browse files Browse the repository at this point in the history
  • Loading branch information
@liffiton
liffiton committed Dec 7, 2024
1 parent 37938cd commit b55a260
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 57 deletions.
4 changes: 2 additions & 2 deletions src/codehelp/templates/context_config.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<div class="content">
<h2 class="title is-size-4">Contexts</h2>
<p style="max-width: 50em">Contexts provide additional information to the LLM for each query a student makes. You can have a single default context that is always used, or you can create separate contexts for individual assignments or modules. If multiple contexts are available, students will be able to select from them when making queries.</p>
<p>Contexts provide additional information to the LLM for each query a student makes. You can have a single default context that is always used, or you can create separate contexts for individual assignments or modules. If multiple contexts are available, students will be able to select from them when making queries.</p>
{% if contexts | length == 0 %}
<p class="has-text-danger">While not strictly required, we recommend defining at least one context to specify the language(s), frameworks, and/or libraries in use in this class.</p>
{% endif %}
Expand Down Expand Up @@ -89,7 +89,7 @@ <h2 class="title is-size-4">Contexts</h2>
}));
});
</script>
<table class="table is-hoverable is-narrow" x-data="reorderable">
<table class="table is-hoverable is-narrow" style="width: auto; min-width: min(40em, 80%); margin: auto;" x-data="reorderable">
<thead>
<tr>
<th class="p-0 has-text-centered has-text-grey" title="Reorder">
Expand Down
12 changes: 9 additions & 3 deletions src/gened/templates/admin_main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@
{% endfor %}
</div>

<div class="tbl_cols">
<div class="tbl_col" style="width: 50em;">
<div class="flex_items">
<div class="flex_item">
<h1 class="is-size-3">Consumers <a class="button is-light is-link is-small mt-2" href="{{url_for('admin.consumer_new')}}">Create New</a></h1>
{{ datatable(
'consumers',
Expand All @@ -52,6 +52,8 @@ <h1 class="is-size-3">Consumers <a class="button is-light is-link is-small mt-2"
link_template=filters.template_string('consumer') | safe,
extra_links=[{'icon': "pencil", 'text': "Edit consumer", 'handler': "admin.consumer_form", 'param': "consumer_id"}],
) }}
</div>
<div class="flex_item">
<h1 class="is-size-3">Classes</h1>
{{ datatable(
'classes',
Expand All @@ -61,6 +63,8 @@ <h1 class="is-size-3">Classes</h1>
link_template=filters.template_string('class') | safe,
extra_links=[{'icon': "admin", 'text': "Administer class", 'handler': "classes.switch_class_handler", 'param': "class_id"}],
) }}
</div>
<div class="flex_item">
<h1 class="is-size-3">Users</h1>
{{ datatable(
'users',
Expand All @@ -69,6 +73,8 @@ <h1 class="is-size-3">Users</h1>
link_col=0,
link_template=filters.template_string('user') | safe,
) }}
</div>
<div class="flex_item">
<h1 class="is-size-3">Roles</h1>
{{ datatable(
'roles',
Expand All @@ -78,7 +84,7 @@ <h1 class="is-size-3">Roles</h1>
link_template=filters.template_string('role') | safe,
) }}
</div>
<div class="tbl_col" style="width: 75em; flex-grow: 1;">
<div class="flex_item" style="flex-basis: max-content;">
<h1 class="is-size-3">
Queries
</h1>
Expand Down
4 changes: 2 additions & 2 deletions src/gened/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
main.site-content { flex: 1; } /* expand main content, push footer to bottom of page/viewport */
span[title] { text-decoration: underline; text-decoration-style: dotted; }
pre, .content pre { padding: 0.5rem 0.75rem; }
.tbl_cols { display: flex; gap: 2em; flex-wrap: wrap; }
.tbl_col { overflow: auto; }
.flex_items { display: flex; gap: 2em; flex-wrap: wrap; }
.flex_item { flex: 1 0 10em; min-width: min-content; overflow-auto; }
dialog { border: none; background: none; }
dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
p.help-text { font-size: 85%; margin-bottom: 0.5em; opacity: 92%; }
Expand Down
91 changes: 41 additions & 50 deletions src/gened/templates/instructor_class_config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,26 @@
max-width: 1600px;
margin: auto;
}
.conf_cols {
display: flex;
justify-content: center;
gap: 1em;
}
.item_sep { border: 2px solid #ccc; margin: 1em; }
@media (max-width: 1200px) {
/* flip to column below a given width (instead of just using flex-wrap) so any .sep item becomes a horizontal line */
.conf_cols { flex-direction: column; }
}
.conf_col_sep {
/* draw a line between config sections */
border: 2px solid #ccc;
.flex_items { flex-direction: column; }
}
.conf_col .field-body {
.field-body {
/* override bulma sizing for these forms */
flex-grow: 2;
}
.conf_col input[type='checkbox'],
.conf_col input[type='radio'] {
input[type='checkbox'],
input[type='radio'] {
transform: scale(2.0);
margin: 0.5rem;
margin-top: 0.8rem;
}
</style>
<section class="section">
<h1 class="title">Configure Class: {{ auth.cur_class.class_name }}</h1>
<div class="conf_cols">
<div class="conf_col">
<div class="flex_items" style="gap: 0;">
<div class="flex_item">
<h2 class="title is-size-4">Access</h2>
<form action="{{ url_for("instructor.set_user_class_setting") }}" method="post">
<div class="field is-horizontal">
Expand Down Expand Up @@ -120,7 +112,7 @@ <h2 class="title is-size-4">Access</h2>

{% if class_row['link_ident'] %}
{# link_ident only in classes_user, so will only be set for user classes. #}
<div class="conf_col_sep mt-5"></div>
<div class="item_sep"></div>

<h2 class="title is-size-4 mt-5">Language Model</h2>
<form action="{{ url_for("instructor.set_user_class_setting") }}" method="post" x-data="{
Expand Down Expand Up @@ -228,50 +220,49 @@ <h2 class="title is-size-4 mt-5">Language Model</h2>
</div>

{% if extra_sections %}
<div class="conf_col_sep"></div>
<div class="conf_col">
<div class="item_sep"></div>
<div class="flex_item">
{% for extra_section in extra_sections %}
{{ extra_section }}
{% if not loop.last %}
<div class="conf_col_sep mt-5 mb-5"></div>
<div class="item_sep"></div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</section>

<div class="conf_col_sep m-5"></div>
<div class="item_sep" style="min-width: 90%;"></div>

<section class="section">
<div class="box" style="max-width: 50em; margin: auto; border: 2px solid #f009; background: #ff000008">
<h2 class="title is-4 has-text-danger">Delete Class Data</h2>
<div class="content">
<p>This will:
<ul>
<li>Delete all user inputs made in this class</li>
<li>Remove all users from the class, including you</li>
<li>Delete class configuration data</li>
<li>Anonymize all class usage data</li>
</ul>
</p>
<p>Users will <em>not</em> be deleted, nor will their data in any other class they are enrolled in.</p>
{% if auth.user.auth_provider == 'lti' %}
<p>This class was accessed using a link from an LMS. If that link still exists in the LMS after deleting the class data here, anyone following it will create a new, distinct instance of this class in CodeHelp (without any old data, but still with the ability to submit new queries). To prevent that, remove the link from the LMS <em>before</em> deleting the class data here.</p>
{% endif %}
<p>Type "DELETE" in the text box to confirm you want to delete data for this class.</p>
<p class="has-text-danger"><strong class="has-text-danger">Warning:</strong> Deleting class data cannot be undone.</p>
</div>
<form method="POST" action="{{ url_for('instructor.delete_class') }}" class="field has-addons">
<input type="hidden" name="class_id", value="{{ auth.cur_class.class_id }}">
<div class="control">
<input class="input is-danger" type="text" name="confirm_delete" placeholder="Type DELETE to confirm">
</div>
<div class="control">
<button type="submit" class="button is-danger">
Delete Class Data
</button>
<div class="box" style="max-width: 50em; margin: auto; border: 2px solid #f009; background: #ff000008">
<h2 class="title is-4 has-text-danger">Delete Class Data</h2>
<div class="content">
<p>This will:
<ul>
<li>Delete all user inputs made in this class</li>
<li>Remove all users from the class, including you</li>
<li>Delete class configuration data</li>
<li>Anonymize all class usage data</li>
</ul>
</p>
<p>Users will <em>not</em> be deleted, nor will their data in any other class they are enrolled in.</p>
{% if auth.user.auth_provider == 'lti' %}
<p>This class was accessed using a link from an LMS. If that link still exists in the LMS after deleting the class data here, anyone following it will create a new, distinct instance of this class in CodeHelp (without any old data, but still with the ability to submit new queries). To prevent that, remove the link from the LMS <em>before</em> deleting the class data here.</p>
{% endif %}
<p>Type "DELETE" in the text box to confirm you want to delete data for this class.</p>
<p class="has-text-danger"><strong class="has-text-danger">Warning:</strong> Deleting class data cannot be undone.</p>
</div>
</form>
<form method="POST" action="{{ url_for('instructor.delete_class') }}" class="field has-addons">
<input type="hidden" name="class_id", value="{{ auth.cur_class.class_id }}">
<div class="control">
<input class="input is-danger" type="text" name="confirm_delete" placeholder="Type DELETE to confirm">
</div>
<div class="control">
<button type="submit" class="button is-danger">
Delete Class Data
</button>
</div>
</form>
</div>
</div>
</section>

Expand Down

0 comments on commit b55a260

Please sign in to comment.