Merge pull request #126 from F4IF/develop-landing-page-landing-page-h…

…eader-#121 Develop landing page landing page header #121
F4IF · May 21, 2020 · 90cdffd · 90cdffd
2 parents b3d6568 + 17b86a8
commit 90cdffd
Showing 1 changed file with 83 additions and 40 deletions.
diff --git a/src/ctree-app/ctree-landing.html b/src/ctree-app/ctree-landing.html
@@ -81,7 +81,11 @@
         --app-secondary-color: black;
       }
       #mainLayout app-toolbar {
-        padding: 0 8px 0 0;
+        padding: 15px 10px 10px 15px;
+        @apply --layout-horizontal;
+        @apply --layout-end-justified;
+        background-color: rgba(255, 255, 255, 0.95);
+
       }
       #content {
         @apply --layout-fit;
@@ -90,37 +94,59 @@
         background-color: #DBE8DE;
         color: #63A375;
       }
-      #headerTitle, #menuButton {
-        display: none;
+      #headerTitle {
+        color: #63A375;
+        font-size: 23px;
+
+      }
+      #menuButton{
+        color: black;
+        float: right;
       }
       app-drawer ul {
         text-align: left !important;
       }
       app-header-layout {
-        height: 100vh;
+        height: 200vh;
       }
       app-header {
         background-color: #FFFFFF;
         color: #fff;
+        height: 6%;
       }
       app-header paper-icon-button {
-        --paper-icon-button-ink-color: white;
-      }
-      paper-tab {
-        width: 0;
+
       }
+
+
       paper-tab[link] a {
         @apply --layout-horizontal;
         @apply --layout-center-center;
-        color: #196948;
+        color: #000000;
         text-decoration: none;
+        font-size: 12px;
+        outline: none;
+
+
       }
+      paper-tabs{
+        --paper-tabs-selection-bar-color: blue;
+      }
+      paper-tab.iron-selected{
+        color: blue !important ;
+
+
+      }
+      paper-tabs[noink][nobar] paper-tab.core-selected {
+            color: #db352c;
+
       paper-tab iron-icon {
         padding-right: 2px;
       }
       .tabTooltip {
         visibility: hidden;
       }
+
       paper-button {
         text-transform: none;
       }
@@ -140,6 +166,7 @@
         font-weight: bold;
       }
 
+
       h1 {
         font-size: 4em;
       }
@@ -279,6 +306,10 @@
         }
         paper-tabs {
           display: none;
+          float: right;
+
+
+
         }
         #headerTitle, #menuButton {
           display: inline-block;
@@ -462,6 +493,8 @@
       }
     </style>
 
+
+
     <iron-meta key="rootPath" value="{{rootPath}}"></iron-meta>
     <ctree-import id="importLoader" href="/src/ctree-loader/ctree-list-loader-test.html" on-loading-changed="_importLoaderLoadingChanged"></ctree-import>
     <ctree-import id="importPreview" href="/src/ctree-element-preview/ctree-element-preview.html"></ctree-import>
@@ -472,45 +505,55 @@
     <ctree-new-element-dialog-accessor id="newElementDialog" ctree-key="[[ctreeKey]]"></ctree-new-element-dialog-accessor>
     <ctree-user-dialog-accessor id="userDialog" ctree-key="[[ctreeKey]]"></ctree-user-dialog-accessor>
 
+
+
     <app-header-layout id="mainLayout" has-scrolling-region>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <app-header slot="header" reveals effects="waterfall">
-        <app-toolbar>
+
+      <app-header slot="header" reveals effects="waterfall" >
+        <app-toolbar class="toolbar">
           <ctree-app-icon></ctree-app-icon>
-          <div id="headerTitle" main-title>Collaboration Trees</div>
-          <paper-icon-button id="menuButton" icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
-          <paper-tabs selected="{{section}}" attr-for-selected="name" fallback-selection="overview" bottom-item style="margin-left: 66px">
-            <paper-tab id="overviewTab" name="overview" link>
-              <a href="[[rootPath]]?section=overview" tabindex="-1">
-                Overview
-              </a>
-            </paper-tab>
-            <paper-tab id="feedbackTab" name="feedback" link>
-              <a href="[[rootPath]]?section=feedback" tabindex="-1">
-                Feedback
-              </a>
-            </paper-tab>
-            <paper-tab id="featuresTab" name="features" link>
-              <a href="[[rootPath]]?section=features" tabindex="-1">
-                Features
-              </a>
-            </paper-tab>
-            <paper-tab id="ctreeTab" name="ctree" link>
-              <a href="[[rootPath]]?section=ctree" tabindex="-1">
-                cTree
-              </a>
-            </paper-tab>
-            <paper-tab id="participateTab" name="participate" link>
-              <a href="[[rootPath]]?section=participate" tabindex="-1">
-                Participate
-              </a>
-            </paper-tab>
-          </paper-tabs>
+          <div id="headerTitle" main-title> Collaboration Tree</div>
+
+
+          <div id="paperTabsWidth" style="width:60%">
+            <paper-icon-button id="menuButton" icon="menu" drawer-toggle >Collaboration Trees</paper-icon-button>
+
+
+            <paper-tabs selected="{{section}}" attr-for-selected="name" fallback-selection="overview" bottom-item style="margin-left: 66px" style="width:50px" no-bar noink autoselectDelay>
+              <paper-tab id="overviewTab" name="overview" link>
+                <a href="[[rootPath]]?section=overview" tabindex="-1">
+                  Overview
+                </a>
+              </paper-tab>
+              <paper-tab id="feedbackTab" name="feedback" link>
+                <a href="[[rootPath]]?section=feedback" tabindex="-1">
+                  Feedback
+                </a>
+              </paper-tab>
+              <paper-tab id="featuresTab" name="features" link>
+                <a href="[[rootPath]]?section=features" tabindex="-1">
+                  Features
+                </a>
+              </paper-tab>
+              <paper-tab id="ctreeTab" name="ctree" link>
+                <a href="[[rootPath]]?section=ctree" tabindex="-1">
+                  cTree
+                </a>
+              </paper-tab>
+              <paper-tab id="participateTab" name="participate" link>
+                <a href="[[rootPath]]?section=participate" tabindex="-1">
+                  Participate
+                </a>
+              </paper-tab>
+            </paper-tabs>
+          </div>
         </app-toolbar>
       </app-header>
 
       <div id="content">
         <div id="overview" class="section-styling">
+
         </div>
         <div id="feedback" class="section-styling">
           <ctree-testimonials></ctree-testimonials>