landing page UI draft complete. Minor deviations from the mockup.

PDCbc · Jul 27, 2015 · 386613c · 386613c
1 parent 740e819
commit 386613c
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 42 deletions.
diff --git a/assets/css/auxilary.css b/assets/css/auxilary.css
@@ -7,12 +7,16 @@ body {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Thin", "Helvetica Neue";
 }
 
-p,span {
+span {
     font-weight: 200;
     font-style: normal;
     font-size: 16px;
 }
 
+h1, h2, h3, h4, h5, h6{
+    font-weight: 200;
+}
+
 .navbar-toggle {
     float: left;
     margin-left: 15px;
@@ -69,6 +73,7 @@ p,span {
 
     width: 60%;
     min-width: 317px;
+    max-width: 317px;
     min-height: 48px;
 
 }
@@ -87,10 +92,36 @@ p,span {
 
 }
 
+.wrapper {
+    margin-left:auto;
+    margin-right:auto;
+    min-width:750px;
+    margin-top:10px;
+}
+
+
 .welcome-message {
 
     font-size: 36px;
     font-style: normal;
     font-weight: 200;
 
-}
+}
+
+.user-dropdown{
+   margin-top:10px;
+}
+
+.initiative-title-wrap {
+    padding-left:0px;
+    margin-top:10px;
+}
+
+.initiative-logo-wrap {
+    padding-right:0;
+    opacity: 0.5;
+}
+
+.initiative-logo-wrap:hover{
+    opacity:1;
+}
diff --git a/assets/images/attachment.png b/assets/images/attachment.png
diff --git a/assets/images/data-quality.png b/assets/images/data-quality.png
diff --git a/assets/images/polypharmacy.png b/assets/images/polypharmacy.png
diff --git a/assets/images/population-health.png b/assets/images/population-health.png
diff --git a/assets/images/practice-reflection.png b/assets/images/practice-reflection.png
diff --git a/views/index.hbs b/views/index.hbs
@@ -1,47 +1,45 @@
 <html>
 {{> head}}
 <body>
-{{> sidebar}}
 
 <div class="container">
-    <div class="row text-center">
-      <img src="/assets/images/PDC-Logo.png" alt="PDC Logo" width="300px" align="middle" style="padding:20px">
-      <hr>
-      <h1>Visualizer</h1>
-<!---
-      <h3 class="text-muted">Physicians Data Collaborative of British Columbia</h3>
--->
-    </div> <!-- row text-center -->
-
-    <div class="row">
-      {{#if user}}
-      <p class="lead" style="text-align:center">
-        Welcome to the visualizer.<br>
-        Your user name is <code>{{user.username}}</code>.<br>
-<!---        Welcome to the visualizer {{user.first_name}} {{user.last_name}}.<br>
-        Your user name is <code>{{user.username}}</code>.<br>
-        {{#if user.admin }}
-          You are an administrator.<br>
-        {{/if}}
-      </p>
-      <!-- <code>{{json user}}</code> -->
-    {{else}}
-      <div class="col-xs-6 col-xs-offset-3">
-        In order to access the visualization data, you must authenticate.
-        <div class="text-center">
-          <a href="/auth" class="btn btn-primary btn-labeled">
-            <span class="btn-label">
-              <i class="fa fa-key"></i>
-            </span>
-            Authenticate
-          </a>
-        </div> <!-- text-center -->
-      </div> <!-- col-xs-6 col-xs-offset-3 -->
-    {{/if}}
-  </div> <!-- row -->
-
-
-</div> <!-- container -->
+
+    {{> topbar}}
+
+
+    <div class="wrapper">
+
+        <div class="row">
+
+            <div class="col-sm-10">
+
+                <div class="row">
+                   <div class="col-xs-12">
+                       {{> projects}}
+                   </div>
+                </div>
+                <div class="row">
+                    <div class="col-xs-12">
+
+                        {{> welcome}}
+
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-sm-2">
+
+                {{> rightbar }}
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</div>
+<!-- container -->
 
 
 </body>

diff --git a/views/partials/head.hbs b/views/partials/head.hbs
@@ -2,7 +2,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Visualizer - {{ title }}</title>
+  <title>PDC - {{ title }}</title>
   <meta name="description" content="Visualization Dashboard.">
   <link rel="PDC Icon" href="/assets/images/favicon.ico" type="image/x-icon" />
 

diff --git a/views/partials/projects.hbs b/views/partials/projects.hbs
@@ -0,0 +1,105 @@
+{{#if user}}
+
+    <div class="projects-wrapper">
+
+        <div class="row">
+
+            <div class="col-xs-12">
+                <h2>Your Projects</h2>
+            </div>
+
+        </div>
+        <br>
+
+        <div class="row">
+            <div class="col-xs-4">
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/attachment.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Attachment</h4>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xs-4">
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/population-health.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Population Health</h4>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xs-4">
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/polypharmacy.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Polypharmacy</h4>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <br>
+        <br>
+
+        <div class="row">
+            <div class="col-xs-4">
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/practice-reflection.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Practice Reflection</h4>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xs-4">
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/data-quality.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Data Quality</h4>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xs-4">
+                <!--
+                <div class="row">
+                    <div class="col-xs-5 initiative-logo-wrap">
+                        <a href="#" class="initiative-link">
+                            <img src="/assets/images/practice-reflection.png"/>
+                        </a>
+                    </div>
+                    <div class="col-xs-5 initiative-title-wrap">
+                        <h4 class="initiative-title">Practice Reflection</h4>
+                    </div>
+                </div>
+                -->
+            </div>
+
+        </div>
+
+    </div> <!-- end .projects-wrapper -->
+
+{{/if}}
diff --git a/views/partials/rightbar.hbs b/views/partials/rightbar.hbs
@@ -0,0 +1,14 @@
+{{#if user}}
+
+    <div class="row">
+
+        <div class="col-sm-12">
+            <a href="#">
+                <h2><button class="btn btn-primary">Send Feedback to PDC</button><h2>
+            </a>
+        </div>
+
+    </div>
+
+
+{{/if}}
diff --git a/views/partials/topbar.hbs b/views/partials/topbar.hbs
@@ -0,0 +1,27 @@
+{{#if user}}
+
+    <div class="wrapper">
+
+        <div class="row">
+            <div class="col-sm-11">
+                <img src="/assets/images/PDC-LogoLeft.png" class="left-logo"/>
+            </div>
+
+            <div class="col-sm-1">
+
+                <div class="dropdown user-dropdown">
+                    <button class="btn btn-default dropdown-toggle" type="button" id='userDropdown' data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                        {{user.username}} <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="userDropdown">
+                        <li><a href="/logout">Logout</a></li>
+                    </ul>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div> <!-- end .wrapper -->
+
+{{/if}}
diff --git a/views/partials/welcome.hbs b/views/partials/welcome.hbs
@@ -0,0 +1,10 @@
+{{#if user}}
+
+    <h4>Welcome to the Network.</h4>
+
+    <p>Please click a link above to see your reports for the project(s) you are part of. For more information on how the Physicians Data Collaborative network follow the links below.</p>
+
+    <p><a href="#">How to use this website</a></p>
+    <p><a href="#">What is the PDC network</a></p>
+
+{{/if}}