🆕 Update visual styling for new revision flow

punchcard-cms · Jul 27, 2016 · 5030498 · 5030498
1 parent 495e311
commit 5030498
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 75 deletions.
diff --git a/src/sass/_punchcard.scss b/src/sass/_punchcard.scss
@@ -25,6 +25,7 @@
 @import 'partials/components/404';
 @import 'partials/components/forms';
 @import 'partials/components/introduction';
+@import 'partials/components/listing';
 @import 'partials/components/nav';
 @import 'partials/components/siteheader';
 //////////////////////////////

diff --git a/src/sass/partials/base/_base.scss b/src/sass/partials/base/_base.scss
@@ -46,21 +46,15 @@
   }
 
   &--dl {
-    display: block;
-    margin-left: setting-get('rhythm');
-
-    @include breakpoint(setting-get('fixed container')) {
-      margin-left: 0;
-    }
+    @include dl;
   }
 
   &--dt {
-    color: setting-get('secondary color');
-    font-weight: setting-get('bold font weight');
+    @include dt;
   }
 
   &--dd {
-    margin-left: setting-get('rhythm');
+    @include dd;
   }
 
   &--li {
@@ -139,7 +133,7 @@
     display: flex;
     font-size: ms(-1);
     margin: 0;
-    padding: setting-get('rhythm') / 2;
+    padding: setting-get('rhythm') / 4 setting-get('rhythm') / 2;
     @include breakpoint(setting-get('responsive table')) {
       display: table-cell;
       font-size: 1em;
@@ -149,7 +143,7 @@
     &::before {
       background-color: setting-get('primary color');
       color: setting-get('primary accent color');
-      content: attr(data-th)': ';
+      content: attr(data-th)'';
       display: inline-block;
       font-weight: setting-get('bold font weight');
       margin: -.5rem .5em -.5rem -.5rem;

diff --git a/src/sass/partials/components/_listing.scss b/src/sass/partials/components/_listing.scss
@@ -0,0 +1,27 @@
+.listing {
+
+  @include breakpoint(setting-get('max character legnth')) {
+    width: 75%;
+  }
+
+  &--h3 {
+    color: setting-get('active link color');
+    font-size: ms(-1);
+    font-weight: setting-get('bold font weight');
+    letter-spacing: 1px;
+    margin-top: setting-get('rhythm') / .5;
+    text-transform: uppercase;
+  }
+
+  &--dl {
+    @include dl;
+  }
+
+  &--dt {
+    @include dt;
+  }
+
+  &--dd {
+    @include dd;
+  }
+}
diff --git a/src/sass/partials/global/_mixins.scss b/src/sass/partials/global/_mixins.scss
@@ -29,6 +29,28 @@
   }
 }
 
+@mixin dl {
+  display: block;
+}
+
+@mixin dd {
+  margin-left: setting-get('rhythm') / .75;
+
+  @include breakpoint(setting-get('fixed container')) {
+    margin-left: setting-get('rhythm') / .5;
+  }
+}
+
+@mixin dt {
+  background-color: color('neutral-white', 40);
+  font-weight: setting-get('bold font weight');
+  padding: setting-get('rhythm') / 2 setting-get('rhythm') / .75;
+
+  @include breakpoint(setting-get('fixed container')) {
+    padding: setting-get('rhythm') / 2 setting-get('rhythm') / .5;
+  }
+}
+
 @mixin checkbox {
   display: none;
 

diff --git a/src/sass/partials/global/_variables.scss b/src/sass/partials/global/_variables.scss
@@ -21,8 +21,8 @@ $GlobalSettings: map-merge($GlobalSettings, $ColorScheme);
 
 $TypographySettings: (
   'large typography breakpoint': 800px,
-  'base font': 18px,
-  'small font': 16px,
+  'base font': 16px,
+  'small font': 14px,
   'base line height': 1.5em,
   'sans serif font': ('Helvetica Neue', Helvetica, 'Open Sans', Arial, 'Lucida Grande', 'Roboto', sans-serif),
   'monospace font': ('Courier New', 'Lucida Console', monospace),

diff --git a/views/content/approval.html b/views/content/approval.html
@@ -12,22 +12,23 @@
 <h1 class="base--h1">{{title}}</h1>
 
 {% if revision %}
-  <h2 class="base--h2">{{config.actions.approve}} :: [TBAdded: Primary Key Contents]</h2>
+  <h2 class="base--h2">{{config.actions.approve|capitalize}} :: [TBAdded: Primary Key Contents]</h2>
 
   {% if data %}
+    <div class="listing">
     {% for attr, inputs in data %}
-      <h3>{{attr}}</h3>
+      <h3 class="listing--h3">{{attr|capitalize}}</h3>
 
       {% if inputs.length %}
         {# repeatable content #}
         {% for rpt in inputs %}
           {% for input, value in rpt %}
             {% if loop.first %}
-              <dl class="base--dl">
+              <dl class="listing--dl">
             {% endif %}
 
-            <dt class="base--dt">{{input}}</dt>
-            <dd class="base--dd">{{value.value}}</dd>
+            <dt class="listing--dt">{{input}}</dt>
+            <dd class="listing--dd">{{value.value}}</dd>
 
             {% if loop.last %}
               </dl>
@@ -36,37 +37,42 @@ <h3>{{attr}}</h3>
         {% endfor %}
       {% else %}
         {% for input, value in inputs %}
-          <dl class="base--dl">
-            <dt class="base--dt">{{input}}</dt>
-            <dd class="base--dd">{{value.value}}</dd>
+          <dl class="listing--dl">
+            <dt class="listing--dt">{{input}}</dt>
+            <dd class="listing--dd">{{value.value}}</dd>
           </dl>
         {% endfor %}
       {% endif %}
     {% endfor %}
-    </dl>
+    </div>
   {% endif %}
 
   {% include "content/_form-approval.html" %}
 
   {% if revision.audit.entries %}
-    <h2>Previous Comments</h2>
-    <table>
-      <tr>
-        <th>person</th>
-        <th>action</th>
-        <th>step</th>
-        <th>comment</th>
-        <th>date</th>
-      </tr>
-    {% for e in revision.audit.entries %}
-      <tr>
-        <td>{{e.author.email}}</td>
-        <td>{{e.action}}</td>
-        <td>{{e.step}}</td>
-        <td>{{e.comment}}</td>
-        <td>{{e.created.date}}</td>
-      </tr>
-    {% endfor %}
+    <hr class="base--hr" />
+    <h2 class="base--h2">Previous Comments</h2>
+    <table class="base--table">
+      <thead class="base--thead">
+        <tr class="base--tr">
+          <th class="base--th">Person</th>
+          <th class="base--th">Action</th>
+          <th class="base--th">Step</th>
+          <th class="base--th">Comment</th>
+          <th class="base--th">Date</th>
+        </tr>
+      </thead>
+      <tbody class="base--tbody">
+      {% for e in revision.audit.entries %}
+        <tr class="base--tr">
+          <td data-th="Person" class="base--td">{{e.author.email}}</td>
+          <td data-th="Action" class="base--td">{{e.action}}</td>
+          <td data-th="Step" class="base--td">{{e.step}}</td>
+          <td data-th="Comment" class="base--td">{{e.comment}}</td>
+          <td data-th="Date" class="base--td">{{e.created.date}}</td>
+        </tr>
+      {% endfor %}
+      </tbody>
     </table>
   {% endif %}
 

diff --git a/views/content/content.html b/views/content/content.html
@@ -15,25 +15,24 @@ <h2 class="base--h2">Revisions</h2>
 
 {% if content %}
 
-  <table class="table--style">
+  <table class="base--table">
     <thead class="base--thead">
       <tr class="base--tr">
         <th class="base--th">revision</th>
         <th class="base--th">date</th>
         <th class="base--th">{{config.base}}</th>
-        <th class="base--th">{{config.actions.edit}}</th>
-        <th class="base--th">{{config.actions.approve}}</th>
+        <th class="base--th" colspan="2">Actions</th>
       </tr>
     </thead>
     <tbody class="base--tbody">
     {% for c in content %}
       {% if c.value %}
         <tr class="base--tr">
-          <td class="base--td">{{c.revision}}</td>
+          <td data-th="Revision" class="base--td">{{c.revision}}</td>
           <td data-th="date" class="base--td">{{c.created}}</td>
           <td data-th="{{config.base}}" class="base--td">{{c.value[type.primary]}}</td>
-          <td data-th="{{config.actions.edit}}" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
-          <td data-th="{{config.actions.approve}}" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.approve}}" class="base--link">{{config.actions.approve|capitalize}}</a></td>
+          <td data-th="Actions" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
+          <td data-th="" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.approve}}" class="base--link">{{config.actions.approve|capitalize}}</a></td>
         </tr>
       {% endif %}
     {% endfor %}

