Skip to content
This repository has been archived by the owner on Mar 10, 2019. It is now read-only.

Commit

Permalink
Updated MDC to 0.32.0
Browse files Browse the repository at this point in the history
  • Loading branch information
devgianlu committed Mar 11, 2018
1 parent 01eb7e1 commit 0a7e1f0
Show file tree
Hide file tree
Showing 11 changed files with 65 additions and 52 deletions.
10 changes: 5 additions & 5 deletions WebContent/cardcast/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions WebContent/chat/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand All @@ -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>
Expand All @@ -29,7 +29,7 @@ <h1 class="mdc-typography--display1 message" style="margin-top: 48px">There are
<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>
Expand All @@ -53,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>
Expand Down
2 changes: 1 addition & 1 deletion WebContent/chat/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
17 changes: 13 additions & 4 deletions WebContent/css/pyx-reloaded.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@
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;
Expand All @@ -47,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);
}

Expand All @@ -68,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 */
Expand Down Expand Up @@ -358,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;
}
16 changes: 8 additions & 8 deletions WebContent/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions WebContent/game_options/dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions WebContent/game_options/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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("");
}

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
16 changes: 8 additions & 8 deletions WebContent/games/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -125,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>
Expand Down Expand Up @@ -212,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>
Expand Down
Loading

0 comments on commit 0a7e1f0

Please sign in to comment.