feat(examples): Moar examples
This commit is contained in:
Joost De Cock
parent
babe537b56
commit
34feb1d13d
6 changed files with 335 additions and 8 deletions
|
|
@ -17,7 +17,6 @@ export default {
|
|||
//point_attr: 'path_attr'
|
||||
},
|
||||
parts: [
|
||||
/*
|
||||
'point_attr',
|
||||
'path_move',
|
||||
'path_line',
|
||||
|
|
@ -44,11 +43,9 @@ export default {
|
|||
'path_start',
|
||||
'path_translate',
|
||||
'path_trim',
|
||||
*/
|
||||
'plugin_bartack',
|
||||
'plugin_bartackalong',
|
||||
'plugin_bartackfractionalong'
|
||||
/*
|
||||
'plugin_bartackfractionalong',
|
||||
'plugin_buttons',
|
||||
'plugin_cutonfold',
|
||||
'plugin_dimension',
|
||||
|
|
@ -84,6 +81,8 @@ export default {
|
|||
'snippets_notch',
|
||||
'snippets_button',
|
||||
'snippets_buttonhole',
|
||||
'snippets_buttonhole_start',
|
||||
'snippets_buttonhole_end',
|
||||
'snippets_snapsocket',
|
||||
'snippets_snapstud',
|
||||
'snippets_logo',
|
||||
|
|
@ -104,7 +103,6 @@ export default {
|
|||
'utils_splitcurve',
|
||||
'docs_overview',
|
||||
'docs_coords'
|
||||
*/
|
||||
],
|
||||
options: {
|
||||
focus: '',
|
||||
|
|
|
|||
303
packages/examples/example/src/layout.css
Normal file
303
packages/examples/example/src/layout.css
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
div.layout-wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: red;
|
||||
background: #f8f9fa;
|
||||
background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%);
|
||||
}
|
||||
div.layout-wrapper div.layout {
|
||||
display: flex;
|
||||
max-width: 1600px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
background-color: #f8f9fa;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
div.layout-wrapper div.layout > aside {
|
||||
width: 33%;
|
||||
background: #f1f3f5;
|
||||
border-right: 2px solid #dee2e6;
|
||||
}
|
||||
div.layout-wrapper div.layout > section {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
div.layout-wrapper div.layout > section > div.content {
|
||||
max-width: 66ch;
|
||||
min-width: 340px;
|
||||
}
|
||||
div.layout-wrapper div.layout > section > div.content.wide {
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.theme-wrapper.dark header {
|
||||
background-color: #1a1d21;
|
||||
}
|
||||
|
||||
.theme-wrapper.dark div.layout-wrapper {
|
||||
background: #f8f9fa;
|
||||
background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%);
|
||||
}
|
||||
.theme-wrapper.dark div.layout-wrapper div.layout {
|
||||
background-color: #212529;
|
||||
}
|
||||
.theme-wrapper.dark div.layout-wrapper div.layout > aside {
|
||||
background-color: #1a1d21;
|
||||
border-right: 2px solid #343a40;
|
||||
}
|
||||
|
||||
header a svg {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
header a:first-of-type svg {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
header a:hover svg {
|
||||
color: #b197fc;
|
||||
}
|
||||
|
||||
header a span,
|
||||
header button span {
|
||||
color: #ced4da;
|
||||
}
|
||||
header a span svg,
|
||||
header button span svg {
|
||||
color: #dee2e6;
|
||||
}
|
||||
|
||||
header a:hover span,
|
||||
header button:hover span {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
header a:hover span svg,
|
||||
header button:hover span svg {
|
||||
color: #b197fc;
|
||||
}
|
||||
|
||||
header a,
|
||||
header button {
|
||||
padding: 0 1vw !important;
|
||||
}
|
||||
|
||||
/* monitor */
|
||||
@media (min-width: 1200px) {
|
||||
div.layout > section {
|
||||
width: 63%;
|
||||
}
|
||||
}
|
||||
|
||||
/* slate */
|
||||
@media (max-width: 1199px) and (min-width: 960px) {
|
||||
div.layout > aside {
|
||||
width: 298px;
|
||||
}
|
||||
div.layout > section {
|
||||
width: calc(100% - 300px - 4rem);
|
||||
max-width: none;
|
||||
margin: 0 1rem 0 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media (max-width: 959px) {
|
||||
div.layout > aside {
|
||||
width: 218px;
|
||||
}
|
||||
div.layout > section {
|
||||
width: calc(100% - 220px - 4rem);
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
div.layout > section div.content {
|
||||
min-width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 599px) {
|
||||
div.layout > aside {
|
||||
display: none;
|
||||
}
|
||||
div.layout > section {
|
||||
width: calc(100%);
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.gatsby-highlight {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
#mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0 0 1rem;
|
||||
max-width: 600px;
|
||||
z-index: -10;
|
||||
transition: opacity 0.25s ease 0s;
|
||||
opacity: 0;
|
||||
overflow: scroll;
|
||||
}
|
||||
#mobile-menu > ul,
|
||||
#mobile-menu > div {
|
||||
transform: translate(0px, 10px);
|
||||
transition: transform 0.25s ease 0s;
|
||||
}
|
||||
.theme-wrapper.show-menu #mobile-menu {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
.theme-wrapper.show-menu #mobile-menu > div {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light div.draft-ui-menu,
|
||||
.theme-wrapper.light div.menu {
|
||||
background: #f1f3f5;
|
||||
}
|
||||
|
||||
.theme-wrapper.dark div.draft-ui-menu,
|
||||
.theme-wrapper.dark div.menu {
|
||||
background: #343a40;
|
||||
}
|
||||
|
||||
.theme-wrapper.show-menu div.menu {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
.theme-wrapper.show-menu div.menu > div {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
div.spaced-buttons > button {
|
||||
margin: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
div.spaced > * {
|
||||
margin: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
ul#pre-main-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.boldish {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.freesewing.draft {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
li.action {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li.action span.MuiSwitch-root {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.theme-wrapper.light ul#draft-config li.action.toggle.off,
|
||||
.theme-wrapper.dark ul#draft-config li.action.toggle.off {
|
||||
color: #868e96;
|
||||
}
|
||||
.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg,
|
||||
.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg {
|
||||
color: #868e96;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #1a1d21;
|
||||
color: #adb5bd;
|
||||
padding: 3rem 0 6rem;
|
||||
}
|
||||
footer a {
|
||||
color: #dee2e6 !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #d0bfff !important;
|
||||
}
|
||||
footer div.cols {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 1600px;
|
||||
margin: auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
footer div.cols > div {
|
||||
min-width: 150px;
|
||||
max-width: calc(20% - 4rem);
|
||||
padding: 0 2rem 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
footer ul {
|
||||
text-align: left;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
footer ul li:first-of-type {
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
footer ul li {
|
||||
display: block;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
footer ul li.heading {
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid #adb5bd;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* XL screens */
|
||||
@media (min-width: 1200px) {
|
||||
footer div.cols > div:last-of-type {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
/* SM screens */
|
||||
@media (min-width: 600px) and (max-width: 959px) {
|
||||
footer div.cols {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
footer div.cols > div {
|
||||
width: calc(30% - 4rem);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* XS screens */
|
||||
@media (max-width: 599px) {
|
||||
footer div.cols {
|
||||
display: block;
|
||||
}
|
||||
footer div.cols > div {
|
||||
margin: 2rem auto 0;
|
||||
max-width: calc(100% - 4rem);
|
||||
}
|
||||
footer div.cols > div:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -87,6 +87,8 @@ import draftSnippets_bnotch from './snippets_bnotch'
|
|||
import draftSnippets_notch from './snippets_notch'
|
||||
import draftSnippets_button from './snippets_button'
|
||||
import draftSnippets_buttonhole from './snippets_buttonhole'
|
||||
import draftSnippets_buttonhole_start from './snippets_buttonhole-start'
|
||||
import draftSnippets_buttonhole_end from './snippets_buttonhole-end'
|
||||
import draftSnippets_snapsocket from './snippets_snapsocket'
|
||||
import draftSnippets_snapstud from './snippets_snapstud'
|
||||
import draftSnippets_logo from './snippets_logo'
|
||||
|
|
@ -167,6 +169,8 @@ let methods = {
|
|||
draftSnippets_notch,
|
||||
draftSnippets_button,
|
||||
draftSnippets_buttonhole,
|
||||
draftSnippets_buttonhole_start,
|
||||
draftSnippets_buttonhole_end,
|
||||
draftSnippets_snapsocket,
|
||||
draftSnippets_snapstud,
|
||||
draftSnippets_logo,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@ export default (part) => {
|
|||
|
||||
snippets.button = new Snippet('button', new Point(20, 10))
|
||||
snippets.buttonhole = new Snippet('buttonhole', new Point(40, 10))
|
||||
snippets.snapMale = new Snippet('snap-stud', new Point(60, 10))
|
||||
snippets.snapFemale = new Snippet('snap-socket', new Point(80, 10))
|
||||
snippets.buttonholeStart = new Snippet('buttonhole-start', new Point(60, 10))
|
||||
snippets.buttonholeEnd = new Snippet('buttonhole-end', new Point(80, 10))
|
||||
snippets.snapMale = new Snippet('snap-stud', new Point(100, 10))
|
||||
snippets.snapFemale = new Snippet('snap-socket', new Point(120, 10))
|
||||
|
||||
return box(part, 100, 20)
|
||||
return box(part, 140, 20)
|
||||
}
|
||||
|
|
|
|||
10
packages/examples/src/snippets_buttonhole-end.js
Normal file
10
packages/examples/src/snippets_buttonhole-end.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { box } from './shared'
|
||||
|
||||
export default (part) => {
|
||||
let { Point, points, Snippet, snippets } = part.shorthand()
|
||||
|
||||
points.anchor = new Point(50, 0)
|
||||
snippets.demo = new Snippet('buttonhole-end', points.anchor)
|
||||
|
||||
return box(part, 100, 10)
|
||||
}
|
||||
10
packages/examples/src/snippets_buttonhole-start.js
Normal file
10
packages/examples/src/snippets_buttonhole-start.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { box } from './shared'
|
||||
|
||||
export default (part) => {
|
||||
let { Point, points, Snippet, snippets } = part.shorthand()
|
||||
|
||||
points.anchor = new Point(50, 10)
|
||||
snippets.demo = new Snippet('buttonhole-start', points.anchor)
|
||||
|
||||
return box(part, 100, 10)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue