fix(settings): tup-308, use new form css from #500

TACC · Jul 6, 2022 · d813bee · d813bee
1 parent eec0d4a
commit d813bee
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 13 deletions.
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css
@@ -0,0 +1,7 @@
+@import url("@tacc/core-styles/src/lib/_imports/components/c-button.css");
+
+.c-button {
+  --max-width: unset;
+
+  font-size: 1.6rem;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css
@@ -11,25 +11,86 @@ Reference:
 Styleguide Components.DjangoCMS.Blog.App
 */
 
+
+
+/* Content */
+
 .description {
   margin-block: 25px;
 }
 
-.field-errors {
+.help-text {
   font-size: var(--global-font-size--small);
+  font-style: italic;
+  margin-top: 0.5rem; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
+p.help-text:last-child {
+  margin-bottom: 0;
+}
+
+
+
+/* Field */
+
 .field-wrapper {
   margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
 }
-.button-wrapper {
-  margin-top: 35px;
+
+.field-wrapper:not(.checkboxinput) {
+  display: flex;
+  flex-direction: column;
+  align-items: start; /* i.e. prevent stretch */
+}
+.field-wrapper:not(.checkboxinput) > .field-errors {
+  order: 1; /* i.e. move to end */
 }
 
-.help-text {
+.field-wrapper.checkboxinput {
+  display: inline-grid;
+
+  column-gap: 0.25em;
+  align-items: baseline;
+  grid-template-columns: min-content auto; /* shrink input, let label extend */
+  grid-template-areas:
+    'error _____'
+    'input label'
+    'notes notes';
+}
+.field-wrapper.checkboxinput .field-errors { grid-area: error; }
+.field-wrapper.checkboxinput input         { grid-area: input; }
+.field-wrapper.checkboxinput label         { grid-area: label; }
+.field-wrapper.checkboxinput .help-text    { grid-area: notes; }
+.field-wrapper.checkboxinput label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+
+
+/* Errors */
+
+.field-errors {
   font-size: var(--global-font-size--small);
-  font-style: italic;
-  margin-top: 0.5rem; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
-p.help-text:last-child {
-  margin-bottom: 0;
+.field-errors ul {
+  margin-top: 1rem; /* mimic ul margin-bottom */
+  margin-bottom: 0; /* overwrite ul margin-bottom */
+}
+
+
+
+/* Lists */
+
+ul.radioselect,
+ul.checkboxselectmultiple {
+  list-style: none;
+
+  padding-left: 0;
+}
+
+
+
+/* Layout */
+
+.button-wrapper {
+  margin-top: 35px;
 }
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css
@@ -19,10 +19,12 @@ form {
 }
 
 label {
-  display: block;
   font-size: var(--global-font-size--small);
 }
-label:not(:first-child):not() {
+label:not(input[type="checkbox"] + label) {
+  display: block;
+}
+label:not(:first-child) {
   margin-top: 2rem; /* mimic <p> `margin-bottom` */
   /* margin-bottom: 0.5rem; *//* mimic Bootstrap _reboot.css */
 }
@@ -34,7 +36,10 @@ input,
 select,
 textarea {
   padding: 15px 10px;
+  border: var(--global-border--normal);
 }
-input[type="time"] {
+
+input[type="time"],
+input[type="date"] {
   font-family: var(--global-font-family--mono);
 }
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css
@@ -18,6 +18,8 @@
 /* ELEMENTS */
 /* Bootstrap performs much of this */
 @import url("_imports/elements/html-elements.css");
+/* Unique to CMS */
+@import url("./_imports/elements/form.css");
 /* Load custom element styles within custom element, not here */
 
 /* OBJECTS */
@@ -36,8 +38,10 @@
 @import url("_imports/components/bootstrap.container.css");
 @import url("_imports/components/bootstrap.figure.css");
 /* Unique to CMS */
+@import url("./_imports/components/c-button.css");
 @import url("./_imports/components/django.cms.css");
 @import url("./_imports/components/django.cms.blog.css");
+@import url("./_imports/components/django.cms.forms.css");
 @import url("./_imports/components/django.cms.post.css");
 @import url("./_imports/components/django.cms.picture.css");
 

diff --git a/taccsite_cms/templates/djangocms_forms/form_template/default.html b/taccsite_cms/templates/djangocms_forms/form_template/default.html
@@ -61,8 +61,6 @@ <h4>{% trans 'Submission successful' %}</h4>
 </div>
 
 {% addtoblock "css" %}
-    <link rel="stylesheet" href="{% static 'site_cms/css/build/app.forms.css' %}" />
-
     {% if instance.use_honeypot %}
         <style type="text/css">
             .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }