Merge pull request #106 from creativecommons/repo-refactor

Refactor and clean up the code
creativecommons · Feb 28, 2020 · bd397d3 · bd397d3
2 parents 28e81d5 + 1b39467
commit bd397d3
Show file tree

Hide file tree

Showing 20 changed files with 433 additions and 764 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192">
     <link rel="apple-touch-icon-precomposed" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png">

diff --git a/src/App.vue b/src/App.vue
@@ -20,7 +20,7 @@
                 <Stepper v-model="currentStepId" />
                 <div class="column">
                     <div class="fixed-right-column">
-                        <SelectedLicenseCard
+                        <LicenseDetailsCard
                             v-if="showLicense"
                         />
                         <LicenseUseCard
@@ -42,18 +42,18 @@ import '@creativecommons/vocabulary/css/index.css'
 
 import HelpSection from './components/HelpSection'
 import Stepper from './components/Stepper'
-import SelectedLicenseCard from './components/LicenseDetailsCard'
 import LicenseUseCard from './components/LicenseUseCard'
 import Header from './components/Header.vue'
 import Footer from './components/Footer'
 import LocaleChooser from './components/LocaleChooser'
+import LicenseDetailsCard from './components/LicenseDetailsCard'
 
 export default {
     name: 'App',
     components: {
         HelpSection,
         Stepper,
-        SelectedLicenseCard,
+        LicenseDetailsCard,
         LicenseUseCard,
         Header,
         Footer,
@@ -106,10 +106,6 @@ export default {
         color: #2c3e50;
         counter-reset: step-counter;
     }
-    .fixed-right-column {
-        position: sticky;
-        top: 10px;
-    }
     #site-container {
         padding-top: 2rem;
         padding-bottom: 2%;
@@ -118,114 +114,32 @@ export default {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 1.5rem;
+        .select-license-column {
+            grid-column: 1;
+        }
+        .locale-chooser {
+            grid-column: 2;
+        }
     }
-    .select-license-column {
-        grid-column: 1;
-    }
-    .locale-chooser {
-        grid-column: 2;
-    }
-    .desktop-hide {
-        display: none;
-    }
-
-    .desktop-show {
-        display: block;
-    }
-    .vocab.ha {
-        font-family: Roboto Condensed,sans-serif;
-        font-weight: bold;
-        font-style: normal;
-        letter-spacing: 0.02em;
-        padding-bottom: 0.5rem;
-    }
-    .vocab.hb {
-        font-family: Source Sans Pro,sans-serif;
-        font-weight: bold;
-        font-style: normal;
-        padding-bottom: 0.5rem;
-    }
-    .vocab.h2a {
-        color: black;
-        font-size: 36px;
-        line-height: 47px;
-    }
-    .vocab.h3a {
-        font-size: 28px;
-        line-height: 36px;
-        color: black;
-    }
-    .vocab.h3b {
-        font-size: 28px;
-        line-height: 33px;
-    }
-    .vocab.h4a {
-        font-size: 23px;
-        line-height: 30px;
-    }
-    .vocab.h4b {
-        font-size: 23px;
-        line-height: 27px;
-    }
-    .vocab.h5a {
-        font-size: 20px;
-        line-height: 30px;
-    }
-    .vocab.h5b {
-        font-size: 20px;
-        line-height: 26px;
-    }
-    .vocab-tomato {
-        color: #ED592F!important;
-    }
-    .vocab-body {
-        font-style: normal;
-        font-weight: normal;
-        color: #333333;
-        padding-bottom: 8px;
-    }
-    .vocab-body.body-bigger {
-        font-size: 23px;
-        line-height: 33px;
-        color: black;
-    }
-    .vocab-body.body-big {
-        font-size: 18px;
-        line-height: 25px;
-    }
-    .vocab-body.body-normal {
-        font-size: 16px;
-        line-height: 24px;
-    }
-    .vocab-caption {
-        font-style: normal;
-        font-weight: 600;
-        font-size: 13px;
-        line-height: 19px;
-        padding-bottom: 8px;
-    }
-    .normal-gray {
-        color: #D8D8D8!important;
+    .stepper-instructions {
+        margin-bottom: 14px;
     }
-    .slate-gray {
-        color: #333333;
+    .fixed-right-column {
+        position: sticky;
+        top: 10px;
     }
     .selected-license-card {
+        // Margin is added to make the left column long enough for the right column to stay sticky when scrolling
         margin-bottom: 32px;
     }
-    .help-section {
-    }
-
     @media only screen and (max-width: 1025px) {
         #site-container {
             margin-left: 2%;
             margin-right: 2%;
         }
-
         .mobile-hide {
             display: none;
         }
-
         .mobile-show {
             display: block;
         }
@@ -248,43 +162,10 @@ export default {
             order: 1;
         }
     }
-
     @media only screen and (max-width: 670px) {
         #site-container {
             margin-left: 3%;
             margin-right: 3%;
         }
     }
-
-    .vocab-container .vocab-grid .panel {
-        height: 100%;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-    }
-
-    .vocab.select-field.normal-sized {
-        font-size: 1rem;
-    }
-
-    .vocab.select-field > .field.has-addons {
-        padding-left: calc(1em + var(--select-field-addons-space));
-        margin-bottom: 0;
-        min-width: 10em;
-    }
-
-    .vocab.select-field > .field > option[disabled] {
-        opacity: 0.6;
-    }
-
-    .panel {
-        margin-top: 1rem;
-    }
 </style>
diff --git a/src/components/AttributionDetailsStep.vue b/src/components/AttributionDetailsStep.vue
@@ -1,40 +1,35 @@
 <template>
-    <div
-        v-if="status==='current'"
-        class="step-actions"
-    >
-        <p class="attribution-details-instructions">
-            {{ $t('stepper.AD.instructions') }}
-        </p>
-        <form class="attribution-details-form">
-            <b-field :label="this.$t('stepper.AD.form.creator-name.label')">
-                <b-input
-                    v-model="creatorName"
-                    :placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
-                />
-            </b-field>
-            <b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
-                <b-input
-                    v-model="creatorProfileUrl"
-                    :placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
-                />
-            </b-field>
-            <b-field :label="this.$t('stepper.AD.form.work-title.label')">
-                <b-input
-                    v-model="workTitle"
-                    :placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
-                />
-            </b-field>
-            <b-field :label="this.$t('stepper.AD.form.work-url.label')">
-                <b-input
-                    v-model="workUrl"
-                    :placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
-                />
-            </b-field>
-        </form>
+    <div class="step-content">
+        <div v-if="status==='current'"
+            class="step-actions">
+            <p class="attribution-details-instructions">
+                {{ $t('stepper.AD.instructions') }}
+            </p>
+            <form class="attribution-details-form">
+                <b-field :label="this.$t('stepper.AD.form.creator-name.label')">
+                    <b-input v-model="creatorName"
+                        :placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
+                    />
+                </b-field>
+                <b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
+                    <b-input v-model="creatorProfileUrl"
+                        :placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
+                    />
+                </b-field>
+                <b-field :label="this.$t('stepper.AD.form.work-title.label')">
+                    <b-input v-model="workTitle"
+                        :placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
+                    />
+                </b-field>
+                <b-field :label="this.$t('stepper.AD.form.work-url.label')">
+                    <b-input v-model="workUrl"
+                        :placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
+                    />
+                </b-field>
+            </form>
+        </div>
     </div>
 </template>
-
 <script>
 import { mapMutations, mapState } from 'vuex'
 
@@ -81,20 +76,20 @@ export default {
 
 }
 </script>
-
 <style>
 .attribution-details-form {
     margin-top: 1rem;
 }
-.attribution-details-form label {
+.attribution-details-form .label {
     font-style: normal;
     font-weight: normal;
     font-size: 16px;
     line-height: 24px;
     color: #333333;
 }
-.field .control .input {
-    font-weight: 500;
+.attribution-details-form .input {
+    font-weight: 600;
     font-size: 16px;
+    color: #333333;
 }
 </style>
diff --git a/src/components/CopyrightWaiverStep.vue b/src/components/CopyrightWaiverStep.vue
@@ -1,31 +1,24 @@
 <template>
-    <div>
-        <div
-            v-if="status==='previous'"
-            class="step-description vocab-body body-normal"
-        >
+    <div class="step-content">
+        <div v-if="status==='previous'"
+            class="step-description vocab-body body-normal">
             <p class="vocab-body body-normal">
                 {{ $t('stepper.CW.selected') }}
             </p>
         </div>
-        <div
-            v-else-if="status==='current'"
-            class="step-actions"
-        >
+        <div v-else-if="status==='current'"
+            class="step-actions">
             <b-checkbox v-model="copyrightWaiverAgreed">
                 {{ $t('stepper.CW.copyright-waive-agreement') }}
             </b-checkbox>
-            <textarea
-                :value="this.$t('cc0-waiver.text')"
-                :class="'waiver-textarea'"
-            />
+            <textarea :value="this.$t('cc0-waiver.text')"
+                :class="'waiver-textarea'"/>
             <b-checkbox v-model="copyrightWaiverConfirmed">
                 {{ $t("stepper.CW.copyright-waive-confirmation") }}
             </b-checkbox>
         </div>
     </div>
 </template>
-
 <script>
 export default {
     name: 'CopyrightWaiverStep',
@@ -76,17 +69,19 @@ export default {
     }
 }
 </script>
-
 <style lang="scss">
-label.label {
-    font-size: 0.845rem;
-}
 .waiver-textarea {
     width: 100%;
     min-height: 100px;
     margin: 1rem 0;
 }
-.b-checkbox {
-    align-items: flex-start;
+.step-actions .b-checkbox.checkbox {
+    align-items: normal;
+}
+.step-actions .control-label {
+    color: #333333;
+}
+.step-actions .b-checkbox.checkbox input[type=checkbox] + .check {
+    border: 2px solid #D8D8D8;
 }
 </style>