Fixed buttons aligment

klikkn · Apr 1, 2020 · 79f90de · 79f90de
1 parent 5afe328
commit 79f90de
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# pdrc-calulator-web
+# pdrc-calculator-web
 
 ## Project setup
 ```

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "pdrc-calulator-web",
+  "name": "pdrc-calculator-web",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,24 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="viewport"
-      content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
-    />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>pdrc-calulator-web</title>
-  </head>
 
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but pdrc-calulator-web doesn't work properly without
-        JavaScript enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <title>pdrc-calculator-web</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but pdrc-calculator-web doesn't work properly without
+      JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/src/containers/OrderUpdate.vue b/src/containers/OrderUpdate.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="flex">
-      <h1>{{ $t('orderUpdateFormTitle') }}</h1>
-      <div v-if="order">
+    <div class="flex order__header">
+      <h1 class="order__title">{{ $t('orderUpdateFormTitle') }}</h1>
+      <div v-if="order" class="flex order__actions">
         <el-button icon="el-icon-printer" circle @click.stop="onPrint"></el-button>
         <el-button icon="el-icon-delete" circle @click.stop="deleteDialogVisible = true"></el-button>
       </div>
@@ -27,6 +27,32 @@
   </div>
 </template>
 
+<style scoped>
+.order__header {
+  flex-direction: column;
+}
+
+.order__title {
+  align-self: flex-start;
+}
+
+.order__actions {
+  align-self: flex-end;
+  margin-bottom: 20px;
+}
+
+@media screen and (min-width: 568px) {
+  .order__header {
+    flex-direction: row;
+  }
+
+  .order__actions {
+    align-self: auto;
+    margin-bottom: 0px;
+  }
+}
+</style>
+
 <script>
 import { mapActions, mapState } from "vuex";
 import { getOrder, updateOrder, deleteOrder } from "../services/api";

diff --git a/src/services/http-client.js b/src/services/http-client.js
@@ -3,7 +3,7 @@ import store from '@/store'
 import tokenService from '@/services/token'
 
 const options = {
-  baseURL: process.env.VUE_APP_API_HOST,
+  baseURL: "https://pdrc-calculator-strapi.herokuapp.com",
   timeout: 15000,
   headers: {
     'Accept': 'application/json, text/plain, */*',