Skip to content

N
nexpie-grafana-theme
Commit cf7c65d3 by Torkel Ödegaard
Options

ux: added scroll to two pages

parent 9ba2fb48
Showing with 94 additions and 89 deletions
public/app/features/admin/partials/configuration_home.html
<div class="scroll-canvas"> <div class="scroll-canvas">
<navbar model="ctrl.navModel"></navbar> <div gemini-scrollbar>
<div class="page-container"> <navbar model="ctrl.navModel"></navbar>
<div class="page-header"> <div class="page-container">
<page-h1 model="ctrl.navModel"></page-h1> <div class="page-header">
</div> <page-h1 model="ctrl.navModel"></page-h1>
</div>
<section class="card-section card-list-layout-grid"> <section class="card-section card-list-layout-grid">
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children"> <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" ng-href="{{::navItem.url}}"> <a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-item-type"> <div class="card-item-type">
</div> </div>
</div> </div>
<div class="card-item-body"> <div class="card-item-body">
<figure class="card-item-figure"> <figure class="card-item-figure">
<i class="{{navItem.icon}}"></i> <i class="{{navItem.icon}}"></i>
</figure> </figure>
<div class="card-item-details"> <div class="card-item-details">
<div class="card-item-name"> <div class="card-item-name">
{{navItem.text}} {{navItem.text}}
</div> </div>
<div class="card-item-sub-name"> <div class="card-item-sub-name">
{{navItem.description}} {{navItem.description}}
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</li> </li>
</ol> </ol>
</section> </section>
</div> </div>
</div> </div>
public/app/features/plugins/partials/plugin_list.html
<navbar model="ctrl.navModel"></navbar> <div class="scroll-canvas">
<div gemini-scrollbar>
<div class="page-container"> <navbar model="ctrl.navModel"></navbar>
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<div class="page-header-tabs"> <div class="page-container">
<ul class="gf-tabs"> <div class="page-header">
<li class="gf-tabs-item"> <h1>
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> <i class="icon-gf icon-gf-apps"></i>
Panels Plugins <span class="muted small">(currently installed)</span>
</a> </h1>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
Apps
</a>
</li>
</ul>
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> <div class="page-header-tabs">
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com <ul class="gf-tabs">
</a> <li class="gf-tabs-item">
</div> <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
</div> Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
Apps
</a>
</li>
</ul>
<section class="card-section" layout-mode> <a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
<layout-selector></layout-selector> Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
</a>
</div>
</div>
<ol class="card-list" > <section class="card-section" layout-mode>
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins"> <layout-selector></layout-selector>
<a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header">
<div class="card-item-type">
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}}
</div>
<div class="card-item-notice" ng-show="plugin.hasUpdate">
<span bs-tooltip="plugin.latestVersion">Update available!</span>
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{plugin.info.logos.small}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
<a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header">
<div class="card-item-type">
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}}
</div>
<div class="card-item-notice" ng-show="plugin.hasUpdate">
<span bs-tooltip="plugin.latestVersion">Update available!</span>
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{plugin.info.logos.small}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
</div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment