new design
This commit is contained in:
Jon Lambson
parent
bccd62f679
commit
699e510a61
158
css/styles.css
158
css/styles.css
|
|
@ -458,3 +458,161 @@ ul.tree.files-only.ls-none {
|
|||
.tree ul {
|
||||
-webkit-padding-start: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.websites-tile img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.websites-tile iframe {
|
||||
border-width: 2px;
|
||||
border-style: none;
|
||||
border-color: none;
|
||||
border-image: inone;
|
||||
}
|
||||
.websites-tile .btn {
|
||||
background-color: white;
|
||||
border: 1px solid #cccccc;
|
||||
color: #696969;
|
||||
padding: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.websites-tile .btn--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.websites-tile .cards {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.websites-tile .cards__item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.websites-tile .cards__item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 56rem) {
|
||||
.websites-tile .cards__item {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
.websites-tile .card {
|
||||
background-color: white;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
max-width: 350px;
|
||||
min-width: 350px;
|
||||
}
|
||||
.websites-tile .card:hover .card__image {
|
||||
-webkit-filter: contrast(100%);
|
||||
filter: contrast(100%);
|
||||
}
|
||||
.websites-tile .card__content {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
.websites-tile .card__image {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
-webkit-filter: contrast(70%);
|
||||
filter: contrast(70%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
|
||||
transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
|
||||
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
|
||||
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
|
||||
}
|
||||
.websites-tile .card__title {
|
||||
color: #696969;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.websites-tile .card__text {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.card__title.text-center {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: #2a6496;
|
||||
text-decoration: none;
|
||||
}
|
||||
.square-service-block{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
margin:15px auto;
|
||||
}
|
||||
.square-service-block a {
|
||||
background-color: #e74c3c;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.square-service-block a:hover{
|
||||
background-color: rgba(231, 76, 60, 0.8);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ssb-icon {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
h2.ssb-title {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ app.directive('fileTree', [function () {
|
|||
}]);
|
||||
|
||||
app.controller('websiteCtrl', [
|
||||
'$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
|
||||
, function ($scope, $q, Auth, Oauth3, $timeout) {
|
||||
'$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout', '$sce'
|
||||
, function ($scope, $q, Auth, Oauth3, $timeout, $sce) {
|
||||
|
||||
var vm = this;
|
||||
vm.domains = [];
|
||||
|
|
@ -444,7 +444,6 @@ app.controller('websiteCtrl', [
|
|||
});
|
||||
};
|
||||
vm.Shares.list = function (r) {
|
||||
vm.showSharesList = true;
|
||||
var pkg = Auth.oauth3.pkg('www@daplie.com');
|
||||
return pkg.listShares({
|
||||
domain: r.domain
|
||||
|
|
@ -514,6 +513,10 @@ app.controller('websiteCtrl', [
|
|||
console.log('[listSites] sites:');
|
||||
console.log(sites);
|
||||
vm.sites = sites;
|
||||
vm.sites.forEach(function(site) {
|
||||
site.urlSafeDomain = "https://" + site.domain;
|
||||
site.urlSafeDomain = $sce.trustAsResourceUrl(site.urlSafeDomain);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -549,6 +552,42 @@ app.controller('websiteCtrl', [
|
|||
return matches;
|
||||
};
|
||||
|
||||
vm.showAction = function (action) {
|
||||
switch(action) {
|
||||
case 'invite':
|
||||
vm.showInviteContainer = true;
|
||||
vm.websiteTiles = true;
|
||||
vm.showBackBtn = true;
|
||||
break;
|
||||
case 'shares':
|
||||
vm.showSharesContainer = true;
|
||||
vm.websiteTiles = true;
|
||||
vm.showBackBtn = true;
|
||||
break;
|
||||
case 'files':
|
||||
vm.showFilesContainer = true;
|
||||
vm.websiteTiles = true;
|
||||
vm.showBackBtn = true;
|
||||
break;
|
||||
case 'upload':
|
||||
vm.showUploadContainer = true;
|
||||
vm.websiteTiles = true;
|
||||
vm.showBackBtn = true;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
};
|
||||
|
||||
vm.closeAllOpenActions = function () {
|
||||
$timeout(function() {
|
||||
vm.showInviteContainer = false;
|
||||
vm.showSharesContainer = false;
|
||||
vm.showFilesContainer = false;
|
||||
vm.websiteTiles = false;
|
||||
vm.showBackBtn = false;
|
||||
}, 150);
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
app.filter('stringify', function() {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
|
||||
<div class="invite-card-container">
|
||||
<div class="invite-option">
|
||||
<h1>Invite Code</h1>
|
||||
<h1>Enter Invite Code</h1>
|
||||
<hr />
|
||||
<input type="text" class="form-control" ng-model="vm.Shares.inviteToken" />
|
||||
<hr />
|
||||
|
|
@ -108,37 +108,90 @@
|
|||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Website</th>
|
||||
<th class="text-center"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr ng-repeat="r in vm.sites">
|
||||
<td><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target=".{{r.challenge}}">Edit</button>
|
||||
<button type="button" class="btn btn-primary btn-xs" ng-click="vm.Sites.archive(r)">Download</button>
|
||||
<button type="button" class="btn btn-danger btn-xs" ng-click="vm.Sites.remove(r)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="websites-tile">
|
||||
<h1>Your Websites</h1>
|
||||
<ul class="cards">
|
||||
<li class="cards__item" ng-repeat="r in vm.sites">
|
||||
<div class="card">
|
||||
<div class="card__image card__image--fence">
|
||||
<iframe src="{{ r.urlSafeDomain }}" width="350" height="350"></iframe>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<div class="card__title text-center"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></div>
|
||||
<button class="btn btn--block card__btn" data-toggle="modal" data-target=".{{ r.challenge }}" ng-click="vm.closeAllOpenActions()">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade {{ r.challenge }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" ng-click="vm.closeAllOpenActions()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.urlSafeDomain">example.com</a></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="website-menu container" ng-hide="vm.websiteTiles">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-click="vm.showAction('invite')" class="cp">
|
||||
<div class="ssb-icon"><i class="fa fa-share-square-o" aria-hidden="true"></i></div>
|
||||
<h2 class="ssb-title">Invite</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-click="vm.showAction('shares'); vm.Shares.list(r)" class="cp">
|
||||
<div class="ssb-icon"> <i class="fa fa-list-alt" aria-hidden="true"></i> </div>
|
||||
<h2 class="ssb-title">Shares</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-click="vm.showAction('files'); vm.Sites.contents(r)" class="cp">
|
||||
<div class="ssb-icon"><i class="fa fa-sitemap" aria-hidden="true"></i></div>
|
||||
<h2 class="ssb-title">Files</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-href="https://{{ r.domain }}" target="_blank" class="cp">
|
||||
<div class="ssb-icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
|
||||
<h2 class="ssb-title">Website</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-click="vm.Sites.archive(r)" class="cp">
|
||||
<div class="ssb-icon"><i class="fa fa-file-archive-o" aria-hidden="true"></i></div>
|
||||
<h2 class="ssb-title">Download</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="square-service-block">
|
||||
<a ng-click="vm.Sites.remove(r)" class="cp">
|
||||
<div class="ssb-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
||||
<h2 class="ssb-title">Delete</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="vm.showInviteContainer">
|
||||
<h1>TODO:// FIX THIS UGLY</h1>
|
||||
<form class="form-inline text-center">
|
||||
<h4 class="text-left">Send Invitation:</h4>
|
||||
<div class="form-group">
|
||||
<input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" />
|
||||
</div>
|
||||
|
|
@ -150,11 +203,8 @@
|
|||
</div>
|
||||
<button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
|
||||
</form>
|
||||
<form class="form-inline text-center">
|
||||
<h4 class="text-left">Shares:</h4>
|
||||
<button class="btn btn-info" ng-click="vm.Shares.list(r)" ng-hide="vm.showSharesList">View Shared With</button>
|
||||
<button class="btn btn-danger" ng-click="vm.showSharesList = false" ng-show="vm.showSharesList">Hide Shares</button>
|
||||
<div class="white-well" ng-show="vm.showSharesList">
|
||||
</div>
|
||||
<div ng-show="vm.showSharesContainer">
|
||||
<span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span>
|
||||
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
|
||||
<li>
|
||||
|
|
@ -175,38 +225,13 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
<form class="form-inline text-center">
|
||||
<h4 class="text-left">List Files:</h4>
|
||||
<!-- <div class="form-group">
|
||||
<input type="text" class="form-control" ng-model="r.newPath" placeholder="Ex: Directory Name" />
|
||||
</div> -->
|
||||
<button class="btn btn-info trigger-search" ng-click="vm.Sites.contents(r)">List Root Files</button>
|
||||
<div class="white-well" ng-show="vm.showListFiles">
|
||||
<div ng-show="vm.showFilesContainer">
|
||||
<file-tree r="r"></file-tree>
|
||||
</div>
|
||||
</form>
|
||||
<div class="">
|
||||
<h4 class="text-left">Upload Files:</h4>
|
||||
<div>
|
||||
<input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
|
||||
|
||||
<div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
|
||||
|
||||
<div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
|
||||
|
||||
<!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
|
||||
|
||||
<div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
|
||||
|
||||
<div><label>Web path</label> <input type="text" class="form-control" ng-model="r.uploadPath" /></div>
|
||||
|
||||
<button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;">Close</button>
|
||||
<div class="modal-footer ">
|
||||
<button type="button" class="btn btn-primary pull-left" ng-show="vm.showBackBtn" ng-click="vm.closeAllOpenActions()">Back</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.closeAllOpenActions()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<div class="text-left">
|
||||
<div class="row">
|
||||
<ul class="breadcrumb">
|
||||
<button type="button" class="close" ng-click="vm.showListFiles = false" ng-show="vm.showListFiles"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb)" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
|
||||
{{ breadcrumb }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<ul class="tree ls-none">
|
||||
<li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
|
||||
<input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
|
||||
|
|
@ -16,16 +16,16 @@
|
|||
</ul>
|
||||
<ul class="tree files-only ls-none">
|
||||
<li ng-repeat="file in vm.siteFiles track by $index">
|
||||
<span class="tree_label filez">{{ file }}</span>
|
||||
<span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button></span>
|
||||
</li>
|
||||
<li class="move-back">
|
||||
<a><i class="fa fa-plus"></i> Add Files</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1>ADD UPLOAD STUFF HERE</h1>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue