rework design

bucherfa · Jun 14, 2019 · 2951807 · 2951807
1 parent 3d09a90
commit 2951807
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 38 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "name": "dcc-web-pwa",
-  "short_name": "dcc-web-pwa",
+  "name": "docker-compose Converter",
+  "short_name": "dcc",
   "icons": [
     {
       "src": "./img/icons/android-chrome-192x192.png",
@@ -16,5 +16,5 @@
   "start_url": "./index.html",
   "display": "standalone",
   "background_color": "#000000",
-  "theme_color": "#4DBA87"
+  "theme_color": "#099cec"
 }
diff --git a/src/App.vue b/src/App.vue
@@ -2,8 +2,18 @@
   <div id="app">
     <div class="header">
       <span class="title">docker-compose Converter</span>
+      <a href="https://gitlab.com/bucherfa/dcc-web/">
+        <img class="logo" src="./assets/gitlab.svg">
+      </a>
     </div>
     <Converter msg="Welcome to Your Vue.js App"/>
+    <div class="footer">
+      <span>Give feedback/submit issue for </span>
+      <a href="https://gitlab.com/bucherfa/docker-compose-converter/issues">Conversion</a>
+      <span> and </span>
+      <a href="https://gitlab.com/bucherfa/dcc-web/issues">UI</a>
+      <span>.</span>
+    </div>
   </div>
 </template>
 
@@ -33,12 +43,25 @@ body {
 .header {
   background: #099cec;
   color: #ffffff;
+  display: flex;
   font-weight: bolder;
+  justify-content: space-between;
   width: 100%;
 }
 
 .title {
   display: inline-block;
   margin: 0.7rem;
 }
+
+.logo {
+  height: 2.4rem;
+  margin: 0 0.7rem;
+}
+
+.footer {
+  font-size: 0.8rem;
+  padding: 0.5rem;
+  text-align: center;
+}
 </style>
diff --git a/src/assets/gitlab.svg b/src/assets/gitlab.svg
diff --git a/src/components/Converter.vue b/src/components/Converter.vue
@@ -2,18 +2,24 @@
   <div class="converter">
     <div class="converter__content">
       <div class="converter__item">
-        <span class="converter__header">input</span>
-        <textarea class="converter__textarea" :placeholder="placeholder" v-model="input"></textarea>
+        <div class="converter__header">input</div>
+        <div class="converter__textarea-wrapper">
+          <textarea class="converter__textarea" :placeholder="placeholder" v-model="input"></textarea>
+        </div>
       </div>
-      <div class="converter__item converter__item--output">
-        <span class="converter__header">docker-compose.yml</span>
-        <textarea class="converter__textarea js-converter__textarea--output" readonly v-model="output"></textarea>
+      <div class="converter__item">
+        <div class="converter__header">
+          <div>docker-compose.yml</div>
+          <div>
+            <span class="header__download" @click="copy">Copy</span>
+            <span class="header__download" @click="download">Download</span>
+          </div>
+        </div>
+        <div class="converter__textarea-wrapper">
+          <textarea class="converter__textarea js-converter__textarea--output" readonly v-model="output"></textarea>
+        </div>
       </div>
     </div>
-    <div class="converter__download">
-      <div class="download__button" @click="copy">Copy</div>
-      <div class="download__button" @click="download">Download</div>
-    </div>
     <a class="download"></a>
   </div>
 </template>
@@ -71,48 +77,47 @@ docker run -d \\
 }
 
 .converter__content {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  margin: 0 0.5rem;
 }
 
-.converter__item--output {
+.converter__item {
+  border-radius: 2px;
+  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.16), 0 0.25rem 0.5rem rgba(0,0,0,0.23);
   margin-top: 1rem;
 }
 
 .converter__header {
-  margin: 0 0.5rem;
+  background: #006494;
+  color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+
+.header__download {
+  background: #ffffff;
+  color: #006494;
+  cursor: pointer;
+  padding: 0.35rem;
+  border-radius: 0.3rem;
+  margin-left: 0.4rem;
+}
+
+.converter__textarea-wrapper {
+  padding: 0.5rem;
 }
 
 .converter__textarea {
   background: white;
   border: 0;
-  border-radius: 2px;
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   display: block;
   height: 20rem;
-  margin: 0.25rem auto;
-  padding: 0.5rem;
-  width: 90%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
   resize: none;
 }
 
-.converter__download {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-
-.download__button {
-  background: #099cec;
-  border-radius: 0.25rem;
-  color: #ffffff;
-  cursor: pointer;
-  padding: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .download {
   display: none;
 }