Merge branch 'develop'

devgianlu · Mar 11, 2018 · 3c06e1e · 3c06e1e
2 parents f4b3d95 + 7ecfbae
commit 3c06e1e
Show file tree

Hide file tree

Showing 31 changed files with 280 additions and 134 deletions.
diff --git a/WebContent/cardcast/index.html b/WebContent/cardcast/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cardcast - PYX-Reloaded</title>
-    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.css">
+    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
@@ -18,7 +18,7 @@
 </head>
 <body class="mdc-typography">
 <div class="page-content">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z4">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
         <div class="mdc-toolbar__row">
             <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                 <span class="mdc-toolbar__title">Cardcast - PYX Reloaded</span>
@@ -27,15 +27,15 @@
             <section class="mdc-toolbar__section">
                 <div class="mdc-text-field mdc-text-field--dense" data-mdc-auto-init="MDCTextField">
                     <input type="text" id="cardcastSearch" class="mdc-text-field__input">
-                    <label class="mdc-text-field__label" for="cardcastSearch">Search</label>
+                    <label class="mdc-floating-label" for="cardcastSearch">Search</label>
                     <i class="material-icons mdc-text-field__icon" tabindex="0" onclick="submitSearch();">search</i>
                     <div class="mdc-line-ripple"></div>
                 </div>
             </section>
 
             <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
                 <div class="mdc-menu-anchor">
-                    <button class="material-icons align-icons mdc-toolbar__icon" onclick="showCardcastMenu();">
+                    <button class="material-icons mdc-toolbar__icon" onclick="showCardcastMenu();">
                         filter_list
                     </button>
                     <div class="mdc-menu" id="cardcastMenu" tabindex="-1">
@@ -184,7 +184,7 @@ <h2 class="mdc-typography mdc-typography--display1 _responses">Responses</h2>
 
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
-<script src="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.js"></script>
+<script src="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
 <script src="/js/communication.helper.js"></script>

diff --git a/WebContent/chat/index.html b/WebContent/chat/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Global chat - PYX-Reloaded</title>
-    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.css">
+    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css"/>
@@ -15,7 +15,7 @@
 </head>
 <body class="mdc-typography">
 <div class="page-content">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z4">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
         <div class="mdc-toolbar__row">
             <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                 <span class="mdc-toolbar__title">Global chat - PYX Reloaded</span>
@@ -25,12 +25,11 @@
 
     <main class="mdc-toolbar-fixed-adjust">
         <h1 class="mdc-typography--display1 message" style="margin-top: 48px">There are no messages.</h1>
-        <ul class="mdc-list mdc-list--avatar-list list">
-        </ul>
+        <ul class="mdc-list mdc-list--avatar-list list"></ul>
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon"
              data-mdc-auto-init="MDCTextField">
             <input type="text" id="chatMessage" class="mdc-text-field__input">
-            <label for="chatMessage" class="mdc-text-field__label">Message</label>
+            <label for="chatMessage" class="mdc-floating-label">Message</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">send</i>
             <div class="mdc-text-field__outline">
                 <svg>
@@ -54,7 +53,7 @@ <h1 class="mdc-typography--display1 message" style="margin-top: 48px">There are
 
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
-<script src="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.js"></script>
+<script src="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
 <script src="/js/events.helper.js"></script>
 <script src="/js/communication.helper.js"></script>

