fix(dialogs): all dialogs will be more sensible and look nicer

closes #104
seiyria · Jan 5, 2016 · 5a7bf01 · 5a7bf01
1 parent 19d3263
commit 5a7bf01
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 239 deletions.
diff --git a/src/jade/partials/dialogs/addevent.jade b/src/jade/partials/dialogs/addevent.jade
@@ -1,46 +1,48 @@
 
 script(type="text/ng-template", id="/dialog/addevent")
   md-dialog
-
-    .md-dialog-content
-      h2.md-title {{label}} Event
-
-      p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
-        ng-md-icon(icon="error")
-        span &nbsp;All fields are required.
-
-      form(name="item.form", ng-submit="addItem()")
-        .input-row(layout-gt-sm="row", layout-sm="column")
-          md-input-container(flex)
-            label Name
-            input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
-
-          md-autocomplete(flex, required,
-            md-input-name="location",
-            md-selected-item="selectedlocation",
-            md-floating-label="Location",
-            md-search-text="item.location",
-            md-items="place in getLocations(item.location)",
-            md-item-text="place",
-            md-input-maxlength="30")
-            md-item-template
-              span(md-highlight-text="searchText") {{place}}
-            md-not-found No matches.
-
-        h3.md-subhead.subhead When
-        .input-row(layout="row")
-          md-datepicker(ng-model="item.date", md-placeholder="Enter date", required, style="margin-top: 14px")
-
-          md-input-container(flex)
-            label Time
-            input(name="time", type="time", ng-model="item.date")
-
-        h3.md-subhead.subhead Extra
-        .input-row(layout="row")
-          md-input-container(flex)
-            label Description
-            textarea(name="description", ng-model="item.description", md-maxlength="200")
-
-    .md-actions
-      md-button.md-primary(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Event
-      md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+    form
+      md-toolbar
+        .md-toolbar-tools
+          h2 {{label}} Event
+
+      .md-dialog-content
+        p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
+          ng-md-icon(icon="error")
+          span &nbsp;All fields are required.
+
+        form(name="item.form", ng-submit="addItem()")
+          .input-row(layout-gt-sm="row", layout-sm="column")
+            md-input-container(flex)
+              label Name
+              input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
+
+            md-autocomplete(flex, required,
+              md-input-name="location",
+              md-selected-item="selectedlocation",
+              md-floating-label="Location",
+              md-search-text="item.location",
+              md-items="place in getLocations(item.location)",
+              md-item-text="place",
+              md-input-maxlength="30")
+              md-item-template
+                span(md-highlight-text="searchText") {{place}}
+              md-not-found No matches.
+
+          h3.md-subhead.subhead When
+          .input-row(layout="row")
+            md-datepicker(ng-model="item.date", md-placeholder="Enter date", required, style="margin-top: 14px")
+
+            md-input-container(flex)
+              label Time
+              input(name="time", type="time", ng-model="item.date")
+
+          h3.md-subhead.subhead Extra
+          .input-row(layout="row")
+            md-input-container(flex)
+              label Description
+              textarea(name="description", ng-model="item.description", md-maxlength="200")
+
+      .md-actions
+        md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+        md-button.md-primary(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Event
diff --git a/src/jade/partials/dialogs/addtournament.jade b/src/jade/partials/dialogs/addtournament.jade
@@ -1,44 +1,47 @@
 
 script(type="text/ng-template", id="/dialog/addtournament")
   md-dialog
-
-    .md-dialog-content.description-popup
-      h2.md-title {{label}} Tournament
-
-      p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
-        ng-md-icon(icon="error")
-        span &nbsp;All fields are required.
-
-      form(name="item.form", ng-submit="addItem()")
-        .input-row(layout="row")
-          md-input-container(flex)
-            label Name
-            input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
-
-        .input-row(layout="row")
-          md-input-container(flex)
-            label Event
-            md-select(ng-model="item.event")
-              md-option(ng-repeat="event in allEvents", value="{{event.$id}}") {{event.name}}
-
-        .input-row(layout="row")
-          md-autocomplete(flex, required,
-          md-input-name="game",
-          md-selected-item="selectedGame",
-          md-floating-label="Game",
-          md-search-text="item.game",
-          md-items="game in getGames(item.game)",
-          md-item-text="game",
-          md-input-maxlength="30")
-            md-item-template
-              span(md-highlight-text="searchText") {{game}}
-            md-not-found No matches.
-
-        .input-row(layout="row")
-          md-input-container(flex)
-            label Description
-            textarea(ng-model="item.description", md-maxlength="1000", required)
-
-    .md-actions
-      md-button.md-primary(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Tournament
-      md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+    form
+      md-toolbar
+        .md-toolbar-tools
+          h2.md-title {{label}} Tournament
+
+      .md-dialog-content.description-popup
+
+        p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
+          ng-md-icon(icon="error")
+          span &nbsp;All fields are required.
+
+        form(name="item.form", ng-submit="addItem()")
+          .input-row(layout="row")
+            md-input-container(flex)
+              label Name
+              input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
+
+          .input-row(layout="row")
+            md-input-container(flex)
+              label Event
+              md-select(ng-model="item.event")
+                md-option(ng-repeat="event in allEvents", value="{{event.$id}}") {{event.name}}
+
+          .input-row(layout="row")
+            md-autocomplete(flex, required,
+            md-input-name="game",
+            md-selected-item="selectedGame",
+            md-floating-label="Game",
+            md-search-text="item.game",
+            md-items="game in getGames(item.game)",
+            md-item-text="game",
+            md-input-maxlength="30")
+              md-item-template
+                span(md-highlight-text="searchText") {{game}}
+              md-not-found No matches.
+
+          .input-row(layout="row")
+            md-input-container(flex)
+              label Description
+              textarea(ng-model="item.description", md-maxlength="1000", required)
+
+      .md-actions
+        md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+        md-button.md-primary.md-raised(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Tournament
diff --git a/src/jade/partials/dialogs/adduser.jade b/src/jade/partials/dialogs/adduser.jade
@@ -1,85 +1,88 @@
 
 script(type="text/ng-template", id="/dialog/adduser")
   md-dialog
+    form
+      md-toolbar
+        .md-toolbar-tools
+          h2.md-title(ng-if="!viewOnly") {{label}} Player
+          h2.md-title(ng-if="viewOnly") {{item.name}} {{item.location ? 'from ' + item.location : ''}}
 
-    .md-dialog-content
-      h2.md-title(ng-if="!viewOnly") {{label}} Player
-      h2.md-title(ng-if="viewOnly") {{item.name}} {{item.location ? 'from ' + item.location : ''}}
+      .md-dialog-content
 
-      p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
-        ng-md-icon(icon="error")
-        span &nbsp;All fields are required.
+        p.md-warn(ng-if="item.form.$submitted && item.form.$invalid", layout="row", layout-align="start center")
+          ng-md-icon(icon="error")
+          span &nbsp;All fields are required.
 
-      form(name="item.form", ng-submit="addItem()")
-        .input-row(layout-gt-sm="row", layout-sm="column", ng-if="!viewOnly")
-          md-input-container(flex)
-            label Name
-            input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
+        form(name="item.form", ng-submit="addItem()")
+          .input-row(layout-gt-sm="row", layout-sm="column", ng-if="!viewOnly")
+            md-input-container(flex)
+              label Name
+              input(name="name", ng-model="item.name", md-maxlength="30", required, autofocus)
 
-          md-autocomplete(flex,
-            md-input-name="location",
-            md-selected-item="selectedlocation",
-            md-floating-label="Location",
-            md-search-text="item.location",
-            md-items="place in getLocations(item.location)",
-            md-item-text="place",
-            md-input-maxlength="30")
-            md-item-template
-              span(md-highlight-text="searchText") {{place}}
-            md-not-found No matches.
+            md-autocomplete(flex,
+              md-input-name="location",
+              md-selected-item="selectedlocation",
+              md-floating-label="Location",
+              md-search-text="item.location",
+              md-items="place in getLocations(item.location)",
+              md-item-text="place",
+              md-input-maxlength="30")
+              md-item-template
+                span(md-highlight-text="searchText") {{place}}
+              md-not-found No matches.
 
-        h3.md-subhead.subhead Aliases
-        .input-row(layout="row")
-          md-chips(
-            ng-model="item.aliases",
-            secondary-placeholder="Add aliases",
-            placeholder="+Alias",
+          h3.md-subhead.subhead Aliases
+          .input-row(layout="row")
+            md-chips(
+              ng-model="item.aliases",
+              secondary-placeholder="Add aliases",
+              placeholder="+Alias",
+              required,
+              readonly="viewOnly")
+                span(md-highlight-text="searchText") {{item}}
+            md-chip(ng-if="item.aliases.length === 0 && viewOnly") None
+
+          h3.md-subhead.subhead Games Played
+          .input-row(layout="row")
+            md-chips(
+            ng-model="item.games",
+            secondary-placeholder="Add games",
+            placeholder="+Game",
             required,
+            md-autocomplete-snap,
             readonly="viewOnly")
-              span(md-highlight-text="searchText") {{item}}
-          md-chip(ng-if="item.aliases.length === 0 && viewOnly") None
-
-        h3.md-subhead.subhead Games Played
-        .input-row(layout="row")
-          md-chips(
-          ng-model="item.games",
-          secondary-placeholder="Add games",
-          placeholder="+Game",
-          required,
-          md-autocomplete-snap,
-          readonly="viewOnly")
-            md-autocomplete(
-            md-selected-item="selectedItem",
-            md-search-text="searchText",
-            md-items="item in getGames(searchText)"
-            md-item-text="item"
-            placeholder="+Game"
-            )
-              span(md-highlight-text="searchText") {{item}}
-          md-chip(ng-if="item.games.length === 0 && viewOnly") None
+              md-autocomplete(
+              md-selected-item="selectedItem",
+              md-search-text="searchText",
+              md-items="item in getGames(searchText)"
+              md-item-text="item"
+              placeholder="+Game"
+              )
+                span(md-highlight-text="searchText") {{item}}
+            md-chip(ng-if="item.games.length === 0 && viewOnly") None
 
-        h3.md-subhead.subhead Characters Used
-        .input-row(layout="row")
-          md-chips(
-          ng-model="item.characters",
-          secondary-placeholder="Add characters",
-          placeholder="+Character",
-          required,
-          md-autocomplete-snap,
-          readonly="viewOnly")
-            md-autocomplete(
-            md-selected-item="selectedItem",
-            md-search-text="searchText",
-            md-items="item in getCharacters(searchText)"
-            md-item-text="item"
-            placeholder="+Character"
-            )
-              span(md-highlight-text="searchText") {{item}}
-          md-chip(ng-if="item.characters.length === 0 && viewOnly") None
+          h3.md-subhead.subhead Characters Used
+          .input-row(layout="row")
+            md-chips(
+            ng-model="item.characters",
+            secondary-placeholder="Add characters",
+            placeholder="+Character",
+            required,
+            md-autocomplete-snap,
+            readonly="viewOnly")
+              md-autocomplete(
+              md-selected-item="selectedItem",
+              md-search-text="searchText",
+              md-items="item in getCharacters(searchText)"
+              md-item-text="item"
+              placeholder="+Character"
+              )
+                span(md-highlight-text="searchText") {{item}}
+            md-chip(ng-if="item.characters.length === 0 && viewOnly") None
 
-    .md-actions(ng-if="!viewOnly")
-      md-button.md-primary(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Player
-      md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+      .md-actions(ng-if="!viewOnly")
+        md-button.md-primary(ng-click="cancel()", aria-label="cancel") Cancel
+        md-button.md-primary.md-raised(ng-click="addItem()", ng-disabled="item.form.$invalid", aria-label="submit") {{label}} Player
 
-    .md-actions(ng-if="viewOnly")
-      md-button.md-primary(ng-click="cancel()", aria-label="close") Close
+      .md-actions(ng-if="viewOnly")
+        md-button.md-primary(ng-click="cancel()", aria-label="close") Close
diff --git a/src/jade/partials/dialogs/bracket-information.jade b/src/jade/partials/dialogs/bracket-information.jade
@@ -1,15 +1,18 @@
 
 script(type="text/ng-template", id="/dialog/bracket-information")
   md-dialog
+    form
+      md-toolbar
+        .md-toolbar-tools
+          h2.md-title Match {{ title }}
 
-    .md-dialog-content
-      h2.md-title Match {{ title }}
-
-      md-list
-        md-list-item.md-2-line(ng-repeat="player in players")
-          .md-avatar.subhead {{ player.ordinal }}
-          .md-list-item-text
-            h3 {{ player.displayName }}
-            Total Points Scored: {{ player.score }}
-    .md-actions
-      md-button.md-primary(ng-click="cancel()", aria-label="close") Close
+      .md-dialog-content
+        md-list
+          md-list-item.md-2-line(ng-repeat="player in players")
+            .md-avatar.subhead {{ player.ordinal }}
+            .md-list-item-text
+              h3 {{ player.displayName }}
+              div Total Points Scored: {{ player.score }}
+
+      .md-actions
+        md-button.md-primary(ng-click="cancel()", aria-label="close") Close