Merge pull request #443 from getodk/issa/1.2-styles

v1.2 style cleanup

src/assets/scss/_variables.scss

@@ -25,14 +25,14 @@ $max-width-p: 600px;
 $margin-right-icon: 6px;
 
 // Contextual colors
-$color-success: #0d840f;
+$color-success: #08a10b;
 $color-success-light: #ddf1d5;
 $color-success-dark: darken($color-success, 10%);
 $color-info: #31708f;
 $color-info-light: #d9edf7;
 $color-info-dark: darken($color-info, 10%);
-$color-warning: #f5c93b;
-$color-danger: #d42c2c;
+$color-warning: #f29e00;
+$color-danger: #de2a11;
 $color-danger-light: #ffe6e6;
 $color-danger-dark: darken($color-danger, 10%);
 
@@ -74,6 +74,8 @@ $color-subpanel-active: #ddd;
 $color-subpanel-border: #e6e6e6;
 $color-subpanel-border-strong: #c3c3c3;
 
+// Easing
+$ease-extreme-out: cubic-bezier(.05, .9, 0, 1);
 
 
 ////////////////////////////////////////////////////////////////////////////////

src/components/enketo/preview.vue

@@ -10,11 +10,11 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <a v-if="disabledTitle == null" class="enketo-preview btn btn-primary"
+  <a v-if="disabledTitle == null" class="enketo-preview btn btn-default"
     :href="href" target="_blank">
     <span class="icon-eye"></span>{{ $t('action.preview') }}
   </a>
-  <button v-else type="button" class="enketo-preview btn btn-primary" disabled
+  <button v-else type="button" class="enketo-preview btn btn-default" disabled
     :title="disabledTitle">
     <span class="icon-eye"></span>{{ $t('action.preview') }}
   </button>

src/components/field-key/row.vue

@@ -31,7 +31,7 @@ except according to the terms contained in the LICENSE file.
     <td>
       <div class="dropdown">
         <button :id="actionsId" type="button"
-          class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
+          class="btn btn-default dropdown-toggle" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
           <span class="icon-cog"></span><span class="caret"></span>
         </button>

src/components/form-version/def-dropdown.vue

@@ -11,7 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div class="form-version-def-dropdown btn-group">
-    <button :id="toggleId" type="button" class="btn btn-primary dropdown-toggle"
+    <button :id="toggleId" type="button" class="btn btn-default dropdown-toggle"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="icon-code"></span>
       <span>{{ $t('action.def') }}</span>

src/components/page/section.vue

