From 18ef0d0ee20019d9ee476070009c612c834d3c97 Mon Sep 17 00:00:00 2001 From: seiyria Date: Wed, 14 Oct 2015 14:15:52 -0500 Subject: [PATCH] fix(tournaments): tournament header tools moved to fab menu on mobile closes #54 --- .../partials/tournaments/in-progress.jade | 51 ++++++++++++++++++- .../controllers/tournaments/inProgressCtrl.js | 4 +- src/scss/site.scss | 5 ++ 3 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/jade/partials/tournaments/in-progress.jade b/src/jade/partials/tournaments/in-progress.jade index 5bbbd73..1a9d655 100644 --- a/src/jade/partials/tournaments/in-progress.jade +++ b/src/jade/partials/tournaments/in-progress.jade @@ -1,6 +1,6 @@ script(type="text/ng-template", id="/tournaments/in-progress") - .header-bar(layout="row") + .header-bar(layout="row", hide-sm) div(flex, layout="row", layout-align="center center") div(flex) md-button.md-warn.md-raised(ng-show="hasAccess", ng-click="reset($event)", aria-label="reset") Reset @@ -15,7 +15,7 @@ script(type="text/ng-template", id="/tournaments/in-progress") span(ng-show="ref.public || hasAccess") {{tournamentName}}{{trn.isDone() ? ' (Complete)' : ' (' + matchesLeft() + ' matches left)'}} .text-right.auto-vert-margin(flex, layout="row", layout-align="end center") .hide-underline(ng-show="ref.public && hasAccess") - a#copy-url(data-clipboard-text="{{url}}") + a.copy-url(data-clipboard-text="{{url}}") ng-md-icon.pointer.margin-left-10(size="20", icon="link") a(target="_blank", ng-href="https://twitter.com/home?status={{url}}") ng-md-icon.pointer.margin-left-10(size="20", icon="twitter") @@ -24,5 +24,52 @@ script(type="text/ng-template", id="/tournaments/in-progress") a(target="_blank", ng-href="https://plus.google.com/share?url={{url}}") ng-md-icon.pointer.margin-left-10.margin-right-10(size="20", icon="google-plus") + .header-bar(layout="row", hide-gt-sm) + .text-center.md-title(flex) + span(ng-show="!ref.public && !hasAccess") Unavailable + span(ng-show="ref.public || hasAccess") {{tournamentName}}{{trn.isDone() ? ' (Complete)' : ' (' + matchesLeft() + ' matches left)'}} + + // these are for mobile browsers (ie, touch-enabled) only - they do not work (well) on small desktop browsers + .abs-position-bottom-right(ng-click="isOpen = true", hide-gt-sm) + + md-fab-speed-dial.md-scale(md-direction="left", md-open="isOpen") + md-fab-trigger.align-with-text + md-button.md-fab.md-primary.hidden(aria-label="hidden") + + md-fab-actions(ng-if="isOpen") + md-button.md-fab.md-mini.md-raised.md-accent.md-hue-1.copy-url(data-clipboard-text="{{url}}", aria-label="share by link") + ng-md-icon(size="24", icon="link", style="fill: white") + md-tooltip(md-direction="top") Copy link to clipboard + + md-button.md-fab.md-mini.md-raised.md-accent.md-hue-1(aria-label="share on facebook") + ng-md-icon(size="24", icon="facebook", style="fill: white") + md-tooltip(md-direction="top") Share on facebook + + md-button.md-fab.md-mini.md-raised.md-accent.md-hue-1(aria-label="share on twitter") + ng-md-icon(size="24", icon="twitter", style="fill: white") + md-tooltip(md-direction="top") Share on twitter + + md-button.md-fab.md-mini.md-raised.md-accent.md-hue-1(aria-label="share on google plus") + ng-md-icon(size="24", icon="google-plus", style="fill: white") + md-tooltip(md-direction="top") Share on google plus + + .abs-position-bottom-right(ng-click="isOpen = true", hide-gt-sm) + + md-fab-speed-dial.md-scale(md-direction="up", md-open="isOpen") + md-fab-trigger.align-with-text + + md-button.md-fab.md-primary(aria-label="menu or results", ng-click="doOrOpen($event)", ng-mouseenter="isOpen = true") + ng-md-icon(size="24", icon="{{isOpen && trn.isDone() ? 'assessment' : 'menu'}}", style="fill: white") + md-tooltip(md-direction="left", ng-if="isOpen && trn.isDone()") View results + + md-fab-actions(ng-if="isOpen") + md-button.md-fab.md-raised.md-accent(aria-label="toggle public", ng-click="ref.public = !ref.public; savePublicity()", ng-if="hasAccess") + ng-md-icon(size="24", icon="{{ref.public ? 'lock' : 'lock_open'}}", style="fill: white") + md-tooltip(md-direction="left") Make {{ref.public ? 'private' : 'public'}} + + md-button.md-fab.md-raised.md-warn(aria-label="reset", ng-click="reset($event)", ng-if="hasAccess") + ng-md-icon(size="24", icon="history", style="fill: white") + md-tooltip(md-direction="left") Reset tournament + md-content.scroller.duel-area(md-scroll, flex, layout="column", ng-include="'tournament-'+includedTemplate", ng-if="hasAccess || ref.public", ng-class="{ 'big-scores': ref.options.bigScore }") md-content(flex, layout="row", layout-align="center center", ng-include="'tournament-noaccess'", ng-if="!hasAccess && !ref.public") diff --git a/src/js/controllers/tournaments/inProgressCtrl.js b/src/js/controllers/tournaments/inProgressCtrl.js index 312f90e..d2b43a6 100644 --- a/src/js/controllers/tournaments/inProgressCtrl.js +++ b/src/js/controllers/tournaments/inProgressCtrl.js @@ -8,7 +8,7 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb SidebarManagement.hasSidebar = false; const authData = EnsureLoggedIn.check(false); - const clipboard = new Clipboard('#copy-url'); + const clipboard = new Clipboard('.copy-url'); clipboard.on('success', () => { Toaster.show(`Copied URL to clipboard!`); }); @@ -30,6 +30,8 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb $timeout(() => $scope.url = window.location.href, 0); $scope.includedTemplate = 'duel'; + $scope.doOrOpen = (event) => $scope.isOpen && $scope.trn.isDone() ? $scope.showResults(event) : $scope.isOpen = true; + const determineTemplate = (options) => { const hash = { singles: 'duel', doubles: 'duel', groupstage: 'groupstage', ffa: 'ffa', masters: 'masters' }; return options.last ? 'duel' : hash[options.type]; // backwards compatibility. damn alpha testers diff --git a/src/scss/site.scss b/src/scss/site.scss index ee2a98d..a710b62 100644 --- a/src/scss/site.scss +++ b/src/scss/site.scss @@ -4,6 +4,10 @@ width: $width; } +.hidden { + visibility: hidden; +} + .text-center { text-align: center; } @@ -245,6 +249,7 @@ md-data-table-toolbar > form > input:focus { position: fixed; right: 10px; bottom: 10px; + z-index: 12; } $paddings: top bottom left right;