Skip to content
Snippets Groups Projects
Commit ead8dc96 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

more wip

parent a84ee2b8
No related branches found
No related tags found
No related merge requests found
......@@ -19,12 +19,12 @@
background: #FBFCFD;
border: 1px solid #ddd;
color: #444;
border-radius: var(--default-button-border-radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
text-decoration: none;
font-size: 0.8em;
line-height: 1;
font-weight: bold;
border-radius: var(--default-button-border-radius);
}
@media screen and (--breakpoint-min-md) {
......@@ -42,7 +42,6 @@
color: #fff;
background: #4A90E2;
border: 1px solid #3282DF;
transition: background .3s linear, border .3s linear, color .3s linear;
}
.Button--primary:hover {
......
......@@ -51,9 +51,6 @@
}
.Dropdown-item:hover {
background-color: var(--brand-color);
}
.Dropdown-item:hover a {
color: #fff;
background-color: var(--brand-color);
}
:root {
--default-header-margin: 0.5em;
--default-header-margin: 0;
}
h1, .h1,
......
......@@ -11,6 +11,20 @@
padding-right: 1em;
}
@media screen and (--breakpoint-min-sm) {
.wrapper {
padding-left: 2em;
padding-right: 2em;
}
}
@media screen and (--breakpoint-min-md) {
.wrapper {
padding-left: 3em;
padding-right: 3em;
}
}
@media screen and (--breakpoint-min-xl) {
.wrapper {
max-width: var(--xl-width);
......
......@@ -2,11 +2,9 @@
--default-link-color: #4A90E2;
}
a { color: var(--default-link-color); }
a:hover { color: color(var(--default-link-color) shade(5%)); }
.link {
text-decoration: none;
color: var(--default-link-color);
}
.link:hover {
text-decoration: underline;
......@@ -14,16 +12,3 @@ a:hover { color: color(var(--default-link-color) shade(5%)); }
.link--nohover:hover {
text-decoration: none;
}
.psdisabled {
color: #A4A4A4;
}
.psdisabled:hover {
text-decoration: none;
color: #A4A4A4;
}
.psunderline {
text-decoration: underline;
}
.Greeting {
margin-top: 3em;
margin-bottom: 3em;
margin-top: 6em;
margin-bottom: 6em;
font-size: 1.5375em;
}
.Greeting-title,
......@@ -8,6 +9,19 @@
font-weight: 100;
}
.Greeting-subtitle {
opacity: 0.575;
}
.DashboardDropdown .Dropdown-content {
top: 63px;
}
.Entity {}
.Entity-title {}
.Entity-attribution {}
.Entity-editLink {}
......@@ -7,6 +7,8 @@ var DashboardControllers = angular.module('corvus.dashboard.controllers', []);
DashboardControllers.controller('DashList', ['$scope', '$location', 'Dashboard', function($scope, $location, Dashboard) {
var sort;
$scope.current = 'data';
// $scope.dashboards: the list of dashboards being displayed
$scope.deleteDash = function(dashId) {
......
......@@ -14,44 +14,50 @@
</div>
</div>
<div class="wrapper" ng-if="dashboardLoaded && !dashboardLoadError">
<header class="py2 px2 clearfix">
<div class="float-right">
<!-- <a class="Button" ng-click="toggleSubscribe()" ng-if="dashboard">{{toggleSubscribeButtonText()}}</a> -->
<div class="mx1 inline-block">
<label class="Select">
<select class="block" ng-model="dashboard.public_perms" ng-change="inlineSave(dashboard)" ng-options="perm.id as perm.name for perm in utils.perms" ng-disabled="!dashboard.can_write">
</select>
</label>
<div ng-if="dashboardLoaded && !dashboardLoadError">
<header class="clearfix border-bottom">
<div class="wrapper">
<div class="Entity">
<h1 class="Entity-title">{{dashboard.name}}</h1>
<span class="Entity-attribution">
Created by <span class="Entity-creator">{{dashboard.creator.common_name}}</span>
</span>
</div>
<a class="Button borderless" ng-click="toggleDashEditMode()" ng-if="dashboard.can_write && dashcards.length > 0">
<mb-icon name="grid" width="16px" height="16px"></mb-icon>
<span class="px1">{{editingText}}</span>
</a>
</div>
<h3 class="inline-block" editable-text="dashboard.name" onaftersave="inlineSave(dashboard)" ng-if="dashboard.can_write">{{dashboard.name}}</h3>
<h3 class="inline-block" ng-if="!dashboard.can_write">{{dashboard.name}}</h3>
<p>
<span ng-if="!dashEdit">{{dashboard.description}} <span ng-if="dashboard.can_write && dashboard.description">-- <a href="" ng-click="toggleDashEdit()">Edit</a></span></span>
<span ng-if="dashEdit"><input class="input" type="text" size="140" ng-model="dashboard.description" /> <a class="Button Button--primary" ng-click="inlineSave(dashboard)">Save</a> <a class="Button" ng-click="toggleDashEdit()">Cancel</a></span>
</p>
</header>
<div class="text-centered my4 py4" ng-if="dashboardLoaded && !dashboardLoadError && !dashcards.length > 0">
<h1 class="text-normal text-grey-2 mt4 pt4">No cards have been added to this dashboard.</h1>
<a class="Button Button--primary" href="/card/create">Create Card</a>
</div>
<div class="wrapper full-height">
<div class="flex layout-centered text-centered full-height">
<div ng-if="!dashboardLoaded">
<div class="text-brand">
<mb-loading-icon></mb-loading-icon>
<h1 class="text-normal text-grey-2">Loading...</h1>
</div>
</div>
<div gridster="gridsterOptions">
<div ng-class="editingClass">
<ul id="dashboard_list">
<li class="Dash-card" gridster-item="dashcard" ng-repeat="(index, dashcard) in dashcards">
<a class="DashCard-remove" ng-click="removeCard(index)">
<mb-icon name="close" class="DashCard-removeIcon" width="12px" height="12px"></mb-icon>
</a>
<cv-card card="dashcard.card" card-data="dashcard.cardData.data" card-settings="cardSettings" index="index" wait-for-gridster />
</li>
</ul>
<div ng-if="dashboardLoaded && !dashcards.length > 0">
<h1 class="text-normal text-grey-2">This dashboard doesn't have any data yet.</h1>
<a class="Button Button--primary" href="/card/create">Ask a question</a>
</div>
</div>
<div gridster="gridsterOptions" ng-hide="!dashcards.length">
<div ng-class="editingClass">
<ul id="dashboard_list">
<li class="Dash-card" gridster-item="dashcard" ng-repeat="(index, dashcard) in dashcards">
<a class="DashCard-remove" ng-click="removeCard(index)">
<mb-icon name="close" class="DashCard-removeIcon" width="12px" height="12px"></mb-icon>
</a>
<cv-card card="dashcard.card" card-data="dashcard.cardData.data" card-settings="cardSettings" index="index" wait-for-gridster />
</li>
</ul>
</div>
</div>
</div>
</div>
......
<div class="Grid wrapper">
<div class="Grid-cell">
<div class="Greeting">
<h2 class="Greeting-title">Hey there, Kyle</h2>
<h2 class="Greeting-subtitle">What would you like to know?</h2>
</div>
<div class="wrapper">
<div class="mt4" ng-controller="CardList">
<div class="Button-group">
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'all' }" ng-click="filter('all')">Popular</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'mine' }" ng-click="filter('mine')">Mine</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'fav' }" ng-click="filter('fav')">Favorite</a>
</div>
<div class="Greeting">
<h2 class="Greeting-title">Good morning, Kyle</h2>
<h2 class="Greeting-subtitle">What do you want to know?</h2>
</div>
<div ng-if="!cards">
<h1 clas="text-normal text-centered">Loading ...</h1>
</div>
<div class="flex">
<a class="inline-block" href="#" ng-click="current = 'data'">I have a new question</a>
<a class="inline-block" href="#" ng-click="current = null">An existing question</a>
</div>
<ul>
<li class="HoverItem" ng-repeat="card in cards | filter:searchFilter ">
<h2><a class="text-normal link" cv-org-href="/card/{{card.id}}">{{card.name}}</a></h2>
<h5>Asked by: {{card.creator.common_name}}</h5>
</li>
</ul>
<div class="mt4" ng-controller="CardList" ng-if="current != 'data'">
<div class="Button-group">
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'all' }" ng-click="filter('all')">Popular</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'mine' }" ng-click="filter('mine')">Mine</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'fav' }" ng-click="filter('fav')">Favorite</a>
</div>
<div ng-if="!cards">
<h1 clas="text-normal text-centered">Loading ...</h1>
</div>
<ul>
<li class="HoverItem" ng-repeat="card in cards | filter:searchFilter ">
<h2><a class="text-normal link" cv-org-href="/card/{{card.id}}">{{card.name}}</a></h2>
<h5>Asked by: {{card.creator.common_name}}</h5>
</li>
</ul>
</div>
<div class="Grid-cell p4" ng-controller="ExploreDatabaseList">
<div ng-controller="ExploreDatabaseList" ng-if="current === 'data'">
<h1>Your data</h1>
<div ng-repeat="(dbId, database) in databases">
<div class="mt2 py2 clearfix">
<h2>{{currentDB.name}}</h2>
......@@ -34,7 +40,7 @@
<li class="py4" ng-repeat="table in database.entities">
<span class="float-right text-grey-3 mt2">{{table.rows}} rows</span>
<h3 class="text-normal text-brand mt2 mb0">
<a class="link" cv-org-href="/explore/table/{{table.id}}">{{table.entity_name}}</a>
<a class="link" cv-org-href="/card/create">{{table.entity_name}}</a>
</h3>
<p class="text-grey-3 mt1">{{table.description}}</p>
</li>
......@@ -44,7 +50,7 @@
<ul>
<li class="border-bottom py3" ng-repeat="table in database.non_entities">
<div class="clearfix">
<span class="float-right text-grey-3 mt1">{{table.rows}} rows</span>
<span class="float-right text-grey-3 mt1">{{table.rows}} Total</span>
<h4 class="text-normal inline-block">
<a ng-if="table.rows > 0" class="link" cv-org-href="/card/create">
{{table.name}}
......@@ -59,6 +65,5 @@
</ul>
</div>
</div>
</div>
</div>
</div>
......@@ -17,35 +17,40 @@
<body ng-controller="Corvus">
<div ng-controller="Nav" ng-if="user" ng-cloak>
<!-- MAIN NAV -->
<nav class="CoreNav" ng-show="nav === 'main'">
<nav class="CoreNav relative bg-brand" ng-show="nav === 'main'">
<div class="wrapper flex align-center">
<mb-logo-icon class="text-brand mr2j"></mb-logo-icon>
<a class="NavItem-text" href="/">{{siteName}}</a>
<div class="DashboardDropdown Dropdown" dropdown on-toggle="toggled(open)">
<a class="NavItem NavItem-withIcon flex align-center" selectable-nav-item="settings" dropdown-toggle>
<a class="NavItem-text text-white flex align-center" href="/">
<mb-logo-icon class="text-white mr1"></mb-logo-icon>
</a>
<div class="DashboardDropdown Dropdown ml4" dropdown on-toggle="toggled(open)">
<a class="NavItem NavItem-withIcon text-white flex align-center" dropdown-toggle>
<mb-icon name="dashboards"></mb-icon>
Dashboards
<mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
</a>
<ul class="Dropdown-content" ng-controller="DashList">
<li class="Dropdown-item" ng-repeat="dash in dashboards">
<a class="link text-normal" cv-org-href="/dash/{{dash.id}}">{{dash.name}}</a>
<span class="Badge">{{dash.public_perms}}</span>
<li ng-repeat="dash in dashboards">
<a class="Dropdown-item text-white block text-normal" cv-org-href="/dash/{{dash.id}}">
{{dash.name}}
<span class="Badge">{{dash.public_perms}}</span>
</a>
</li>
</ul>
</div>
<div class="Dropdown" dropdown on-toggle="toggled(open)">
<a class="NavItem" selectable-nav-item="settings" dropdown-toggle>
<a class="NavItem text-white" selectable-nav-item="settings" dropdown-toggle>
<span class="NavItem-text" ng-if="!user.first_name">Me</span>
<span class="NavItem-text" ng-if="user.first_name">{{user.first_name}}</span>
<mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
</a>
<ul class="Dropdown-content right">
<li><a class="link" href="/user/edit_current">Account Settings</a></li>
<li><a class="link" href="/auth/logout">Logout</a></li>
<li><a class="Dropdown-item link block" href="/user/edit_current">Account Settings</a></li>
<li><a class="Dropdown-item link block" href="/auth/logout">Logout</a></li>
</ul>
</div>
<a class="link" ng-if="userIsAdmin" cv-org-href="/admin/">Admin</a>
<a class="absolute top flex align-center pr4 right bottom" ng-if="userIsAdmin" cv-org-href="/admin/">
<mb-icon class="text-white" name="gear" width="16px" height="16px"></mb-icon>
</a>
</div>
</nav>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment