Small changes to the UI

This commit is contained in:
Jorys_Paulin 2018-04-23 20:41:27 +02:00
parent 7a54ad9fb1
commit 1e5bd25291
2 changed files with 3 additions and 4 deletions

View File

@ -100,16 +100,13 @@
</header> </header>
<main id="main-content" class="mdl-layout__content"> <main id="main-content" class="mdl-layout__content">
<div id="host-grid"> <div id="host-grid">
<div class="page-title">Your PCs</div>
<div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell"> <div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
<div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host"> <div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
<h2 class="mdl-card__title-text" >Add Host</h2> <h2 class="mdl-card__title-text" >Add Host</h2>
</div> </div>
</div> </div>
</div> </div>
<div id="game-grid"> <div id="game-grid"></div>
<div class="page-title">Your Games</div>
</div>
<div id="listener"></div> <div id="listener"></div>
<!-- NaCl module placeholder. NaCl gets thrown into here --> <!-- NaCl module placeholder. NaCl gets thrown into here -->
<div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"> <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">

View File

@ -72,6 +72,7 @@ main {
.nav-menu-parent { .nav-menu-parent {
position: relative; position: relative;
margin: 0 4px;
} }
.mdl-menu__outline { .mdl-menu__outline {
background-color: #333846; background-color: #333846;
@ -187,6 +188,7 @@ main {
margin: 15px; margin: 15px;
cursor: pointer; cursor: pointer;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
will-change: transform;
} }
#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active { #host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
transform: scale(1.1); transform: scale(1.1);