@@ -38,21 +38,24 @@ export default {
 @import '../../assets/scss/variables';
 
 .page-section {
-  border-top: 1px solid #777;
   margin-bottom: 35px;
 }
 
 .page-section-heading {
-  font-size: 24px;
-  margin-bottom: 20px;
+  font-size: 30px;
+  margin-bottom: 10px;
   margin-top: 10px;
   position: relative;
 
   > span:first-child {
     color: $color-accent-primary;
     font-weight: bold;
 
-    + .btn { margin-left: 12px; }
+    + .btn { margin-left: 24px; }
+    ~ .btn {
+      position: relative;
+      top: -2px;
+    }
   }
 }
 

src/components/project/list.vue

@@ -207,9 +207,14 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/variables';
+
 #project-list-heading {
-  margin-bottom: 30px;
-  margin-top: 25px;
+  background: $color-subpanel-background;
+  border-bottom: 1px solid $color-subpanel-border;
+  letter-spacing: -0.03em;
+  margin: 0 -15px 15px;
+  padding: 20px 15px;
 
   span {
     &:first-child {

src/components/submission/comment.vue

@@ -98,6 +98,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/variables';
 @import '../../assets/scss/mixins';
 
 #submission-comment {
@@ -114,16 +115,29 @@ export default {
 
   .form-group {
     margin-bottom: 0;
-    padding-bottom: 0;
+    padding-bottom: 5px;
+  }
+
+  textarea {
+    border-bottom-color: #aaa;
   }
 
   .btn { float: right; }
 }
 
 #submission-comment-actions {
   @include clearfix;
+  animation-duration: 0.4s;
+  animation-iteration-count: 1;
+  animation-name: expand;
+  animation-timing-function: $ease-extreme-out;
   margin-top: 5px;
 }
+
+@keyframes expand {
+  0% { margin-bottom: -12px; }
+  100% { margin-bottom: 0; }
+}
 </style>
 
 <i18n lang="json5">

src/components/submission/data-access.vue

@@ -11,13 +11,13 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <span id="submission-data-access">
-    <a class="btn btn-primary"
+    <a class="btn btn-default"
       href="https://odkcentral.docs.apiary.io/#reference/odata-endpoints"
       target="_blank" rel="noopener">
       <span class="icon-plug"></span>{{ $t('action.apiAccess') }}
     </a>
     <button id="submission-data-access-analyze-button" type="button"
-      class="btn btn-primary" :disabled="analyzeDisabled"
+      class="btn btn-default" :disabled="analyzeDisabled"
       :title="analyzeDisabled ? $t('analyzeDisabled') : null"
       @click="$emit('analyze')">
       <span class="icon-bar-chart"></span>{{ $t('action.analyze') }}&hellip;

src/components/submission/feed-entry.vue

@@ -15,7 +15,7 @@ except according to the terms contained in the LICENSE file.
       <date-time :iso="entry.loggedAt != null ? entry.loggedAt : entry.createdAt"/>
       <div class="title">
         <template v-if="entry.action === 'submission.create'">
-          <span class="icon-cloud-upload"></span>
+          <span class="icon-cloud-upload submission-feed-entry-icon"></span>
           <i18n :tag="false" path="title.create">
             <template #name><actor-link :actor="entry.actor"/></template>
           </i18n>
@@ -25,15 +25,15 @@ except according to the terms contained in the LICENSE file.
             :path="`title.updateReviewState.${reviewState}.full`">
             <template #reviewState>
               <span class="review-state" :class="reviewState">
-                <span :class="reviewStateIcon(reviewState)"></span>
+                <span :class="updateOrEditIcon(reviewState)"></span>
                 <span>{{ $t(`title.updateReviewState.${reviewState}.reviewState`) }}</span>
               </span>
             </template>
             <template #name><actor-link :actor="entry.actor"/></template>
           </i18n>
         </template>
         <template v-else>
-          <span class="icon-comment"></span>
+          <span class="icon-comment submission-feed-entry-icon"></span>
           <i18n :tag="false" path="title.comment">
             <template #name><actor-link :actor="entry.actor"/></template>
           </i18n>
@@ -73,6 +73,11 @@ export default {
     comment() {
       return this.entry.notes != null ? this.entry.notes : this.entry.body;
     }
+  },
+  methods: {
+    updateOrEditIcon(state) {
+      return `${this.reviewStateIcon(state)} submission-feed-entry-icon`;
+    }
   }
 };
 </script>
@@ -81,31 +86,35 @@ export default {
 @import '../../assets/scss/mixins';
 
 .submission-feed-entry {
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.05);
   margin-bottom: 20px;
 
-  .heading, .body { padding: 10px; }
+  .heading, .body { padding: 10px 15px; }
   .heading { background-color: #fff; }
+  .body { background-color: #f9f9f9; }
 
   time {
     float: right;
-    font-size: 16px;
+    font-size: 13px;
     color: #666;
+    line-height: 25px;
   }
 
   .title {
     @include text-overflow-ellipsis;
-    font-size: 18px;
+    font-size: 17px;
     font-weight: bold;
     letter-spacing: -0.02em;
     width: 70%;
-  }
 
-  .icon-comments, .icon-comment { margin-right: $margin-right-icon; }
-  .icon-cloud-upload { margin-right: #{$margin-right-icon - 1px}; }
-  .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
-    margin-left: 1px;
-    margin-right: #{$margin-right-icon + 2px};
+    .submission-feed-entry-icon {
+      display: block;
+      float: left;
+      margin-right: 7px;
+      padding-top: 3px;
+      text-align: center;
+      width: 18px;
+    }
   }
 
   .icon-cloud-upload, .icon-comment { color: #bbb; }

src/components/submission/list.vue

@@ -19,7 +19,7 @@ except according to the terms contained in the LICENSE file.
           v-if="fields != null && selectableFields.length > 11"
           v-model="selectedFields"/>
         <button id="submission-list-refresh-button" type="button"
-          class="btn btn-primary" :disabled="refreshing"
+          class="btn btn-default" :disabled="refreshing"
           @click="fetchChunk(0, false)">
           <span class="icon-refresh"></span>{{ $t('action.refresh') }}
           <spinner :state="refreshing"/>

src/components/submission/metadata-row.vue

@@ -28,11 +28,11 @@ except according to the terms contained in the LICENSE file.
       <span class="icon-angle-right"></span>
       <div class="btn-group">
         <template v-if="canUpdate">
-          <a v-if="submission.__system.status == null" class="btn btn-primary"
+          <a v-if="submission.__system.status == null" class="btn btn-default"
             :href="editPath" target="_blank">
             <span class="icon-pencil"></span><span>{{ editText }}</span>
           </a>
-          <button v-else type="button" class="btn btn-primary" disabled
+          <button v-else type="button" class="btn btn-default" disabled
             :title="$t('submission.editDisabled')">
             <span class="icon-pencil"></span><span>{{ editText }}</span>
           </button>

src/components/submission/update-review-state.vue

@@ -142,6 +142,7 @@ export default {
 #submission-update-review-state {
   .radio, .form-group { margin-bottom: 0; }
   .radio { margin-top: 0; }
+  .radio > label { margin-bottom: 5px; }
 
   $margin-left-icon: 2px;
   .icon-comments {

src/components/user/row.vue

@@ -34,7 +34,7 @@ except according to the terms contained in the LICENSE file.
     <td>
       <div class="dropdown">
         <button :id="actionsButtonId" type="button"
-          class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
+          class="btn btn-default dropdown-toggle" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
           <span class="icon-cog"></span><span class="caret"></span>
         </button>

test/components/submission/metadata-row.spec.js

@@ -129,13 +129,13 @@ describe('SubmissionMetadataRow', () => {
         submissions: 1
       });
       testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
-      const href = mountComponent().first('.btn-primary').getAttribute('href');
+      const href = mountComponent().first('.btn-group .btn').getAttribute('href');
       href.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/edit');
     });
 
     it('shows the correct text', () => {
       testData.extendedSubmissions.createPast(1, { edits: 1000 });
-      const text = mountComponent().first('.btn-primary').text();
+      const text = mountComponent().first('.btn-group .btn').text();
       text.should.equal('Edit (1,000)');
     });
 
@@ -144,15 +144,15 @@ describe('SubmissionMetadataRow', () => {
       testData.extendedProjects.createPast(1, { forms: 1, role: 'viewer' });
       testData.extendedSubmissions.createPast(1);
       const row = mountComponent({ canUpdate: false });
-      row.find('.btn-primary').length.should.equal(0);
+      row.find('.btn-group .btn').length.should.equal(1);
     });
 
     it('disables the button if the submission is encrypted', () => {
       testData.extendedSubmissions.createPast(1, {
         status: 'notDecrypted',
         edits: 1000
       });
-      const button = mountComponent().first('.btn-primary');
+      const button = mountComponent().first('.btn-group .btn');
       button.text().should.equal('Edit (1,000)');
       button.hasAttribute('disabled').should.be.true();
       const title = button.getAttribute('title');
@@ -163,7 +163,7 @@ describe('SubmissionMetadataRow', () => {
   it('renders the More button', () => {
     testData.extendedForms.createPast(1, { xmlFormId: 'a b', submissions: 1 });
     testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
-    const href = mountComponent().first('.btn-default').getAttribute('href');
+    const href = mountComponent().find('.btn-group .btn')[1].getAttribute('href');
     href.should.equal('#/projects/1/forms/a%20b/submissions/c%20d');
   });