diff --git a/WebContent/chat/index.js b/WebContent/chat/index.js
@@ -48,7 +48,7 @@ class ChatManager {
 
     sendGameChatMessage(msg) {
         Requester.request("c", {"m": msg}, () => {
-            this._chatMessage.next().removeClass("mdc-text-field__label--float-above");
+            this._chatMessage.next().removeClass("mdc-floating-label--float-above");
             this._chatMessage.val("");
             this._chatMessage.blur();
         }, (error) => {

diff --git a/WebContent/css/pyx-reloaded.css b/WebContent/css/pyx-reloaded.css
@@ -29,6 +29,20 @@
     vertical-align: -12% !important;
 }
 
+/* Margin in drawer in list items */
+.mdc-drawer__drawer .mdc-list-item > .mdc-list-item__start-detail {
+    margin-right: 8px;
+}
+
+/* Toolbar icons fix */
+button.mdc-toolbar__icon {
+    box-sizing: content-box;
+}
+
+button.mdc-toolbar__menu-icon {
+    box-sizing: content-box;
+}
+
 /* Hide stuff in toolbar on mobile */
 .mdc-toolbar ._refresh, .mdc-toolbar ._themingDialog {
     display: none;
@@ -42,7 +56,7 @@
 
 /* Text field in toolbar */
 /*noinspection CssUnresolvedCustomProperty*/
-.mdc-toolbar .mdc-text-field__label {
+.mdc-toolbar .mdc-floating-label {
     color: var(--mdc-theme-text-primary-on-primary);
 }
 
@@ -63,8 +77,8 @@
 }
 
 .mdc-toolbar .mdc-text-field {
-    margin-top: 0 !important;
-    margin-bottom: 16px !important;
+    height: 42px !important;
+    margin: 0 !important;
 }
 
 /* Chip in toolbar */
@@ -353,6 +367,6 @@ body {
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-.mdc-toolbar .mdc-text-field .mdc-text-field__label {
+.mdc-toolbar .mdc-text-field .mdc-floating-label {
     color: var(--mdc-theme-text-secondary-on-dark) !important;
 }
diff --git a/WebContent/game.html b/WebContent/game.html
@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title class="_title">{{Game name}} - PYX Reloaded</title>
-    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.css">
+    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css"/>
@@ -31,7 +31,7 @@ <h3 class="mdc-typography mdc-typography--title">Chat</h3>
             <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon"
                  data-mdc-auto-init="MDCTextField">
                 <input type="text" id="chatMessage" class="mdc-text-field__input">
-                <label for="chatMessage" class="mdc-text-field__label">Message</label>
+                <label for="chatMessage" class="mdc-floating-label">Message</label>
                 <i class="material-icons mdc-text-field__icon" tabindex="0">send</i>
                 <div class="mdc-text-field__outline">
                     <svg>
@@ -45,7 +45,7 @@ <h3 class="mdc-typography mdc-typography--title">Chat</h3>
 </aside>
 
 <div class="page-content">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z4">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
         <div class="mdc-toolbar__row">
             <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                 <button class="material-icons mdc-toolbar__menu-icon">menu</button>
@@ -66,11 +66,11 @@ <h3 class="mdc-typography mdc-typography--title">Chat</h3>
             </section>
 
             <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
-                <button class="material-icons align-icons mdc-toolbar__icon" style="display: none;" id="startGame">
+                <button class="material-icons mdc-toolbar__icon" style="display: none;" id="startGame">
                     done
                 </button>
-                <button class="material-icons align-icons mdc-toolbar__icon" id="gameOptions">settings</button>
-                <button class="material-icons align-icons mdc-toolbar__icon" id="leaveGame">close</button>
+                <button class="material-icons mdc-toolbar__icon" id="gameOptions">settings</button>
+                <button class="material-icons mdc-toolbar__icon" id="leaveGame">close</button>
             </section>
         </div>
     </header>
@@ -122,7 +122,7 @@ <h1 class="message mdc-typography--headline">No suggested game options.</h1>
                 </div>
             </section>
             <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
-                <button class="material-icons align-icons mdc-toolbar__icon _toggleHand">keyboard_arrow_up</button>
+                <button class="material-icons mdc-toolbar__icon _toggleHand">keyboard_arrow_up</button>
             </section>
         </div>
     </div>
@@ -180,7 +180,7 @@ <h1 class="_decks mdc-typography--body1"></h1>
 </div>
 
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
-<script src="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.js"></script>
+<script src="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
 <script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>

diff --git a/WebContent/game_options/dialog.html b/WebContent/game_options/dialog.html
@@ -96,7 +96,7 @@ <h1 class="mdc-card__title mdc-typography--title">Access</h1>
                 <section class="mdc-card__supporting-text">
                     <div class="mdc-text-field mdc-text-field--box" style="width: 100%;">
                         <input type="password" id="gamePassword" autocomplete="off" class="mdc-text-field__input">
-                        <label for="gamePassword" class="mdc-text-field__label">Password</label>
+                        <label for="gamePassword" class="mdc-floating-label">Password</label>
                         <div class="mdc-line-ripple"></div>
                     </div>
                 </section>
@@ -136,7 +136,7 @@ <h4 class="mdc-typography--body2 mdc-typography--adjust-margin">Add deck</h4>
                                     <input maxlength="5" minlength="5" type="text" id="cardcastAddDeckCode"
                                            class="mdc-text-field__input"
                                            style="text-transform: uppercase">
-                                    <label for="cardcastAddDeckCode" class="mdc-text-field__label">Deck code</label>
+                                    <label for="cardcastAddDeckCode" class="mdc-floating-label">Deck code</label>
                                     <i class="material-icons mdc-text-field__icon" tabindex="0">add</i>
                                     <div class="mdc-line-ripple"></div>
                                 </div>

diff --git a/WebContent/game_options/dialog.js b/WebContent/game_options/dialog.js
@@ -67,18 +67,18 @@ class MDCMultiSelect extends mdc.select.MDCSelect {
         const selected = this.selectedItems;
 
         if (selected.length === 0) {
-            this.label_.classList.remove("mdc-select__label--float-above");
+            this.foundation_.adapter_.floatLabel(false);
         } else {
             this.selectedText_.textContent = selected.join(", ");
-            this.label_.classList.add("mdc-select__label--float-above");
+            this.foundation_.adapter_.floatLabel(true);
         }
 
         this.listener();
     }
 
     clear() {
         this.selectedText_.textContent = "";
-        this.label_.classList.remove("mdc-select__label--float-above")
+        this.foundation_.adapter_.floatLabel(false);
     }
 }
 
@@ -280,10 +280,10 @@ class GameOptionsDialog {
 
         // Access
         if (go.pw.length > 0) {
-            this._password.next().addClass("mdc-text-field__label--float-above");
+            this._password.next().addClass("mdc-floating-label--float-above");
             this._password.val(go.pw);
         } else {
-            this._password.next().removeClass("mdc-text-field__label--float-above");
+            this._password.next().removeClass("mdc-floating-label--float-above");
             this._password.val("");
         }
 
@@ -325,7 +325,7 @@ class GameOptionsDialog {
 
         // Access
         this._password.val("");
-        this._password.next().removeClass("mdc-text-field__label--float-above");
+        this._password.next().removeClass("mdc-floating-label--float-above");
 
         // Cardcast
         this.cardcastDecks.clear();
@@ -407,7 +407,7 @@ class GameOptionsDialog {
     _resetAddCardcast() {
         this.cardcastAddDeckCode.valid = true;
         this._cardcastAddDeckCode.val("");
-        this._cardcastAddDeckCode.next().removeClass("mdc-text-field__label--float-above");
+        this._cardcastAddDeckCode.next().removeClass("mdc-floating-label--float-above");
 
         this._cardcastAddDeckInfo_loading.hide();
         this._cardcastAddDeckInfo_details.hide();

diff --git a/WebContent/games/index.html b/WebContent/games/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>Games - PYX-Reloaded</title>
-    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.css">
+    <link rel="stylesheet" href="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css"/>
@@ -17,7 +17,7 @@
 
 <body class="mdc-typography">
 <div class="page-content">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z4">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
         <div class="mdc-toolbar__row">
             <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                 <button class="material-icons mdc-toolbar__menu-icon">menu</button>
@@ -28,16 +28,16 @@
                 <div class="mdc-text-field mdc-text-field--dense" data-mdc-auto-init="MDCTextField"
                      style="margin-left: 16px">
                     <input type="text" id="gamesSearch" class="mdc-text-field__input search">
-                    <label class="mdc-text-field__label" for="gamesSearch">Search</label>
+                    <label class="mdc-floating-label" for="gamesSearch">Search</label>
                     <i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
                     <div class="mdc-line-ripple"></div>
                 </div>
             </section>
 
             <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
-                <button class="material-icons align-icons mdc-toolbar__icon _refresh">refresh</button>
-                <button class="material-icons align-icons mdc-toolbar__icon _themingDialog">format_paint</button>
-                <button class="material-icons align-icons mdc-toolbar__icon _logout">exit_to_app</button>
+                <button class="material-icons mdc-toolbar__icon _refresh">refresh</button>
+                <button class="material-icons mdc-toolbar__icon _themingDialog">format_paint</button>
+                <button class="material-icons mdc-toolbar__icon _logout">exit_to_app</button>
             </section>
         </div>
     </header>
@@ -71,6 +71,10 @@ <h2 class="mdc-typography--body1 details--email mdc-theme--text-secondary-on-pri
             </div>
         </header>
         <nav class="mdc-drawer__content mdc-list">
+            <a class="mdc-list-item" href="/users/" target="_blank">
+                <i class="material-icons mdc-list-item__start-detail">people</i>
+                Users
+            </a>
             <a class="mdc-list-item" href="/chat/" target="_blank">
                 <i class="material-icons mdc-list-item__start-detail">message</i>
                 Chat
@@ -121,7 +125,7 @@ <h2 class="mdc-dialog__header__title">Customize Appearance</h2>
                     </div>
                     <div id="themingExample" class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
                          style="display: flex; flex-flow: column">
-                        <header class="mdc-toolbar mdc-elevation--z4">
+                        <header class="mdc-toolbar">
                             <div class="mdc-toolbar__row">
                                 <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                                     <button class="material-icons mdc-toolbar__menu-icon">menu</button>
@@ -208,7 +212,7 @@ <h1 class="mdc-card__title mdc-typography--body2">Try it out</h1>
 
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
-<script src="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.js"></script>
+<script src="//unpkg.com/material-components-web@0.32.0/dist/material-components-web.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
 <script src="/js/cardcast.helper.js"></script>
 <script src="/js/communication.helper.js"></script>