Merge branch 'working' into 'master'

Fixes #73 rule mobile style

Closes #73

See merge request medlabboulder/communityrule!8

_includes/vue-rule-script.html

@@ -109,20 +109,20 @@
                         </label> -->
                     </div>
                 </div>
-                <div class="label-group">
+                <div class="label-group is-mobile">
                     <div class="module" @click="newCustomModule">
                         Create Custom Module
                         <span class="plus"><img :src="icons.plus" alt="Add"></span>
                     </div>
                     <div class="module-editor__empty">
-                        Or click a module to start editing it.
+                        <small>Or click a module to start editing it.</small>
                     </div>
                 </div>
             </div>
             <div class="modules">
                 <div class="tabs">
                     <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name" @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
-                        <img :src="type.icon" :alt="name">[[ name ]]
+                        <img :src="type.icon" :alt="name"><span class="tab__control-name">[[ name ]]</span>
                     </div>
                 </div>
                 <div class="tab__pane">
@@ -199,7 +199,7 @@
             <vue-button class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button>
             <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
             <vue-button class="is-large" @click="handleClickExport" :icon="icons.export">Export</vue-button>
-            <vue-button class="is-large" @click="handleClickPublish" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
+            <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
         </div>
         <div class="btn-group" v-if="view && !legacy">
             <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>

_sass/_rule-app.scss

@@ -4,9 +4,18 @@ $color-warning: #ff8f07;
 $color-danger: #ff073d;
 $color-success: #C2F9BB;
 
+$tablet: 768px;
+$mobile: 420px;
+
 .rule-app {
   padding: 2rem;
   position: relative;
+  * {
+    box-sizing: border-box;
+  }
+  @media screen and (max-width: $tablet) {
+    padding: 2rem .5rem;
+  } 
 }
 
 .btn {
@@ -130,15 +139,65 @@ h2 .icon img {
     max-width: 65ch;
   }
 
-  .dropdown {
-    $dropdown-border-radius: 4px;
-    cursor: pointer;
+  input.input-stack {
+    margin-bottom: 0;
+  }
+
+  small {
+    color: #aaa;
+  }
+}
+
+.label-group {
+  display: flex;
+  gap: 1rem;
+  @media screen and (max-width: $tablet) {
+    &:not(.is-mobile){
+      gap: 0;
+      flex-direction: column;
+    }
+  }
+  @media screen and (max-width: $mobile) {
+    gap: 0;
     flex-direction: column;
-    position: absolute;
-    background-color: #fff;
+  }
+}
+
+.dropdown {
+  $dropdown-border-radius: 4px;
+  cursor: pointer;
+  flex-direction: column;
+  background-color: #fff;
+  padding: 2px;
+  border-radius: $dropdown-border-radius;
+
+  input[type='radio'] {
+    display: none;
+  }
+  label {
+    cursor: pointer;
+  }
+  label div {
+    display: inline-flex;
     padding: 2px;
+  }
+  input[type='radio']:checked ~ div {
+    background-color: $color-primary;
     border-radius: $dropdown-border-radius;
+  }
+
+  @media screen and (max-width: $tablet) {
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
     
+    label.default {
+      display: none;
+    }
+  }
+
+  @media screen and (min-width: $tablet) {
+    position: absolute;
+
     label:not(.selected) {
       display: none;
     }
@@ -157,16 +216,7 @@ h2 .icon img {
         }
       }
     }
-    input[type='radio'] {
-      display: none;
-    }
-    label {
-      cursor: pointer;
-    }
-    label div {
-      display: inline-flex;
-      padding: 2px;
-    }
+
     &:hover label.default,
     label.selected ~ label.default {
       display: none;
@@ -174,35 +224,20 @@ h2 .icon img {
     label.default {
       display: block;
     }
-    input[type='radio']:checked ~ div {
-      background-color: $color-primary;
-      border-radius: $dropdown-border-radius;
-    }
-  }
-
-  input.input-stack {
-    margin-bottom: 0;
-  }
-
-  small {
-    color: #aaa;
   }
 }
 
-.label-group {
-  display: flex;
-  gap: 1rem;
-}
-
 .editor .details {
   .label .dropdown {
     margin-top: calc(.5rem - 2px);
     img {
       width: 30px;
     }
-    &:hover {
-      grid-template-columns: repeat(4, 1fr);
-      z-index: 100;
+    @media screen and (min-width: $tablet) {
+      &:hover {
+        grid-template-columns: repeat(4, 1fr);
+        z-index: 100;
+      }
     }
   }
 }
@@ -211,6 +246,9 @@ h2 .icon img {
   border: 4px dashed $color-primary;
   margin: 1rem 0;
   position: relative;
+  @media screen and (max-width: $tablet) {
+    margin: 1rem -0.75rem;
+  }
 
   &.target {
     background-color: $color-primary;
@@ -253,8 +291,13 @@ h2 .icon img {
     flex-direction: row-reverse;
     justify-content: space-between;
     padding-top: .5rem;
+    .module-editor__right {
+      position: absolute;
+      top: -1.2rem;
+      right: 1rem;
+    }
     .module-editor__fields {
-      flex: 1 0 auto;
+      flex: 1 1 auto;
     }
     .label {
       font-size: 0.8em;
@@ -280,6 +323,7 @@ h2 .icon img {
   gap: 0.5rem;
   margin: 0;
   padding: .25rem;
+  flex-wrap: wrap;
 
   &.in-editor {
     background-color: $color-primary;
@@ -288,6 +332,7 @@ h2 .icon img {
   .submodules {
     display: flex;
     gap: 0.5rem;
+    flex-wrap: wrap;
   }
 
   .module__grain {
@@ -358,6 +403,7 @@ h2 .icon img {
 
 .tabs {
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
   .tab__control {
     cursor: pointer;
@@ -372,6 +418,18 @@ h2 .icon img {
       margin-bottom: -1px;
     }
   }
+  @media screen and (max-width: $tablet) {
+    gap:.5rem;
+    font-size: 0.8rem;
+    .tab__control img {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+  @media screen and (max-width: 550px) {
+    gap: 0;
+  }
+
 }
 .tab__pane {
   border: 1px solid #ccc;
@@ -397,6 +455,12 @@ h2 .icon img {
     top: -1rem;
     right: 2rem;
   }
+  @media screen and (max-width: $tablet) {
+    padding: 1.5rem 1rem 1rem;
+  }
+  @media screen and (max-width: $mobile) {
+    font-size: 90%;
+  }
 }
 
 .editor {

assets/js/vue.rules.js

@@ -702,6 +702,12 @@ const app = Vue.createApp({
         document.body.removeChild(elem);
       }
     },
+    /**
+     * Handles the click event for importing a rule from a JSON file
+     */
+    handleClickImport() {
+
+    },
 
     // utility methods ===========================================================