Skip to content

Commit 51103aa

Browse files
webdevnerdstuffwebdevnerdstuff
committed
More documentation updates
1 parent eace33a commit 51103aa

File tree

10 files changed

+744
-165
lines changed

10 files changed

+744
-165
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
function gtag() { dataLayer.push(arguments); }
44
gtag('js', new Date());
55

6-
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?6ba2a07e3a60d70eab91"></script></body></html>
6+
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?66e0787317dc8f23071a"></script></body></html>

‎docs/vuetify-resize-drawer.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Documentation.vue‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -57,52 +57,24 @@
5757
<Examples :classes="classes" />
5858

5959
<!-- Dependencies -->
60-
<v-row>
61-
<v-col class="mb-5" cols="12" id="dependencies">
62-
<h2 :class="classes.h2">
63-
<a href="#dependencies" :class="classes.headerA">#</a>
64-
Dependencies
65-
</h2>
66-
67-
<v-row>
68-
<v-col cols="12">
69-
<a :href="links.vuetify2" target="_blank">Vuetify v2</a>
70-
<br />
71-
<a :href="links.vue2" target="_blank">Vue 2</a>
72-
</v-col>
73-
</v-row>
74-
</v-col>
75-
</v-row>
60+
<Dependencies :classes="classes" :links="links" />
7661

7762
<!-- License -->
78-
<v-row>
79-
<v-col class="mb-5" cols="12" id="license">
80-
<h2 :class="classes.h2">
81-
<a href="#license" :class="classes.headerA">#</a>
82-
License
83-
</h2>
63+
<License :classes="classes" />
8464

85-
<v-row>
86-
<v-col cols="12">
87-
Copyright &copy; {{ new Date().getFullYear() }} WebDevNerdStuff
88-
<br />
89-
Licensed under the
90-
<a
91-
href="https://github.com/webdevnerdstuff/vuetify-resize-drawer/blob/master/LICENSE.md"
92-
>MIT License</a
93-
>.
94-
</v-col>
95-
</v-row>
96-
</v-col>
97-
</v-row>
65+
<!-- Legal -->
66+
<Legal :classes="classes" />
9867
</v-container>
9968
</template>
10069

