From eaffa223fedff70447c79523373aaddf690e0e41 Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 19 Feb 2020 00:16:20 +0100 Subject: [PATCH] modals, avatar upload component --- pages/_docs/modals.md | 39 +++++++++++++++++++ pages/_includes/example.html | 1 + pages/_includes/parts/form/input-color.html | 4 +- .../parts/form/input-colorpicker.html | 2 +- pages/_includes/parts/modals/info.html | 13 +++++++ pages/_includes/parts/modals/report.html | 2 +- pages/_includes/parts/modals/small.html | 8 +++- pages/_includes/parts/modals/team.html | 24 ++++++++++++ pages/_includes/ui/avatar-upload.html | 4 ++ pages/_includes/ui/avatar.html | 2 +- pages/_includes/ui/modal/close.html | 3 ++ pages/_includes/ui/modal/header.html | 4 +- pages/changelog.html | 4 +- pages/modals.html | 6 ++- scss/_variables.scss | 13 +++---- scss/demo/_examples.scss | 13 +++++++ scss/ui/_avatars.scss | 27 +++++++++++++ scss/ui/_icons.scss | 4 ++ scss/ui/_modals.scss | 25 +++++++----- 19 files changed, 168 insertions(+), 30 deletions(-) create mode 100644 pages/_docs/modals.md create mode 100644 pages/_includes/parts/modals/info.html create mode 100644 pages/_includes/parts/modals/team.html create mode 100644 pages/_includes/ui/avatar-upload.html create mode 100644 pages/_includes/ui/modal/close.html diff --git a/pages/_docs/modals.md b/pages/_docs/modals.md new file mode 100644 index 00000000..9e268dba --- /dev/null +++ b/pages/_docs/modals.md @@ -0,0 +1,39 @@ +--- +title: Modals +description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. +--- + +## Default markup + +{% capture code %} +
+
+ {% include parts/modals/simple.html %} +
+
+{% endcapture %} +{% include example.html code=code modal=true %} + + +## Prompt and alert + +{% capture code %} +
+
+ {% include parts/modals/small.html %} +
+
+{% endcapture %} +{% include example.html code=code modal=true %} + + +## Modal with form + +{% capture code %} +
+
+ {% include parts/modals/report.html %} +
+
+{% endcapture %} +{% include example.html code=code modal=true %} diff --git a/pages/_includes/example.html b/pages/_includes/example.html index 7dc2c3aa..23765aa4 100644 --- a/pages/_includes/example.html +++ b/pages/_includes/example.html @@ -8,6 +8,7 @@ {% if include.max-width %}
{% endif %} {% if include.wrapper %}
{% endif %} {% if include.columns %}
{% endif %} + {% if include.modal %}
{% endif %} {{ demo-code }} diff --git a/pages/_includes/parts/form/input-color.html b/pages/_includes/parts/form/input-color.html index 6c608fcf..08969894 100644 --- a/pages/_includes/parts/form/input-color.html +++ b/pages/_includes/parts/form/input-color.html @@ -4,12 +4,12 @@ {% endfor %}
- +
{% for color in colors %}
diff --git a/pages/_includes/parts/form/input-colorpicker.html b/pages/_includes/parts/form/input-colorpicker.html index 7fd77bd5..016d91b8 100644 --- a/pages/_includes/parts/form/input-colorpicker.html +++ b/pages/_includes/parts/form/input-colorpicker.html @@ -1,4 +1,4 @@
- +
diff --git a/pages/_includes/parts/modals/info.html b/pages/_includes/parts/modals/info.html new file mode 100644 index 00000000..b53ef931 --- /dev/null +++ b/pages/_includes/parts/modals/info.html @@ -0,0 +1,13 @@ +{% include ui/modal/close.html %} +
+ + {% include ui/icon.html icon="check-circle" color="green" class="icon-xl icon-thin mb-4" %} + +

Payment succedeed

