diff --git a/css/styles.css b/css/styles.css index e006371..c44dbac 100644 --- a/css/styles.css +++ b/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; +} diff --git a/js/controllers/website-controller.js b/js/controllers/website-controller.js index 2c52b3c..23958e2 100644 --- a/js/controllers/website-controller.js +++ b/js/controllers/website-controller.js @@ -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() { diff --git a/templates/website.html b/templates/website.html index 654971e..db093a0 100644 --- a/templates/website.html +++ b/templates/website.html @@ -92,7 +92,7 @@
-

Invite Code

+

Enter Invite Code

@@ -108,105 +108,130 @@
-
-
- - - - - - - - - - - -
Website
example.com - - - -
+
+

Your Websites

+
+