GH-88: SystemSpecs: Support Sysmon Image DataList

For System Monitor, Image / Picture, and DataList: - Limit System Specs child plugins to these. - Style these in System Monitor layout. - Load System Monitor styles via new `app.*` stylesheet.
TACC · Aug 13, 2021 · 3fb8a30 · 3fb8a30
1 parent 491c385
commit 3fb8a30
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 74 deletions.
diff --git a/taccsite_cms/contrib/taccsite_system_specs/cms_plugins.py b/taccsite_cms/contrib/taccsite_system_specs/cms_plugins.py
@@ -3,8 +3,8 @@
 
 from djangocms_link.cms_plugins import LinkPlugin
 
+from taccsite_cms.contrib.constants import TEXT_FOR_NESTED_PLUGIN_CONTENT_ADD
 from taccsite_cms.contrib.helpers import concat_classnames
-from taccsite_cms.contrib.taccsite_offset.cms_plugins import get_direction_classname
 
 from .constants import DEFAULT_OTHER_TITLE
 
@@ -25,6 +25,12 @@ def get_render_template(self, context, instance, placeholder):
     cache = True
     text_enabled = False
     allow_children = True
+    child_classes = [
+        'TaccsiteSysmonPlugin',
+        'PicturePlugin',
+        'Bootstrap4PicturePlugin',
+        'TaccsiteDataListPlugin',
+    ]
 
     fieldsets = [
         (_('Specifications'), {
@@ -38,6 +44,15 @@ def get_render_template(self, context, instance, placeholder):
                 'system_memory',
             )
         }),
