diff --git a/dist/views/dataModelView.html b/dist/views/dataModelView.html index 32f19171d65ed6d731765fb653be82e11dc6a2b0..3efb963bcfc4adcb7b087aca8d390108af41799a 100644 --- a/dist/views/dataModelView.html +++ b/dist/views/dataModelView.html @@ -22,43 +22,43 @@ <hr/> -<div class="columns"> - <div class="column four-fifths"> +<div class="analyzer-container"> + <div class="analyzer-content"> <table class="data-model-table"> <tbody> - <tr ng-repeat="datapoint in datapoints"> - <td style="padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; width: 16px;"><span class="octicon octicon-triangle-right"></span></td> + <tr class="data-model-table-key-row" ng-repeat="datapoint in datapoints"> + <td><span class="data-model-table-expand-icon"></span></td> <td>{{datapoint.key}}</td> <td>{{datapoint.description}}</td> </tr> </tbody> </table> </div> - <div class="column one-fifth"> - <nav class="analyzer-nav" role="navigation"> + <div class="analyzer-nav"> + <nav role="navigation"> <ul class="analyzer-nav-group"> <li class="analyzer-nav-item selected"> <a href="#"> - <span class="octicon octicon-code"></span> Data model + <span class="analyzer-data-model-icon"></span> Data model </a> </li> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-database"></span> Datastore + <span class="analyzer-datastore-icon"></span> Datastore </a> </li> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-flame"></span> Fitness + <span class="analyzer-fitness-icon"></span> Fitness <span class="counter">0</span> </a> </li> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-radio-tower"></span> Endpoints + <span class="analyzer-endpoints-icon"></span> Endpoints </a> </li> </ul> @@ -68,20 +68,20 @@ <ul class="analyzer-nav-group"> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-eye"></span> Insights + <span class="analyzer-insights-icon"></span> Insights <span class="counter">0</span> </a> </li> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-pulse"></span> Traffic + <span class="analyzer-traffic-icon"></span> Traffic </a> </li> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-graph"></span> Statistics + <span class="analyzer-statistics-icon"></span> Statistics </a> </li> </ul> @@ -91,7 +91,7 @@ <ul class="analyzer-nav-group"> <li class="analyzer-nav-item"> <a href="#"> - <span class="octicon octicon-tools"></span> Configure + <span class="analyzer-configure-icon"></span> Configure </a> </li> </ul> diff --git a/scss/main.scss b/scss/main.scss index fca10a0071c2ed0c2615e0b716f5ffad84ef4b11..cb461a6c82abf4c0177a0b63ff4cf2af985c6833 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -194,6 +194,8 @@ footer div { } .analyzer-nav { + @extend .column; + width: 20%; position: relative; padding-top: 15px; padding-bottom: 15px; @@ -317,3 +319,65 @@ footer div { .analyzer-title-text h2 { margin: 0; } + +.analyzer-container { + @extend .columns; +} + +.analyzer-content { + @extend .column; + width: 80%; +} + +.analyzer-data-model-icon { + @extend .octicon; + @extend .octicon-code; +} + +.analyzer-datastore-icon { + @extend .octicon; + @extend .octicon-database; +} + +.analyzer-fitness-icon { + @extend .octicon; + @extend .octicon-flame; +} + +.analyzer-endpoints-icon { + @extend .octicon; + @extend .octicon-radio-tower; +} + +.analyzer-insights-icon { + @extend .octicon; + @extend .octicon-eye; +} + +.analyzer-traffic-icon { + @extend .octicon; + @extend .octicon-pulse; +} + +.analyzer-statistics-icon { + @extend .octicon; + @extend .octicon-graph; +} + +.analyzer-configure-icon { + @extend .octicon; + @extend .octicon-tools; +} + +.data-model-table-key-row td:first-child { + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 10px; + width: 16px; +} + +.data-model-table-expand-icon { + @extend .octicon; + @extend .octicon-triangle-right; +}