formatting again, but with an updated frontend install

monarch-initiative · Sep 23, 2023 · 00b587f · 00b587f
1 parent 011bf1f
commit 00b587f
Show file tree

Hide file tree

Showing 38 changed files with 293 additions and 293 deletions.
diff --git a/frontend/src/api/phenogrid.css b/frontend/src/api/phenogrid.css
diff --git a/frontend/src/components/AppAccordion.vue b/frontend/src/components/AppAccordion.vue
@@ -44,12 +44,12 @@ const expanded = ref(false);
 
 <style lang="scss" scoped>
 .title {
-  transition: background $fast;
+  width: 100%;
+  padding: 10px;
   border-bottom: solid 2px $light-gray;
   border-radius: $rounded;
-  padding: 10px;
-  width: 100%;
   font-size: 1.1rem;
+  transition: background $fast;
 
   &:hover {
     background: $light-gray;
@@ -69,9 +69,9 @@ const expanded = ref(false);
 .content {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  padding: 20px;
   width: 100%;
+  padding: 20px;
+  gap: 20px;
 }
 
 .caret {

diff --git a/frontend/src/components/AppAlert.vue b/frontend/src/components/AppAlert.vue
@@ -27,13 +27,13 @@ defineSlots<Slots>();
 <style lang="scss" scoped>
 .alert {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 40px;
   gap: 20px;
   border-radius: $rounded;
   background: $light-gray;
-  padding: 40px;
-  width: 100%;
 
   .icon {
     color: $gray;

diff --git a/frontend/src/components/AppButton.vue b/frontend/src/components/AppButton.vue
@@ -68,25 +68,25 @@ defineExpose({ button });
 <style lang="scss" scoped>
 .button {
   display: inline-flex;
+  appearance: none;
   flex-grow: 0;
   flex-shrink: 0;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  max-width: 100%;
   gap: 10px;
-  appearance: none;
+  text-decoration: none;
   transition:
     color $fast,
     background $fast,
     opacity $fast,
     box-shadow $fast;
-  max-width: 100%;
-  text-decoration: none;
 
   &.normal {
-    border-radius: $rounded;
-    padding: 5px 20px;
     min-width: min(200px, calc(100% - 40px));
     min-height: 40px;
+    padding: 5px 20px;
+    border-radius: $rounded;
     color: $off-black;
     font-weight: 500;
     font-size: 1rem;
@@ -111,9 +111,9 @@ defineExpose({ button });
     color: $off-black;
 
     &.text {
-      padding: 0.25em 0.75em;
       min-width: 2em;
       min-height: 2em;
+      padding: 0.25em 0.75em;
     }
 
     &:not(.text) {
@@ -138,8 +138,8 @@ defineExpose({ button });
 
   &.small {
     flex-direction: row-reverse;
-    border-radius: $rounded;
     padding: 3px;
+    border-radius: $rounded;
 
     &.primary {
       color: $theme;

diff --git a/frontend/src/components/AppCheckbox.vue b/frontend/src/components/AppCheckbox.vue
@@ -46,11 +46,11 @@ function onChange(event: Event) {
   display: inline-flex;
   position: relative;
   align-items: center;
+  padding: 10px;
   gap: 10px;
-  transition: background $fast;
-  cursor: pointer;
   border-radius: $rounded;
-  padding: 10px;
+  cursor: pointer;
+  transition: background $fast;
 
   .check {
     color: $theme;

diff --git a/frontend/src/components/AppDetails.vue b/frontend/src/components/AppDetails.vue
@@ -13,7 +13,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  gap: 30px;
   width: 100%;
+  gap: 30px;
 }
 </style>
diff --git a/frontend/src/components/AppGallery.vue b/frontend/src/components/AppGallery.vue
@@ -52,12 +52,12 @@ $phone: 600px;
   grid-template-columns: repeat(var(--actual-cols), minmax(0, 1fr));
   grid-auto-rows: 1fr;
   place-content: center;
-  gap: var(--gap);
   // when content doesn't fill first row, limit width of gallery so that cell size is same as if first row was full
   // e.g. on team page, so portraits in groups with only 1-2 members aren't bigger than portraits in groups with 3+ members
   max-width: calc(
     (var(--cell)) * var(--content-cols) + (var(--content-cols) - 1) * var(--gap)
   );
+  gap: var(--gap);
 
   @media (min-width: 0) {
     --screen-cols: 1;

diff --git a/frontend/src/components/AppHeading.vue b/frontend/src/components/AppHeading.vue
@@ -105,14 +105,14 @@ onUpdated(update);
 <style lang="scss" scoped>
 .anchor {
   display: inline-block;
+  width: 0;
+  margin-left: 0.75em;
+  font-size: 0.8em;
+  text-decoration: none;
   opacity: 0;
   transition:
     opacity $fast,
     color $fast;
-  margin-left: 0.75em;
-  width: 0;
-  font-size: 0.8em;
-  text-decoration: none;
 }
 
 .anchor:focus {
@@ -122,9 +122,9 @@ onUpdated(update);
 .icon {
   position: relative;
   top: -1px;
-  vertical-align: middle;
   margin-right: 0.75em;
   color: $gray;
+  vertical-align: middle;
 }
 
 h1,

diff --git a/frontend/src/components/AppHighlight.vue b/frontend/src/components/AppHighlight.vue
@@ -29,11 +29,11 @@ defineSlots<Slots>();
 <style lang="scss" scoped>
 .highlight {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 40px;
-  margin: 20px 0;
+  justify-content: center;
   width: 100%;
+  margin: 20px 0;
+  gap: 40px;
 
   &:nth-child(even) {
     flex-direction: row-reverse;
@@ -44,9 +44,9 @@ defineSlots<Slots>();
   }
 
   video {
-    box-shadow: $shadow;
     width: 100%;
     max-width: 360px;
+    box-shadow: $shadow;
   }
 
   p {

diff --git a/frontend/src/components/AppMember.vue b/frontend/src/components/AppMember.vue
@@ -49,8 +49,8 @@ watch(
 .member {
   display: flex;
   flex-direction: column;
-  gap: 10px;
   width: 100%;
+  gap: 10px;
   text-decoration: none;
   overflow-wrap: break-word;
 }
@@ -66,12 +66,12 @@ watch(
   }
 
   img {
-    transition:
-      transform $fast,
-      filter $fast;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    transition:
+      transform $fast,
+      filter $fast;
   }
 }
 

diff --git a/frontend/src/components/AppModal.vue b/frontend/src/components/AppModal.vue
@@ -130,29 +130,29 @@ onBeforeUpdate(async () => {
 <style lang="scss" scoped>
 .overlay {
   display: flex;
+  z-index: 99;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  justify-content: center;
   align-items: center;
-  z-index: 99;
+  justify-content: center;
   background: #000000c0;
 }
 
 .modal {
   display: flex;
+  z-index: 100;
   position: relative;
   flex-direction: column;
   align-items: center;
-  gap: 40px;
-  z-index: 100;
-  background: $white;
-  padding: 40px;
   max-width: min(800px, calc(100vw - 80px));
   max-height: calc(100vh - 80px);
+  padding: 40px;
   overflow-y: auto;
+  gap: 40px;
+  background: $white;
 }
 
 /** close button */

diff --git a/frontend/src/components/AppNodeBadge.vue b/frontend/src/components/AppNodeBadge.vue
@@ -76,8 +76,8 @@ const currentPage = computed(() =>
 .icon {
   position: relative;
   top: -1px;
-  vertical-align: middle;
   margin-right: 0.4em;
+  vertical-align: middle;
 }
 
 .name {

diff --git a/frontend/src/components/AppPlaceholder.vue b/frontend/src/components/AppPlaceholder.vue
@@ -8,10 +8,10 @@
 
 <style lang="scss" scoped>
 .placeholder {
-  box-shadow: $shadow;
-  background: $light-gray;
   aspect-ratio: 16 / 9;
   width: 100%;
   min-height: 100px;
+  background: $light-gray;
+  box-shadow: $shadow;
 }
 </style>
diff --git a/frontend/src/components/AppPost.vue b/frontend/src/components/AppPost.vue
@@ -43,8 +43,8 @@ defineProps<Props>();
 <style lang="scss" scoped>
 .post {
   display: flex;
-  gap: 20px;
   width: 100%;
+  gap: 20px;
 }
 
 @media (max-width: 400px) {
@@ -56,10 +56,10 @@ defineProps<Props>();
 
 .image {
   flex-shrink: 0;
-  box-shadow: $shadow;
   width: 100px;
   height: 100px;
   overflow: hidden;
+  box-shadow: $shadow;
 
   img {
     width: 100%;

diff --git a/frontend/src/components/AppRing.vue b/frontend/src/components/AppRing.vue
@@ -52,8 +52,8 @@ const d = computed(() => {
     position: absolute;
     top: 0;
     left: 0;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
   }

diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
@@ -32,8 +32,8 @@ defineSlots<Slots>();
   flex-direction: column;
   align-items: center;
   gap: 40px;
-  transition: background $fast;
   text-align: center;
+  transition: background $fast;
 
   &.full {
     padding: 50px 40px;

diff --git a/frontend/src/components/AppSelectAutocomplete.vue b/frontend/src/components/AppSelectAutocomplete.vue
@@ -302,28 +302,28 @@ watch(highlighted, () => {
 
 .controls {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   gap: 5px;
 }
 
 .list {
   z-index: 12;
-  box-shadow: $shadow;
-  background: $white;
   max-height: 300px;
   overflow-x: auto;
   overflow-y: auto;
+  background: $white;
+  box-shadow: $shadow;
 }
 
 .option {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
   gap: 10px;
-  transition: background $fast;
   cursor: pointer;
-  padding: 5px 10px;
+  transition: background $fast;
 }
 
 .option:hover,

diff --git a/frontend/src/components/AppSelectMulti.vue b/frontend/src/components/AppSelectMulti.vue
@@ -368,13 +368,13 @@ watch(
 
 .box {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 5px 10px;
   gap: 10px;
   border-radius: $rounded;
   background: $light-gray;
-  padding: 5px 10px;
-  width: 100%;
 }
 
 .box-label {
@@ -389,22 +389,22 @@ watch(
 
 .list {
   z-index: 12;
-  box-shadow: $shadow;
-  background: $white;
   max-width: 90vw;
   max-height: 300px;
   overflow-x: auto;
   overflow-y: auto;
+  background: $white;
+  box-shadow: $shadow;
 }
 
 .option {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  padding: 5px 7.5px;
   gap: 10px;
-  transition: background $fast;
   cursor: pointer;
-  padding: 5px 7.5px;
+  transition: background $fast;
 }
 
 .option:hover,