diff --git a/views/content/landing.html b/views/content/landing.html
@@ -20,9 +20,7 @@ <h1 class="introduction--h1">{{type.name|capitalize}}</h1>
     <tr class="base--tr">
       <th class="base--th">{{config.base}}</th>
       <th class="base--th">Date</th>
-      <th class="base--th">{{config.actions.revisions}}</th>
-      <th class="base--th">{{config.actions.edit}}</th>
-      <th class="base--th">{{config.actions.approve}}</th>
+      <th class="base--th" colspan="3">Actions</th>
     </tr>
   </thead>
   <tbody class="base--tbody">
@@ -31,9 +29,9 @@ <h1 class="introduction--h1">{{type.name|capitalize}}</h1>
     <tr class="base--tr">
       <td data-th="{{config.base}}" class="base--td">{{c.value[type.primary]}}</td>
       <td data-th="date" class="base--td">{{c.created}}</td>
-      <td data-th="{{config.actions.revisions}}" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}" class="base--link">{{config.actions.revisions|capitalize}}</a></td>
-      <td data-th="{{config.actions.edit}}" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
-      <td data-th="{{config.actions.approve}}" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.approve}}" class="base--link">{{config.actions.approve|capitalize}}</a></td>
+      <td data-th="Actions" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}" class="base--link">{{config.actions.revisions|capitalize}}</a></td>
+      <td data-th="" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
+      <td data-th="" class="base--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.approve}}" class="base--link">{{config.actions.approve|capitalize}}</a></td>
     </tr>
     {% endif %}
   {% endfor %}

