Layout for Systems and Projects

_includes/people_chip.html

+{% capture purl %}/people/{{person}}/{% endcapture %}
+{% assign pname = person %}
+{% assign pimg = "" %}
+
+{% for pp in site.pages %}
+  {% if pp.url == purl %}
+    {% assign pname = pp.fullname %}
+    {% assign pimg = pp.pic %}
+  {% endif %}
+{% endfor %}
+
+<a href="{{ site.baseurl }}{{purl}}">
+  <div class="chip">
+      {% if pimg != "" %}
+        <img src="{{ site.baseurl }}/{{pimg}}">
+      {% endif %}
+      {{pname}}
+  </div>
+</a>
\ No newline at end of file

_layouts/project.html

@@ -2,37 +2,73 @@
 layout: default
 ---
 
-<div class="page">
-  <h1 class="page-title">
-    {{page.title}}
-    {% if page.start %}
-      {{page.start}} - {% if page.end %} {{page.end}}{% endif %}
-    {% endif %}
-</h1>
-{% if page.subtitle %}<h2>{{page.subtitle}}</h2>{% endif %}
-{% if page.funding %}
-  <p>funded by {{page.funding}}
-    {% if page.program or page.grantid %}({% endif %}
-    {% if page.program %}{{page.program}}{% endif %} 
-    {% if page.grantid %} - {{page.grantid}}{% endif %}
-    {% if page.program or page.grantid %}){% endif %}
-  </p>
-{% endif %}
-
-{{ content }}
-
-  {% if page.people %}
-  <h3>People</h3>
-  {{page.people}}
-  {% endif %}
 
-  {% if page.collaborators %}
-  <h3>Collaborators</h3>
-  {{page.collaborators}}
-  {% endif %}
-
-  {% if page.homepage %}
-  <h3>Project Home Page</h3>
-  <a href="{{page.url}}">{{page.homepage}}</a>
-  {% endif %}
+<div class="row">
+  <div class="col s12 m5 left">
+    <div class="card">
+      <div class="card-content">
+        <span class="card-title">{{page.title}}</span>
+        {% if page.subtitle %}<h6>{{page.subtitle}}</h6>{% endif %}
+        
+        {% if page.homepage %}
+        <p>
+          <a href="{{page.url}}">{{page.homepage}}</a> 
+        </p>
+        {% endif %}
+        
+        {% if page.start %}
+        <p>
+          <b>From:</b> {{page.start}} {% if page.end %} <b>To:</b> {{page.end}} {% endif %}
+        </p>
+        {% endif %}
+        
+      </div>
+      
+      <div class="card-tabs">
+        <ul class="tabs tabs-fixed-width">
+          {% if page.funding %}
+            <li class="tab"><a href="#funding">Funding</a></li>
+          {% endif %}
+          {% if page.people %}
+            <li class="tab"><a href="#people">People</a></li>
+          {% endif %}
+          {% if page.collaborators %}
+            <li class="tab"><a href="#collaborators">Collaborators</a></li>
+          {% endif %}
+        </ul>
+      </div>
+      <div class="card-content grey lighten-4">
+        {% if page.funding %}
+          <div id="funding">
+            funded by {{page.funding}}
+              {% if page.program or page.grantid %}({% endif %}
+              {% if page.program %}{{page.program}}{% endif %} 
+              {% if page.grantid %} - {{page.grantid}}{% endif %}
+              {% if page.program or page.grantid %}){% endif %}
+          </div>
+        {% endif %}
+        
+        {% if page.people %}
+          <div id="people">
+            {% assign people = page.people | split: ',' %}
+            
+            {% for person in people %}
+              {% include people_chip.html person=person %}
+            {% endfor %}
+          </div>
+        {% endif %}
+        
+        {% if page.collaborators %}
+          <div id="collaborators">
+            {{page.collaborators}}
+          </div>
+        {% endif %}
+        
+        
+      </div>
+    </div>
+  </div>
+  <p>
+    {{content}}
+  </p>
 </div>

_layouts/system.html

@@ -2,29 +2,60 @@
 layout: default
 ---
 
-<div class="page">
-  <h1 class="page-title">
-    {{page.title}}
-    {% if page.start %}
-      {{page.start}} - {% if page.end %} {{page.end}}{% endif %}
-    {% endif %}
-</h1>
-{% if page.subtitle %}<h2>{{page.subtitle}}</h2>{% endif %}
-
-{{ content }}
-
-  {% if page.people %}
-  <h3>People</h3>
-  {{page.people}}
-  {% endif %}
-
-  {% if page.collaborators %}
-  <h3>Collaborators</h3>
-  {{page.collaborators}}
-  {% endif %}
-
-  {% if page.homepage %}
-  <h3>Project Home Page</h3>
-  <a href="{{page.url}}">{{page.homepage}}</a>
-  {% endif %}
-</div>
+<div class="row">
+  <div class="col s12 m5 left">
+    <div class="card">
+      <div class="card-content">
+        <span class="card-title">{{page.title}}</span>
+        {% if page.subtitle %}<h6>{{page.subtitle}}</h6>{% endif %}
+        
+        {% if page.homepage %}
+        <p>
+          <a href="{{page.url}}">{{page.homepage}}</a> 
+        </p>
+        {% endif %}
+        
+        {% if page.start %}
+        <p>
+          <b>From:</b> {{page.start}} {% if page.end %} <b>To:</b> {{page.end}} {% endif %}
+        </p>
+        {% endif %}
+        
+      </div>
+      
+      <div class="card-tabs">
+        <ul class="tabs tabs-fixed-width">
+          {% if page.people %}
+            <li class="tab"><a href="#people">People</a></li>
+          {% endif %}
+          {% if page.collaborators %}
+            <li class="tab"><a href="#collaborators">Collaborators</a></li>
+          {% endif %}
+        </ul>
+      </div>
+      <div class="card-content grey lighten-4">
+        
+        {% if page.people %}
+          <div id="people">
+            {% assign people = page.people | split: ',' %}
+            
+            {% for person in people %}
+              {% include people_chip.html person=person %}
+            {% endfor %}
+          </div>
+        {% endif %}
+        
+        {% if page.collaborators %}
+          <div id="collaborators">
+            {{page.collaborators}}
+          </div>
+        {% endif %}
+        
+        
+      </div>
+    </div>
+  </div>
+  <p>
+    {{content}}
+  </p>
+</div>
\ No newline at end of file

public/css/main.css

@@ -36,6 +36,21 @@ h1, h2, h3, h4, h5, h6 {
   background-color: #5B78FD;
 }
 
+/* tabs color */
+.tabs .tab a{
+    color:#5B78FD;
+}
+.tabs .tab a:hover,.tabs .tab a.active {
+	background-color:transparent;
+	color:#5B78FD;
+}
+.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
+	color:rgba(102,147,153,0.7);	
+}
+.tabs .indicator {
+	background-color: #5B78FD;
+}
+
 /** sizing for navigation */
 nav.top-nav {
   height: 122px;