fix: no alpha in message box bg, origin url in dev mode, change instr…

…uction for mobile (#125)
pytorch-ignite · May 21, 2021 · b662e06 · b662e06
1 parent ee3639e
commit b662e06
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
@@ -59,7 +59,7 @@ export default {
     const copyCode = async () => {
       try {
         await navigator.clipboard.writeText(code.value)
-        msg.color = '#0000ff'
+        msg.color = 'blue'
         msg.showMsg = true
         msg.content = 'Code has been copied to Clipboard.'
       } catch (e) {
@@ -106,7 +106,7 @@ div[class*='language-']::before,
   position: relative;
   margin: 0;
   padding: 1.25rem 1.5rem;
-  padding-left: 4.5rem;
+  margin-left: 3.5rem;
   vertical-align: middle;
   overflow: auto;
   border-radius: 0 3px 3px 0;

diff --git a/src/components/Instruction.vue b/src/components/Instruction.vue
@@ -1,22 +1,46 @@
 <template>
   <div class="preview">
-    <h2>Choose a template on the left to get started.</h2>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      aria-hidden="true"
-      role="img"
-      class="iconify iconify--carbon animate-bounce"
-      width="32"
-      height="32"
-      preserveAspectRatio="xMidYMid meet"
-      viewBox="0 0 32 32"
-    >
-      <path
-        d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"
-        fill="currentColor"
-      ></path>
-    </svg>
+    <div class="desktop">
+      <h2>Choose a template on the left to get started.</h2>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--carbon animate-bounce"
+        width="32"
+        height="32"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </div>
+    <div class="mobile">
+      <div>
+        Click on
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          aria-hidden="true"
+          role="img"
+          class="iconify iconify--mdi"
+          width="2em"
+          height="2em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"
+            fill="#ee4c2c"
+          ></path>
+        </svg>
+        to choose a template to get started.
+      </div>
+    </div>
   </div>
 </template>
 
@@ -33,10 +57,15 @@
   width: 10%;
   height: 10%;
 }
+.mobile {
+  display: none;
+}
 @media (max-width: 768px) {
-  .iconify {
-    width: 20%;
-    height: 20%;
+  .desktop {
+    display: none;
+  }
+  .mobile {
+    display: block;
   }
 }
 /* copied from https://windicss.org/utilities/behaviors.html#animation */

diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -31,7 +31,7 @@ export default {
       return {
         borderColor: color.value,
         color: color.value,
-        background: color.value + '33'
+        background: color.value === 'blue' ? '#dbeafe' : '#fee2e2'
       }
     })
     watch(

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -101,7 +101,7 @@ export default {
     const downloadProject = () => {
       const zip = new JSZip()
       if (store.code && Object.keys(store.code).length) {
-        msg.color = '#ff0000'
+        msg.color = 'red'
         if (!store.config.output_dir) {
           msg.showMsg = true
           msg.content = `Output directory is required. Please input in Loggers tab.`

diff --git a/src/store.js b/src/store.js
@@ -17,7 +17,7 @@ const commit = __COMMIT__ /* from vite.config.js */
 // this only works in production and local mode
 // not in network mode
 const urlTemplates = 'src/templates'
-const urlDev = `${location.href}/${urlTemplates}`
+const urlDev = `${location.origin}/${urlTemplates}`
 const urlProd = `https://raw.githubusercontent.com/pytorch-ignite/code-generator/${commit}/${urlTemplates}`
 const url = isDev ? urlDev : isProd ? urlProd : null
 
@@ -31,7 +31,7 @@ export const __DEV_CONFIG_FILE__ = '__DEV_CONFIG__.json'
 export const msg = reactive({
   showMsg: false,
   content: '',
-  color: '#ff0000'
+  color: 'red'
 })
 
 // main reactive object