diff --git a/views/content/revision.html b/views/content/revision.html
@@ -11,28 +11,30 @@
 {% block main %}
 <h1 class="base--h1">{{title}}</h1>
 
-<h2 class="base--h2">Revisions</h2>
-
 {% if content %}
 
-  <table class="table--style">
-    <tr class="table--tr">
-      <th class="table--th">revision</th>
-      <th class="table--th">{{config.base}}</th>
-      <th class="table--th">{{config.actions.edit}}</th>
-      <th class="table--th">date</th>
+<table class="base--table">
+  <thead class="base--thead">
+    <tr class="base--tr">
+      <th class="base--th">Revision</th>
+      <th class="base--th">{{config.base}}</th>
+      <th class="base--th">Date</th>
+      <th class="base--th">Actions</th>
+    </tr>
+  </thead>
+  <tbody class="base--tbody">
+{% for c in content %}
+  {% if c.value %}
+    <tr class="base--tr">
+      <td class="base--td" data-th="Revision">{{c.revision}}</td>
+      <td class="base--td" data-th="{{config.base}}">{{c.value[type.primary]}}</td>
+      <td class="base--td" data-th="Date">{{c.created}}</td>
+      <td class="base--td" data-th="Actions"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.type}}/{{c.revision}}/{{config.actions.edit}}" class="base--link">{{config.actions.edit}}</a></td>
     </tr>
-  {% for c in content %}
-    {% if c.value %}
-      <tr class="table--tr">
-        <td class="table--td">{{c.revision}}</td>
-        <td class="table--td">{{c.value[type.primary]}}</td>
-        <td class="table--td"><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.type}}/{{c.revision}}/{{config.actions.edit}}" class="table--link">{{config.actions.edit}}</a></td>
-        <td class="table--td">{{c.created}}</td>
-      </tr>
-    {% endif %}
-  {% endfor %}
-  </table>
+  {% endif %}
+{% endfor %}
+</tbody>
+</table>
 {% endif %}
 {% endblock %}
 

diff --git a/views/users/landing.html b/views/users/landing.html
@@ -19,8 +19,7 @@ <h1 class="introduction--h1">{{title|capitalize}}</h1>
       <th class="base--th">Email</th>
       <th class="base--th">Role</th>
       <th class="base--th">Date</th>
-      <th class="base--th">{{config.actions.edit}}</th>
-      <th class="base--th">{{config.actions.delete}}</th>
+      <th class="base--th" colspan="2">Actions</th>
     </tr>
   </thead>
   <tbody class="base--tbody">
@@ -31,8 +30,8 @@ <h1 class="introduction--h1">{{title|capitalize}}</h1>
         <td data-th="Email" class="base--td">{{user.email}}</td>
         <td data-th="Role" class="base--td">{{user.role}}</td>
         <td data-th="Date" class="base--td">{{user.created}}</td>
-        <td data-th="Edit" class="base--td"><a href="{{config.base}}/{{config.actions.edit}}/{{user.id}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
-        <td data-th="Delete" class="base--td"><a href="{{config.base}}/{{config.actions.delete}}/{{user.id}}" class="base--link">{{config.actions.delete|capitalize}}</a></td>
+        <td data-th="Actions" class="base--td"><a href="{{config.base}}/{{config.actions.edit}}/{{user.id}}" class="base--link">{{config.actions.edit|capitalize}}</a></td>
+        <td data-th="" class="base--td"><a href="{{config.base}}/{{config.actions.delete}}/{{user.id}}" class="base--link">{{config.actions.delete|capitalize}}</a></td>
       </tr>
     {% endif %}
   {% endfor %}