10170
<script>
10271
import { component as VueCodeHighlight } from 'vue-code-highlight';
72+
import Dependencies from '@components/documentation/Dependencies.vue';
10373
import Description from '@components/documentation/Description.vue';
10474
import Events from '@components/documentation/Events.vue';
10575
import Examples from '@components/documentation/Examples.vue';
76+
import Legal from '@components/documentation/Legal.vue';
77+
import License from '@components/documentation/License.vue';
10678
import Props from '@components/documentation/Props.vue';
10779
import SassVariables from '@components/documentation/SassVariables.vue';
10880
import Slots from '@components/documentation/Slots.vue';
@@ -111,9 +83,12 @@ import Usage from '@components/documentation/Usage.vue';
11183
export default {
11284
name: 'Documentation',
11385
components: {
86+
Dependencies,
11487
Description,
11588
Events,
11689
Examples,
90+
Legal,
91+
License,
11792
Props,
11893
SassVariables,
11994
Slots,

‎src/components/Menu.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ export default {
4646
{ title: 'SASS Variables', icon: 'mdi-sass', href: '#sass-variables' },
4747
{ title: 'Examples', icon: 'mdi-code-json', href: '#examples' },
4848
{ title: 'Dependencies', icon: 'mdi-asterisk-circle-outline', href: '#dependencies' },
49-
{ title: 'License', icon: 'mdi-scale-balance', href: '#license' },
49+
{ title: 'License', icon: 'mdi-card-account-details-outline', href: '#license' },
50+
{ title: 'Legal', icon: 'mdi-scale-balance', href: '#legal' },
5051
],
5152
}),
5253
mounted() {

‎src/components/ResizeDrawer.vue‎

Lines changed: 120 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
v-bind="$attrs"
44
v-on="$listeners"
55
ref="resizeDrawer"
6-
class="resize-drawer"
6+
class="vuetify-resize-drawer"
77
:class="`resize-drawer-overflow-${drawerOptions.overflow}`"
88
:width="drawerOptions.width"
99
:style="drawerStyle"
@@ -410,7 +410,7 @@ export default {
410410
</script>
411411
412412
<style lang="scss" scoped>
413-
.resize-drawer {
413+
.vuetify-resize-drawer {
414414
&.resize-drawer-overflow-true {
415415
::v-deep .v-navigation-drawer__content {
416416
overflow: visible;
@@ -420,157 +420,157 @@ export default {
420420
.close-drawer {
421421
cursor: pointer;
422422
}
423-
}
424-
425-
::v-deep .v-navigation-drawer__content {
426-
position: relative;
427423
428-
.handle-container {
429-
cursor: grab;
430-
position: absolute;
431-
width: 24px;
432-
z-index: 1;
424+
::v-deep .v-navigation-drawer__content {
425+
position: relative;
433426
434-
&:active {
435-
cursor: grabbing;
436-
}
427+
.handle-container {
428+
cursor: grab;
429+
position: absolute;
430+
width: 24px;
431+
z-index: 1;
437432
438-
&-parent {
439-
&-left {
440-
left: initial;
441-
right: 0;
433+
&:active {
434+
cursor: grabbing;
442435
}
443-
}
444436
445-
&-top {
446-
border-right: 24px solid transparent;
447-
border-top-style: solid;
448-
border-top-width: 24px;
449-
height: 24px;
450-
left: 0;
451-
top: 0;
452-
width: 24px;
453-
454-
&.handle-container-parent {
437+
&-parent {
455438
&-left {
456-
border-left: 24px solid transparent;
457-
border-right: transparent;
458439
left: initial;
459440
right: 0;
441+
}
442+
}
460443
461-
.handle-container-lines {
444+
&-top {
445+
border-right: 24px solid transparent;
446+
border-top-style: solid;
447+
border-top-width: 24px;
448+
height: 24px;
449+
left: 0;
450+
top: 0;
451+
width: 24px;
452+
453+
&.handle-container-parent {
454+
&-left {
455+
border-left: 24px solid transparent;
456+
border-right: transparent;
462457
left: initial;
463-
right: -5px;
464-
top: -19px;
465-
transform: rotate(45deg);
458+
right: 0;
459+
460+
.handle-container-lines {
461+
left: initial;
462+
right: -5px;
463+
top: -19px;
464+
transform: rotate(45deg);
465+
}
466466
}
467467
}
468-
}
469468
470-
.handle-container-lines {
471-
top: -19px;
472-
transform: rotate(-45deg);
469+
.handle-container-lines {
470+
top: -19px;
471+
transform: rotate(-45deg);
472+
}
473473
}
474-
}
475474
476-
&-top-icon {
477-
height: 24px;
478-
opacity: 0.5;
479-
left: initial;
480-
right: 0;
481-
top: 0;
482-
transition: opacity 0.3s ease;
483-
transform: rotate(-90deg);
484-
width: 24px;
475+
&-top-icon {
476+
height: 24px;
477+
opacity: 0.5;
478+
left: initial;
479+
right: 0;
480+
top: 0;
481+
transition: opacity 0.3s ease;
482+
transform: rotate(-90deg);
483+
width: 24px;
485484
486-
&:hover {
487-
opacity: 1;
488-
}
485+
&:hover {
486+
opacity: 1;
487+
}
489488
490-
&.handle-container-parent {
491-
&-right {
492-
left: 0;
493-
right: initial;
494-
transform: rotate(-180deg);
489+
&.handle-container-parent {
490+
&-right {
491+
left: 0;
492+
right: initial;
493+
transform: rotate(-180deg);
494+
}
495495
}
496496
}
497-
}
498497
499-
&-top-icon-slot {
500-
align-items: center;
501-
height: 24px;
502-
right: 0;
503-
opacity: 0.5;
504-
padding: 2px;
505-
top: 0;
506-
transition: opacity 0.3s ease;
507-
width: auto;
508-
509-
&:hover {
510-
opacity: 1;
511-
}
498+
&-top-icon-slot {
499+
align-items: center;
500+
height: 24px;
501+
right: 0;
502+
opacity: 0.5;
503+
padding: 2px;
504+
top: 0;
505+
transition: opacity 0.3s ease;
506+
width: auto;
507+
508+
&:hover {
509+
opacity: 1;
510+
}
512511
513-
&.handle-container-parent {
514-
&-right {
515-
left: 0;
512+
&.handle-container-parent {
513+
&-right {
514+
left: 0;
515+
}
516516
}
517517
}
518-
}
519518
520-
&-border {
521-
background-color: transparent !important;
522-
cursor: col-resize;
523-
height: 100%;
524-
top: 0;
525-
width: 8px;
526-
}
519+
&-border {
520+
background-color: transparent !important;
521+
cursor: col-resize;
522+
height: 100%;
523+
top: 0;
524+
width: 8px;
525+
}
527526
528-
&-left,
529-
&-right {
530-
height: 100%;
531-
top: 0;
532-
width: 12px;
533-
}
527+
&-left,
528+
&-right {
529+
height: 100%;
530+
top: 0;
531+
width: 12px;
532+
}
534533
535-
&-center {
536-
height: 24px;
537-
top: 50%;
538-
transform: translateY(-50%);
539-
}
534+
&-center {
535+
height: 24px;
536+
top: 50%;
537+
transform: translateY(-50%);
538+
}
540539
541-
&-lines {
542-
align-items: center;
543-
display: flex;
544-
flex-direction: column;
545-
height: auto;
546-
justify-content: center;
547-
left: -5px;
548-
position: absolute;
549-
width: 24px;
540+
&-lines {
541+
align-items: center;
542+
display: flex;
543+
flex-direction: column;
544+
height: auto;
545+
justify-content: center;
546+
left: -5px;
547+
position: absolute;
548+
width: 24px;
549+
550+
&::before,
551+
&::after {
552+
border-radius: 4px;
553+
border-top: 2px inset #ccc;
554+
content: '';
555+
display: block;
556+
height: 1px;
557+
}
550558
551-
&::before,
552-
&::after {
553-
border-radius: 4px;
554-
border-top: 2px inset #ccc;
555-
content: '';
556-
display: block;
557-
height: 1px;
558-
}
559+
&::before {
560+
margin-bottom: 3px;
561+
width: 30%;
562+
}
559563
560-
&::before {
561-
margin-bottom: 3px;
562-
width: 30%;
564+
&::after {
565+
width: 60%;
566+
}
563567
}
564568
565-
&::after {
566-
width: 60%;
569+
&-icon {
570+
height: auto;
571+
width: 7px;
567572
}
568573
}
569-
570-
&-icon {
571-
height: auto;
572-
width: 7px;
573-
}
574574
}
575575
}
576576
</style>

0 commit comments

Comments
 (0)