+        (_('Footer link'), {
+            'classes': ('collapse',),
+            'description': 'The "See More Detailed Specs" link at the bottom of the list. "Display name" is for alternate link text.',
+            'fields': (
+                ('external_link', 'internal_link'),
+                ('anchor', 'target'),
+                'name',
+            )
+        }),
         (_('Subsystems and/or resources - Introduction'), {
             'fields': (
                 'other_title',
@@ -46,26 +61,27 @@ def get_render_template(self, context, instance, placeholder):
         }),
         (_('Subsystems and/or resources - Data'), {
             'classes': ('collapse',),
-            'description': '\
-            <dl>\
-                <dt>To add data</dt>\
-                    <dd>nest a plugin inside this one.</dd>\
-                <dt>To edit data</dt>\
-                    <dd>edit the existing plugin.*</dd>\
-            </dl>\
-            <br />\
-            * If the existing data is from a plugin not nested within this one, then you should nest it inside this one instead.\
-            ',
+            'description': TEXT_FOR_NESTED_PLUGIN_CONTENT_ADD.format(
+                element='data',
+                plugin_name='Data List'
+            ),
             'fields': ()
         }),
-        (_('Footer link'), {
+        (_('Image'), {
             'classes': ('collapse',),
-            'description': 'The "See All" link at the bottom of the list. "Display name" is the text.',
-            'fields': (
-                'name',
-                ('external_link', 'internal_link'),
-                ('anchor', 'target'),
-            )
+            'description': TEXT_FOR_NESTED_PLUGIN_CONTENT_ADD.format(
+                element='an image',
+                plugin_name='(…) Image'
+            ),
+            'fields': ()
+        }),
+        (_('System monitor'), {
+            'classes': ('collapse',),
+            'description': TEXT_FOR_NESTED_PLUGIN_CONTENT_ADD.format(
+                element='a system monitor',
+                plugin_name='(…) System Monitor'
+            ),
+            'fields': ()
         }),
         (_('Advanced settings'), {
             'classes': ('collapse',),
@@ -87,6 +103,17 @@ def render(self, context, instance, placeholder):
         ])
         instance.attributes['class'] = classes
 
+        # To identify child plugins
+        for plugin_instance in instance.child_plugin_instances:
+            print(type(plugin_instance).__name__)
+            if (type(plugin_instance).__name__ == 'TaccsiteSysmon'):
+                context.update({ 'sysmon_plugin': plugin_instance })
+            if (type(plugin_instance).__name__ == 'Picture' or
+                type(plugin_instance).__name__ == 'Bootstrap4Picture'):
+                context.update({ 'image_plugin': plugin_instance })
+            if (type(plugin_instance).__name__ == 'TaccsiteDataList'):
+                context.update({ 'data_plugin': plugin_instance })
+
         context.update({
             'default_other_title': DEFAULT_OTHER_TITLE,
             'has_other': instance.other_title or instance.other_desc,

diff --git a/taccsite_cms/contrib/taccsite_system_specs/templates/system_specs.html b/taccsite_cms/contrib/taccsite_system_specs/templates/system_specs.html
@@ -1,73 +1,94 @@
-{% load cms_tags %}
+{% load cms_tags static %}
 
-<article {# class="s-system-specs" #}{{ instance.attributes_str }}>
+<link rel="stylesheet" href="{% static 'site_cms/css/build/app.taccsite_system_specs.css' %}" />
 
+<article {# class="s-system-specs" #}{{ instance.attributes_str }}>
 
 
-  {# System #}
 
-  {# System Intro #}
-  <h3>System Specifications</h3>
-  <p>{{ instance.system_desc }}</p>
-
-  {# System Data #}
-  {# HELP: Build DataList plugin instance? What if DataList is not installed? #}
-  {# SEE: https://stackoverflow.com/q/27937448/11817077 #}
-  {# SEE taccsite_data_list #}
-  <table class="c-data-list
-             c-data-list--is-vert
-             c-data-list--is-narrow">
-    <tr>
-      <th class="c-data-list__key">Processors</th>
-      <td class="c-data-list__value">{{ instance.system_processor_count }}</td>
-    </tr>
-    <tr>
-      <th class="c-data-list__key">Processor Type</th>
-      <td class="c-data-list__value">{{ instance.system_processor_type }}</td>
-    </tr>
-    <tr>
-      <th class="c-data-list__key">RAM/Node</th>
-      <td class="c-data-list__value">{{ instance.system_node_ram }}</td>
-    </tr>
-    <tr>
-      <th class="c-data-list__key">Network</th>
-      <td class="c-data-list__value">{{ instance.system_network }}</td>
-    </tr>
-    <tr>
-      <th class="c-data-list__key">Peak Performance</th>
-      <td class="c-data-list__value">{{ instance.system_performance }}</td>
-    </tr>
-    <tr>
-      <th class="c-data-list__key">System Memory</th>
-      <td class="c-data-list__value">{{ instance.system_memory }}</td>
-    </tr>
-  </table>
-
-  {# See All #}
-  {% if link_url %}
-  {% spaceless %}
-  <a class="c-see-all-link" href="{{ link_url }}"
-    {% if link_target %}target="{{ link_target }}"{% endif %}>
-    <i class="c-see-all-link__icon  icon icon-push-right"></i>
-    <span class="c-see-all-link__text">{{ link_text|default:"See All" }}</span>
-  </a>
-  {% endspaceless %}
+  {# Image & Monitor #}
+  {% if image_plugin or sysmon_plugin %}
+  <figure>
+    {% if image_plugin %}
+      {% render_plugin image_plugin %}
+    {% endif %}
+    {% if sysmon_plugin %}
+    <figcaption>
+      {% render_plugin sysmon_plugin %}
+    </figcaption>
+    {% endif %}
+  </figure>
   {% endif %}
 
 
 
+  {# System #}
+  <div>
+    {# System Intro #}
+    <h3>System Specifications</h3>
+    <p>{{ instance.system_desc }}</p>
+
+    {# System Data #}
+    {# HELP: Build DataList plugin instance? What if DataList is not installed? #}
+    {# SEE: https://stackoverflow.com/q/27937448/11817077 #}
+    {# SEE taccsite_data_list #}
+    <table class="c-data-list
+                  c-data-list--is-vert
+                  c-data-list--is-narrow">
+      <tr>
+        <th class="c-data-list__key">Processors</th>
+        <td class="c-data-list__value">{{ instance.system_processor_count }}</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Processor Type</th>
+        <td class="c-data-list__value">{{ instance.system_processor_type }}</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">RAM/Node</th>
+        <td class="c-data-list__value">{{ instance.system_node_ram }}</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Network</th>
+        <td class="c-data-list__value">{{ instance.system_network }}</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Peak Performance</th>
+        <td class="c-data-list__value">{{ instance.system_performance }}</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">System Memory</th>
+        <td class="c-data-list__value">{{ instance.system_memory }}</td>
+      </tr>
+    </table>
+
+    {# System Link #}
+    {% if link_url %}
+    {% spaceless %}
+    <a class="c-see-all-link" href="{{ link_url }}"
+      {% if link_target %}target="{{ link_target }}"{% endif %}>
+      <i class="c-see-all-link__icon  icon icon-push-right"></i>
+      <span class="c-see-all-link__text">{{ link_text|default:"See More Detailed Specs" }}</span>
+    </a>
+    {% endspaceless %}
+    {% endif %}
+  </div>
+
+
+
   {# Other #}
   {% if has_other %}
+  <aside>
 
-  {# Other Intro #}
-  <h4>{{ instance.other_title|default:default_other_title }}</h4>
-  <p>{{ instance.other_desc }}</p>
+    {# Other Intro #}
+    <h4>{{ instance.other_title|default:default_other_title }}</h4>
+    <p>{{ instance.other_desc }}</p>
 
-  {# Other Data #}
-  {% for plugin_instance in instance.child_plugin_instances %}
-    {% render_plugin plugin_instance %}
-  {% endfor %}
+    {# Other Data #}
+    {% if data_plugin %}
+      {% render_plugin data_plugin %}
+    {% endif %}
 
+  </aside>
   {% endif %}
 
 

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-system-specs.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-system-specs.css
@@ -0,0 +1,111 @@
+/*
+System Specifications
+
+Styles for System Specifications content which assumes external code:
+
+- custom properties
+  (for `--global-...`)
+- `c-data-list`
+  (for "Data List")
+- `s-sysmon`
+  (for "System Monitor")
+
+Styleguide Trumps.Scopes.SystemSpecs
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+/* Layout */
+
+@media only screen and (--narrow-and-above) {
+  .s-system-specs {
+    display: flow-root;
+  }
+  .s-system-specs > * {
+    display: inline-block;
+  }
+  .s-system-specs > figure {
+    float: left;
+  }
+}
+
+
+
+/* Spacing */
+
+.s-system-specs {
+  --row-height: 32px;
+}
+
+.s-system-specs > aside {
+  margin-top: var(--row-height);
+}
+
+@media only screen and (--medium-and-below) {
+  .s-system-specs > figure {
+    margin-bottom: var(--row-height);
+  }
+}
+
+
+
+/* Sizes */
+
+@media only screen and (--medium-and-above) {
+  .s-system-specs {
+    --col-width--thin: 42%;
+    --col-width--wide: 48%;
+    --col-gutter: 10%;
+    --col-padding: 40px;
+
+    padding-inline: var(--col-padding);
+  }
+  .s-system-specs > div,
+  .s-system-specs > aside {
+    width: var(--col-width--thin);
+    padding-inline: var(--col-padding);
+  }
+  .s-system-specs > figure {
+    width: var(--col-width--wide);
+    margin-right: var(--col-gutter);
+  }
+}
+
+
+
+/* Position */
+
+.s-system-specs > figure > img {
+  display: block; /* to support margin */
+}
+.s-system-specs > figure > figcaption {
+  /* To nudge upward on top of image */
+  position: relative; /* to prevent image from appearing on top */
+  margin-top: -40px;
+}
+
+@media only screen and (--medium-and-below) {
+  .s-system-specs > figure > img {
+    /* To center horizontally */
+    width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media only screen and (--medium-and-above) {
+  .s-system-specs > figure > figcaption {
+    /* To center horizontally */
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+
+
+/* Components */
+
+.s-system-specs .c-data-list__key a {
+  font-weight: var(--medium);
+}
diff --git a/taccsite_cms/static/site_cms/css/src/app.taccsite_system_specs.css b/taccsite_cms/static/site_cms/css/src/app.taccsite_system_specs.css
@@ -0,0 +1,7 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* TRUMPS */
+@import url("_imports/trumps/s-system-specs.css");