Merge pull request #4933 from archesproject/4926_workflow_buttons_ui

re: 4926 Update workflow button styling
archesproject · Jun 20, 2019 · 2b79ea4 · 2b79ea4
2 parents d3bee60 + 83a8f95
commit 2b79ea4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
@@ -698,6 +698,14 @@ div.workflow-panel {
     margin-top: 15px;
 }
 
+.workflow-select-card-container-title {
+    font-size: 1.5em;
+    font-weight: 500;
+    padding-left: 30px;
+    margin-top: 5px;
+    margin-bottom: -15px;
+}
+
 .workflow-select-card-container {
     display: flex;
     flex-grow: inherit;
@@ -707,14 +715,20 @@ div.workflow-panel {
 }
 
 .workflow-select-card {
-    width: 180px;
-    height: 180px;
+    width: 200px;
+    height: 200px;
     padding: 10px;
     color: white;
     text-align: center;
-    border: 1px solid black;
+    border: 1px solid #777;
     border-radius: 1px;
     margin: 10px;
+    opacity: 0.85;
+}
+
+.workflow-select-card:hover {
+    opacity: 1.0;
+    border: 1px solid black;
 }
 
 .workflow-select-wf-circle {
@@ -731,8 +745,14 @@ div.workflow-panel {
     font-size: 40px;
 }
 
+.workflow-select-title {
+    font-size: 1.4em;
+    font-weight: 500;
+}
+
 .workflow-select-desc {
-    font-size: 11px;
+    font-size: 12px;
+    padding-top: 10px;
 }
 /* general styling for all tabs */
 .tab-subheader-sm p {

diff --git a/arches/app/templates/views/components/plugins/workflow-select.htm b/arches/app/templates/views/components/plugins/workflow-select.htm
@@ -38,12 +38,12 @@
 </div>
 <div class="workflow-select-plugin">
     <div>
-        <h2>Create New...</h2>
+        <h2 class="workflow-select-card-container-title">Create New...</h2>
     </div>
     <div class="workflow-select-card-container">
         <!-- ko foreach: {data: workflows, as: 'workflow'} -->
         <a data-bind="attr: {href: '#', title: workflow.name, target: '_blank'}" href="#"><div data-bind="style: {'background-color': workflow.bgColor}" class="workflow-select-card">
-            <h4 data-bind="text: workflow.name"></h4>
+            <h4 class="workflow-select-title" data-bind="text: workflow.name"></h4>
             <div data-bind="style: {'background-color': workflow.circleColor}" class="workflow-select-wf-circle">
                 <span><i data-bind="attr:{class: ('fa '+workflow.icon +' workflow-select-wf-icon')}"></i></span>
             </div>