Moved to a bit compact layout

mgibas · Aug 31, 2017 · 386af28 · 386af28
1 parent caab4e5
commit 386af28
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/dashboard/dashboard-fragment.html b/src/dashboard/dashboard-fragment.html
@@ -40,7 +40,7 @@
     }
 
     </style>
-    <fragment-layout title="CorpoPong">
+    <fragment-layout title="CorpoPong" fullbleed>
       <a href="/matches/create">
         <paper-fab icon="corpopong:paddles"></paper-fab>
       </a>

diff --git a/src/layouts/fragment-layout.html b/src/layouts/fragment-layout.html
@@ -14,9 +14,17 @@
   <template>
     <style include="app-styles"></style>
     <style>
+    .content-wrapper {
+      @apply --layout-horizontal;
+      @apply --layout-center-justified;
+    }
     .content {
+      @apply --layout-flex;
       padding: 1rem;
     }
+    :host(:not([fullbleed])) .content {
+      max-width: var(--corpopong-content-max-width);
+    }
     [hidden] {
       display: none !important;
     }
@@ -62,8 +70,10 @@
           <user-menu></user-menu>
         </app-toolbar>
       </app-header>
-      <div class="content">
-        <slot></slot>
+      <div class="content-wrapper">
+        <div class="content">
+          <slot></slot>
+        </div>
       </div>
     </app-header-layout>
   </template>

diff --git a/src/styles/app-theme.html b/src/styles/app-theme.html
@@ -38,6 +38,8 @@
       --text-primary-color: var(--dark-theme-text-color);
       --default-primary-color: var(--primary-color);
       --paper-progress-active-color: var(--accent-color);
+
+      --corpopong-content-max-width: 960px;
     }
   </style>
 </custom-style>