From 828197e6db33f8f79b37db3a472341e0c438378b Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Mon, 8 Aug 2022 12:32:57 +0300
Subject: [PATCH] - Added style rule content-type to gamepad-list, pattern-list
 and, message-item. - Deleted style-rules for background in gamepad-list,
 pattern-list and, message-item. - Did buttons in manual in row always. -
 Rename type combined to complex.

---
 public/assets/patterns.json    |  8 +++----
 public/css/styles.css          | 42 +++++++++++++++++++++++++++++-----
 src/components/AppManual.vue   | 11 +++------
 src/components/GamepadList.vue |  6 +----
 src/components/MessageItem.vue |  6 +----
 src/components/PatternList.vue | 15 +++++++-----
 6 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/public/assets/patterns.json b/public/assets/patterns.json
index d60a1da..df90c86 100644
--- a/public/assets/patterns.json
+++ b/public/assets/patterns.json
@@ -40,7 +40,7 @@
   },
   {
     "name": "Dotted AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "🤨",
     "pattern": [
       {
@@ -98,7 +98,7 @@
   },
   {
     "name": "Short Dashed AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "🤤",
     "pattern": [
       {
@@ -156,7 +156,7 @@
   },
   {
     "name": "Long Dashed AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "😝",
     "pattern": [
       {
@@ -214,7 +214,7 @@
   },
   {
     "name": "Constant AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "😵",
     "pattern": [
       {
diff --git a/public/css/styles.css b/public/css/styles.css
index c10637f..68108c6 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -413,7 +413,7 @@ table, th, td {
 /* ------ */
 
 .header {
-    border-bottom: 32px solid var(--color-header-borderline);
+    border-bottom: 8px solid var(--color-header-borderline);
     background: var(--color-header-background);
 }
 
@@ -431,7 +431,7 @@ table, th, td {
     }
 
 .header-wrapper {
-    padding-top: 64px;
+    padding-top: 32px;
     padding-bottom: 16px;
 }
 
@@ -447,7 +447,7 @@ table, th, td {
 }
 
 .menu-wrapper {
-    margin-top: 32px;
+    margin-top: 16px;
     align-self: center;
 }
 
@@ -476,6 +476,23 @@ table, th, td {
             color: var(--color-header-navigation-link-hover);
         }
 
+@media only screen and (min-width: 540px) {
+    .header {
+        border-bottom: 32px solid var(--color-header-borderline);
+        background: var(--color-header-background);
+    }
+
+    .header-wrapper {
+        padding-top: 64px;
+        padding-bottom: 16px;
+    }
+
+    .menu-wrapper {
+        margin-top: 32px;
+        align-self: center;
+    }
+}
+
 @media only screen and (min-width: 720px) {
     .header-wrapper {
         display: flex;
@@ -543,8 +560,15 @@ table, th, td {
 
 .page {
     flex-grow: 1;
-    margin-top: 64px;
-    margin-bottom: 64px;
+    margin-top: 32px;
+    margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 540px) {
+    .page {
+        margin-top: 64px;
+        margin-bottom: 64px;
+    }
 }
 
 /* ---- */
@@ -581,7 +605,7 @@ table, th, td {
 
 .content-item {
     margin-bottom: 16px;
-    padding: 32px;
+    padding: 16px;
     border-radius: var(--number-border-radius);
     background: var(--color-content-item-background);
 }
@@ -591,6 +615,12 @@ table, th, td {
         text-align: center;
     }
 
+@media only screen and (min-width: 540px) {
+    .content-item {
+        padding: 32px;
+    }
+}
+
 /* ----- */
 /* PAGES */
 /* ----- */
diff --git a/src/components/AppManual.vue b/src/components/AppManual.vue
index 0b0659f..c422105 100644
--- a/src/components/AppManual.vue
+++ b/src/components/AppManual.vue
@@ -73,7 +73,7 @@
         display: flex;
         flex-direction: column-reverse;
         justify-content: space-between;
-        gap: 32px;
+        gap: 16px;
     }
 
     .manual-form__input {
@@ -84,7 +84,7 @@
 
     .manual-form__buttons {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: space-between;
         gap: 32px;
     }
@@ -97,18 +97,13 @@
         .manual-form {
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 32px;
         }
 
         .manual-form__input {
             display: grid;
             grid-template-columns: 1fr 1fr;
         }
-
-        .manual-form__buttons {
-            display: flex;
-            flex-direction: row;
-        }
     }
 </style>
 
diff --git a/src/components/GamepadList.vue b/src/components/GamepadList.vue
index 63e5b00..01df810 100644
--- a/src/components/GamepadList.vue
+++ b/src/components/GamepadList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="device-list">
+    <div class="content-item device-list">
         <GamepadItem v-for="gamepad in gamepads"
                      :key="gamepad.id"
                      v-text="gamepad.unit.id" />
@@ -25,10 +25,6 @@
 
 <style lang="scss">
     .device-list {
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;
diff --git a/src/components/MessageItem.vue b/src/components/MessageItem.vue
index 0f3d709..f530b7d 100644
--- a/src/components/MessageItem.vue
+++ b/src/components/MessageItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="message">
+    <div class="content-item message">
         <span>
             <slot></slot>
         </span>
@@ -17,10 +17,6 @@
 <style lang="scss">
     .message {
         width: 100%;
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: column;
         justify-content: center;
diff --git a/src/components/PatternList.vue b/src/components/PatternList.vue
index badf8cc..28c0d52 100644
--- a/src/components/PatternList.vue
+++ b/src/components/PatternList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pattern-list">
+    <div class="content-item pattern-list">
         <PatternItem v-for="(pattern, index) in patterns"
                      :key="pattern.name"
                      :pattern="pattern"
@@ -40,15 +40,18 @@
 
 <style lang="scss">
     .pattern-list {
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         flex-wrap: wrap;
-        gap: 32px;
+        gap: 16px;
+    }
+
+    @media only screen and (min-width: 540px) {
+        .pattern-list {
+            display: flex;
+            gap: 32px;
+        }
     }
 </style>