feat: DES-2725 app page styles (#1198)

* feat: DES-2725 app page styles * feat: DES-2725 app version list gets a stylesheet * fix: DES-2725 app version list grid * fix: DES-2725 app version list grid names * fix: DES-2725 version list grid names, for real * fix: DES-2725 version list button, use bootstrap * fix: DES-2725 version list grid name syntax * fix: DES-2725 many things * fix: des-2725 spacing * fix: des-2725 h2 font weight not strong enough * fix: des-2725 h3 margin-top not enough * fix: des-2725 c-app-card__types not centered * fix: des-2725 do not mess up app grid h3's * feat!: narrower page content To make width of page content line up with width of header. BREAKING CHANGE: Global change. Pages relying on previous value may be adversely affected. * feat!: taller line-height To make space between lines of text greater. BREAKING CHANGE: Global change. Pages relying on previous value may be adversely affected. * fix: isolate taller line-height to app page * fix: DES-2725 app version list alignment * fix: apply taller line-height to all app page content * Revert "feat!: narrower page content" This reverts commit f7a1932. * feat: DES-2725 app page styles - via template (#1199) * feat: DES-2725 styles via template - **added** new CMS page template - **changed** app page styles to require class - **added** first global CSS variable (`--ds-accent-color`) - **added** custom class feature to `<body>` * fix: des-2725 c-app-card__types not centered * refactor!: rename page_type_class to page_class * fix: remove extra class in selector * chore: core-styles v2.26.0 app-card.css no diff to app-card, just using a release instead of a commit
DesignSafe-CI · Apr 16, 2024 · a2f3528 · a2f3528
1 parent e2abb16
commit a2f3528
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 2 deletions.
diff --git a/designsafe/settings/common_settings.py b/designsafe/settings/common_settings.py
@@ -309,6 +309,7 @@
     ('cms_homepage.html', 'Homepage Navigation'),
     ('ef_cms_page.html', 'EF Site Page'),
     ('cms_page.html', 'Main Site Page'),
+    ('cms_page_for_app.html', 'Main Site App Page'),
     ('cms_page_no_footer.html', 'Footerless Page'),
 )
 CMSPLUGIN_CASCADE = {

diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css
@@ -1,7 +1,7 @@
 /* STRUCTURE */
 
 /* To load most structure from Core-Styles */
-@import url("https://cdn.jsdelivr.net/gh/TACC/core-styles@v2.25.3/dist/components/c-app-card.css");
+@import url("https://cdn.jsdelivr.net/gh/TACC/core-styles@v2.26.0/dist/components/c-app-card.css");
 
 
 

diff --git a/designsafe/static/styles/app-page.css b/designsafe/static/styles/app-page.css
@@ -0,0 +1,32 @@
+@import url("./app-card.css");
+@import url("./app-version-list.css");
+
+/* To make width of page content line up with width of header. */
+/* TODO: Verify whether this is safe to put into `main.css` */
+.s-app-page > .container-fluid {
+  margin: 0 50px;
+}
+
+.s-app-page h1 {
+    color: var(--ds-accent-color, #47a59d);
+}
+.s-app-page h2 {
+    font-size: 2.0rem;
+    text-transform: none;
+
+    margin-bottom: 30px;
+}
+.s-app-page h2:not(.s-version-list *) {
+    color: var(--ds-accent-color, #47a59d);
+
+    margin-top: 40px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--ds-accent-color, #47a59d);
+}
+.s-app-page h3:not(.s-version-list *):not(.c-app-card__title) {
+    margin-top: 40px; /* double Bootstrap h3 margin-top */
+}
+
+p:where(.s-app-page *) {
+    line-height: 1.8;
+}
diff --git a/designsafe/static/styles/app-version-list.css b/designsafe/static/styles/app-version-list.css
@@ -0,0 +1,52 @@
+.s-version-list {
+    background-color: #F4F4F4;
+    padding: 20px;
+}
+.s-version-list > h2 {
+    color: inherit;
+    margin-top: unset;
+    padding-bottom: unset;
+    border-bottom: unset;
+}
+.s-version-list > article {
+    padding-top: 30px;
+    display: grid;
+    grid-template-areas:
+        "name link"
+        "desc desc";
+}
+.s-version-list > article:not(:last-of-type) {
+    padding-bottom: 15px;
+}
+.s-version-list > *:not(:first-of-type) {
+    border-top: 1px solid #333333;
+}
+.s-version-list > * > h3 {
+    grid-area: name;
+    font-size: 1.6rem;
+    font-weight: 500; /* e.g. "medium", Core-Styles `var(--medium)` */
+    margin-top: 0;
+
+    /* To center align text vertically (compared to button) */
+    display: grid;
+    align-content: center;
+}
+/* FAQ: CMS forces a button or link on its own line to be in a paragraph */
+.s-version-list > * > p:has(
+    a:only-child,
+    button:only-child
+) {
+    grid-area: link;
+    justify-self: end;
+}
+.s-version-list > * > p:not(:has(
+    a:only-child,
+    button:only-child
+)) {
+    grid-area: desc;
+}
+
+/* Bootstrap */
+.s-version-list .btn {
+    padding-inline: 24px; /* double Bootstrap .btn padding */
+}
diff --git a/designsafe/static/styles/main.css b/designsafe/static/styles/main.css
@@ -1,3 +1,7 @@
+:root {
+  --ds-accent-color: #47a59d;
+}
+
 body, html {
   background-color: #ffffff;
 }

diff --git a/designsafe/templates/base.j2 b/designsafe/templates/base.j2
@@ -68,7 +68,7 @@
       <meta name="DC.type" content="dataset">
       {% endblock %}
   </head>
-  <body ng-app="designsafe.portal" class="o-site">
+  <body ng-app="designsafe.portal" class="o-site {% block page_class %}{% endblock page_class %}">
     {% cms_toolbar %}
     <div>
         {% include 'includes/header.html' %}

diff --git a/designsafe/templates/cms_page_for_app.html b/designsafe/templates/cms_page_for_app.html
@@ -0,0 +1,6 @@
+{% extends "cms_page.html" %}
+{% load cms_tags static %}
+{% block page_class %}s-app-page{% endblock page_class %}
+{% addtoblock "css" %}
+<link href="{% static 'styles/app-page.css' %}" rel="stylesheet" />
+{% endaddtoblock %}