commit e55a2c395296f4a3814fda11439fadd4b0c6b8b1
parent 0241a75f59a5f4d4578e7ca395e27371bab69c4a
Author: George Francis <georgedoescode@gmail.com>
Date: Wed, 8 Jul 2020 21:38:09 +0100
add toast when copying svg to clipboard
Diffstat:
7 files changed, 49 insertions(+), 28 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -10975,6 +10975,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vue-toasted": {
+ "version": "1.1.28",
+ "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
+ "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
+ },
"vuex": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
"vue": "^2.6.11",
"vue-social-sharing": "^3.0.0-beta.11",
"vue-swatches": "^2.1.0",
+ "vue-toasted": "^1.1.28",
"vuex": "^3.5.1"
}
}
diff --git a/src/App.vue b/src/App.vue
@@ -3,6 +3,7 @@ import TheHeader from './components/TheHeader.vue';
import TheGenerator from './components/TheGenerator.vue';
import TheWaveBackground from './components/TheWaveBackground.vue';
import TheSquircleExplosion from './components/TheSquircleExplosion.vue';
+import SquircleDemo from '@/assets/img/squircle-demo.svg';
export default {
name: 'App',
@@ -11,6 +12,7 @@ export default {
TheGenerator,
TheWaveBackground,
TheSquircleExplosion,
+ SquircleDemo,
},
};
</script>
@@ -22,20 +24,18 @@ export default {
<TheSquircleExplosion />
<div class="app__content">
<TheGenerator />
- <p class="about-text">
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod
- maxime quam sequi, corrupti quibusdam velit dolore nobis ex!
- Nihil sunt placeat magni dolorem in quaerat aspernatur sapiente
- illum mollitia aut assumenda corporis inventore deleniti,
- corrupti sit. Ipsa dicta tenetur dolores eligendi enim quisquam
- adipisci magni! Commodi voluptates neque maiores est!
- </p>
- <p class="about-text">
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
- Aperiam laborum eos ipsum hic quod velit perferendis in quasi
- officiis? Dicta, sint quae accusantium saepe quia itaque rerum
- quod ratione libero.
- </p>
+ <div class="app__content-grid">
+ <p class="about-text">
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+ Quod maxime quam sequi, corrupti quibusdam velit dolore
+ nobis ex! Nihil sunt placeat magni dolorem in quaerat
+ aspernatur sapiente illum mollitia aut assumenda corporis
+ inventore deleniti, corrupti sit. Ipsa dicta tenetur dolores
+ eligendi enim quisquam adipisci magni! Commodi voluptates
+ neque maiores est!
+ </p>
+ <SquircleDemo class="squircle-demo" />
+ </div>
</div>
</div>
</template>
@@ -58,20 +58,12 @@ export default {
}
.app__content {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr)
- minmax(0, 56rem)
- minmax(0, 1fr);
- grid-auto-rows: max-content;
- max-width: 1280px;
- margin: 0 auto;
padding-bottom: var(--spacing-6);
}
.generator {
- grid-row: 1;
- grid-column: 2;
+ max-width: 56rem;
+ margin: 0 auto;
margin-bottom: var(--spacing-9);
}
@@ -83,11 +75,19 @@ export default {
height: 540px;
}
+.app__content-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+}
+
.about-text {
- grid-column: -1 / 1;
font-size: var(--font-size-3);
line-height: 1.75;
- width: 50%;
margin-bottom: var(--spacing-5);
}
+
+.squircle-demo {
+ justify-self: end;
+}
</style>
diff --git a/src/assets/img/squircle-demo.svg b/src/assets/img/squircle-demo.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="white"/>
+<path d="M376 200.006L375.883 329.454L375.528 341.894L374.931 349.608L374.081 355.215L372.962 359.578L371.552 363.097L369.82 365.989L367.72 368.386L365.189 370.373L362.13 372.007L358.392 373.33L353.719 374.368L347.622 375.143L338.959 375.668L323.629 375.953L90.1092 376.002L66.0592 375.815L55.537 375.391L48.5815 374.721L43.3975 373.795L39.3109 372.593L35.9923 371.093L33.2555 369.259L30.9856 367.041L29.1068 364.367L27.5672 361.129L26.3305 357.152L25.3708 352.13L24.67 345.454L24.2156 335.568L24 315.186L24.0197 79.4958L24.2751 62.4154L24.7703 53.2748L25.5137 46.9445L26.5185 42.1291L27.8041 38.2924L29.3978 35.159L31.3382 32.5684L33.6806 30.4193L36.5057 28.6441L39.9378 27.1963L44.1801 26.0428L49.5999 25.1603L56.9734 24.5325L68.5141 24.1484L101.979 24.0018L327.185 24.0901L340.691 24.4149L348.781 24.9815L354.586 25.7996L359.077 26.8841L362.686 28.2563L365.648 29.9467L368.101 31.9978L370.135 34.4712L371.811 37.4581L373.17 41.1007L374.242 45.6377L375.049 51.517L375.604 59.7498L375.919 73.6875L376 200.006Z" fill="#F5F7FA"/>
+<path d="M344 200.006L343.82 280.955L343.277 296.15L342.364 306.185L341.07 313.767L339.374 319.838L337.252 324.84L334.664 329.024L331.559 332.539L327.86 335.486L323.456 337.933L318.173 339.928L311.721 341.504L303.556 342.685L292.454 343.489L274.256 343.925L140.452 344L113.701 343.714L100.556 343.064L91.39 342.042L84.3143 340.633L78.5899 338.816L73.8463 336.562L69.8707 333.83L66.5296 330.56L63.7343 326.67L61.4236 322.031L59.5543 316.444L58.0957 309.565L57.0261 300.723L56.3305 288.271L56 265.036L56.0303 129.221L56.4218 109.249L57.1794 97.6169L58.3133 89.1783L59.8392 82.5509L61.7802 77.1421L64.169 72.6406L67.0512 68.8618L70.4919 65.6879L74.5857 63.0396L79.4763 60.8618L85.3959 59.1153L92.7556 57.7722L102.401 56.8131L116.643 56.2249L151.937 56L278.311 56.1355L294.627 56.6332L305.086 57.4994L312.906 58.7458L319.134 60.3901L324.253 62.4579L328.528 64.9852L332.12 68.0226L335.134 71.6424L337.64 75.9509L339.688 81.1122L341.315 87.3976L342.544 95.3049L343.394 105.925L343.875 122.689L344 200.006Z" fill="#E4E7EB"/>
+<path d="M312 200.01L311.72 235.402L310.878 249.937L309.47 260.903L307.488 269.91L304.919 277.569L301.748 284.18L297.947 289.916L293.481 294.882L288.298 299.149L282.319 302.762L275.424 305.755L267.41 308.151L257.915 309.964L246.16 311.206L229.77 311.883L180.833 312L159.765 311.556L146.579 310.549L136.28 308.975L127.71 306.823L120.38 304.081L114.038 300.729L108.535 296.739L103.779 292.07L99.7067 286.665L96.2769 280.434L93.4601 273.238L91.2359 264.841L89.5902 254.799L88.5135 242.089L88 222.851L88.0471 172.946L88.655 155.521L89.8269 143.385L91.5692 133.667L93.8918 125.496L96.81 118.475L100.346 112.391L104.529 107.115L109.406 102.564L115.042 98.6833L121.538 95.4354L129.055 92.7938L137.872 90.7399L148.543 89.2613L162.46 88.3496L187.507 88L233.113 88.2107L248.356 88.9828L259.64 90.3203L268.848 92.2307L276.654 94.7252L283.385 97.8208L289.223 101.542L294.281 105.922L298.631 111.012L302.324 116.886L305.393 123.659L307.861 131.518L309.746 140.799L311.059 152.202L311.806 167.721L312 200.01Z" fill="#CBD2D9"/>
+<path d="M280 200.014L279.6 208.003L278.405 215.912L276.425 223.662L273.682 231.175L270.202 238.378L266.021 245.197L261.179 251.564L255.726 257.417L249.716 262.696L243.208 267.349L236.269 271.329L228.967 274.596L221.375 277.118L213.569 278.87L205.627 279.834L197.628 280L189.653 279.367L181.781 277.941L174.091 275.737L166.659 272.776L159.56 269.088L152.865 264.71L146.64 259.685L140.948 254.065L135.846 247.904L131.385 241.264L127.608 234.213L124.555 226.82L122.255 219.159L120.732 211.306L120 203.341L120.067 195.343L120.933 187.391L122.588 179.566L125.016 171.944L128.194 164.603L132.088 157.616L136.661 151.053L141.866 144.979L147.651 139.455L153.96 134.535L160.728 130.27L167.888 126.702L175.368 123.867L183.094 121.792L190.989 120.499L198.974 120L206.968 120.301L214.893 121.398L222.668 123.281L230.217 125.93L237.463 129.32L244.335 133.416L250.763 138.177L256.683 143.557L262.037 149.5L266.771 155.948L270.838 162.836L274.196 170.096L276.812 177.655L278.661 185.437L279.723 193.365L280 200.014Z" fill="#9AA5B1"/>
+<path d="M248 200.011L247.68 202.235L246.728 205.577L245.161 209.463L243.013 213.666L240.325 218.028L237.154 222.42L233.566 226.727L229.636 230.845L225.451 234.683L221.108 238.156L216.711 241.192L212.38 243.726L208.25 245.709L204.494 247.098L201.377 247.867L199.54 248L196.847 247.494L193.314 246.36L189.316 244.62L185.051 242.31L180.666 239.476L176.287 236.176L172.023 232.481L167.977 228.468L164.236 224.228L160.883 219.858L157.987 215.469L155.608 211.182L153.795 207.143L152.584 203.539L152 200.703L152.054 198.924L152.745 195.919L154.059 192.225L155.97 188.132L158.439 183.819L161.417 179.425L164.84 175.07L168.638 170.861L172.728 166.896L177.018 163.261L181.406 160.036L185.78 157.286L190.011 155.068L193.947 153.428L197.375 152.399L199.835 152L201.838 152.24L205.09 153.115L208.924 154.607L213.098 156.685L217.449 159.308L221.845 162.421L226.169 165.961L230.317 169.852L234.195 174.009L237.719 178.338L240.813 182.733L243.413 187.078L245.467 191.24L246.932 195.053L247.779 198.27L248 200.011Z" fill="#7B8794"/>
+</svg>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -23,6 +23,10 @@ export default {
copySVGToClipBoard() {
const content = document.querySelector('#squircleSVG').outerHTML;
copy(content);
+ this.$toasted.show('Squircle copied to clipboard!', {
+ position: 'bottom-center',
+ duration: 1500,
+ });
},
},
};
diff --git a/src/components/TheSquircleExplosion.vue b/src/components/TheSquircleExplosion.vue
@@ -26,6 +26,7 @@ export default {
<style>
.squircle-explosion {
position: relative;
+ pointer-events: none;
}
.squircle-explosion__squircle {
@@ -37,7 +38,7 @@ export default {
.squircle-explosion__squircle:nth-of-type(1) {
top: var(--spacing-10);
- left: var(--spacing-7);
+ left: var(--spacing-6);
transform: rotate(32deg);
}
@@ -66,7 +67,7 @@ export default {
.squircle-explosion__squircle:nth-of-type(5) {
width: 24px;
height: 24px;
- top: var(--spacing-9);
+ top: var(--spacing-8);
right: var(--spacing-12);
transform: rotate(128deg);
}
diff --git a/src/main.js b/src/main.js
@@ -5,8 +5,10 @@ import App from './App.vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
import VueSocialSharing from 'vue-social-sharing';
+import Toasted from 'vue-toasted';
Vue.use(VueSocialSharing);
+Vue.use(Toasted);
Vue.config.productionTip = false;
