Bigger chrome when space is avalible 🐻

Sertion · Sep 16, 2017 · f2336a7 · f2336a7
1 parent 54f4641
commit f2336a7
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 11 deletions.
diff --git a/frsrc/view/button/back/button-back.scss b/frsrc/view/button/back/button-back.scss
@@ -1,6 +1,7 @@
 .buttonBack {
     -webkit-appearance: none;
     display: block;
+    flex-grow: 1;
     text-decoration: none;
     text-transform: uppercase;
     cursor: pointer;
@@ -27,4 +28,8 @@
 .buttonBack__iconPath {
     stroke: transparent;
     fill: #fff;
+}
+@media (min-height: 720px) and (min-width: 700px) {
+    height: 20px;
+    width: 20px;
 }
diff --git a/frsrc/view/button/base/button-base.scss b/frsrc/view/button/base/button-base.scss
@@ -37,7 +37,6 @@
     clear: both;
     margin: 10px 20px;
 }
-
 .button--head {
     font-size: 12px;
     margin: 7px;
@@ -54,4 +53,19 @@
         box-shadow: 0 0 0 3px rgba(255, 255, 255, .75);
         background-color: rgb(12, 64, 120);
     }
+}
+
+@media (min-height: 720px) and (min-width: 700px) {
+    .button--quick {
+        font-size: 20px;
+        padding: 10px 20px;
+        margin: 5px;
+        line-height: 20px;
+    }
+    .button--head {
+        font-size: 16px;
+        padding: 10px 20px;
+        margin: 7px;
+        line-height: 1;
+    }
 }
diff --git a/frsrc/view/chrome/button/chrome-button.scss b/frsrc/view/chrome/button/chrome-button.scss
@@ -30,4 +30,13 @@
 
 .buttonChrome:hover .buttonChrome__iconPath {
     stroke: rgba(255, 255, 255, .75);
+}
+
+@media (min-height: 720px) and (min-width: 700px) {
+    .buttonChrome {
+        padding: 22px 10px 17px;
+    }
+    .buttonChrome:last-of-type {
+        padding-right: 20px;
+    }
 }
diff --git a/frsrc/view/chrome/chrome/chrome.scss b/frsrc/view/chrome/chrome/chrome.scss
@@ -8,7 +8,6 @@
     background: #3f407f url('../../../../static/img/chrome-head-bg.jpg') 0 0 no-repeat;
     background-size: cover;
     display: flex;
-    height: 40px;
     color: #ffffff;
     justify-content: space-between;
     align-items: stretch;
@@ -56,4 +55,31 @@
 .chrome__windowAction {
     white-space: nowrap;
 }
-.chrome__body {}
+.chrome__body {}
+
+@media (min-height: 720px) and (min-width: 700px) {
+    .chrome {
+        display: grid;
+        grid-template-rows: 60px auto;
+    }
+    .chrome__title {
+        font-size: 50px;
+    }
+    .chrome__title:before {
+        height: 50px;
+        width: 50px;
+    }
+    .chrome__grow {
+        flex-grow: 10;
+    }
+    .chrome__rating {
+        line-height: 60px;
+    }
+    .chrome__ratingIcon {
+        height: 60px;
+        width: auto;
+    }
+    .chrome__ratingLabel {
+        font-size: 40px;
+    }
+}
diff --git a/frsrc/view/fragments/map-list/map-list.scss b/frsrc/view/fragments/map-list/map-list.scss
@@ -79,7 +79,7 @@
             -1px 1px 0 rgb(10, 20, 30),
             1px -1px 0 rgb(10, 20, 30),
             -1px -1px 0 rgb(10, 20, 30);
-        padding: 3px 5px;
+        padding: 5px;
     }
 }
 

diff --git a/frsrc/view/fragments/season-select/season-select.scss b/frsrc/view/fragments/season-select/season-select.scss
@@ -5,6 +5,7 @@
     width: 120px;
     margin: 7px 7px 7px 15px;
     line-height: 1;
+    font-family: Futura;
     color: #fff;
     background-color: rgba(63, 65, 130, 0.8);
     background-image: url('../../../../static/img/select.svg');
@@ -28,4 +29,20 @@
 }
 .seasonSelect__item:hover {
     background: rgba(63, 65, 130, 0.8);
+}
+
+@media (min-height: 720px) and (min-width: 700px) {
+    .seasonSelect {
+        font-size: 16px;
+        width: 190px;
+        padding: 1px 30px 0 10px;
+        background-size: 12px;
+        background-position: calc(100% - 10px) 50%;
+    }
+    .seasonSelect:hover {
+        background-position: calc(100% - 10px) calc(50% - 2px);
+    }
+    .seasonSelect:active {
+        background-position: calc(100% - 10px) calc(50% + 2px);
+    }
 }
diff --git a/frsrc/view/fragments/subpage/subpage.scss b/frsrc/view/fragments/subpage/subpage.scss
@@ -8,7 +8,7 @@
     height: calc(100vh - 41px);
 }
 .subpage__back {
-    display: flow-root;
+    display: flex;
     grid-area: back;
 }
 .subpage__head {
@@ -21,4 +21,11 @@
     grid-area: main;
     max-height: 100%;
     padding: 5px;
+}
+@media (min-height: 720px) and (min-width: 700px) {
+    .subpage {
+        height: calc(100vh - 60px);
+        grid-template-rows: 50px auto;
+        grid-template-columns: 90px auto;
+    }
 }
diff --git a/frsrc/view/page-front/page-main/page-main.ts b/frsrc/view/page-front/page-main/page-main.ts
@@ -27,14 +27,14 @@ export default class PageFront extends Vue {
 
         this.seasonId = currentSeason.id.toString();
 
-        if (currentSeasonPlacementsLeft) {
-            this.competitiveLink = 'placement';
+        if (currentSeason.placementRating) {
+            this.competitiveLink = 'competitive';
         }
-        else if (!currentSeason.placementRating) {
-            this.competitiveLink = 'placement-sr';
+        else if (currentSeasonPlacementsLeft) {
+            this.competitiveLink = 'placement';
         }
         else {
-            this.competitiveLink = 'competitive';
+            this.competitiveLink = 'placement-sr';
         }
     }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "compwerstats",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Do you want to compwer your stats?",
   "license": "MIT",
   "author": "compwerstats",