+
Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
+
+ +
+ {% include ui/button.html color="primary" dismiss=true text="View invoice" block=true %} + {% include ui/button.html color="secondary" dismiss=true text="Go to dashboard" block=true %} +
\ No newline at end of file diff --git a/pages/_includes/parts/modals/report.html b/pages/_includes/parts/modals/report.html index e144ff74..6d39b857 100644 --- a/pages/_includes/parts/modals/report.html +++ b/pages/_includes/parts/modals/report.html @@ -74,6 +74,6 @@
- {% include ui/button.html text="Cancel" color="link" dismiss=true %} + {% include ui/button.html text="Cancel" color="link link-secondary" dismiss=true %} {% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ml-auto" %}
\ No newline at end of file diff --git a/pages/_includes/parts/modals/small.html b/pages/_includes/parts/modals/small.html index a1269bc7..166bdae4 100644 --- a/pages/_includes/parts/modals/small.html +++ b/pages/_includes/parts/modals/small.html @@ -1,4 +1,8 @@
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. +
Are you sure?
+
If you proceed, you will lose all your personal data.
-{% include ui/modal/footer.html %} \ No newline at end of file +
+ + +
\ No newline at end of file diff --git a/pages/_includes/parts/modals/team.html b/pages/_includes/parts/modals/team.html new file mode 100644 index 00000000..a1ab2cc0 --- /dev/null +++ b/pages/_includes/parts/modals/team.html @@ -0,0 +1,24 @@ +{% include ui/modal/header.html title="Add a new team" %} +
+
+
+ {% include ui/avatar-upload.html class="rounded" %} +
+
+ + +
+
+ + {% include parts/form/input-color.html label="Pick your team color" %} + +
+ + +
+
+ +
+ + +
\ No newline at end of file diff --git a/pages/_includes/ui/avatar-upload.html b/pages/_includes/ui/avatar-upload.html new file mode 100644 index 00000000..6080ba68 --- /dev/null +++ b/pages/_includes/ui/avatar-upload.html @@ -0,0 +1,4 @@ + + {% include ui/icon.html icon="plus" %} + {{ include.text | default: "Add" }} + \ No newline at end of file diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html index b94bc2e5..40c193fe 100644 --- a/pages/_includes/ui/avatar.html +++ b/pages/_includes/ui/avatar.html @@ -22,5 +22,5 @@ {% assign el = 'span' %} {% if link %}{% assign el = 'a' %}{% endif %} <{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}{% if include.dropdown %} data-toggle="dropdown"{% endif %}>{% if include.status %} - {% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %} + {% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %} {% endremoveemptylines %} diff --git a/pages/_includes/ui/modal/close.html b/pages/_includes/ui/modal/close.html new file mode 100644 index 00000000..5f30491a --- /dev/null +++ b/pages/_includes/ui/modal/close.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/pages/_includes/ui/modal/header.html b/pages/_includes/ui/modal/header.html index c4628dbb..f09777de 100644 --- a/pages/_includes/ui/modal/header.html +++ b/pages/_includes/ui/modal/header.html @@ -1,6 +1,4 @@
{{ include.title | default: 'Modal title' }}
- + {% include ui/modal/close.html %}
\ No newline at end of file diff --git a/pages/changelog.html b/pages/changelog.html index 2d8be87e..7bec69b8 100644 --- a/pages/changelog.html +++ b/pages/changelog.html @@ -4,8 +4,8 @@ page-header: Changelog menu: changelog done: true --- -
-
+
+
{% for page in site.changelog reversed %}
diff --git a/pages/modals.html b/pages/modals.html index b64dec2c..56eb640f 100644 --- a/pages/modals.html +++ b/pages/modals.html @@ -12,6 +12,8 @@ page-header: Modals {% include ui/button.html text="Full width modal" modal-id="full-width" %} {% include ui/button.html text="Scrollable modal" modal-id="scrollable" %} {% include ui/button.html text="Modal with form" modal-id="report" %} + {% include ui/button.html text="Info modal" modal-id="info" %} + {% include ui/button.html text="Modal with simple form" modal-id="team" %}
@@ -22,4 +24,6 @@ page-header: Modals {% include ui/modal.html modal-id="small" size="sm" %} {% include ui/modal.html modal-id="full-width" size="full-width" %} {% include ui/modal.html modal-id="scrollable" scrollable=true %} -{% include ui/modal.html modal-id="report" size="lg" %} \ No newline at end of file +{% include ui/modal.html modal-id="report" size="lg" %} +{% include ui/modal.html modal-id="info" size="sm" %} +{% include ui/modal.html modal-id="team" %} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index edc2c968..ac58e0ed 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -165,12 +165,11 @@ $spacers: ( 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, - 4: $spacer * 1.25, - 5: $spacer * 1.5, - 6: $spacer * 3, - 7: $spacer * 6, - 8: $spacer * 9, - 9: $spacer * 12, + 4: $spacer * 1.5, + 5: $spacer * 3, + 6: $spacer * 6, + 7: $spacer * 9, + 8: $spacer * 12, ) !default; $size-spacers: ( @@ -344,7 +343,7 @@ $modal-footer-margin-between: .75rem !default; $modal-xl: 1140px !default; $modal-lg: 720px !default; $modal-md: 540px !default; -$modal-sm: 300px !default; +$modal-sm: 380px !default; //navbar $navbar-padding-y: .5rem !default; diff --git a/scss/demo/_examples.scss b/scss/demo/_examples.scss index 6e36d6c4..a7fdc05d 100644 --- a/scss/demo/_examples.scss +++ b/scss/demo/_examples.scss @@ -3,10 +3,12 @@ margin: 2rem 0; border: 1px solid $border-color; border-radius: 3px 3px 0 0; + position: relative; min-height: 12rem; display: flex; align-items: center; + overflow-x: auto; } .example-centered { @@ -57,6 +59,17 @@ max-width: 40rem; } +.example-modal-backdrop { + background: $modal-backdrop-bg; + opacity: $modal-backdrop-opacity; + position: absolute; + width: 100%; + left: 0; + top: 0; + height: 100%; + border-radius: 2px 2px 0 0; +} + @include dark-mode { .example-code { border: 1px solid $border-color; diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss index d851ebb8..d1e00ed9 100644 --- a/scss/ui/_avatars.scss +++ b/scss/ui/_avatars.scss @@ -72,3 +72,30 @@ } } } + +.avatar-upload { + width: 4rem; + height: 4rem; + border: 1px dashed $border-color; + background: $form-check-input-bg; + flex-direction: column; + transition: .3s color, .3s background-color; + + svg { + width: 1.5rem; + height: 1.5rem; + stroke-width: 1; + } + + &:hover { + border-color: $primary; + color: $primary; + text-decoration: none; + } +} + +.avatar-upload-text { + font-size: $h6-font-size; + line-height: 1; + margin-top: .25rem; +} \ No newline at end of file diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index 87116428..abfe2d6b 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -25,6 +25,10 @@ font-size: 2rem; } +.icon-xl { + font-size: 4rem; +} + .icons-list { display: flex; diff --git a/scss/ui/_modals.scss b/scss/ui/_modals.scss index 1f451c4c..ce89eb61 100644 --- a/scss/ui/_modals.scss +++ b/scss/ui/_modals.scss @@ -1,3 +1,17 @@ +.modal { + .close { + position: absolute; + top: 0; + right: 0; + font-size: 1rem; + width: $modal-header-height; + height: $modal-header-height; + margin: 0; + padding: 0; + z-index: 10; + } +} + .modal-body { @include scrollbar; @@ -12,18 +26,9 @@ .modal-header { align-items: center; - padding-top: 0; - padding-bottom: 0; min-height: $modal-header-height; background: $modal-header-bg; - - .close { - font-size: 1rem; - margin: 0 (- $modal-inner-padding) 0 auto; - padding-top: 0; - padding-bottom: 0; - height: subtract($modal-header-height, 1px); - } + padding: 0 $modal-header-height 0 $modal-inner-padding; } .modal-title { -- GitLab